UI revamp: SF Symbol icons, top-center dock, board settings, adaptive ink & spotlight collaboration

[pedrobritx]

Summary

A full HIG-inspired UI revamp across six commits (one per area, each leaving the app working):

1. SF Symbol icon system

• All UI icons replaced with the supplied SF Symbol artwork, rendered as CSS mask-image spans tinted by currentColor — pixel-faithful SF look that adapts to theme/hover/active states behind the unchanged <Icon name/> API.
• Hand-drawn SVGs remain only where no SF glyph exists (grip, sticky, shapes combo, rounded rect, elbow arrow, grid pickers), plus per-icon optical-scale corrections for SF exports with uneven padding.

2. Tools dock

• Defaults to top-center (still draggable + persisted; double-click grip recenters).
• New order: hand · select · pen · highlighter · eraser · text · sticky · shapes · color · insert media.
• New insert-media button: import images/PDFs/audio, embed YouTube/Google Drive (shared EmbedDialog with the app menu).
• Popovers resolve placement automatically (placement="auto") from the dock's on-screen position — they open downward at the top, flip upward when the dock is dragged low, with a mirrored speech-bubble tail.

3. Board settings & menu reorg

• Board-synced background presets (Default / Paper Sand / Grey / Light Blue / Light Green, each with light+dark variants) and grid styles (dotted / squared / ruled / plain), stored in a Yjs settings map — synced to collaborators, persisted via IndexedDB/autosave/snapshots, intentionally outside the undo scope.
• App menu reorganized into HIG sections: File (incl. Copy share link), Edit, View (zoom, appearance, background swatches, grid picker, collaborator-cursor toggle), Arrange.
• Text & sticky shapes gain a synced align field with left/center/right controls in the selection inspector; the edit overlay matches.

4. Adaptive ink

• Near-neutral ink (pen strokes, text, outlines, lines/arrows, and their in-flight previews) flips between near-black and near-white at render time based on the effective paper luminance — like Apple Freeform. Stored colors untouched; chromatic inks, highlighters, fills, stickies and PDF exports keep authored colors.

5. Collaboration bar & spotlight (FigJam-inspired)

• Top-right bar: peer avatar stack (click to follow), Spotlight toggle, share popover (copy link + owner public/private switch, absorbing the old BoardAccessIndicator).
• Presenters broadcast viewport centre+scale via awareness (10 Hz); peers auto-follow with a smooth RAF lerp and a "Following — tap to stop" pill. Manual pan/zoom breaks follow and suppresses re-grab until the presenter re-toggles.

6. Motion polish

• Popovers scale-fade toward their anchor (180 ms ease-out, direction-aware), dock/pill entrances, focus-visible rings, full prefers-reduced-motion support.

Verification

Driven live with Playwright against pnpm dev (screenshots in session):

• ✅ Dock top-center with SF icons in the new order; active tool tints white-on-accent.
• ✅ Shapes/import popovers open below the top dock; flip above after dragging the dock to the bottom; double-click grip recenters.
• ✅ Menu sections File/Edit/View/Arrange with 5 background swatches + 4 grid styles.
• ✅ Paper Sand + squared grid render; near-black stroke flips to near-white in dark mode; settings + stroke + theme survive reload (IndexedDB).
• ✅ Collab bar top-right with share → Copy link (local-only mode reduces to share, as designed).
• pnpm typecheck and pnpm build green (icon PNGs emitted/inlined correctly).

Not exercised live: multi-client spotlight/follow (needs a reachable Supabase Realtime backend; the sandbox blocks TLS). The flow is guarded for local-only mode and worth a two-browser smoke test on a deployed environment.

Notes

• PDF export intentionally keeps authored colors (renders on its own surface).
• Native video file upload remains unsupported by the import pipeline; the insert menu routes video through YouTube/Drive embeds.

https://claude.ai/code/session_014knToCSeCGKvjWxJjCopQ6

---

Generated by Claude Code