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/views/NoteEditorView.vue
+13 -13
View File
@@ -287,11 +287,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
color: var(--color-primary);
}
.btn-save {
padding: 0.4rem 1rem;
padding: 0.45rem 1rem;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 4px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.btn-save:disabled {
@@ -299,18 +299,18 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
cursor: default;
}
.btn-delete {
padding: 0.4rem 1rem;
padding: 0.45rem 1rem;
background: var(--color-danger);
color: #fff;
border: none;
border-radius: 4px;
border-radius: var(--radius-sm);
cursor: pointer;
margin-left: auto;
}
.title-input {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-input-border);
border-radius: 4px;
border-radius: var(--radius-sm);
font-size: 1.25rem;
font-weight: 600;
background: var(--color-bg-card);
@@ -322,7 +322,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
border-bottom: 1px solid var(--color-border);
}
.tab {
padding: 0.4rem 1rem;
padding: 0.45rem 1rem;
border: none;
background: none;
color: var(--color-text-secondary);
@@ -341,7 +341,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-input-border);
border-radius: 4px;
border-radius: var(--radius-sm);
font-size: 1rem;
font-family: monospace;
min-height: 200px;
@@ -354,7 +354,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
.preview-pane {
padding: 0.75rem;
border: 1px solid var(--color-input-border);
border-radius: 4px;
border-radius: var(--radius-sm);
min-height: 200px;
background: var(--color-bg-card);
}
@@ -365,7 +365,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
margin: 0;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--color-bg-card);
box-shadow: 0 4px 12px var(--color-shadow);
max-height: 200px;
@@ -384,7 +384,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
background: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
@@ -392,7 +392,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
}
.modal-card {
background: var(--color-bg-card);
border-radius: 8px;
border-radius: var(--radius-md);
padding: 1.5rem;
max-width: 400px;
width: 90%;
@@ -413,9 +413,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
justify-content: flex-end;
}
.modal-btn {
padding: 0.4rem 1rem;
padding: 0.45rem 1rem;
border: 1px solid var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--color-bg-card);
color: var(--color-text);
cursor: pointer;