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,66 @@
+import React, { useEffect } from 'react';
+
+export interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Mobile-only bottom sheet (Phase A). Slides up from the bottom of the
+ * viewport to host one of the existing side-panel components
+ * (BlocksPanel/PagesPanel/LayersPanel/AssetsPanel/GuidedStyles) unchanged,
+ * as the mobile replacement for the desktop fixed left/right panel columns.
+ * See `MobilePanelBar`, which owns which sheet (if any) is open.
+ *
+ * Deliberately NOT a generic replacement for `src/ui/Modal.tsx` (centered
+ * dialog chrome) -- this is anchored to the bottom, sized to ~65dvh, and
+ * has its own drag-handle affordance + internally scrollable body, all of
+ * which Modal doesn't need for its centered use cases.
+ */
+export const BottomSheet: React.FC<BottomSheetProps> = ({ open, onClose, title, children }) => {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="mobile-sheet-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="mobile-sheet" role="dialog" aria-modal="true" aria-label={title}>
+        <div className="mobile-sheet-handle-row">
+          <span className="mobile-sheet-handle" aria-hidden="true" />
+        </div>
+        <div className="mobile-sheet-header">
+          <span className="mobile-sheet-title">{title}</span>
+          <button
+            type="button"
+            className="mobile-sheet-close"
+            onClick={onClose}
+            aria-label={`Close ${title}`}
+          >
+            <i className="fa fa-times" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="mobile-sheet-body">{children}</div>
+      </div>
+    </div>
+  );
+};