Skip to content

feat(M7): FigJam-style dock, app menu, sticky notes & slider fix#12

Merged
pedrobritx merged 1 commit into
mainfrom
claude/clever-bell-hPgOK
May 30, 2026
Merged

feat(M7): FigJam-style dock, app menu, sticky notes & slider fix#12
pedrobritx merged 1 commit into
mainfrom
claude/clever-bell-hPgOK

Conversation

@pedrobritx
Copy link
Copy Markdown
Owner

Why

The M7 board UI mirrored iOS too closely and had rough edges. This reworks it to feel more like FigJam — intuitive and aesthetically pleasing — addressing every point raised:

  1. Opacity slider clipped its thumb — half the knob faded into the panel at 0% / 100%.
  2. Too many drawing tools in the dock (6 PencilKit instruments).
  3. No app menu for File/Edit/View/Object, pages, or theme.
  4. Dock wasn't collapsible or draggable.
  5. General aesthetics — less iOS, more FigJam.

What changed

1. Slider fix

The knob now lives in a .slider__rail outside the clipped track and its travel is inset by its radius, so it stays fully visible at both ends. (packages/ui/src/components/Slider.tsx, styles.css)

2. FigJam-style dock & tools

Flat icon toolbar: Select · Hand · Pen · Eraser · Highlighter · Text · Shapes ▾ · Sticky · Color, with an accent-pill active state and a new flat SVG icon set.

  • Pen popover holds style (pen/fineliner/pencil/marker) + width + opacity.
  • Eraser gains an Area mode that trims/splits vector strokes under the tip (object mode unchanged).
  • Shapes flyout adds rounded rectangle, diamond, triangle and curved/elbow arrows alongside the existing rect/ellipse/line/arrow (new YPolygon kind, YRect.radius, YArrow.variant).
  • Sticky notes — new YSticky shape, tool, renderer and inline text editing (reuses the text overlay).
  • Hand tool for panning.

3. Collapsible app menu (top-left)

File / Edit / View / Object wired to real actions — undo/redo, zoom in/out/reset, z-order, lock, delete, select-all — plus the pages list (rename / reorder / add / delete) and the light/dark toggle. Canvas-resident commands are exposed via a small command store so the menu can drive them.

4. Collapsible + draggable dock

Drag by the grip (double-click to re-center), collapse to a pill; both persisted to localStorage.

5. Aesthetics

Default to the light theme, flat icons throughout (dock, menu, color picker, pages).

Verification

  • pnpm -r typecheck and pnpm build pass.
  • Drove the app with Playwright (headless Chromium): board, color picker (slider at 100% & mid — thumb fully visible), app menu with correct disabled states, shapes flyout, drawing a diamond, creating/editing/committing a sticky note, area-erasing through a pen stroke (splits it), a curved arrow, dark mode, the pages popover, collapsing and dragging the dock — all with zero console errors.

Notes

  • PageNavigator and ThemeToggle were removed; their functionality moved into the app menu.
  • The dormant TransformLayer (resize handles) is unchanged; new box shapes use the existing dashed selection overlay and move via SelectTool.

Generated by Claude Code

Reworks the M7 board UI to be more intuitive and less iOS-like:

- Fix opacity-slider thumb clipping: the knob now lives in a rail
  outside the clipped track and its travel is inset by its radius, so
  it stays fully visible at 0% and 100%.
- Replace the 6 PencilKit instruments with a flat FigJam-style dock:
  select, hand (pan), pen (style/width/opacity popover), eraser,
  highlighter, text, shapes flyout, sticky note and color. Flat SVG
  icon set with an accent-pill active state.
- Eraser gains an Area mode that trims/splits vector strokes under the
  tip (object mode unchanged).
- Shapes flyout adds rounded rectangle, diamond, triangle and
  curved/elbow arrows alongside the existing shapes.
- Sticky notes: new shape type, tool, renderer and inline text editing.
- New collapsible top-left app menu (File/Edit/View/Object) wired to
  undo/redo, zoom, z-order, lock, delete and select-all, plus the pages
  list (rename/reorder/add/delete) and the light/dark toggle. Commands
  that live in CanvasStage are exposed via a small command store.
- Dock is now collapsible and draggable (persisted to localStorage).
- Default to the light theme.

https://claude.ai/code/session_0173wwKpuWJ2LM49cc5g4HWE
@pedrobritx pedrobritx marked this pull request as ready for review May 30, 2026 16:27
@pedrobritx pedrobritx merged commit 8652341 into main May 30, 2026
4 checks passed
@pedrobritx pedrobritx deleted the claude/clever-bell-hPgOK branch May 30, 2026 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants