From d5709392530b2d6a555e2144153345ba02700032 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 20 Jul 2026 13:20:04 -0400
Subject: [PATCH] =?UTF-8?q?ui:=20capture=20polish=20=E2=80=94=20auto-grow?=
 =?UTF-8?q?=20quick-add=20+=20per-card=20color=20popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

QuickAdd body textarea auto-grows to fit content (min ~3 rows, capped with
scroll) instead of a fixed 3 rows. NoteCard's hover toolbar gains a color
dot that opens a swatch popover to recolor the note in place (outside-click
closes it; listener attached only while open).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
---
 frontend/src/components/NoteCard.vue | 61 +++++++++++++++++++++++++++-
 frontend/src/components/QuickAdd.vue | 14 ++++++-
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index aee9ec9..49ff9a2 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { onBeforeUnmount, ref, watch } from "vue";
 import { useNotesStore } from "../stores/notes";
-import { LABEL_CHIP_CLASSES, NOTE_CARD_CLASSES, type NoteColor } from "../notes/colors";
+import {
+  LABEL_CHIP_CLASSES,
+  NOTE_CARD_CLASSES,
+  NOTE_COLOR_KEYS,
+  NOTE_COLOR_LABELS,
+  NOTE_SWATCH_CLASSES,
+  type NoteColor,
+} from "../notes/colors";
 import type { Note } from "../stores/notes";
 import Icon from "./Icon.vue";
 import LinkedText from "./LinkedText.vue";
@@ -32,6 +39,28 @@ function cardClass(color: NoteColor): string {
 function labelChip(color: string): string {
   return LABEL_CHIP_CLASSES[color as NoteColor] ?? LABEL_CHIP_CLASSES.default;
 }
+
+// Per-card color popover (recolor without opening the editor).
+const colorOpen = ref(false);
+
+function swatch(color: string): string {
+  return NOTE_SWATCH_CLASSES[color as NoteColor] ?? NOTE_SWATCH_CLASSES.default;
+}
+
+function pickColor(color: NoteColor) {
+  colorOpen.value = false;
+  void notes.setColor(props.note.id, color);
+}
+
+function onDocMousedown(e: MouseEvent) {
+  if (colorOpen.value && root.value && !root.value.contains(e.target as Node)) colorOpen.value = false;
+}
+// Only listen for outside clicks while the popover is actually open.
+watch(colorOpen, (open) => {
+  if (open) document.addEventListener("mousedown", onDocMousedown);
+  else document.removeEventListener("mousedown", onDocMousedown);
+});
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
 </script>
 
 <template>
@@ -143,6 +172,18 @@ function labelChip(color: string): string {
         </button>
       </template>
       <template v-else>
+        <button
+          type="button"
+          class="icon-btn"
+          title="Change color"
+          aria-label="Change color"
+          @click.stop="colorOpen = !colorOpen"
+        >
+          <span
+            class="h-4 w-4 rounded-full border border-black/10 dark:border-white/20"
+            :class="swatch(note.color)"
+          ></span>
+        </button>
         <button
           type="button"
           class="icon-btn"
@@ -174,5 +215,21 @@ function labelChip(color: string): string {
         </button>
       </template>
     </div>
+
+    <div
+      v-if="colorOpen"
+      class="absolute right-1.5 top-11 z-20 flex w-40 flex-wrap gap-1.5 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-700 dark:bg-neutral-800"
+    >
+      <button
+        v-for="key in NOTE_COLOR_KEYS"
+        :key="key"
+        type="button"
+        :title="NOTE_COLOR_LABELS[key]"
+        :aria-label="NOTE_COLOR_LABELS[key]"
+        class="h-6 w-6 rounded-full border border-black/10 transition hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+        :class="[NOTE_SWATCH_CLASSES[key], note.color === key ? 'ring-2 ring-brand' : '']"
+        @click.stop="pickColor(key)"
+      />
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/QuickAdd.vue b/frontend/src/components/QuickAdd.vue
index 7792f77..982fda1 100644
--- a/frontend/src/components/QuickAdd.vue
+++ b/frontend/src/components/QuickAdd.vue
@@ -20,6 +20,7 @@ async function open() {
   expanded.value = true;
   await nextTick();
   bodyInput.value?.focus();
+  autoGrow();
 }
 
 function hasContent(): boolean {
@@ -32,6 +33,14 @@ function clearFields() {
   color.value = "default";
 }
 
+// Grow the composer textarea to fit its content (up to a capped max height).
+function autoGrow() {
+  const el = bodyInput.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+
 async function persist(): Promise<void> {
   if (!hasContent()) return;
   saving.value = true;
@@ -57,6 +66,7 @@ async function commitAndContinue() {
   clearFields();
   await nextTick();
   bodyInput.value?.focus();
+  autoGrow();
 }
 
 function onDocumentMousedown(e: MouseEvent) {
@@ -100,9 +110,9 @@ defineExpose({ open });
         <textarea
           ref="bodyInput"
           v-model="body"
-          rows="3"
           placeholder="Take a note…    (Shift+Enter saves &amp; starts a new one)"
-          class="w-full resize-none bg-transparent px-1 text-sm outline-none placeholder:text-neutral-400"
+          class="max-h-64 min-h-[4.5rem] w-full resize-none overflow-y-auto bg-transparent px-1 text-sm outline-none placeholder:text-neutral-400"
+          @input="autoGrow"
           @keydown.enter.shift.prevent="commitAndContinue"
           @keydown.esc="commit"
         />