From fc82d0fce1de362b6365c8ccd4b97fd8b17a8409 Mon Sep 17 00:00:00 2001
From: TroopJostle <TroopJostle@users.noreply.github.com>
Date: Sat, 5 Sep 2026 15:41:06 +0400
Subject: [PATCH] fix(notes): add close button to sticky notes

---
 .../src/features/notes/StickyNoteCard.tsx        | 16 +++++++++++++++-
 .../src/features/workspace/WorkspaceCanvas.tsx   |  1 +
 src/renderer/src/styles/app.css                  |  4 +++-
 tests/settings-ui.test.mjs                       | 14 ++++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/features/notes/StickyNoteCard.tsx b/src/renderer/src/features/notes/StickyNoteCard.tsx
index e0422ea..746624e 100644
--- a/src/renderer/src/features/notes/StickyNoteCard.tsx
+++ b/src/renderer/src/features/notes/StickyNoteCard.tsx
@@ -19,6 +19,7 @@ interface StickyNoteCardProps {
   snapTargets: readonly SessionBounds[];
   onBoundsChange(id: string, bounds: SessionBounds): void;
   onTextChange(id: string, text: string): void;
+  onClose(id: string): void;
 }
 
 interface DragState {
@@ -43,7 +44,8 @@ export function StickyNoteCard({
   snapEnabled,
   snapTargets,
   onBoundsChange,
-  onTextChange
+  onTextChange,
+  onClose
 }: StickyNoteCardProps): React.JSX.Element {
   const editor = useRef<HTMLTextAreaElement>(null);
   const dragState = useRef<DragState | null>(null);
@@ -216,6 +218,18 @@ export function StickyNoteCard({
         onPointerCancel={endDrag}
       >
         <span><UiIcon name="sticky-note" size="1.15em" />{t(locale, "stickyNote")}</span>
+        <button
+          className="sticky-note-card__close"
+          type="button"
+          onClick={() => {
+            saveText(text);
+            onClose(note.id);
+          }}
+          title={t(locale, "close")}
+          aria-label={t(locale, "close")}
+        >
+          <UiIcon name="close" size="1.23em" />
+        </button>
       </header>
       <textarea
         ref={editor}
diff --git a/src/renderer/src/features/workspace/WorkspaceCanvas.tsx b/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
index ede03e2..3d5ecb0 100644
--- a/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
+++ b/src/renderer/src/features/workspace/WorkspaceCanvas.tsx
@@ -639,6 +639,7 @@ export function WorkspaceCanvas(props: WorkspaceCanvasProps): React.JSX.Element
               ]}
               onBoundsChange={onStickyNoteBoundsChange}
               onTextChange={onStickyNoteTextChange}
+              onClose={onDeleteStickyNote}
             />
           ))}
         </div>
diff --git a/src/renderer/src/styles/app.css b/src/renderer/src/styles/app.css
index 1bac6e3..43fac13 100644
--- a/src/renderer/src/styles/app.css
+++ b/src/renderer/src/styles/app.css
@@ -261,8 +261,10 @@ button { border: 0; }
 
 .sticky-note-card { position: absolute; left: 0; top: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--yellow) 62%, var(--surface)); border-radius: 14px; color: var(--text-dark); background: var(--yellow); box-shadow: var(--shadow-lg); font-size: calc(13px * var(--ui-scale, 1)); }
 .sticky-note-card:focus-within { box-shadow: 0 0 0 3px var(--primary), var(--shadow-lg); }
-.sticky-note-card__header { height: 3.15em; padding: 0 .9em; display: flex; align-items: center; color: var(--text-dark); background: color-mix(in srgb, var(--yellow) 76%, var(--secondary)); cursor: move; touch-action: none; }
+.sticky-note-card__header { height: 3.15em; padding: 0 .5em 0 .9em; display: flex; align-items: center; justify-content: space-between; gap: .75em; color: var(--text-dark); background: color-mix(in srgb, var(--yellow) 76%, var(--secondary)); cursor: move; touch-action: none; }
 .sticky-note-card__header > span { display: flex; align-items: center; gap: .55em; font: 850 .8em/1 var(--font-mono); text-transform: uppercase; }
+.sticky-note-card__close { width: 2.15em; height: 2.15em; flex: 0 0 auto; display: grid; place-items: center; border-radius: .54em; color: color-mix(in srgb, var(--text-dark) 72%, transparent); background: color-mix(in srgb, var(--text-dark) 6%, transparent); cursor: pointer; transition: color .15s ease, background .15s ease; }
+.sticky-note-card__close:hover, .sticky-note-card__close:focus-visible { color: white; background: var(--danger); }
 .sticky-note-card__editor { width: 100%; height: calc(100% - 3.15em); padding: 1em; resize: none; border: 0; outline: 0; color: var(--text-dark); background: transparent; font: 700 1em/1.5 "Trebuchet MS", "Segoe UI", sans-serif; user-select: text; }
 .sticky-note-card__editor::placeholder { color: color-mix(in srgb, var(--text-dark) 58%, transparent); }
 .home-editor-toolbar { position: absolute; left: 50%; top: 18px; z-index: 500; min-height: 48px; padding: 5px 6px 5px 15px; display: flex; align-items: center; gap: 8px; border-radius: 14px; color: white; background: rgba(40,41,52,.96); box-shadow: var(--shadow-md); transform: translateX(-50%); }
diff --git a/tests/settings-ui.test.mjs b/tests/settings-ui.test.mjs
index 2235b6f..fcc4d82 100644
--- a/tests/settings-ui.test.mjs
+++ b/tests/settings-ui.test.mjs
@@ -134,6 +134,20 @@ test("one context dispatcher preserves native menus and routes regions and notes
   assert.match(workspace, /onCreateStickyNote/);
 });
 
+test("sticky notes expose a top-right close button wired to deletion", async () => {
+  const [workspace, noteCard, styles] = await Promise.all([
+    readFile(workspacePath, "utf8"),
+    readFile(new URL("../src/renderer/src/features/notes/StickyNoteCard.tsx", import.meta.url), "utf8"),
+    readFile(appStylesPath, "utf8")
+  ]);
+  assert.match(workspace, /onClose=\{onDeleteStickyNote\}/);
+  assert.match(noteCard, /className="sticky-note-card__close"/);
+  assert.match(noteCard, /onClose\(note\.id\)/);
+  assert.match(noteCard, /aria-label=\{t\(locale, "close"\)\}/);
+  assert.match(styles, /\.sticky-note-card__header \{[^}]*justify-content: space-between/);
+  assert.match(styles, /\.sticky-note-card__close \{/);
+});
+
 test("canvas windows use click-to-front stacking and Browser occlusion", async () => {
   const workspace = await readFile(workspacePath, "utf8");
   assert.match(workspace, /closest<HTMLElement>\("\[data-canvas-layer-id\]"\)/);