From 00f82f8cbac0d33092a79979ee49a321d0373ec4 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 11:14:31 -0400
Subject: [PATCH] feat(knowledge): card type DNA, violet hover bloom, amber
 timestamps, narrator empty states

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/KnowledgeView.vue | 93 ++++++++++++++++++++++------
 1 file changed, 75 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index b28e3be..45561b8 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -499,9 +499,8 @@ onUnmounted(() => {
         <!-- Loading / empty -->
         <div v-if="loading && items.length === 0" class="knowledge-empty">Loading…</div>
         <div v-else-if="!loading && items.length === 0" class="knowledge-empty">
-          <p>Nothing here yet.</p>
-          <p v-if="activeType || activeTag || searchQuery" class="empty-hint">Try clearing the filters.</p>
-          <p v-else class="empty-hint">Start by creating a note, saving a person or place, or making a list.</p>
+          <p v-if="activeType || activeTag || searchQuery" class="empty-hint">No matches. Try clearing the filters.</p>
+          <p v-else class="empty-narrator">Your story is unwritten. Create your first note to begin.</p>
         </div>
 
         <!-- Card grid -->
@@ -748,11 +747,21 @@ onUnmounted(() => {
   background: var(--color-bg-secondary);
 }
 .filter-section { margin-bottom: 20px; }
+.filter-section + .filter-section::before {
+  content: '· · ·';
+  display: block;
+  text-align: center;
+  color: rgba(124, 58, 237, 0.3);
+  font-size: 0.9rem;
+  letter-spacing: 0.4em;
+  padding: 4px 0 12px;
+}
 .filter-label {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-muted);
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  color: var(--color-primary);
   margin-bottom: 6px;
   padding: 0 4px;
 }
@@ -921,6 +930,8 @@ onUnmounted(() => {
   flex: 1;
   overflow-y: auto;
   padding: 16px 20px;
+  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 12px;
@@ -942,17 +953,56 @@ onUnmounted(() => {
   overflow: hidden;
 }
 .k-card:hover {
-  border-color: rgba(255,255,255,0.14);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: rgba(124, 58, 237, 0.2);
 }
 
-/* Type accent strip */
-.k-card--person { border-left: 3px solid #10b981; }
-.k-card--place  { border-left: 3px solid #f59e0b; }
-.k-card--list   { border-left: 3px solid #38bdf8; }
-.k-card--note   { border-left: 3px solid #6366f1; }
-.k-card--task   { border-left: 3px solid #a78bfa; }
+/* Type-specific card DNA */
+.k-card--note   { border-color: rgba(124, 58, 237, 0.12); }
+.k-card--task   { border-color: rgba(212, 160, 23, 0.10); }
+.k-card--person { border-color: rgba(16, 185, 129, 0.10); }
+.k-card--place  { border-color: rgba(245, 158, 11, 0.10); }
+.k-card--list   { border-color: rgba(56, 189, 248, 0.10); }
+
+/* Top gradient bars */
+.k-card--note::before,
+.k-card--task::before,
+.k-card--list::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 3px;
+  border-radius: 14px 14px 0 0;
+}
+.k-card--note::before {
+  right: 0;
+  background: linear-gradient(90deg, #7c3aed, #a78bfa);
+}
+.k-card--task::before {
+  width: 50%;
+  background: linear-gradient(90deg, #d4a017, transparent);
+}
+.k-card--list::before {
+  right: 0;
+  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
+}
+
+/* Corner accents for entity types */
+.k-card--person::after,
+.k-card--place::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 0 14px 0 60px;
+  pointer-events: none;
+}
+.k-card--person::after { background: rgba(16, 185, 129, 0.06); }
+.k-card--place::after  { background: rgba(245, 158, 11, 0.06); }
 
 /* Type badge */
 .type-badge {
@@ -1071,7 +1121,7 @@ onUnmounted(() => {
   background: rgba(255,255,255,0.05);
   color: var(--color-muted);
 }
-.k-card-date { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; }
+.k-card-date { font-size: 0.72rem; color: var(--color-accent-warm); white-space: nowrap; opacity: 0.7; }
 
 /* ── Task card ──────────────────────────────────────────── */
 .k-card-task {
@@ -1107,7 +1157,7 @@ onUnmounted(() => {
 
 .task-due {
   font-size: 0.78rem;
-  color: var(--color-text-muted);
+  color: var(--color-accent-warm);
 }
 .task-overdue {
   color: var(--color-overdue);
@@ -1127,6 +1177,13 @@ onUnmounted(() => {
   gap: 6px;
 }
 .empty-hint { font-size: 0.85rem; opacity: 0.7; }
+.empty-narrator {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--color-accent-warm);
+  opacity: 0.85;
+}
 
 /* ── Sentinel ────────────────────────────────────────────── */
 .scroll-sentinel {