From 0ca39a2e34562f1270c4860c5398aa40cf05fe9e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:34:52 -0400
Subject: [PATCH] feat(knowledge): redesign new item button as gradient CTA
 with icon menu for all 5 types

---
 frontend/src/views/KnowledgeView.vue | 90 ++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 26 deletions(-)

diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 95b94db..203faad 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -418,12 +418,30 @@ onUnmounted(() => {
       <aside class="filter-panel">
         <!-- New note button -->
         <div class="new-note-wrap">
-          <button class="btn-new-note" @click="newNoteMenuOpen ? createNew('note') : (newNoteMenuOpen = true)">+ New note</button>
+          <button class="btn-new-note" @click="newNoteMenuOpen = !newNoteMenuOpen">
+            <span class="btn-new-icon">+</span> New
+          </button>
           <div v-if="newNoteMenuOpen" class="new-note-menu">
-            <button @click="createNew('task')">Task</button>
-            <button @click="createNew('person')">Person</button>
-            <button @click="createNew('place')">Place</button>
-            <button @click="createNew('list')">List</button>
+            <button @click="createNew('note')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              Note
+            </button>
+            <button @click="createNew('task')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+              Task
+            </button>
+            <button @click="createNew('person')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              Person
+            </button>
+            <button @click="createNew('place')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              Place
+            </button>
+            <button @click="createNew('list')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+              List
+            </button>
           </div>
         </div>
 
@@ -765,51 +783,71 @@ onUnmounted(() => {
   margin-bottom: 6px;
   padding: 0 4px;
 }
-/* ── New note button ─────────────────────────────────────── */
+/* ── New item button ─────────────────────────────────────── */
 .new-note-wrap {
   position: relative;
-  display: flex;
   margin-bottom: 16px;
 }
 .btn-new-note {
-  flex: 1;
-  padding: 7px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(124, 58, 237, 0.4);
-  background: rgba(124, 58, 237, 0.12);
-  color: var(--color-primary);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: none;
+  background: var(--gradient-cta);
+  color: #fff;
   cursor: pointer;
   font-size: 0.85rem;
-  font-weight: 500;
-  text-align: left;
-  transition: background 0.15s;
+  font-weight: 600;
+  transition: box-shadow 0.15s;
+}
+.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
+.btn-new-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+  font-weight: 300;
 }
-.btn-new-note:hover { background: rgba(124, 58, 237, 0.2); box-shadow: 0 0 12px rgba(124, 58, 237, 0.25); }
 .new-note-menu {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--color-bg-tertiary, #1a1b1e);
-  border: 1px solid rgba(124, 58, 237, 0.3);
-  border-radius: 8px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
   overflow: hidden;
   z-index: 50;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  padding: 4px 0;
 }
 .new-note-menu button {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   width: 100%;
-  padding: 7px 12px;
+  padding: 9px 14px;
   background: none;
   border: none;
   color: var(--color-text);
   cursor: pointer;
   font-size: 0.84rem;
   text-align: left;
-  transition: background 0.12s;
+  transition: background 0.12s, color 0.12s;
+}
+.new-note-menu button:hover {
+  background: var(--color-primary-tint);
+  color: var(--color-primary);
+}
+.new-note-menu button svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+.new-note-menu button:hover svg {
+  opacity: 1;
+  stroke: var(--color-primary);
 }
-.new-note-menu button:hover { background: rgba(124, 58, 237, 0.12); }
 
 .filter-btn {
   display: flex;