Skip to content

feat: sticky note selection UI and sidebar panel - #4

Merged
trmquang93 merged 1 commit into
mainfrom
feature/sticky-note-selection-ui
Mar 15, 2026
Merged

trmquang93 merged 1 commit into
mainfrom
feature/sticky-note-selection-ui

Conversation

@trmquang93

Copy link
Copy Markdown
Collaborator

Summary

  • Blue accent selection state — clicking a sticky note now highlights it with a 2px solid #61afef border, blue glow shadow, and tinted header, matching the existing ScreenNode selection visual language
  • StickyNoteSidebar panel — a new right-side panel appears on note selection with a color picker, author input, content textarea, and delete button
  • Mutual exclusion — selecting a sticky note clears screen/connection/hotspot/group selection and vice versa; click-away, Escape, and Delete keyboard handling were already in place and continue to work

Files Changed

File Change
src/components/StickyNote.jsx Added selected/onSelect props; visual state cascade (multi > single > default)
src/components/StickyNoteSidebar.jsx New — sidebar panel for sticky note details
src/Drawd.jsx Wired selected/onSelect; render StickyNoteSidebar; mutual-exclusion clear on screen select

Test plan

  • Click a sticky note — blue accent border, glow, and tinted header appear
  • Sidebar opens with correct note color, author, and content
  • Edit author/color/content in sidebar — note updates on canvas
  • Shift+click shows amber dashed border (multi-select priority over single-select)
  • Click a screen — sticky note deselects; click a sticky note — screen deselects
  • Click empty canvas — selection clears, sidebar closes
  • Press Delete with sticky note selected — note is removed
  • Press Escape — selection clears
  • npm test — 229 tests pass
  • npx vite build — clean build

- StickyNote accepts a `selected` prop; when true, renders blue accent
  border, glow shadow, and tinted header — matching ScreenNode's visual
  selection language
- Click handler calls onSelect before drag so single-click selects the
  note without requiring a separate click
- New StickyNoteSidebar panel (mirroring Sidebar.jsx structure) shows
  color picker, author input, content textarea, and delete button for
  the selected note
- Drawd wires selectedStickyNote state to the selected prop; selecting a
  sticky note clears screen/connection/hotspot/group selection and vice
  versa; click-away and Escape/Delete keyboard handling already existed
@vercel

vercel Bot commented Mar 15, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flow-forge Ready Ready Preview, Comment Mar 15, 2026 11:06pm

@trmquang93
trmquang93 merged commit 05ad9b0 into main Mar 15, 2026
3 checks passed
@github-actions
github-actions Bot deleted the feature/sticky-note-selection-ui branch March 15, 2026 23:10

This branch was successfully deployed

1 active deployment
Preview — fa5330a6 Deployed Mar 15, 2026 by vercel[bot]
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.

1 participant