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

Add note context visibility in chat and standardize UI design tokens

Browse Source 
Improve chat context: build_context() now returns metadata about auto-found
notes, emitted as an SSE event so the frontend can display context pills
showing which notes influenced the response. Users can promote notes for
deeper context (+) or exclude irrelevant ones (x). A note picker lets users
manually attach notes. Multi-word search uses per-term AND matching, and
auto-search iterates keywords individually for broader OR-style coverage.

Standardize styling: introduce CSS design tokens (--radius-sm/md/lg/pill,
--color-success/warning/overlay, --focus-ring) and migrate all components
to use them. Fix header alignment to full-width, add active nav link state,
replace hardcoded colors with CSS variables, and normalize button padding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-02-11 06:49:12 -05:00
parent 39bcd7a8fa
commit fb18d2c41d
26 changed files with 1070 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppHeader.vue
+19 -10
View File
@@ -54,9 +54,7 @@ const statusClass = computed(() => {
border-bottom: 1px solid var(--color-border);
}
.nav {
max-width: 960px;
margin: 0 auto;
padding: 0.5rem 1rem;
padding: 0.5rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
@@ -70,19 +68,29 @@ const statusClass = computed(() => {
.nav-links {
display: flex;
align-items: center;
gap: 1rem;
gap: 0.25rem;
}
.nav-link {
color: var(--color-text-secondary);
text-decoration: none;
font-size: 0.95rem;
font-size: 0.9rem;
padding: 0.3rem 0.6rem;
border-radius: var(--radius-sm);
transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
color: var(--color-primary);
background: var(--color-bg-card);
}
.nav-link.router-link-active {
color: var(--color-primary);
background: var(--color-bg-card);
font-weight: 600;
}
.status-indicator {
display: flex;
align-items: center;
margin-left: 0.5rem;
}
.status-dot {
width: 8px;
@@ -91,14 +99,14 @@ const statusClass = computed(() => {
flex-shrink: 0;
}
.status-green .status-dot {
background: #22c55e;
background: var(--color-success);
}
.status-yellow .status-dot {
background: #eab308;
background: var(--color-warning);
animation: pulse-dot 2s infinite;
}
.status-red .status-dot {
background: #ef4444;
background: var(--color-danger);
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
@@ -107,12 +115,13 @@ const statusClass = computed(() => {
.btn-chat-panel {
background: none;
border: 1px solid var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 1rem;
color: var(--color-text);
line-height: 1;
margin-left: 0.25rem;
}
.btn-chat-panel:hover {
background: var(--color-bg-card);
@@ -120,7 +129,7 @@ const statusClass = computed(() => {
.theme-toggle {
background: none;
border: 1px solid var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 1.1rem;