style(frontend): standardize semicolons across TS/JS configs and components (#4525)

# Description of Changes

- **What was changed**
- Added missing trailing semicolons across React components, utilities,
tests, and build/test configs to ensure consistent formatting.
- Normalized arrow-function assignments to end with semicolons (e.g.,
`const fn = () => { ... };`).
- Harmonized imports/exports and object literals in configuration files
to terminate statements with semicolons.
  - Updated test setup files and mocks to consistently use semicolons.

- **Why the change was made**
- Aligns the codebase with ESLint/Prettier conventions to prevent
auto-format churn and avoid ASI (automatic semicolon insertion) edge
cases.
- Improves readability and produces cleaner diffs in future
contributions.

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Reece Browne <74901996+reecebrowne@users.noreply.github.com>

frontend/src/components/shared/ToolChain.tsx

@@ -32,7 +32,7 @@ const ToolChain: React.FC<ToolChainProps> = ({
 
   const getToolName = (toolId: ToolId) => {
     return t(`home.${toolId}.title`, toolId);
-  }
+  };
 
   // Create full tool chain for tooltip
   const fullChainDisplay = displayStyle === 'badges' ? (

frontend/src/components/shared/TopControls.tsx

@@ -15,7 +15,7 @@ const viewOptionStyle = {
   gap: 6,
   whiteSpace: 'nowrap',
   paddingTop: '0.3rem',
-}
+};
 
 
 // Build view options showing text always

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

@@ -50,7 +50,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
   const animTimeoutRef = useRef<number | null>(null);
   const replayRafRef = useRef<number | null>(null);
 
-  const isSwitchingToNewTool = () => { return prevKeyRef.current && prevKeyRef.current !== selectedToolKey };
+  const isSwitchingToNewTool = () => { return prevKeyRef.current && prevKeyRef.current !== selectedToolKey; };
 
   const clearTimers = () => {
     if (collapseTimeoutRef.current) {
@@ -81,7 +81,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
       setReplayAnim(false);
       animTimeoutRef.current = null;
     }, 500);
-  }
+  };
 
   const firstShow = () => {
     clearTimers();
@@ -91,7 +91,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
     animTimeoutRef.current = window.setTimeout(() => {
       animTimeoutRef.current = null;
     }, 500);
-  }
+  };
 
   const triggerCollapse = () => {
     clearTimers();
@@ -101,7 +101,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
       prevKeyRef.current = null;
       collapseTimeoutRef.current = null;
     }, 500); // match CSS transition duration
-  }
+  };
 
   useEffect(() => {
     if (indicatorShouldShow) {

frontend/src/components/tools/ToolLoadingFallback.tsx

@@ -10,5 +10,5 @@ export default function ToolLoadingFallback({ toolName }: { toolName?: string })
         </Text>
       </Stack>
     </Center>
-  )
+  );
 }

frontend/src/components/tools/shared/ErrorNotification.tsx

@@ -30,6 +30,6 @@ const ErrorNotification = ({
       {error}
     </Notification>
   );
-}
+};
 
 export default ErrorNotification;

frontend/src/components/tools/shared/OperationButton.tsx

@@ -52,6 +52,6 @@ const OperationButton = ({
       }
     </Button>
   );
-}
+};
 
 export default OperationButton;

frontend/src/components/tools/shared/ToolStep.tsx

@@ -149,7 +149,7 @@ const ToolStep = ({
       <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
     </div>
   );
-}
+};
 
 // ToolStepFactory for creating numbered steps
 export function createToolSteps() {

frontend/src/components/tools/split/SplitSettings.tsx

@@ -158,6 +158,6 @@ const SplitSettings = ({
       {parameters.method === SPLIT_METHODS.BY_PAGE_DIVIDER && renderByPageDividerForm()}
     </Stack>
   );
-}
+};
 
 export default SplitSettings;

frontend/src/constants/splitConstants.ts

@@ -22,7 +22,7 @@ export const ENDPOINTS = {
 export type SplitMethod = typeof SPLIT_METHODS[keyof typeof SPLIT_METHODS];
 export const isSplitMethod = (value: string | null): value is SplitMethod => {
   return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
-}
+};
 
 import { CardOption } from '../components/shared/CardSelector';
 

frontend/src/contexts/FileContext.tsx

@@ -76,7 +76,7 @@ function FileContextInner({
     const currentSelection = stateRef.current.ui.selectedFileIds;
     const newFileIds = stirlingFiles.map(stirlingFile => stirlingFile.fileId);
     dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds: [...currentSelection, ...newFileIds] } });
-  }
+  };
 
   // File operations using unified addFiles helper with persistence
   const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean }): Promise<StirlingFile[]> => {

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -92,7 +92,7 @@ import SignSettings from "../components/tools/sign/SignSettings";
 import CropSettings from "../components/tools/crop/CropSettings";
 import RemoveAnnotations from "../tools/RemoveAnnotations";
 import RemoveAnnotationsSettings from "../components/tools/removeAnnotations/RemoveAnnotationsSettings";
-import PageLayoutSettings from "../components/tools/pageLayout/PageLayoutSettings"
+import PageLayoutSettings from "../components/tools/pageLayout/PageLayoutSettings";
 import ExtractImages from "../tools/ExtractImages";
 import ExtractImagesSettings from "../components/tools/extractImages/ExtractImagesSettings";
 import ReplaceColorSettings from "../components/tools/replaceColor/ReplaceColorSettings";

frontend/src/services/zipFileService.ts

@@ -11,7 +11,7 @@ interface CompressedObject {
 
 const getData = (zipEntry: JSZipObject): CompressedObject | undefined => {
   return (zipEntry as any)._data as CompressedObject;
-}
+};
 
 export interface ZipExtractionResult {
   success: boolean;

frontend/src/setupTests.ts

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom'
-import { vi } from 'vitest'
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
 
 // Mock i18next for tests
 vi.mock('react-i18next', () => ({
@@ -27,8 +27,8 @@ vi.mock('i18next-http-backend', () => ({
 }));
 
 // Mock window.URL.createObjectURL and revokeObjectURL for tests
-global.URL.createObjectURL = vi.fn(() => 'mocked-url')
-global.URL.revokeObjectURL = vi.fn()
+global.URL.createObjectURL = vi.fn(() => 'mocked-url');
+global.URL.revokeObjectURL = vi.fn();
 
 // Mock File and Blob API methods that aren't available in jsdom
 if (!globalThis.File.prototype.arrayBuffer) {
@@ -88,21 +88,21 @@ global.Worker = vi.fn().mockImplementation(() => ({
   removeEventListener: vi.fn(),
   onmessage: null,
   onerror: null,
-}))
+}));
 
 // Mock ResizeObserver for Mantine components
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
   disconnect: vi.fn(),
-}))
+}));
 
 // Mock IntersectionObserver for components that might use it
 global.IntersectionObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
   disconnect: vi.fn(),
-}))
+}));
 
 // Mock matchMedia for responsive components
 Object.defineProperty(window, 'matchMedia', {
@@ -117,7 +117,7 @@ Object.defineProperty(window, 'matchMedia', {
     removeEventListener: vi.fn(),
     dispatchEvent: vi.fn(),
   })),
-})
+});
 
 // Set global test timeout to prevent hangs
-vi.setConfig({ testTimeout: 5000, hookTimeout: 5000 })
+vi.setConfig({ testTimeout: 5000, hookTimeout: 5000 });

frontend/src/tests/convert/ConvertIntegration.test.tsx

@@ -452,7 +452,7 @@ describe('Convert Tool Integration Tests', () => {
       const files = [
         createPDFFile(),
         createTestStirlingFile('test2.pdf', '%PDF-1.4...', 'application/pdf')
-      ]
+      ];
       const parameters: ConvertParameters = {
         fromExtension: 'pdf',
         toExtension: 'png',

frontend/src/utils/scarfTracking.ts

@@ -17,7 +17,7 @@ export function firePixel(pathname: string): void {
   lastFiredTime = now;
 
   const url = 'https://static.scarf.sh/a.png?x-pxid=3c1d68de-8945-4e9f-873f-65320b6fabf7'
-             + '&path=' + encodeURIComponent(pathname)
+             + '&path=' + encodeURIComponent(pathname);
 
   const img = new Image();
   img.referrerPolicy = "no-referrer-when-downgrade";

frontend/tailwind.config.js

@@ -63,11 +63,11 @@ module.exports = {
         background: 'rgb(var(--background) / <alpha-value>)',
         border: 'rgb(var(--border) / <alpha-value>)',
       },
-      
+
       // Z-index scale
       zIndex: {
         'dropdown': '1000',
-        'sticky': '1020', 
+        'sticky': '1020',
         'fixed': '1030',
         'modal-backdrop': '1040',
         'modal': '1050',
@@ -81,4 +81,4 @@ module.exports = {
   corePlugins: {
     preflight: true,
   },
-}
+};

frontend/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react-swc';
 
 export default defineConfig({
@@ -37,4 +37,4 @@ export default defineConfig({
       '@': '/src'
     }
   }
-})
+});

frontend/vitest.minimal.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
@@ -6,4 +6,4 @@ export default defineConfig({
     testTimeout: 5000,
     include: ['src/utils/convertUtils.test.ts']
   },
-})
+});