aarbitandClaude Sonnet 5
7e37dc5676
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
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
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>
|
|
)
|
|
}
|