feat: sticky note selection UI and sidebar panel

src/Drawd.jsx

@@ -33,6 +33,7 @@ import { BatchSelectionBar } from "./components/BatchSelectionBar";
 import { SelectionOverlay } from "./components/SelectionOverlay";
 import { ToolBar } from "./components/ToolBar";
 import { StickyNote } from "./components/StickyNote";
+import { StickyNoteSidebar } from "./components/StickyNoteSidebar";
 import { ScreenGroup } from "./components/ScreenGroup";
 import { generateId } from "./utils/generateId";
 
@@ -466,6 +467,7 @@ export default function Drawd() {
 
   // ── Derived values ──────────────────────────────────────────────────────────────────
   const selectedScreenData = screens.find((s) => s.id === selectedScreen);
+  const selectedStickyNoteData = stickyNotes.find((n) => n.id === selectedStickyNote);
 
   const previewLine = connecting
     ? { fromScreenId: connecting.fromScreenId, toX: connecting.mouseX, toY: connecting.mouseY }
@@ -597,7 +599,7 @@ export default function Drawd() {
                 key={screen.id}
                 screen={screen}
                 selected={selectedScreen === screen.id}
-                onSelect={(id) => { clearSelection(); setSelectedScreen(id); }}
+                onSelect={(id) => { clearSelection(); setSelectedScreen(id); setSelectedStickyNote(null); }}
                 onDragStart={onDragStart}
                 isSpaceHeld={isSpaceHeld}
                 onAddHotspot={addHotspotViaConnect}
@@ -642,6 +644,14 @@ export default function Drawd() {
                 zoom={zoom}
                 onUpdate={updateStickyNote}
                 onDelete={deleteStickyNote}
+                selected={selectedStickyNote === note.id}
+                onSelect={(id) => {
+                  setSelectedStickyNote(id);
+                  setSelectedScreen(null);
+                  setSelectedConnection(null);
+                  setHotspotInteraction(null);
+                  setSelectedScreenGroup(null);
+                }}
                 isMultiSelected={canvasSelection.some((i) => i.type === "sticky" && i.id === note.id)}
                 onToggleSelect={toggleSelection}
                 onMultiDragStart={onMultiDragStart}
@@ -848,6 +858,15 @@ export default function Drawd() {
             onUpdateStatus={updateScreenStatus}
           />
         )}
+
+        {selectedStickyNoteData && (
+          <StickyNoteSidebar
+            note={selectedStickyNoteData}
+            onUpdate={updateStickyNote}
+            onDelete={deleteStickyNote}
+            onClose={() => setSelectedStickyNote(null)}
+          />
+        )}
       </div>
 
       <input ref={fileInputRef} type="file" accept="image/*" multiple style={{ display: "none" }} onChange={onFileChange} />

src/components/StickyNote.jsx

@@ -10,7 +10,7 @@ const NOTE_COLORS = {
 
 const COLOR_OPTIONS = ["yellow", "blue", "red", "green"];
 
-export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMultiSelected, onToggleSelect, onMultiDragStart }) {
+export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMultiSelected, onToggleSelect, onMultiDragStart, selected, onSelect }) {
   const [isEditing, setIsEditing] = useState(!note.content);
   const [showMenu, setShowMenu] = useState(false);
   const textareaRef = useRef(null);
@@ -29,8 +29,9 @@ export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMult
       onMultiDragStart?.(e);
       return;
     }
+    onSelect?.(note.id);
     onDragStart?.(e, note.id);
-  }, [note.id, onDragStart, isMultiSelected, onMultiDragStart, onToggleSelect]);
+  }, [note.id, onDragStart, isMultiSelected, onMultiDragStart, onToggleSelect, onSelect]);
 
   return (
     <div
@@ -44,10 +45,14 @@ export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMult
         background: colors.bg,
         border: isMultiSelected
           ? `2px dashed ${COLORS.warning}`
-          : `1.5px solid ${colors.border}`,
+          : selected
+            ? `2px solid ${COLORS.accent}`
+            : `1.5px solid ${colors.border}`,
         boxShadow: isMultiSelected
           ? `0 0 16px rgba(229,192,123,0.35), 0 4px 20px rgba(0,0,0,0.5)`
-          : `0 4px 20px rgba(0,0,0,0.5), 0 0 12px ${colors.border}22`,
+          : selected
+            ? `0 0 30px ${COLORS.accentGlow}, 0 8px 32px rgba(0,0,0,0.5)`
+            : `0 4px 20px rgba(0,0,0,0.5), 0 0 12px ${colors.border}22`,
         borderRadius: 10,
         cursor: "grab",
         userSelect: "none",
@@ -61,8 +66,8 @@ export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMult
       <div
         style={{
           padding: "6px 10px",
-          background: `${colors.border}22`,
-          borderBottom: `1px solid ${colors.border}33`,
+          background: selected ? `${COLORS.accent}15` : `${colors.border}22`,
+          borderBottom: `1px solid ${selected ? `${COLORS.accent}33` : `${colors.border}33`}`,
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
@@ -91,7 +96,7 @@ export function StickyNote({ note, zoom, onUpdate, onDelete, onDragStart, isMult
         </div>
 
         {note.author && (
-          <span style={{ fontSize: 9, color: colors.text, opacity: 0.6, fontFamily: FONTS.mono, flex: 1, textAlign: "center" }}>
+          <span style={{ fontSize: 9, color: selected ? COLORS.accentLight : colors.text, opacity: 0.6, fontFamily: FONTS.mono, flex: 1, textAlign: "center" }}>
             {note.author}
           </span>
         )}

src/components/StickyNoteSidebar.jsx

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { COLORS, FONTS, styles } from "../styles/theme";
+import { SIDEBAR_WIDTH } from "../constants";
+
+const NOTE_COLORS = {
+  yellow: { bg: "#2d2a00", border: "#f0c040", text: "#f5e17a" },
+  blue:   { bg: "#001a2d", border: "#4da6ff", text: "#a8d4ff" },
+  red:    { bg: "#2d0000", border: "#ff6b6b", text: "#ffb3b3" },
+  green:  { bg: "#002d0a", border: "#00d27d", text: "#7fffb8" },
+};
+
+const COLOR_OPTIONS = ["yellow", "blue", "red", "green"];
+
+export function StickyNoteSidebar({ note, onUpdate, onDelete, onClose }) {
+  const [draftAuthor, setDraftAuthor] = useState(note.author || "");
+  const [noteId, setNoteId] = useState(note.id);
+
+  // Reset draft when note changes
+  if (note.id !== noteId) {
+    setDraftAuthor(note.author || "");
+    setNoteId(note.id);
+  }
+
+  return (
+    <div
+      style={{
+        width: SIDEBAR_WIDTH,
+        background: COLORS.surface,
+        borderLeft: `1px solid ${COLORS.border}`,
+        overflow: "auto",
+        flexShrink: 0,
+        padding: 18,
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+      }}
+    >
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <h4
+          style={{
+            margin: 0,
+            color: COLORS.text,
+            fontFamily: FONTS.heading,
+            fontSize: 14,
+            fontWeight: 600,
+          }}
+        >
+          Sticky Note
+        </h4>
+        <button
+          onClick={onClose}
+          style={{
+            background: "none",
+            border: "none",
+            color: COLORS.textDim,
+            cursor: "pointer",
+            fontSize: 16,
+          }}
+        >
+          &#10005;
+        </button>
+      </div>
+
+      {/* Color picker */}
+      <div>
+        <div
+          style={{
+            fontSize: 11,
+            fontFamily: FONTS.mono,
+            color: COLORS.textMuted,
+            marginBottom: 8,
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+          }}
+        >
+          Color
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          {COLOR_OPTIONS.map((c) => {
+            const isActive = (note.color || "yellow") === c;
+            return (
+              <button
+                key={c}
+                onClick={() => onUpdate(note.id, { color: c })}
+                title={c}
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: "50%",
+                  background: NOTE_COLORS[c].bg,
+                  border: isActive
+                    ? `2px solid ${NOTE_COLORS[c].border}`
+                    : `2px solid transparent`,
+                  cursor: "pointer",
+                  boxShadow: isActive ? `0 0 0 1px ${NOTE_COLORS[c].border}` : "none",
+                  outline: "none",
+                  position: "relative",
+                }}
+              >
+                <span
+                  style={{
+                    display: "block",
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: NOTE_COLORS[c].border,
+                    margin: "auto",
+                  }}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Author */}
+      <div>
+        <label
+          style={{
+            fontSize: 11,
+            fontFamily: FONTS.mono,
+            color: COLORS.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+          }}
+        >
+          Author
+        </label>
+        <input
+          type="text"
+          value={draftAuthor}
+          onChange={(e) => setDraftAuthor(e.target.value)}
+          onBlur={() => onUpdate(note.id, { author: draftAuthor })}
+          placeholder="e.g. Jane"
+          style={{ ...styles.input }}
+        />
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1 }}>
+        <label
+          style={{
+            fontSize: 11,
+            fontFamily: FONTS.mono,
+            color: COLORS.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+          }}
+        >
+          Content
+        </label>
+        <textarea
+          value={note.content}
+          onChange={(e) => onUpdate(note.id, { content: e.target.value })}
+          placeholder="Write a note…"
+          rows={6}
+          style={{
+            ...styles.input,
+            resize: "vertical",
+            lineHeight: 1.6,
+            minHeight: 100,
+          }}
+        />
+      </div>
+
+      {/* Delete */}
+      <button
+        onClick={() => { onDelete(note.id); onClose(); }}
+        style={{ ...styles.btnDanger, width: "100%", textAlign: "center" }}
+      >
+        Delete Note
+      </button>
+    </div>
+  );
+}