Add separate control panel

app/[locale]/calibrate/page.tsx

@@ -70,11 +70,13 @@ import Modal from "@/_components/modal/modal";
 import { ModalTitle } from "@/_components/modal/modal-title";
 import ModalContent from "@/_components/modal/modal-content";
 import { ModalText } from "@/_components/modal/modal-text";
+import { ControlPanelBridge } from "@/_components/control-panel-bridge";
 import { ModalActions } from "@/_components/modal/modal-actions";
 import { Button } from "@/_components/buttons/button";
 import { erosionFilter } from "@/_lib/erode";
 import SvgViewer from "@/_components/svg-viewer";
 import { toggleFullScreen } from "@/_lib/full-screen";
+import { usePdfThumbnail } from "@/_hooks/use-pdf-thumbnail";
 
 const defaultStitchSettings = {
   lineCount: 1,
@@ -139,6 +141,9 @@ export default function Page() {
   const [mailOpen, setMailOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<null | string>(null);
 
+  // Ref for file input to allow control panel to trigger file open
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   const [points, dispatch] = useReducer(pointsReducer, []);
   const [stitchSettings, dispatchStitchSettings] = useReducer(
     stitchSettingsReducer,
@@ -156,6 +161,17 @@ export default function Page() {
   const patternScaleFactor =
     Number(patternScale) === 0 ? 1 : Number(patternScale);
 
+  // State for preview thumbnail
+  const [showPreviewImage, setShowPreviewImage] = useState(true);
+  const { thumbnail: pdfThumbnail, isLoading: isPreviewLoading } =
+    usePdfThumbnail(
+      file?.type === "application/pdf" ? file : null,
+      pageCount,
+      stitchSettings,
+      lineThickness,
+      showPreviewImage,
+    );
+
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const t = useTranslations("Header");
@@ -526,6 +542,14 @@ export default function Page() {
       ref={noZoomRefCallback}
       className={`${menusHidden && "cursor-none"} ${isDarkTheme(displaySettings.theme) && "dark bg-black"} w-screen h-screen absolute overflow-hidden touch-none`}
     >
+      {/* Hidden file input for control panel to trigger */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="application/pdf,image/svg+xml"
+        onChange={handleFileChange}
+        className="hidden"
+      />
       <div className="bg-white dark:bg-black dark:text-white w-screen h-screen ">
         <FullScreen
           handle={fullScreenHandle}
@@ -589,6 +613,86 @@ export default function Page() {
           )}
 
           <Transformable fileName={file?.name ?? "default"}>
+            <ControlPanelBridge
+              isCalibrating={isCalibrating}
+              setIsCalibrating={setIsCalibrating}
+              displaySettings={displaySettings}
+              setDisplaySettings={(newSettings) => {
+                setDisplaySettings(newSettings);
+                if (newSettings) {
+                  updateLocalSettings(newSettings);
+                }
+              }}
+              zoomedOut={zoomedOut}
+              setZoomedOut={setZoomedOut}
+              magnifying={magnifying}
+              setMagnifying={setMagnifying}
+              measuring={measuring}
+              setMeasuring={setMeasuring}
+              file={file}
+              setFile={setFile}
+              lineThickness={lineThickness}
+              setLineThickness={(newLineThickness) => {
+                setLineThickness(newLineThickness);
+                if (file) {
+                  localStorage.setItem(
+                    `lineThickness:${file.name}`,
+                    String(newLineThickness),
+                  );
+                }
+              }}
+              pageCount={pageCount}
+              patternScale={patternScale}
+              dispatchPatternScaleAction={dispatchPatternScaleAction}
+              menuStates={menuStates}
+              setMenuStates={setMenuStates}
+              widthInput={widthInput}
+              heightInput={heightInput}
+              handleWidthChange={handleWidthChange}
+              handleHeightChange={handleHeightChange}
+              unitOfMeasure={unitOfMeasure}
+              setUnitOfMeasure={(newUnit) => {
+                setUnitOfMeasure(newUnit);
+                updateLocalSettings({ unitOfMeasure: newUnit });
+              }}
+              handleResetCalibration={() => {
+                localStorage.setItem(
+                  "calibrationContext",
+                  JSON.stringify(
+                    getCalibrationContext(fullScreenHandle.active),
+                  ),
+                );
+                dispatch({ type: "set", points: getDefaultPoints() });
+              }}
+              fileInputRef={fileInputRef}
+              width={width}
+              height={height}
+              layoutWidth={layoutWidth}
+              layoutHeight={layoutHeight}
+              getCalibrationCenterPoint={getCalibrationCenterPoint}
+              layers={layers}
+              dispatchLayerAction={dispatchLayersAction}
+              stitchSettings={stitchSettings}
+              dispatchStitchSettings={dispatchStitchSettings}
+              showingMovePad={showingMovePad}
+              setShowingMovePad={(show) => {
+                setShowingMovePad(show);
+                updateLocalSettings({ showingMovePad: show });
+              }}
+              corners={corners}
+              setCorners={setCorners}
+              dispatchPoints={dispatch}
+              setCalibrationValidated={setCalibrationValidated}
+              fullScreenActive={fullScreenHandle.active}
+              perspective={perspective}
+              calibrationTransform={calibrationTransform}
+              restoreTransforms={restoreTransforms}
+              setRestoreTransforms={setRestoreTransforms}
+              pdfThumbnail={pdfThumbnail}
+              isPreviewLoading={isPreviewLoading}
+              showPreviewImage={showPreviewImage}
+              setShowPreviewImage={setShowPreviewImage}
+            />
             <MeasureCanvas
               className={visible(!isCalibrating)}
               perspective={perspective}