bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

feat(knowledge): redesign new item button as gradient CTA with icon menu for all 5 types

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-04-08 12:34:52 -04:00
parent 16d9af8b96
commit 0ca39a2e34
1 changed files with 64 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/KnowledgeView.vue
+64 -26
View File
@@ -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;