feat: update frontend for document handling and styling.

frontend/src/viewer/useViewerLayoutMode.ts

@@ -0,0 +1,78 @@
+import { MutableRefObject, useLayoutEffect, useState } from 'react';
+import {
+  DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO,
+  MIN_STACKED_BREAKPOINT,
+  PORTRAIT_RATIO_STYLE_ID,
+} from '../constants/preview';
+
+const ensurePortraitRatioStyle = () => {
+  const cssValue = String(DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO);
+  const cssText = `:root { --document-viewer-portrait-height-ratio: ${cssValue}; }`;
+
+  let styleEl = document.getElementById(PORTRAIT_RATIO_STYLE_ID);
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = PORTRAIT_RATIO_STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+
+  if (styleEl.textContent !== cssText) {
+    styleEl.textContent = cssText;
+  }
+};
+
+const computeStackedLayoutBreakpoint = () => Math.max(window.innerWidth / 2, MIN_STACKED_BREAKPOINT);
+
+export const useViewerLayoutMode = (
+  ref: MutableRefObject<HTMLElement | null> | null,
+  dependency?: unknown,
+) => {
+  const [isStacked, setIsStacked] = useState(false);
+
+  useLayoutEffect(() => {
+    ensurePortraitRatioStyle();
+  }, []);
+
+  useLayoutEffect(() => {
+    const node = ref?.current;
+    if (!node) {
+      setIsStacked(false);
+      return undefined;
+    }
+
+    let frame: number | null = null;
+    const commitMeasure = (width: number) => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      frame = requestAnimationFrame(() => {
+        const breakpoint = computeStackedLayoutBreakpoint();
+        setIsStacked(width < breakpoint);
+      });
+    };
+
+    const measure = () => {
+      commitMeasure(node.getBoundingClientRect().width);
+    };
+
+    measure();
+
+    const observer = new ResizeObserver((entries) => {
+      if (!entries.length) {
+        return;
+      }
+      commitMeasure(entries[0].contentRect.width);
+    });
+
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [ref, dependency]);
+
+  return isStacked;
+};