Editor mode model: mobile Fixtures/Plants/Journal/Assistant bar (#99)
On a phone the editor stacked a control column (title, share, season, a 7-chip palette wrapping to 3 rows, journal/history/assistant) ABOVE the canvas, crushing the garden — the point of the app — into a short strip. There was no single "mode" switch: fixtures lived in the palette, plants in a floating focus toolbar, and journal/assistant in the rail. Mobile-first now (#99): the canvas is the whole screen, and a bottom mode bar switches the tools docked beneath it — - Fixtures → the object palette (arm → tap to place) - Plants → the seed tray, once a bed is focused; focusing a bed enters this mode. No bed focused → a "tap a bed, then Plant here" hint. Done planting / Clear ride along. - Journal → opens the journal rail sheet - Assistant → opens the chat rail sheet (hidden with no model configured) A slim mobile top strip keeps the garden name / season / share that lived in the desktop column. Closing a panel rail returns to a canvas mode so the bar reappears; History stays a rail sub-tab (not a fifth mode). Desktop is untouched: the mode bar is md:hidden and the side-column layout stands; `mode` is an inert hint there. Store gains `mode`/`setMode` (reset with the rest of transient state on garden switch). Verified live at 390px (each mode + the select-bed → Plant here → seed-tray flow, canvas now dominant) and 1280px (desktop unchanged). tsc + vitest (92) + build green. DESIGN.md updated. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
This commit is contained in:
@@ -128,7 +128,8 @@ Makefile (cd web && npm run build) → copy dist → CGO_ENABLED
|
||||
React 19 + TypeScript + Vite + Tailwind 4 (`@tailwindcss/vite`), `@tanstack/react-router`, `@tanstack/react-query`, zod for API parsing; dev proxy `/api` → Go server.
|
||||
|
||||
- **Routes:** `/login`, `/register`, `/gardens` (list), `/gardens/:id` (editor, `?focus=objectId`), `/plants` (catalog). Auth guard on the router root via `/auth/me`.
|
||||
- **State:** TanStack Query for all server state (editor keyed on `gardens/:id/full`; optimistic mutations with version-conflict rollback). One small Zustand store for ephemeral editor state only: viewport, selection, focused object, active tool, in-flight drag.
|
||||
- **State:** TanStack Query for all server state (editor keyed on `gardens/:id/full`; optimistic mutations with version-conflict rollback). One small Zustand store for ephemeral editor state only: viewport, selection, focused object, active tool, in-flight drag, and the mobile `mode`.
|
||||
- **Mobile-first editor: one primary mode (#99).** On a phone the canvas is the whole screen; a bottom mode bar switches which tools dock beneath it — **Fixtures** (the object palette), **Plants** (the seed tray, shown once a bed is focused; focusing a bed puts you in this mode), **Journal**, **Assistant** (the last two open the rail sheet; Assistant is hidden with no model). This replaces the old phone layout where a stacked control column shoved the garden into a corner. Desktop keeps its side-column layout (the mode bar is `md:hidden`) and treats `mode` as an inert hint. History stays reachable as a rail sub-tab rather than a fifth primary mode.
|
||||
- **Editor components (`web/src/editor/`):** `GardenCanvas` (svg root + viewport g), `useViewport` (use-gesture pan/zoom/pinch), `ObjectShape`, `PlopMarker` (semantic-zoom branching), `Palette` (drag-to-place object kinds), `EditorRail` (the one side panel), `Inspector`, `HistoryPanel`, `PlantPicker`.
|
||||
- **One rail, tabs inside it.** The inspector, history, journal and assistant all want the same strip of screen; rather than each bolting on its own chrome they are tabs in `EditorRail` — so the canvas is one width instead of a different width per panel, and adding a panel is adding a tab. Selecting an object switches to the Inspector tab automatically, so the rail is never something you operate before you can edit; on a phone the same tabs render in the bottom sheet the inspector already used. Pure geometry helpers (local↔world transforms, unit formatting) in `web/src/lib/geometry.ts`, unit-tested.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user