Editor mode model + mobile layout restructure (Fixtures · Plants · Journal · Assistant) #99

Closed
opened 2026-07-22 04:36:26 +00:00 by steve · 0 comments
Owner

Part of #96. This is the backbone of the epic. Do it before the Plants-mode and inspector issues.

Problem. The editor's four core activities live on three unrelated surfaces: the object palette (left column), a separate focus-mode toolbar + seed tray (place plants), and the rail tabs (journal/history/assistant/inspector). On mobile the left column stacks above the canvas and eats ~55% of the screen (see epic screenshots). There is no single, obvious mode switch.

Do — introduce one primary mode.

  • Add a mode to the editor store (editor/store.ts): fixtures | plants | journal | assistant. It supersedes the ad-hoc railTab + palette-visibility + focus juggling as the top-level state.
  • Mobile layout: the canvas is the persistent full-height background (fills 100dvh under a slim top bar). Tools dock in a compact bottom area above a mode switch bar (segmented control / tabs: Fixtures · Plants · Journal · Assistant). The mode bar is always visible — this is the "easy toggle" the epic asks for.
    • Slim top bar: ← Gardens, garden name (truncate), Season, and an overflow for Share / Fit / View-only.
    • Fixtures mode → the object-kind chips dock in the bottom tool bar (arm → tap canvas to place).
    • Plants mode → the plant tools (recent strip + picker + fill toggle) — built out in the Plants-mode issue; here just wire the mode + an empty-state ("tap a bed to plant in it" when no plantable object is focused).
    • Journal mode → the journal composer/list as the bottom sheet.
    • Assistant mode → the chat as the bottom sheet (hide the tab when capabilities.agent is false).
  • Desktop (md:+): the same mode drives a left or top segmented control with tools in a side rail — keep desktop at least as good as today. Mobile-first, so design the phone version first.
  • Reconcile with the app bottom nav from #98 (editor owns the bottom bar on its route).
  • This is the big GardenEditorPage.tsx (541-line god component) refactor — pull mode routing, the keydown effects, and layout into smaller pieces as you go, but keep it behavior-preserving where not explicitly changing UX.

Keep working: selection still opens the inspector (redesigned separately in the inspector issue), Escape peel-back, ?focus= URL sync, season banner, view-only mode, keyboard object nav.

Acceptance.

  • At 390px the garden canvas is the dominant element; switching Fixtures/Plants/Journal/Assistant is one tap on an always-visible bar.
  • Placing a bed (Fixtures) and planting into it (Plants) are each reachable without the old "select → Inspector → Plant here → focus toolbar" detour being the only path.
  • Desktop editor still works and looks intentional.
  • DESIGN.md editor section updated to describe the mode model.

Product note for the deferred-questions list: this proposes replacing "focus a bed, then a floating toolbar" with "Plants mode + a selected bed." Confirm the interaction reads right on a real phone at the end.

Part of #96. **This is the backbone of the epic.** Do it before the Plants-mode and inspector issues. **Problem.** The editor's four core activities live on three unrelated surfaces: the object **palette** (left column), a separate focus-mode **toolbar + seed tray** (place plants), and the **rail tabs** (journal/history/assistant/inspector). On mobile the left column stacks above the canvas and eats ~55% of the screen (see epic screenshots). There is no single, obvious mode switch. **Do — introduce one primary mode.** - Add a `mode` to the editor store (`editor/store.ts`): `fixtures | plants | journal | assistant`. It supersedes the ad-hoc `railTab` + palette-visibility + focus juggling as the top-level state. - **Mobile layout:** the **canvas is the persistent full-height background** (fills `100dvh` under a slim top bar). Tools dock in a **compact bottom area** above a **mode switch bar** (segmented control / tabs: Fixtures · Plants · Journal · Assistant). The mode bar is always visible — this is the "easy toggle" the epic asks for. - Slim top bar: **← Gardens**, garden name (truncate), Season, and an overflow for Share / Fit / View-only. - **Fixtures** mode → the object-kind chips dock in the bottom tool bar (arm → tap canvas to place). - **Plants** mode → the plant tools (recent strip + picker + fill toggle) — built out in the Plants-mode issue; here just wire the mode + an empty-state ("tap a bed to plant in it" when no plantable object is focused). - **Journal** mode → the journal composer/list as the bottom sheet. - **Assistant** mode → the chat as the bottom sheet (hide the tab when `capabilities.agent` is false). - **Desktop (`md:+`):** the same `mode` drives a left or top segmented control with tools in a side rail — keep desktop at least as good as today. Mobile-first, so design the phone version first. - Reconcile with the app bottom nav from #98 (editor owns the bottom bar on its route). - This is the big `GardenEditorPage.tsx` (541-line god component) refactor — pull mode routing, the keydown effects, and layout into smaller pieces as you go, but keep it behavior-preserving where not explicitly changing UX. **Keep working:** selection still opens the inspector (redesigned separately in the inspector issue), Escape peel-back, `?focus=` URL sync, season banner, view-only mode, keyboard object nav. **Acceptance.** - At 390px the garden canvas is the dominant element; switching Fixtures/Plants/Journal/Assistant is one tap on an always-visible bar. - Placing a bed (Fixtures) and planting into it (Plants) are each reachable without the old "select → Inspector → Plant here → focus toolbar" detour being the *only* path. - Desktop editor still works and looks intentional. - DESIGN.md editor section updated to describe the mode model. Product note for the deferred-questions list: this proposes replacing "focus a bed, then a floating toolbar" with "Plants mode + a selected bed." Confirm the interaction reads right on a real phone at the end.
steve added the frontenddrawing labels 2026-07-22 04:36:26 +00:00
steve closed this issue 2026-07-22 05:32:47 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: steve/pansy#99