Enforce type checking in CI (#4126)

# Description of Changes
Currently, the `tsconfig.json` file enforces strict type checking, but
nothing in CI checks that the code is actually correctly typed. [Vite
only transpiles TypeScript
code](https://vite.dev/guide/features.html#transpile-only) so doesn't
ensure that the TS code we're running is correct.

This PR adds running of the type checker to CI and fixes the type errors
that have already crept into the codebase.

Note that many of the changes I've made to 'fix the types' are just
using `any` to disable the type checker because the code is under too
much churn to fix anything properly at the moment. I still think
enabling the type checker now is the best course of action though
because otherwise we'll never be able to fix all of them, and it should
at least help us not break things when adding new code.

Co-authored-by: James <james@crosscourtanalytics.com>

frontend/src/components/tools/ToolPanel.tsx

@@ -16,24 +16,24 @@ export default function ToolPanel() {
   const { sidebarRefs } = useSidebarContext();
   const { toolPanelRef } = sidebarRefs;
 
-  
+
   // Use context-based hooks to eliminate prop drilling
-  const { 
-    leftPanelView, 
-    isPanelVisible, 
-    searchQuery, 
+  const {
+    leftPanelView,
+    isPanelVisible,
+    searchQuery,
     filteredTools,
     setSearchQuery,
     handleBackToTools
   } = useToolPanelState();
-  
+
   const { selectedToolKey, handleToolSelect } = useToolSelection();
   const { setPreviewFile } = useWorkbenchState();
 
   return (
     <div
       ref={toolPanelRef}
-      data-sidebar="tool-panel" 
+      data-sidebar="tool-panel"
       className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
         isRainbowMode ? rainbowStyles.rainbowPaper : ''
       }`}
@@ -77,7 +77,7 @@ export default function ToolPanel() {
             {/* Tool content */}
             <div className="flex-1 min-h-0">
               <ToolRenderer
-                selectedToolKey={selectedToolKey}
+                selectedToolKey={selectedToolKey || ''}
                 onPreviewFile={setPreviewFile}
               />
             </div>
@@ -86,4 +86,4 @@ export default function ToolPanel() {
       </div>
     </div>
   );
-}
+}

frontend/src/components/tools/convert/ConvertFromImageSettings.tsx

@@ -30,12 +30,12 @@ const ConvertFromImageSettings = ({
         })}
         data={[
           { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
-          { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
+          { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
           { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
         ]}
         disabled={disabled}
       />
-      
+
       <Select
         data-testid="fit-option-select"
         label={t("convert.fitOption", "Fit Option")}
@@ -51,7 +51,7 @@ const ConvertFromImageSettings = ({
         ]}
         disabled={disabled}
       />
-      
+
       <Switch
         data-testid="auto-rotate-switch"
         label={t("convert.autoRotate", "Auto Rotate")}
@@ -63,7 +63,7 @@ const ConvertFromImageSettings = ({
         })}
         disabled={disabled}
       />
-      
+
       <Switch
         data-testid="combine-images-switch"
         label={t("convert.combineImages", "Combine Images")}
@@ -79,4 +79,4 @@ const ConvertFromImageSettings = ({
   );
 };
 
-export default ConvertFromImageSettings;
+export default ConvertFromImageSettings;

frontend/src/components/tools/convert/ConvertFromWebSettings.tsx

@@ -31,7 +31,6 @@ const ConvertFromWebSettings = ({
           min={0.1}
           max={3.0}
           step={0.1}
-          precision={1}
           disabled={disabled}
           data-testid="zoom-level-input"
         />

frontend/src/components/tools/convert/ConvertToImageSettings.tsx

@@ -31,7 +31,7 @@ const ConvertToImageSettings = ({
           })}
           data={[
             { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
-            { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
+            { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
             { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
           ]}
           disabled={disabled}
@@ -68,4 +68,4 @@ const ConvertToImageSettings = ({
   );
 };
 
-export default ConvertToImageSettings;
+export default ConvertToImageSettings;

frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx

@@ -30,7 +30,7 @@ const ConvertToPdfaSettings = ({
       <Text size="sm" fw={500}>{t("convert.pdfaOptions", "PDF/A Options")}:</Text>
       
       {hasDigitalSignatures && (
-        <Alert color="yellow" size="sm">
+        <Alert color="yellow">
           <Text size="sm">
             {t("convert.pdfaDigitalSignatureWarning", "The PDF contains a digital signature. This will be removed in the next step.")}
           </Text>

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

@@ -1,6 +1,6 @@
 import { Stack, TextInput, Select, Checkbox } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { SPLIT_MODES, SPLIT_TYPES, type SplitMode, type SplitType } from '../../../constants/splitConstants';
+import { isSplitMode, SPLIT_MODES, SPLIT_TYPES, type SplitMode, type SplitType } from '../../../constants/splitConstants';
 
 export interface SplitParameters {
   mode: SplitMode | '';
@@ -123,7 +123,7 @@ const SplitSettings = ({
         label="Choose split method"
         placeholder="Select how to split the PDF"
         value={parameters.mode}
-        onChange={(v) => v && onParameterChange('mode', v)}
+        onChange={(v) => isSplitMode(v) && onParameterChange('mode', v)}
         disabled={disabled}
         data={[
           { value: SPLIT_MODES.BY_PAGES, label: t("split.header", "Split by Pages") + " (e.g. 1,3,5-10)" },