Enable ESLint no-unused-vars rule (#4367)

# Description of Changes
Enable ESLint [no-unused-vars
rule](https://typescript-eslint.io/rules/no-unused-vars/)

frontend/src/components/shared/FileGrid.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Box, Flex, Group, Text, Button, TextInput, Select, Badge } from "@mantine/core";
+import { useState } from "react";
+import { Box, Flex, Group, Text, Button, TextInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import SearchIcon from "@mui/icons-material/Search";
 import SortIcon from "@mui/icons-material/Sort";

frontend/src/components/shared/LandingPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
+import { Container, Button, Group, useMantineColorScheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import LocalIcon from './LocalIcon';
 import { useTranslation } from 'react-i18next';

frontend/src/components/shared/LanguageSelector.tsx

@@ -15,7 +15,6 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
   const { i18n } = useTranslation();
   const [opened, setOpened] = useState(false);
   const [animationTriggered, setAnimationTriggered] = useState(false);
-  const [isChanging, setIsChanging] = useState(false);
   const [pendingLanguage, setPendingLanguage] = useState<string | null>(null);
   const [rippleEffect, setRippleEffect] = useState<{x: number, y: number, key: number} | null>(null);
 
@@ -36,7 +35,6 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
     }
 
     // Start transition animation
-    setIsChanging(true);
     setPendingLanguage(value);
 
     // Simulate processing time for smooth transition
@@ -44,7 +42,6 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
       i18n.changeLanguage(value);
 
       setTimeout(() => {
-        setIsChanging(false);
         setPendingLanguage(null);
         setOpened(false);
 
@@ -54,7 +51,7 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
     }, 200);
   };
 
-  const currentLanguage = supportedLanguages[i18n.language as keyof typeof supportedLanguages] || 
+  const currentLanguage = supportedLanguages[i18n.language as keyof typeof supportedLanguages] ||
                          supportedLanguages['en-GB'];
 
   // Trigger animation when dropdown opens
@@ -77,8 +74,8 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
           }
         `}
       </style>
-      <Menu 
-        opened={opened} 
+      <Menu
+        opened={opened}
         onChange={setOpened}
         width={600}
         position={position}
@@ -166,15 +163,15 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
                       justifyContent: 'flex-start',
                       position: 'relative',
                       overflow: 'hidden',
-                      backgroundColor: option.value === i18n.language 
+                      backgroundColor: option.value === i18n.language
                         ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
                         : 'transparent',
-                      color: option.value === i18n.language 
+                      color: option.value === i18n.language
                         ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
                         : 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))',
                       transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                       '&:hover': {
-                        backgroundColor: option.value === i18n.language 
+                        backgroundColor: option.value === i18n.language
                           ? 'light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))'
                           : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
                         transform: 'translateY(-1px)',
@@ -223,4 +220,4 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
   );
 };
 
-export default LanguageSelector;
+export default LanguageSelector;

frontend/src/components/shared/LocalIcon.tsx

@@ -13,7 +13,7 @@ try {
     localIconCount = Object.keys(iconSet.icons || {}).length;
     console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
   }
-} catch (error) {
+} catch {
   console.info('ℹ️  Local icons not available - using CDN fallback');
 }
 
@@ -31,10 +31,10 @@ interface LocalIconProps {
  */
 export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
   // Convert our icon naming convention to the local collection format
-  const iconName = icon.startsWith('material-symbols:') 
-    ? icon 
+  const iconName = icon.startsWith('material-symbols:')
+    ? icon
     : `material-symbols:${icon}`;
-  
+
   // Development logging (only in dev mode)
   if (process.env.NODE_ENV === 'development') {
     const logKey = `icon-${iconName}`;
@@ -44,9 +44,9 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
       sessionStorage.setItem(logKey, 'logged');
     }
   }
-  
+
   // Always render the icon - Iconify will use local if available, CDN if not
   return <Icon icon={iconName} {...props} />;
 };
 
-export default LocalIcon;
+export default LocalIcon;

frontend/src/components/shared/QuickAccessBar.tsx

@@ -3,7 +3,6 @@ import { ActionIcon, Stack, Divider } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import LocalIcon from './LocalIcon';
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
-import AppConfigModal from './AppConfigModal';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';

frontend/src/components/shared/RightRail.tsx

@@ -29,7 +29,7 @@ export default function RightRail() {
 
   // File state and selection
   const { state, selectors } = useFileState();
-  const { selectedFiles, selectedFileIds, selectedPageNumbers, setSelectedFiles, setSelectedPages } = useFileSelection();
+  const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection();
   const { removeFiles } = useFileManagement();
 
   const activeFiles = selectors.getFiles();

frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -1,10 +1,10 @@
 /**
  * ActiveToolButton - Shows the currently selected tool at the top of the Quick Access Bar
- * 
+ *
  * When a user selects a tool from the All Tools list, this component displays the tool's
  * icon and name at the top of the navigation bar. It provides a quick way to see which
  * tool is currently active and offers a back button to return to the All Tools list.
- * 
+ *
  * Features:
  * - Shows tool icon and name when a tool is selected
  * - Hover to reveal back arrow for returning to All Tools
@@ -26,7 +26,7 @@ interface ActiveToolButtonProps {
 
 const NAV_IDS = ['read', 'sign', 'automate'];
 
-const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setActiveButton }) => {
+const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
 
   // Determine if the indicator should be visible (do not require selectedTool to be resolved yet)
@@ -38,7 +38,6 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
   const [indicatorTool, setIndicatorTool] = useState<typeof selectedTool | null>(null);
   const [indicatorVisible, setIndicatorVisible] = useState<boolean>(false);
   const [replayAnim, setReplayAnim] = useState<boolean>(false);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
   const [isBackHover, setIsBackHover] = useState<boolean>(false);
   const prevKeyRef = useRef<string | null>(null);
   const collapseTimeoutRef = useRef<number | null>(null);
@@ -71,11 +70,9 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
     replayRafRef.current = requestAnimationFrame(() => {
       setReplayAnim(true);
     });
-    setIsAnimating(true);
     prevKeyRef.current = (selectedToolKey as string) || null;
     animTimeoutRef.current = window.setTimeout(() => {
       setReplayAnim(false);
-      setIsAnimating(false);
       animTimeoutRef.current = null;
     }, 500);
   }
@@ -84,10 +81,8 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
     clearTimers();
     setIndicatorTool(selectedTool);
     setIndicatorVisible(true);
-    setIsAnimating(true);
     prevKeyRef.current = (selectedToolKey as string) || null;
     animTimeoutRef.current = window.setTimeout(() => {
-      setIsAnimating(false);
       animTimeoutRef.current = null;
     }, 500);
   }
@@ -95,11 +90,9 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
   const triggerCollapse = () => {
     clearTimers();
     setIndicatorVisible(false);
-    setIsAnimating(true);
     collapseTimeoutRef.current = window.setTimeout(() => {
       setIndicatorTool(null);
       prevKeyRef.current = null;
-      setIsAnimating(false);
       collapseTimeoutRef.current = null;
     }, 500); // match CSS transition duration
   }