Add mobile view-only support
Below md width, the app now forces view-only (same canEdit mechanism as a shared view-only diagram) rather than trying to support touch editing: palette and inspector panels hide, editing controls disable, and the top bar collapses to just Diagrams + Account. A bottom tab bar swaps between a full-screen canvas and a full-screen Bill of Materials, since there's no room for both side by side. Canvas gets a few mobile-specific trims too: MiniMap and the interactivity lock button hide whenever canEdit is false (the lock button doesn't actually grant editing either way — nodesDraggable/ nodesConnectable already override it — so leaving it visible would just be misleading), and h-screen is replaced with h-dvh throughout so the layout doesn't get clipped by a mobile browser's collapsing address bar. Also fixes quick-add's anti-stack offset (24px — far smaller than a device node) to actually tile devices apart instead of leaving them nearly overlapping, and logs a deferred "Auto-arrange" layout feature in organized-ideas.md, surfaced by mobile visitors having no way to fix an overlapping diagram themselves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
export type MobileTab = 'diagram' | 'bom'
|
||||
|
||||
/** Bottom nav for the mobile view-only layout (AppShell) — stands in for
|
||||
* the palette + RightPanel that only fit at `md` and up. Just two views:
|
||||
* there's no editing to switch an Inspector tab for on mobile (see
|
||||
* useCanEdit), so "Diagram" and "Bill of Materials" are the whole set. */
|
||||
export default function MobileTabBar({ tab, onChange }: { tab: MobileTab; onChange: (tab: MobileTab) => void }) {
|
||||
return (
|
||||
<nav className="flex h-12 shrink-0 border-t border-slate-200 bg-white md:hidden">
|
||||
<button
|
||||
onClick={() => onChange('diagram')}
|
||||
className={`flex-1 text-xs font-semibold uppercase tracking-wide ${
|
||||
tab === 'diagram' ? 'text-indigo-700' : 'text-slate-400'
|
||||
}`}
|
||||
>
|
||||
Diagram
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onChange('bom')}
|
||||
className={`flex-1 text-xs font-semibold uppercase tracking-wide ${
|
||||
tab === 'bom' ? 'text-indigo-700' : 'text-slate-400'
|
||||
}`}
|
||||
>
|
||||
Bill of Materials
|
||||
</button>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user