From 3c131bc332facf0943bae3aa1746596a7e1a3724 Mon Sep 17 00:00:00 2001
From: James Brunton <james@stirlingpdf.com>
Date: Mon, 18 Aug 2025 14:19:17 +0100
Subject: [PATCH] Fix ViewType usage

---
 frontend/src/components/layout/Workbench.tsx   |  2 +-
 frontend/src/components/shared/TopControls.tsx |  9 +++++----
 frontend/src/types/fileContext.ts              | 16 +++++++++++++---
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/layout/Workbench.tsx b/frontend/src/components/layout/Workbench.tsx
index e6f101803..7506337e7 100644
--- a/frontend/src/components/layout/Workbench.tsx
+++ b/frontend/src/components/layout/Workbench.tsx
@@ -142,7 +142,7 @@ export default function Workbench() {
       {/* Top Controls */}
       <TopControls
         currentView={currentView}
-        setCurrentView={setCurrentView as any /* FIX ME */}
+        setCurrentView={setCurrentView}
         selectedToolKey={selectedToolKey}
       />
 
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index 98f8d0115..32fe34ed1 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -10,6 +10,7 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
 import { Group } from "@mantine/core";
+import { isViewType, ViewType } from "../../types/fileContext";
 
 // This will be created inside the component to access switchingTo
 const createViewOptions = (switchingTo: string | null) => [
@@ -52,8 +53,8 @@ const createViewOptions = (switchingTo: string | null) => [
 ];
 
 interface TopControlsProps {
-  currentView: string;
-  setCurrentView: (view: string) => void;
+  currentView: ViewType;
+  setCurrentView: (view: ViewType) => void;
   selectedToolKey?: string | null;
 }
 
@@ -67,7 +68,7 @@ const TopControls = ({
 
   const isToolSelected = selectedToolKey !== null;
 
-  const handleViewChange = useCallback((view: string) => {
+  const handleViewChange = useCallback((view: ViewType) => {
     // Show immediate feedback
     setSwitchingTo(view);
 
@@ -119,7 +120,7 @@ const TopControls = ({
             <SegmentedControl
               data={createViewOptions(switchingTo)}
               value={currentView}
-              onChange={handleViewChange}
+              onChange={(value) => isViewType(value) && handleViewChange}
               color="blue"
               radius="xl"
               size="md"
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index 7a8c4d2ed..8f83449de 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -19,7 +19,17 @@ export type ModeType =
   | 'changePermissions'
   | 'removePassword';
 
-export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
+const VIEW_TYPES = [
+  'viewer',
+  'pageEditor',
+  'fileEditor',
+] as const;
+
+export type ViewType = typeof VIEW_TYPES[number];
+
+export const isViewType = (value: string): value is ViewType => {
+  return VIEW_TYPES.includes(value as ViewType);
+}
 
 export type ToolType = 'merge' | 'split' | 'compress' | 'ocr' | 'convert' | 'sanitize';
 
@@ -108,12 +118,12 @@ export interface FileContextActions {
   removeFiles: (fileIds: string[], deleteFromStorage?: boolean) => void;
   replaceFile: (oldFileId: string, newFile: File) => Promise<void>;
   clearAllFiles: () => void;
-  
+
   // File pinning
   pinFile: (file: File) => void;
   unpinFile: (file: File) => void;
   isFilePinned: (file: File) => boolean;
-  
+
   // File consumption (replace unpinned files with outputs)
   consumeFiles: (inputFiles: File[], outputFiles: File[]) => Promise<void>;