Promote to production: full-screen reading for viewer tools

e2e/tools/viewer-fullscreen.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+// The full-screen expand is a shared wrapper (ExpandableViewer + useExpand)
+// added to the viewer tools. The button renders regardless of loaded content,
+// so we can assert the toggle without opening a file. Native fullscreen may be
+// denied in headless, but the CSS-overlay fallback still flips the label.
+for (const route of ['/tools/svg-viewer', '/tools/image-viewer']) {
+  test(`full-screen toggle works on ${route}`, async ({ page }) => {
+    await page.goto(route);
+    await page.waitForLoadState('networkidle').catch(() => {});
+
+    const expand = page.getByRole('button', { name: 'Full screen' });
+    await expect(async () => {
+      await expand.click();
+      await expect(page.getByRole('button', { name: 'Exit' })).toBeVisible({ timeout: 2000 });
+    }).toPass({ timeout: 30_000 });
+
+    await page.getByRole('button', { name: 'Exit' }).click();
+    await expect(page.getByRole('button', { name: 'Full screen' })).toBeVisible();
+  });
+}

src/components/ui/ExpandableViewer.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { Maximize2, Minimize2 } from 'lucide-react';
+import { useExpand } from '@/hooks/useExpand';
+import type { Lang } from '@/i18n/config';
+
+const LBL: Record<Lang, { expand: string; exit: string }> = {
+  en: { expand: 'Full screen', exit: 'Exit' },
+  id: { expand: 'Layar penuh', exit: 'Keluar' },
+};
+
+/**
+ * Wraps a viewer tool with a "Full screen" toggle. Reuses the shared useExpand
+ * hook (native Fullscreen API + iOS CSS-overlay fallback, Esc to exit) so any
+ * viewer can be read full-screen — handy on a phone. When expanded, the wrapper
+ * fills the viewport with an opaque background and scrolls its content.
+ */
+export function ExpandableViewer({ lang = 'en', children }: { lang?: Lang; children: ReactNode }) {
+  const { ref, expanded, enter, exit } = useExpand<HTMLDivElement>();
+  const t = LBL[lang] ?? LBL.en;
+  return (
+    <div ref={ref} className={expanded ? 'fixed inset-0 z-[60] overflow-auto bg-background p-4' : ''}>
+      <div className="mb-2 flex justify-end">
+        <button
+          type="button"
+          onClick={() => (expanded ? exit() : enter())}
+          aria-label={expanded ? t.exit : t.expand}
+          className="inline-flex items-center gap-1.5 border-2 border-border px-3 py-1.5 text-xs font-bold uppercase tracking-wide hover:bg-muted"
+        >
+          {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+          {expanded ? t.exit : t.expand}
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default ExpandableViewer;

src/islands/documents/DicomViewer.tsx

@@ -3,6 +3,7 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { Alert } from '@/components/ui/Alert';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { applyWindowLevel, isUncompressed, rescale, parseFrameCount, clampFrameCount } from '@/tools/documents/dicom.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 interface Loaded {
@@ -134,6 +135,7 @@ export default function DicomViewer({ lang = 'en' }: { lang?: Lang }) {
   }, [loaded, center, width, frame]);
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -199,5 +201,6 @@ export default function DicomViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/DocViewer.tsx

@@ -3,6 +3,7 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { CopyButton } from '@/components/ui/CopyButton';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import { downloadService } from '@/services/download';
 import type { Lang } from '@/i18n/config';
 
@@ -55,6 +56,7 @@ export default function DocViewer({ lang = 'en' }: { lang?: Lang }) {
   const wordCount = text ? text.split(/\s+/).filter(Boolean).length : 0;
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -83,5 +85,6 @@ export default function DocViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/DocxViewer.tsx

@@ -3,6 +3,7 @@ import { FileText, Printer } from 'lucide-react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, {
@@ -61,6 +62,7 @@ export default function DocxViewer({ lang = 'en' }: { lang?: Lang }) {
   };
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground print:hidden">{t.intro}</p>
 
@@ -91,5 +93,6 @@ export default function DocxViewer({ lang = 'en' }: { lang?: Lang }) {
         className={`docx-viewer ${hasDoc ? 'max-h-[78vh] overflow-auto border-2 border-border bg-neutral-200 p-3 dark:bg-neutral-800 print:max-h-none print:overflow-visible print:border-0 print:bg-white print:p-0' : ''}`}
       />
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/EmlViewer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Alert } from '@/components/ui/Alert';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import { formatAddress, formatAddressList } from '@/tools/documents/eml.lib';
 import { downloadService } from '@/services/download';
 import type { Lang } from '@/i18n/config';
@@ -68,6 +69,7 @@ export default function EmlViewer({ lang = 'en' }: { lang?: Lang }) {
   ) : null;
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -117,5 +119,6 @@ export default function EmlViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/EpubReader.tsx

@@ -5,6 +5,7 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { flattenToc, type FlatTocItem } from '@/tools/documents/epub-toc.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const MIN_FONT = 70;
@@ -133,6 +134,7 @@ export default function EpubReader({ lang = 'en' }: { lang?: Lang }) {
   };
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -202,5 +204,6 @@ export default function EpubReader({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/GedcomViewer.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Alert } from '@/components/ui/Alert';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import { parseGedcom, displayName, type Gedcom, type Individual } from '@/tools/documents/gedcom.lib';
 import type { Lang } from '@/i18n/config';
 
@@ -74,6 +75,7 @@ export default function GedcomViewer({ lang = 'en' }: { lang?: Lang }) {
   );
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -132,5 +134,6 @@ export default function GedcomViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/IWorkViewer.tsx

@@ -5,6 +5,7 @@ import { Alert } from '@/components/ui/Alert';
 import { findPreview } from '@/tools/documents/iwork.lib';
 import { readSlideOutline, type SlideOutline } from '@/tools/documents/iwa.lib';
 import { openPdfRenderer, type PdfRenderer } from '@/tools/pdf/render.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, Record<string, string>> = {
@@ -147,6 +148,7 @@ export default function IWorkViewer({ lang = 'en' }: { lang?: Lang }) {
   const label = (s: SlideOutline, i: number) => s.title || s.body[0] || `${t.slide} ${i + 1}`;
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -272,5 +274,6 @@ export default function IWorkViewer({ lang = 'en' }: { lang?: Lang }) {
         <button onClick={reset} className="min-h-11 border-2 border-border px-3 py-1.5 text-sm font-medium hover:shadow-brutal">{t.another}</button>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/OdtViewer.tsx

@@ -3,6 +3,7 @@ import { FileType2, Printer } from 'lucide-react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, {
@@ -94,6 +95,7 @@ export default function OdtViewer({ lang = 'en' }: { lang?: Lang }) {
   const hasDoc = html !== '' || emptyDoc;
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <style>{DOC_CSS}</style>
       <p className="text-sm text-muted-foreground print:hidden">{t.intro}</p>
@@ -131,5 +133,6 @@ export default function OdtViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/PptxViewer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Alert } from '@/components/ui/Alert';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { PptxDoc, Shape } from '@/tools/documents/pptx.lib';
 import type { Lang } from '@/i18n/config';
 
@@ -112,6 +113,7 @@ export default function PptxViewer({ lang = 'en' }: { lang?: Lang }) {
   };
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -153,5 +155,6 @@ export default function PptxViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/documents/SpreadsheetViewer.tsx

@@ -4,6 +4,7 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { colLabel, readWorkbook, type SheetView } from '@/tools/documents/spreadsheet.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, {
@@ -65,6 +66,7 @@ export default function SpreadsheetViewer({ lang = 'en' }: { lang?: Lang }) {
   const colCount = sheet?.rows.reduce((m, r) => Math.max(m, r.length), 0) ?? 0;
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t.intro}</p>
 
@@ -128,5 +130,6 @@ export default function SpreadsheetViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/image/ImageViewer.tsx

@@ -8,6 +8,7 @@ import { formatBytes } from '@/tools/image/canvas.lib';
 import { parseIcoEntries, type IcoEntry } from '@/tools/image/ico.lib';
 import { readExifSummary, type ExifSummary } from '@/tools/image/exif.lib';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, {
@@ -118,6 +119,7 @@ export default function ImageViewer({ lang = 'en' }: { lang?: Lang }) {
   );
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/*,.ico" multiple={false}>
         <div className="space-y-1">
@@ -158,5 +160,6 @@ export default function ImageViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/image/SvgViewer.tsx

@@ -6,6 +6,7 @@ import { Alert } from '@/components/ui/Alert';
 import { ImageResult } from '@/components/ui/ImageResult';
 import { ZoomPane } from '@/components/ui/ZoomPane';
 import { parseSvgSize, rasterizeSvg } from '@/tools/image/svg.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const TR: Record<Lang, {
@@ -84,6 +85,7 @@ export default function SvgViewer({ lang = 'en' }: { lang?: Lang }) {
   };
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="image/svg+xml,.svg" multiple={false}>
         <div className="space-y-1">
@@ -138,5 +140,6 @@ export default function SvgViewer({ lang = 'en' }: { lang?: Lang }) {
 
       {result && <ImageResult blob={result} filename={`image.${fmt === 'jpeg' ? 'jpg' : fmt}`} />}
     </div>
+    </ExpandableViewer>
   );
 }

src/islands/maps/GeoViewer.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { resolveStyle, MAP_STYLES, type StyleChoice } from '@/tools/geo/map-styles.lib';
 import { parseGeoFile, computeBbox } from '@/tools/geo/geo-parse.lib';
+import { ExpandableViewer } from '@/components/ui/ExpandableViewer';
 import type { Lang } from '@/i18n/config';
 
 const STYLE_KEY = 'gwt.map.style';
@@ -128,6 +129,7 @@ export default function GeoViewer({ lang = 'en' }: { lang?: Lang }) {
   };
 
   return (
+    <ExpandableViewer lang={lang}>
     <div className="space-y-3">
       <Dropzone onDrop={onDrop} accept=".geojson,.json,.gpx,.kml,application/geo+json,application/gpx+xml,application/vnd.google-earth.kml+xml" multiple={false}>
         <div className="space-y-1">
@@ -166,5 +168,6 @@ export default function GeoViewer({ lang = 'en' }: { lang?: Lang }) {
         </div>
       )}
     </div>
+    </ExpandableViewer>
   );
 }