Workspace UI overhaul: rail note panel, split task detail, project goal header

- WorkspaceNoteEditor: replace toggling list/editor views with always-visible
  left rail (155px) showing note list alongside editor pane; persist last-open
  note per project in localStorage (workspace_note_{projectId})
- WorkspaceTaskPanel: add priority dot + due date on task rows; replace full
  overlay detail with bottom-split (44% list / 56% detail); close button
  replaces back nav; active row highlighted; fade transition
- WorkspaceView: show project goal in header instead of 'Workspace'; non-equal
  panel widths (0.8fr / 1.1fr / 1.1fr); empty chat quick-action chips (Project
  status / New note / Add tasks); prefill() helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/WorkspaceNoteEditor.vue

@@ -28,23 +28,18 @@ interface NoteItem {
 const toast = useToastStore();
 const notesStore = useNotesStore();
 
-// View state: "list" or "editor"
-const view = ref<"list" | "editor">("list");
-
 // List state
 const projectNotes = ref<NoteItem[]>([]);
 const listLoading = ref(false);
-const deletingId = ref<number | null>(null);   // confirming delete for this id
-const pendingDelete = ref<number | null>(null); // mid-deletion
+const deletingId = ref<number | null>(null);
+const pendingDelete = ref<number | null>(null);
 const searchQuery = ref("");
 
 const filteredNotes = computed(() => {
   const q = searchQuery.value.trim().toLowerCase();
   if (!q) return projectNotes.value;
   return projectNotes.value.filter(
-    (n) =>
-      n.title.toLowerCase().includes(q) ||
-      n.tags?.some((t) => t.toLowerCase().includes(q))
+    (n) => n.title.toLowerCase().includes(q) || n.tags?.some((t) => t.toLowerCase().includes(q))
   );
 });
 
@@ -72,6 +67,8 @@ const newNoteTitle = ref("");
 const creatingNote = ref(false);
 const newNoteTitleRef = ref<HTMLInputElement | null>(null);
 
+function _noteKey(pid: number) { return `workspace_note_${pid}`; }
+
 async function startNewNote() {
   showNewNoteInput.value = true;
   newNoteTitle.value = "";
@@ -104,7 +101,7 @@ async function createNote() {
   }
 }
 
-// TipTap editor ref (for MarkdownToolbar)
+// TipTap editor ref
 const titleRef = ref<HTMLInputElement | null>(null);
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const tiptapEditor = computed<Editor | null>(() =>
@@ -184,7 +181,7 @@ async function openNote(id: number) {
     dirty.value = false;
     tagSuggestions.dismissTagSuggestions();
     linkSuggestions.value = [];
-    view.value = "editor";
+    localStorage.setItem(_noteKey(props.projectId), String(id));
     fetchLinkSuggestions();
     emit("note-loaded", note.id);
   } catch {
@@ -202,7 +199,6 @@ async function saveNote() {
       tags: noteTags.value,
     });
     dirty.value = false;
-    // Refresh updated_at in the list
     const idx = projectNotes.value.findIndex((n) => n.id === editingId.value);
     if (idx !== -1) {
       projectNotes.value[idx] = {
@@ -211,7 +207,6 @@ async function saveNote() {
         tags: noteTags.value,
         updated_at: new Date().toISOString(),
       };
-      // Re-sort by updated_at
       projectNotes.value.sort((a, b) =>
         new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
       );
@@ -223,16 +218,9 @@ async function saveNote() {
   }
 }
 
-function backToList() {
-  view.value = "list";
-  deletingId.value = null;
-  searchQuery.value = "";
-}
-
 function requestDelete(id: number, e: Event) {
   e.stopPropagation();
   if (deletingId.value === id) {
-    // Second click — confirm
     confirmDelete(id);
   } else {
     deletingId.value = id;
@@ -253,7 +241,7 @@ async function confirmDelete(id: number) {
       editingId.value = null;
       noteTitle.value = "";
       noteBody.value = "";
-      view.value = "list";
+      localStorage.removeItem(_noteKey(props.projectId));
     }
   } catch {
     toast.show("Failed to delete note", "error");
@@ -292,93 +280,27 @@ watch(
 );
 
 useAutoSave(dirty, saving, saveNote, 60_000);
-onMounted(loadProjectNotes);
+
+onMounted(async () => {
+  await loadProjectNotes();
+  const stored = localStorage.getItem(_noteKey(props.projectId));
+  if (stored) {
+    const id = Number(stored);
+    if (projectNotes.value.find((n) => n.id === id)) {
+      openNote(id).catch(() => {});
+    }
+  }
+});
+
 onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 </script>
 
 <template>
   <div class="ws-note-editor">
 
-    <!-- ── EDITOR VIEW ── -->
-    <template v-if="view === 'editor'">
-      <div class="panel-header">
-        <button class="btn-back-arrow" @click="backToList">← Notes</button>
-        <div class="editor-header-right">
-          <WordCount :body="noteBody" />
-          <span v-if="dirty && !saving" class="unsaved">Unsaved</span>
-          <span v-if="saving" class="saving-txt">Saving...</span>
-          <button class="btn-save" :disabled="saving || !dirty" @click="saveNote">Save</button>
-        </div>
-      </div>
-
-      <div class="note-title-row">
-        <input
-          ref="titleRef"
-          v-model="noteTitle"
-          class="note-title-input"
-          placeholder="Note title"
-          @keydown.ctrl.s.prevent="saveNote"
-          @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
-        />
-      </div>
-
-      <div class="tag-row">
-        <TagInput
-          v-model="noteTags"
-          :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
-        />
-        <button
-          class="btn-suggest-tags"
-          :disabled="tagSuggestions.suggestingTags.value"
-          title="Auto-suggest tags from title and body"
-          @click="tagSuggestions.fetchTagSuggestions()"
-        >
-          {{ tagSuggestions.suggestingTags.value ? '...' : 'Suggest' }}
-        </button>
-      </div>
-
-      <!-- Tag suggestions strip -->
-      <div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
-        <span class="tag-suggestions-label">Suggested:</span>
-        <button
-          v-for="tag in tagSuggestions.suggestedTags.value"
-          :key="tag"
-          :class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
-          @click="tagSuggestions.applyTagSuggestion(tag)"
-        >
-          #{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}
-        </button>
-        <button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
-      </div>
-
-      <!-- Formatting toolbar -->
-      <div class="toolbar-row">
-        <MarkdownToolbar :editor="tiptapEditor" />
-      </div>
-
-      <!-- Link suggestions strip -->
-      <div v-if="linkSuggestions.length" class="link-suggest-strip">
-        <span class="link-suggest-label">Links:</span>
-        <span
-          v-for="s in linkSuggestions"
-          :key="s.note_id"
-          class="link-suggest-chip"
-          :title="`Appears ${s.count}× unlinked`"
-        >
-          <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
-        </span>
-        <button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
-        <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
-      </div>
-
-      <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
-        <TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
-      </div>
-    </template>
-
-    <!-- ── LIST VIEW ── -->
-    <template v-else>
-      <div class="panel-header">
+    <!-- Left rail: always-visible note list -->
+    <div class="note-rail">
+      <div class="rail-header">
         <template v-if="showNewNoteInput">
           <input
             ref="newNoteTitleRef"
@@ -389,77 +311,134 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
             @keydown.enter="createNote"
             @keydown.escape="cancelNewNote"
           />
-          <button class="btn-new-note-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
-            {{ creatingNote ? '...' : '+' }}
+          <button class="btn-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
+            {{ creatingNote ? '…' : '+' }}
           </button>
-          <button class="btn-new-note-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
+          <button class="btn-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
         </template>
         <template v-else>
-          <span class="panel-title">Notes</span>
+          <span class="rail-title">Notes</span>
           <button class="btn-new-note" @click="startNewNote" title="New note">+ New</button>
         </template>
       </div>
 
-      <div class="note-search-bar">
+      <div class="rail-search">
         <input
           v-model="searchQuery"
-          class="note-search-input"
-          placeholder="Search notes..."
+          class="rail-search-input"
+          placeholder="Search…"
           type="search"
+          aria-label="Search notes"
         />
-        <button v-if="searchQuery" class="btn-search-clear" @click="searchQuery = ''" title="Clear search">✕</button>
+        <button v-if="searchQuery" class="btn-search-clear" aria-label="Clear search" @click="searchQuery = ''">✕</button>
       </div>
 
-      <div v-if="listLoading" class="state-msg">Loading...</div>
-
+      <div v-if="listLoading" class="rail-state">Loading…</div>
       <ul v-else class="note-list">
         <li
           v-for="note in filteredNotes"
           :key="note.id"
-          class="note-row"
-          :class="{ active: editingId === note.id }"
+          :class="['note-row', { active: editingId === note.id }]"
           @click="openNote(note.id)"
         >
           <div class="note-row-main">
-            <span class="note-row-title">{{ note.title }}</span>
-            <span v-if="note.tags?.length" class="note-row-tags">
-              <span
-                v-for="tag in note.tags.slice(0, 3)"
-                :key="tag"
-                :class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
-              >#{{ tag }}</span>
-              <span v-if="note.tags.length > 3" class="note-tag-more">+{{ note.tags.length - 3 }}</span>
-            </span>
+            <span class="note-row-title">{{ note.title || 'Untitled' }}</span>
             <span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
           </div>
-
+          <div v-if="note.tags?.length" class="note-row-tags">
+            <span
+              v-for="tag in note.tags.slice(0, 2)"
+              :key="tag"
+              :class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
+            >#{{ tag }}</span>
+            <span v-if="note.tags.length > 2" class="note-tag-more">+{{ note.tags.length - 2 }}</span>
+          </div>
           <div class="note-row-actions" @click.stop>
             <template v-if="deletingId === note.id">
-              <button
-                class="btn-confirm-delete"
-                :disabled="pendingDelete === note.id"
-                @click="requestDelete(note.id, $event)"
-              >
-                {{ pendingDelete === note.id ? '...' : 'Delete?' }}
+              <button class="btn-confirm-delete" :disabled="pendingDelete === note.id" @click="requestDelete(note.id, $event)">
+                {{ pendingDelete === note.id ? '…' : 'Delete?' }}
               </button>
               <button class="btn-cancel-delete" aria-label="Cancel delete" @click="cancelDelete($event)">✕</button>
             </template>
-            <button
-              v-else
-              class="btn-delete"
-              title="Delete note"
-              @click="requestDelete(note.id, $event)"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+            <button v-else class="btn-delete" title="Delete note" @click="requestDelete(note.id, $event)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
             </button>
           </div>
         </li>
-
-        <li v-if="filteredNotes.length === 0" class="state-msg">
-          {{ searchQuery.trim() ? 'No notes match.' : 'No notes yet — ask the agent to create one.' }}
+        <li v-if="filteredNotes.length === 0" class="rail-state">
+          {{ searchQuery.trim() ? 'No matches.' : 'No notes yet.' }}
         </li>
       </ul>
-    </template>
+    </div>
+
+    <!-- Right pane: editor -->
+    <div class="note-editor-pane">
+      <template v-if="editingId">
+        <div class="panel-header">
+          <div class="editor-header-right">
+            <WordCount :body="noteBody" />
+            <span v-if="dirty && !saving" class="unsaved">Unsaved</span>
+            <span v-if="saving" class="saving-txt">Saving…</span>
+            <button class="btn-save" :disabled="saving || !dirty" @click="saveNote">Save</button>
+          </div>
+        </div>
+
+        <div class="note-title-row">
+          <input
+            ref="titleRef"
+            v-model="noteTitle"
+            class="note-title-input"
+            placeholder="Note title"
+            @keydown.ctrl.s.prevent="saveNote"
+            @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
+          />
+        </div>
+
+        <div class="tag-row">
+          <TagInput v-model="noteTags" :fetchTags="(q: string) => notesStore.fetchAllTags(q)" />
+          <button
+            class="btn-suggest-tags"
+            :disabled="tagSuggestions.suggestingTags.value"
+            title="Auto-suggest tags from title and body"
+            @click="tagSuggestions.fetchTagSuggestions()"
+          >
+            {{ tagSuggestions.suggestingTags.value ? '…' : 'Suggest' }}
+          </button>
+        </div>
+
+        <div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
+          <span class="tag-suggestions-label">Suggested:</span>
+          <button
+            v-for="tag in tagSuggestions.suggestedTags.value"
+            :key="tag"
+            :class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
+            @click="tagSuggestions.applyTagSuggestion(tag)"
+          >#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}</button>
+          <button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
+        </div>
+
+        <div class="toolbar-row">
+          <MarkdownToolbar :editor="tiptapEditor" />
+        </div>
+
+        <div v-if="linkSuggestions.length" class="link-suggest-strip">
+          <span class="link-suggest-label">Links:</span>
+          <span v-for="s in linkSuggestions" :key="s.note_id" class="link-suggest-chip" :title="`Appears ${s.count}× unlinked`">
+            <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
+          </span>
+          <button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
+          <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
+        </div>
+
+        <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
+          <TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
+        </div>
+      </template>
+
+      <div v-else class="editor-empty-state">
+        <p>Select a note or create a new one</p>
+      </div>
+    </div>
 
   </div>
 </template>
@@ -467,41 +446,278 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 <style scoped>
 .ws-note-editor {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   height: 100%;
   overflow: hidden;
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
 }
 
+/* ── Left rail ── */
+.note-rail {
+  width: 155px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border);
+}
+
+.rail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.rail-title {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.72rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.btn-new-note {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0.15rem 0.4rem;
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.rail-search {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.3rem 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.rail-search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  font-size: 0.78rem;
+  color: var(--color-text);
+  min-width: 0;
+  padding: 0;
+}
+.rail-search-input:focus { outline: none; }
+.rail-search-input::-webkit-search-cancel-button { display: none; }
+
+.btn-search-clear {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.68rem;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.btn-search-clear:hover { color: var(--color-text); }
+
+.rail-state {
+  padding: 1rem 0.65rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* Note list */
+.note-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.note-row {
+  display: flex;
+  flex-direction: column;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
+  cursor: pointer;
+  gap: 0.15rem;
+  border-left: 2px solid transparent;
+  transition: background 0.12s;
+}
+.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
+.note-row.active {
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  border-left-color: var(--color-primary);
+}
+
+.note-row-main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.note-row-title {
+  flex: 1;
+  font-size: 0.78rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text);
+}
+
+.note-row-age {
+  font-size: 0.62rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.note-row-tags {
+  display: flex;
+  gap: 0.15rem;
+  overflow: hidden;
+}
+
+.note-tag-pill {
+  font-size: 0.58rem;
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-radius: 999px;
+  padding: 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 5rem;
+}
+.note-tag-pill.tag-match {
+  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  outline: 1px solid var(--color-primary);
+}
+
+.note-tag-more {
+  font-size: 0.58rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.note-row-actions {
+  display: flex;
+  gap: 0.2rem;
+  align-items: center;
+}
+
+.btn-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0.1rem;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.1s, color 0.1s;
+  display: flex;
+  align-items: center;
+}
+.note-row:hover .btn-delete { opacity: 1; }
+.btn-delete:hover { color: var(--color-danger, #e74c3c); }
+
+.btn-confirm-delete {
+  background: none;
+  border: 1px solid var(--color-danger, #e74c3c);
+  color: var(--color-danger, #e74c3c);
+  font-size: 0.65rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+}
+.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
+
+.btn-cancel-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.7rem;
+  cursor: pointer;
+  padding: 0.1rem;
+}
+.btn-cancel-delete:hover { color: var(--color-text); }
+
+/* Inline new note */
+.new-note-input {
+  flex: 1;
+  background: var(--color-input-bg, var(--color-bg));
+  border: 1px solid var(--color-primary);
+  border-radius: 4px;
+  padding: 0.15rem 0.35rem;
+  font-size: 0.78rem;
+  color: var(--color-text);
+  min-width: 0;
+}
+.new-note-input:focus { outline: none; }
+
+.btn-confirm {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.15rem 0.35rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.btn-confirm:disabled { opacity: 0.4; cursor: default; }
+
+.btn-cancel {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.72rem;
+  cursor: pointer;
+  padding: 0.1rem;
+  flex-shrink: 0;
+}
+.btn-cancel:hover { color: var(--color-text); }
+
+/* ── Right editor pane ── */
+.note-editor-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.editor-empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+/* Editor UI */
 .panel-header {
   display: flex;
   align-items: center;
-  padding: 0.6rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
   gap: 0.5rem;
 }
 
-.panel-title {
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.btn-back-arrow {
-  background: none;
-  border: none;
-  color: var(--color-primary);
-  font-size: 0.85rem;
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-}
-.btn-back-arrow:hover { text-decoration: underline; }
-
 .editor-header-right {
   display: flex;
   align-items: center;
@@ -523,7 +739,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 }
 .btn-save:disabled { opacity: 0.4; cursor: default; }
 
-/* Editor */
 .note-title-row {
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--color-border);
@@ -549,11 +764,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
-
-.tag-row > :first-child {
-  flex: 1;
-  min-width: 0;
-}
+.tag-row > :first-child { flex: 1; min-width: 0; }
 
 .btn-suggest-tags {
   background: none;
@@ -567,10 +778,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   flex-shrink: 0;
   align-self: center;
 }
-.btn-suggest-tags:hover:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
+.btn-suggest-tags:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
 .btn-suggest-tags:disabled { opacity: 0.5; cursor: default; }
 
 .tag-suggestions {
@@ -583,12 +791,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
   flex-shrink: 0;
 }
-
-.tag-suggestions-label {
-  font-size: 0.72rem;
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-}
+.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
 
 .btn-tag-suggestion {
   background: none;
@@ -633,7 +836,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
   flex-shrink: 0;
 }
-
 .link-suggest-label {
   font-size: 0.7rem;
   color: var(--color-text-muted);
@@ -642,10 +844,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-
-.link-suggest-chip {
-  display: inline-flex;
-}
+.link-suggest-chip { display: inline-flex; }
 
 .btn-chip-link {
   background: none;
@@ -658,9 +857,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   font-family: monospace;
   white-space: nowrap;
 }
-.btn-chip-link:hover {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-}
+.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
 
 .btn-link-all {
   background: none;
@@ -679,212 +876,4 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   overflow-y: auto;
   padding: 0.5rem 0.6rem;
 }
-
-/* Search bar */
-.note-search-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.note-search-input {
-  flex: 1;
-  background: var(--color-input-bg, var(--color-bg));
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.82rem;
-  color: var(--color-text);
-  min-width: 0;
-}
-.note-search-input:focus { outline: none; border-color: var(--color-primary); }
-.note-search-input::-webkit-search-cancel-button { display: none; }
-
-.btn-search-clear {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.72rem;
-  cursor: pointer;
-  padding: 0.1rem 0.25rem;
-  flex-shrink: 0;
-  border-radius: 3px;
-}
-.btn-search-clear:hover { color: var(--color-text); }
-
-/* List */
-.note-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.note-row {
-  display: flex;
-  flex-direction: column;
-  padding: 0.45rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-  cursor: pointer;
-  gap: 0.3rem;
-}
-.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
-.note-row.active { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
-
-.note-row-main {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-}
-
-.note-row-title {
-  flex: 1;
-  font-size: 0.85rem;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text);
-}
-
-.note-row-tags {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  flex-shrink: 0;
-  overflow: hidden;
-  max-width: 40%;
-}
-
-.note-tag-pill {
-  font-size: 0.62rem;
-  color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  border-radius: 999px;
-  padding: 0 0.35rem;
-  white-space: nowrap;
-  line-height: 1.6;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 6rem;
-}
-
-.note-tag-pill.tag-match {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
-  outline: 1px solid var(--color-primary);
-}
-
-.note-tag-more {
-  font-size: 0.62rem;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-}
-
-.note-row-age {
-  font-size: 0.68rem;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.note-row-actions {
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-}
-
-.btn-delete {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  cursor: pointer;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-  opacity: 0;
-  transition: opacity 0.1s, color 0.1s;
-}
-.note-row:hover .btn-delete { opacity: 1; }
-.btn-delete:hover { color: var(--color-danger, #e74c3c); }
-
-.btn-confirm-delete {
-  background: none;
-  border: 1px solid var(--color-danger, #e74c3c);
-  color: var(--color-danger, #e74c3c);
-  font-size: 0.72rem;
-  font-weight: 600;
-  cursor: pointer;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-}
-.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
-
-.btn-cancel-delete {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  cursor: pointer;
-  padding: 0.1rem 0.3rem;
-}
-.btn-cancel-delete:hover { color: var(--color-text); }
-
-.state-msg {
-  padding: 1.5rem;
-  text-align: center;
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
-}
-
-.btn-new-note {
-  margin-left: auto;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  padding: 0.2rem 0.55rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  cursor: pointer;
-}
-.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
-
-.new-note-input {
-  flex: 1;
-  background: var(--color-input-bg, var(--color-bg));
-  border: 1px solid var(--color-primary);
-  border-radius: 5px;
-  padding: 0.22rem 0.5rem;
-  font-size: 0.83rem;
-  color: var(--color-text);
-  min-width: 0;
-}
-.new-note-input:focus { outline: none; }
-
-.btn-new-note-confirm {
-  background: var(--color-primary);
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  padding: 0.22rem 0.5rem;
-  font-size: 0.9rem;
-  cursor: pointer;
-  flex-shrink: 0;
-  line-height: 1;
-}
-.btn-new-note-confirm:disabled { opacity: 0.4; cursor: default; }
-
-.btn-new-note-cancel {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  cursor: pointer;
-  padding: 0.1rem 0.3rem;
-  flex-shrink: 0;
-}
-.btn-new-note-cancel:hover { color: var(--color-text); }
 </style>