feat(builder): mobile-responsive editor chrome (Phase A)

Makes the Craft.js editor usable on phones (≤768px) without touching desktop layout/behavior: a useIsMobile() hook gates a bottom tab bar + sheets (hosting the existing Blocks/Pages/Layers/Assets/Styles panels unchanged) in place of the side panels, a collapsed TopBar with a "..." overflow menu, 44px touch targets, 16px inputs, dvh/safe-area-aware sizing, and small copy/overflow fixes (empty-canvas hint, Templates modal tabs + close button). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-13 06:54:15 -07:00
parent 329a782052
commit 979331b12d
10 changed files with 852 additions and 64 deletions
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { BottomSheet } from './BottomSheet';
+import { BlocksPanel } from '../left/BlocksPanel';
+import { PagesPanel } from '../left/PagesPanel';
+import { LayersPanel } from '../left/LayersPanel';
+import { AssetsPanel } from '../left/AssetsPanel';
+import { GuidedStyles } from '../right/GuidedStyles';
+
+type MobileTab = 'blocks' | 'pages' | 'layers' | 'assets' | 'styles';
+
+const TABS: { id: MobileTab; label: string; icon: string }[] = [
+  { id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
+  { id: 'pages', label: 'Pages', icon: 'fa-file-o' },
+  { id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
+  { id: 'assets', label: 'Assets', icon: 'fa-image' },
+  { id: 'styles', label: 'Styles', icon: 'fa-paint-brush' },
+];
+
+/**
+ * Mobile replacement for the desktop LeftPanel/RightPanel column layout
+ * (Phase A). A fixed bottom tab bar (Blocks/Pages/Layers/Assets/Styles)
+ * toggles a single `BottomSheet` at a time, hosting the SAME panel
+ * component the desktop side panels use -- unchanged, so behavior/state
+ * stays identical, only the chrome around it differs. Tapping the active
+ * tab again, tapping the backdrop, the sheet's close button, or Escape all
+ * close the open sheet.
+ *
+ * "Styles" hosts `GuidedStyles`, which already falls back to the
+ * site-design panel when nothing is selected and switches to the
+ * per-type style panel once something is -- this is the natural place to
+ * edit a tapped element's styling (Phase B deepens the tap-to-select flow;
+ * this component only wires up the sheet, per the Phase A brief).
+ */
+export const MobilePanelBar: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<MobileTab | null>(null);
+
+  const handleTabClick = (tab: MobileTab) => {
+    setActiveTab((current) => (current === tab ? null : tab));
+  };
+
+  const activeLabel = TABS.find((t) => t.id === activeTab)?.label ?? '';
+
+  return (
+    <>
+      <BottomSheet open={activeTab !== null} onClose={() => setActiveTab(null)} title={activeLabel}>
+        {activeTab === 'blocks' && <BlocksPanel />}
+        {activeTab === 'pages' && <PagesPanel />}
+        {activeTab === 'layers' && <LayersPanel />}
+        {activeTab === 'assets' && <AssetsPanel />}
+        {activeTab === 'styles' && <GuidedStyles />}
+      </BottomSheet>
+
+      <nav className="mobile-tab-bar" aria-label="Editor panels">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`mobile-tab-btn${activeTab === tab.id ? ' active' : ''}`}
+            onClick={() => handleTabClick(tab.id)}
+            aria-pressed={activeTab === tab.id}
+          >
+            <i className={`fa ${tab.icon}`} aria-hidden="true" />
+            <span>{tab.label}</span>
+          </button>
+        ))}
+      </nav>
+    </>
+  );
+};