feat(mobile): improve responsive panes, gestures, zoom range and iPad export

Author: cyrilcombe

src/App.smoke.test.tsx

@@ -30,17 +30,16 @@ vi.mock('./ui/canvas/BeadPreviewCanvas', () => ({
   BeadPreviewCanvas: () => <div data-testid="bead-preview-canvas" />,
 }))
 
-function setMatchMedia(isCompactTabsMode: boolean): void {
+function setMatchMedia(mode: 'desktop' | 'compact' | 'single'): void {
   vi.stubGlobal(
     'matchMedia',
     vi.fn((query: string) => ({
       matches:
-        isCompactTabsMode &&
+        (mode === 'compact' || mode === 'single') &&
         (
-          query === '(max-width: 1200px)' ||
-          query === '(max-width: 980px)' ||
-          query === '(max-width: 980px) and (orientation: portrait)'
-        ),
+          query === '(max-width: 1024px)'
+        ) ||
+        (mode === 'single' && query === '(max-width: 500px)'),
       media: query,
       onchange: null,
       addListener: () => {},
@@ -56,7 +55,7 @@ describe('App smoke', () => {
   beforeEach(() => {
     useEditorStore.getState().reset()
     useEditorStore.getState().setDocument(createEmptyDocument())
-    setMatchMedia(false)
+    setMatchMedia('desktop')
   })
 
   it('renders and opens help dialog', async () => {
@@ -71,7 +70,7 @@ describe('App smoke', () => {
   })
 
   it('keeps a single visible pane on initial mobile portrait render', async () => {
-    setMatchMedia(true)
+    setMatchMedia('single')
     render(
       <I18nProvider>
         <App />

src/App.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DEFAULT_BEAD_SYMBOLS } from './domain/defaults'
 import { useEditorStore } from './domain/editorStore'
 import { buildReportSummary } from './domain/report'
+import { MAX_ZOOM_INDEX } from './domain/zoom'
 import { useI18n } from './i18n/I18nProvider'
 import type { AppLocale } from './i18n/translations'
 import {
@@ -25,6 +26,7 @@ import { useDocumentFileActions } from './ui/hooks/useDocumentFileActions'
 import { useEditorShortcuts } from './ui/hooks/useEditorShortcuts'
 import { useMobilePortraitSinglePane } from './ui/hooks/useMobilePortraitSinglePane'
 import { usePaneSync } from './ui/hooks/usePaneSync'
+import { useCanvasGestures } from './ui/hooks/useCanvasGestures'
 import { usePointerEditing } from './ui/hooks/usePointerEditing'
 import { usePointerDismiss } from './ui/hooks/usePointerDismiss'
 import { useProjectBootstrap } from './ui/hooks/useProjectBootstrap'
@@ -236,7 +238,7 @@ function App() {
   const drawColors = document.view.drawColors
   const drawSymbols = document.view.drawSymbols
   const zoomIndex = document.view.zoom
-  const canZoomIn = zoomIndex < 7
+  const canZoomIn = zoomIndex < MAX_ZOOM_INDEX
   const canZoomOut = zoomIndex > 0
   const hasCanvasPaneVisible = isDraftVisible || isCorrectedVisible || isSimulationVisible
   const hasAnyPaneVisible = hasCanvasPaneVisible || isReportVisible
@@ -286,6 +288,25 @@ function App() {
     setZoom,
   })
 
+  const gesturePaneRefs = useMemo(
+    () => [draftScrollRef, correctedScrollRef, simulationScrollRef],
+    [correctedScrollRef, draftScrollRef, simulationScrollRef],
+  )
+
+  useCanvasGestures({
+    panes: gesturePaneRefs,
+    onZoomIn: () => {
+      setIsZoomFitMode(false)
+      zoomIn()
+    },
+    onZoomOut: () => {
+      setIsZoomFitMode(false)
+      zoomOut()
+    },
+    onShiftLeft: () => shiftLeft(),
+    onShiftRight: () => shiftRight(),
+  })
+
   const reportSummary = useMemo(
     () =>
       buildReportSummary(document, openFileName, {
@@ -447,22 +468,12 @@ function App() {
     setIsMetadataDialogOpen(true)
   }, [document.author, document.notes, document.organization])
 
-  const onSelectMobileView = useCallback(
-    (pane: ViewPaneId) => {
-      setViewVisibility('draft', pane === 'draft')
-      setViewVisibility('corrected', pane === 'corrected')
-      setViewVisibility('simulation', pane === 'simulation')
-      setViewVisibility('report', pane === 'report')
-    },
-    [setViewVisibility],
-  )
-
-  useMobilePortraitSinglePane({
+  const { isCompactTabsMode, maxVisiblePanes } = useMobilePortraitSinglePane({
     isDraftVisible,
     isCorrectedVisible,
     isSimulationVisible,
     isReportVisible,
-    onSelectMobileView,
+    onSetPaneVisibility: setViewVisibility,
   })
 
   const onApplyPreferences = useCallback(async () => {
@@ -542,13 +553,55 @@ function App() {
     simulation: isSimulationVisible,
     report: isReportVisible,
   }
-  const mobileActivePane: ViewPaneId = isDraftVisible
-    ? 'draft'
-    : isCorrectedVisible
-      ? 'corrected'
-      : isSimulationVisible
-        ? 'simulation'
-        : 'report'
+  const onToggleMobileView = useCallback(
+    (pane: ViewPaneId) => {
+      const visibleByPane: Record<ViewPaneId, boolean> = {
+        draft: isDraftVisible,
+        corrected: isCorrectedVisible,
+        simulation: isSimulationVisible,
+        report: isReportVisible,
+      }
+      const orderedPanes: ViewPaneId[] = ['draft', 'corrected', 'simulation', 'report']
+      const visiblePanes = orderedPanes.filter((id) => visibleByPane[id])
+      const isVisible = visibleByPane[pane]
+
+      if (!isCompactTabsMode) {
+        // Desktop behavior: open one pane and keep others unchanged is confusing.
+        // Keep mobile tab interactions no-op outside compact mode.
+        return
+      }
+
+      if (isVisible) {
+        if (visiblePanes.length <= 1) {
+          return
+        }
+        setViewVisibility(pane, false)
+        return
+      }
+
+      if (maxVisiblePanes === 1) {
+        orderedPanes.forEach((id) => {
+          setViewVisibility(id, id === pane)
+        })
+        return
+      }
+
+      if (visiblePanes.length >= maxVisiblePanes) {
+        // Keep the latest selection by dropping the first visible pane.
+        setViewVisibility(visiblePanes[0], false)
+      }
+      setViewVisibility(pane, true)
+    },
+    [
+      isCompactTabsMode,
+      isCorrectedVisible,
+      isDraftVisible,
+      isReportVisible,
+      isSimulationVisible,
+      maxVisiblePanes,
+      setViewVisibility,
+    ],
+  )
 
   const paneLabels = useMemo(
     () => ({
@@ -634,13 +687,13 @@ function App() {
         hasAnyPaneVisible={hasAnyPaneVisible}
         recentFilesCount={recentFiles.length}
         isMobileActionsMenuOpen={isMobileActionsMenuOpen}
-        mobileActivePane={mobileActivePane}
+        mobilePaneVisibilityById={paneVisibilityById}
         panes={panes}
         mobileActionsMenuRef={mobileActionsMenuRef}
         openFileInputRef={openFileInputRef}
         onToggleMobileActionsMenu={() => setIsMobileActionsMenuOpen((value) => !value)}
         onCloseMobileActionsMenu={() => setIsMobileActionsMenuOpen(false)}
-        onSelectMobileView={onSelectMobileView}
+        onToggleMobileView={onToggleMobileView}
         onNewDocument={onNewDocument}
         onOpenDocument={onOpenDocument}
         onOpenRecentDialog={onOpenRecentDialog}

src/domain/editorStore.test.ts

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createEmptyDocument, DEFAULT_BEAD_SYMBOLS } from './defaults'
 import { useEditorStore } from './editorStore'
+import { MAX_ZOOM_INDEX, NORMAL_ZOOM_INDEX } from './zoom'
 
 describe('editor store', () => {
   beforeEach(() => {
@@ -459,20 +460,20 @@ describe('editor store', () => {
     expect(useEditorStore.getState().document.view.zoom).toBe(3)
 
     useEditorStore.getState().zoomNormal()
-    expect(useEditorStore.getState().document.view.zoom).toBe(3)
+    expect(useEditorStore.getState().document.view.zoom).toBe(NORMAL_ZOOM_INDEX)
 
     for (let index = 0; index < 20; index += 1) {
       useEditorStore.getState().zoomIn()
     }
-    expect(useEditorStore.getState().document.view.zoom).toBe(7)
+    expect(useEditorStore.getState().document.view.zoom).toBe(MAX_ZOOM_INDEX)
 
     for (let index = 0; index < 20; index += 1) {
       useEditorStore.getState().zoomOut()
     }
     expect(useEditorStore.getState().document.view.zoom).toBe(0)
 
     useEditorStore.getState().setZoom(99)
-    expect(useEditorStore.getState().document.view.zoom).toBe(7)
+    expect(useEditorStore.getState().document.view.zoom).toBe(MAX_ZOOM_INDEX)
 
     useEditorStore.getState().setZoom(-3)
     expect(useEditorStore.getState().document.view.zoom).toBe(0)

src/domain/editorStore.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import { createEmptyDocument, DEFAULT_BEAD_SYMBOLS } from './defaults'
 import { getLinePoints, normalizeRect, snapLineEnd, type NormalizedRect } from './gridMath'
+import { MAX_ZOOM_INDEX, MIN_ZOOM_INDEX, NORMAL_ZOOM_INDEX } from './zoom'
 import type { CellPoint, JBeadDocument, RgbaColor, SelectionRect, ToolId, ViewPaneId } from './types'
 
 interface EditorState {
@@ -78,10 +79,6 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value))
 }
 
-const MIN_ZOOM_INDEX = 0
-const MAX_ZOOM_INDEX = 7
-const NORMAL_ZOOM_INDEX = 3
-
 function isInside(document: JBeadDocument, point: CellPoint): boolean {
   const rows = document.model.rows
   const height = rows.length

src/domain/zoom.ts

@@ -0,0 +1,9 @@
+export const ZOOM_TABLE = [4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40] as const
+
+export const MIN_ZOOM_INDEX = 0
+export const MAX_ZOOM_INDEX = ZOOM_TABLE.length - 1
+export const NORMAL_ZOOM_INDEX = 5
+
+export function getCellSize(zoomIndex: number): number {
+  return ZOOM_TABLE[Math.max(MIN_ZOOM_INDEX, Math.min(zoomIndex, MAX_ZOOM_INDEX))]
+}

src/styles/responsive.css

@@ -1,71 +1,10 @@
-@media (max-width: 1200px) {
+@media (max-width: 1024px) {
   .mobile-view-tabs {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 0.35rem;
   }
-}
 
-@media (max-width: 1200px) {
-  .app-header {
-    flex-wrap: wrap;
-  }
-
-  .header-controls {
-    width: 100%;
-    align-items: flex-start;
-  }
-
-  .header-actions {
-    justify-content: flex-start;
-  }
-
-  .file-status {
-    text-align: left;
-  }
-
-  .workspace {
-    grid-template-columns: 1fr;
-    height: auto;
-    overflow: auto;
-  }
-
-  .toolbar-view {
-    margin-left: 0;
-    justify-content: flex-start;
-  }
-
-  .preview-grid {
-    grid-template-columns: 1fr;
-    grid-auto-rows: auto;
-    height: auto;
-  }
-
-  .preview-with-scrollbar {
-    grid-template-columns: 1fr;
-    height: auto;
-  }
-
-  .preview-with-scrollbar.has-canvas.no-report,
-  .preview-with-scrollbar.has-canvas.has-report {
-    grid-template-columns: 1fr;
-  }
-
-  .shared-scrollbar-panel {
-    display: none;
-  }
-
-  .sidebar {
-    order: -1;
-    overflow: visible;
-  }
-
-  .canvas-panel {
-    min-height: auto;
-  }
-}
-
-@media (max-width: 1200px) {
   .app-shell {
     grid-template-rows: auto auto auto minmax(0, 1fr);
   }
@@ -173,5 +112,57 @@
 
   .preview-with-scrollbar {
     min-width: 0;
+    grid-template-columns: 1fr;
+    height: 100%;
+  }
+
+  .preview-with-scrollbar.has-canvas.no-report {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-with-scrollbar.has-canvas.has-report {
+    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
+  }
+
+  .preview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, 1fr);
+    min-height: 0;
+    height: 100%;
+  }
+
+  .shared-scrollbar-panel {
+    display: none;
+  }
+
+  .sidebar {
+    order: -1;
+    overflow: visible;
+  }
+
+  .canvas-panel {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 500px) {
+  .mobile-view-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-grid {
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    height: auto;
+  }
+
+  .preview-with-scrollbar {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .preview-with-scrollbar.has-canvas.has-report,
+  .preview-with-scrollbar.has-canvas.no-report {
+    grid-template-columns: 1fr;
   }
 }