From c0a92315d961d5c7b572cad1a63b0e87b3572f13 Mon Sep 17 00:00:00 2001 From: pyr0ball Date: Tue, 14 Apr 2026 12:32:33 -0700 Subject: [PATCH] =?UTF-8?q?fix:=20rename=20Build=20with=20AI=20=E2=86=92?= =?UTF-8?q?=20Search=20with=20AI,=20sync=20panel=20CSS=20to=20amber=20them?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - All copy: "Build with AI" → "Search with AI", "Build Search" → "Search", "Building…" → "Searching…", "Filters updated" → "Filters ready" - Remove ✦ sparkle from toggle button - Replace all var(--color-accent) (purple) with var(--app-primary) (amber) - Fix var(--color-surface-1) → var(--color-surface) (surface-1 does not exist) - Toggle muted at rest, amber on hover/open — matches sidebar toolbar style - SettingsView aria-label updated to match --- web/src/components/LLMQueryPanel.vue | 73 +++++++++++++++++----------- web/src/views/SettingsView.vue | 6 +-- 2 files changed, 48 insertions(+), 31 deletions(-) diff --git a/web/src/components/LLMQueryPanel.vue b/web/src/components/LLMQueryPanel.vue index 3dc4aca..f1ca15d 100644 --- a/web/src/components/LLMQueryPanel.vue +++ b/web/src/components/LLMQueryPanel.vue @@ -10,8 +10,7 @@ aria-controls="llm-panel" @click="toggle" > - - Build with AI + Search with AI @@ -33,17 +32,17 @@ placeholder="e.g. used RTX 3080 under $300, no mining cards or for-parts listings" :disabled="isLoading" @keydown.escape.prevent="handleEscape" - @keydown.ctrl.enter.prevent="onBuild" + @keydown.ctrl.enter.prevent="onSearch" />
- Filters updated + Filters ready Error
@@ -75,7 +74,7 @@ :checked="autoRun" @change="setAutoRun(($event.target as HTMLInputElement).checked)" /> - Run search automatically after building + Run search automatically @@ -107,7 +106,7 @@ watch(isOpen, async (open) => { } }) -async function onBuild() { +async function onSearch() { await buildQuery(inputText.value) } @@ -123,34 +122,42 @@ function handleEscape() { width: 100%; } +/* Toggle — muted at rest, amber on hover/open. Matches sidebar toolbar buttons. */ .llm-panel-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); - background: color-mix(in srgb, var(--color-accent) 12%, transparent); - border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); + background: var(--color-surface-raised); + border: 1px solid var(--color-border); border-radius: var(--radius-md); - color: var(--color-accent); - font-size: 0.85rem; + color: var(--color-text-muted); + font-size: 0.8rem; font-weight: 500; cursor: pointer; - transition: background 0.15s, border-color 0.15s; + transition: background var(--transition), border-color var(--transition), color var(--transition); margin-bottom: var(--space-2); } -.llm-panel-toggle:hover, -.llm-panel-toggle--open { - background: color-mix(in srgb, var(--color-accent) 20%, transparent); - border-color: var(--color-accent); +.llm-panel-toggle:hover { + background: var(--app-primary-light); + border-color: var(--app-primary); + color: var(--app-primary); } +.llm-panel-toggle--open { + background: var(--app-primary-light); + border-color: var(--app-primary); + color: var(--app-primary); +} + +/* Panel */ .llm-panel { display: none; flex-direction: column; gap: var(--space-3); padding: var(--space-4); - background: var(--color-surface-2); + background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); @@ -161,15 +168,17 @@ function handleEscape() { } .llm-panel__label { - font-size: 0.85rem; + font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; } .llm-panel__textarea { width: 100%; padding: var(--space-2) var(--space-3); - background: var(--color-surface-1); + background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); @@ -179,8 +188,9 @@ function handleEscape() { } .llm-panel__textarea:focus { - outline: 2px solid var(--color-accent); + outline: 2px solid var(--app-primary); outline-offset: 1px; + border-color: var(--app-primary); } .llm-panel__actions { @@ -190,25 +200,32 @@ function handleEscape() { flex-wrap: wrap; } -.llm-panel__build-btn { +/* Search button — same amber style as the main Search button */ +.llm-panel__search-btn { padding: var(--space-2) var(--space-4); - background: var(--color-accent); - color: #fff; + background: var(--app-primary); + color: var(--color-text-inverse); border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; cursor: pointer; + transition: background var(--transition); } -.llm-panel__build-btn:disabled { - opacity: 0.5; +.llm-panel__search-btn:hover:not(:disabled) { + background: var(--app-primary-hover); +} + +.llm-panel__search-btn:disabled { + opacity: 0.4; cursor: not-allowed; } .llm-panel__status-pill { font-size: 0.8rem; color: var(--color-text-muted); + font-family: var(--font-mono); } .llm-panel__status-pill--idle { @@ -228,7 +245,7 @@ function handleEscape() { display: inline-block; width: 0.75em; height: 0.75em; - border: 2px solid var(--color-accent); + border: 2px solid var(--app-primary); border-top-color: transparent; border-radius: 50%; animation: llm-spin 0.7s linear infinite; diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue index 6e7d482..f35bf0a 100644 --- a/web/src/views/SettingsView.vue +++ b/web/src/views/SettingsView.vue @@ -85,9 +85,9 @@