From 8e5f3c2896009fdf9b01b685fede2fe2745bb151 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Thu, 16 Oct 2025 14:47:01 +0100
Subject: [PATCH] linter

---
 .../src/components/pageEditor/PageEditor.tsx  |  4 +-
 .../pageEditor/PageSelectByNumberButton.tsx   | 59 +++++++++++++++++++
 .../pageEditor/hooks/usePageDocument.ts       |  4 +-
 .../pageEditor/pageEditorRightRailButtons.tsx | 44 ++++----------
 frontend/src/components/shared/RightRail.tsx  |  1 -
 5 files changed, 74 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/pageEditor/PageSelectByNumberButton.tsx

diff --git a/frontend/src/components/pageEditor/PageEditor.tsx b/frontend/src/components/pageEditor/PageEditor.tsx
index 39458292b..13f702e69 100644
--- a/frontend/src/components/pageEditor/PageEditor.tsx
+++ b/frontend/src/components/pageEditor/PageEditor.tsx
@@ -46,7 +46,7 @@ const PageEditor = ({
 
   // Prefer IDs + selectors to avoid array identity churn
   const activeFileIds = state.files.ids;
-  const filesSignature = selectors.getFilesSignature();
+  const activeFilesSignature = selectors.getFilesSignature();
 
   // UI state
   const globalProcessing = state.ui.isProcessing;
@@ -72,7 +72,7 @@ const PageEditor = ({
 
   useEffect(() => {
     setCsvInput('');
-  }, [filesSignature]);
+  }, [activeFilesSignature]);
 
   // Grid container ref for positioning split indicators
   const gridContainerRef = useRef<HTMLDivElement>(null);
diff --git a/frontend/src/components/pageEditor/PageSelectByNumberButton.tsx b/frontend/src/components/pageEditor/PageSelectByNumberButton.tsx
new file mode 100644
index 000000000..3017d3a11
--- /dev/null
+++ b/frontend/src/components/pageEditor/PageSelectByNumberButton.tsx
@@ -0,0 +1,59 @@
+import { ActionIcon, Popover } from '@mantine/core';
+import LocalIcon from '../shared/LocalIcon';
+import { Tooltip } from '../shared/Tooltip';
+import BulkSelectionPanel from './BulkSelectionPanel';
+
+interface PageSelectByNumberButtonProps {
+  disabled: boolean;
+  totalPages: number;
+  label: string;
+  csvInput: string;
+  setCsvInput: (value: string) => void;
+  selectedPageIds: string[];
+  displayDocument?: { pages: { id: string; pageNumber: number }[] };
+  updatePagesFromCSV: (override?: string) => void;
+}
+
+export default function PageSelectByNumberButton({
+  disabled,
+  totalPages,
+  label,
+  csvInput,
+  setCsvInput,
+  selectedPageIds,
+  displayDocument,
+  updatePagesFromCSV,
+}: PageSelectByNumberButtonProps) {
+  return (
+    <Tooltip content={label} position="left" offset={12} arrow portalTarget={document.body}>
+      <div className={`right-rail-fade enter`}>
+        <Popover position="left" withArrow shadow="md" offset={8}>
+          <Popover.Target>
+            <div style={{ display: 'inline-flex' }}>
+              <ActionIcon
+                variant="subtle"
+                radius="md"
+                className="right-rail-icon"
+                disabled={disabled || totalPages === 0}
+                aria-label={label}
+              >
+                <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
+              </ActionIcon>
+            </div>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <div style={{ minWidth: '24rem', maxWidth: '32rem' }}>
+              <BulkSelectionPanel
+                csvInput={csvInput}
+                setCsvInput={setCsvInput}
+                selectedPageIds={selectedPageIds}
+                displayDocument={displayDocument}
+                onUpdatePagesFromCSV={updatePagesFromCSV}
+              />
+            </div>
+          </Popover.Dropdown>
+        </Popover>
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/components/pageEditor/hooks/usePageDocument.ts b/frontend/src/components/pageEditor/hooks/usePageDocument.ts
index 0b7aa00b4..e921903f9 100644
--- a/frontend/src/components/pageEditor/hooks/usePageDocument.ts
+++ b/frontend/src/components/pageEditor/hooks/usePageDocument.ts
@@ -21,7 +21,7 @@ export function usePageDocument(): PageDocumentHook {
   const primaryFileId = activeFileIds[0] ?? null;
 
   // Stable signature for effects (prevents loops)
-  const filesSignature = selectors.getFilesSignature();
+  const activeFilesSignature = selectors.getFilesSignature();
 
   // UI state
   const globalProcessing = state.ui.isProcessing;
@@ -156,7 +156,7 @@ export function usePageDocument(): PageDocumentHook {
     };
 
     return mergedDoc;
-  }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, filesSignature]);
+  }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, activeFilesSignature]);
 
   // Large document detection for smart loading
   const isVeryLargeDocument = useMemo(() => {
diff --git a/frontend/src/components/pageEditor/pageEditorRightRailButtons.tsx b/frontend/src/components/pageEditor/pageEditorRightRailButtons.tsx
index 1abcfe8b0..23faa99af 100644
--- a/frontend/src/components/pageEditor/pageEditorRightRailButtons.tsx
+++ b/frontend/src/components/pageEditor/pageEditorRightRailButtons.tsx
@@ -1,10 +1,8 @@
 import { useMemo } from 'react';
-import { ActionIcon, Popover } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from '../shared/Tooltip';
 import { useRightRailButtons, RightRailButtonWithAction } from '../../hooks/useRightRailButtons';
 import LocalIcon from '../shared/LocalIcon';
-import BulkSelectionPanel from './BulkSelectionPanel';
+import PageSelectByNumberButton from './PageSelectByNumberButton';
 
 interface PageEditorRightRailButtonsParams {
   totalPages: number;
@@ -84,36 +82,16 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
         disabled: totalPages === 0,
         visible: totalPages > 0,
         render: ({ disabled }) => (
-          <Tooltip content={selectByNumberLabel} position="left" offset={12} arrow portalTarget={document.body}>
-            <div className={`right-rail-fade enter`}>
-              <Popover position="left" withArrow shadow="md" offset={8}>
-                <Popover.Target>
-                  <div style={{ display: 'inline-flex' }}>
-                    <ActionIcon
-                      variant="subtle"
-                      radius="md"
-                      className="right-rail-icon"
-                      disabled={disabled || totalPages === 0}
-                      aria-label={selectByNumberLabel}
-                    >
-                      <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
-                    </ActionIcon>
-                  </div>
-                </Popover.Target>
-                <Popover.Dropdown>
-                  <div style={{ minWidth: '24rem', maxWidth: '32rem' }}>
-                    <BulkSelectionPanel
-                      csvInput={csvInput}
-                      setCsvInput={setCsvInput}
-                      selectedPageIds={selectedPageIds}
-                      displayDocument={displayDocument}
-                      onUpdatePagesFromCSV={updatePagesFromCSV}
-                    />
-                  </div>
-                </Popover.Dropdown>
-              </Popover>
-            </div>
-          </Tooltip>
+          <PageSelectByNumberButton
+            disabled={disabled}
+            totalPages={totalPages}
+            label={selectByNumberLabel}
+            csvInput={csvInput}
+            setCsvInput={setCsvInput}
+            selectedPageIds={selectedPageIds}
+            displayDocument={displayDocument}
+            updatePagesFromCSV={updatePagesFromCSV}
+          />
         ),
       },
       {
diff --git a/frontend/src/components/shared/RightRail.tsx b/frontend/src/components/shared/RightRail.tsx
index b9066efb8..c8168f373 100644
--- a/frontend/src/components/shared/RightRail.tsx
+++ b/frontend/src/components/shared/RightRail.tsx
@@ -45,7 +45,6 @@ export default function RightRail() {
   const disableForFullscreen = toolPanelMode === 'fullscreen' && leftPanelView === 'toolPicker';
 
   const { workbench: currentView } = useNavigationState();
-  const isCustomWorkbench = typeof currentView === 'string' && currentView.startsWith('custom:');
 
   const { selectors } = useFileState();
   const { selectedFiles, selectedFileIds } = useFileSelection();