bvandeusenandClaude Opus 4.6
fb18d2c41d
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>
143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useTheme } from "@/composables/useTheme";
|
|
import { useChatStore } from "@/stores/chat";
|
|
|
|
const { theme, toggleTheme } = useTheme();
|
|
const chatStore = useChatStore();
|
|
|
|
const emit = defineEmits<{
|
|
toggleChatPanel: [];
|
|
}>();
|
|
|
|
const statusLabel = computed(() => {
|
|
if (chatStore.ollamaStatus === "unavailable") return "Ollama unavailable";
|
|
if (chatStore.modelStatus === "not_found") return "Model downloading...";
|
|
if (chatStore.chatReady) return "Connected";
|
|
return "Checking...";
|
|
});
|
|
|
|
const statusClass = computed(() => {
|
|
if (chatStore.ollamaStatus === "unavailable") return "status-red";
|
|
if (chatStore.modelStatus === "not_found") return "status-yellow";
|
|
if (chatStore.chatReady) return "status-green";
|
|
return "status-yellow";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<nav class="nav">
|
|
<router-link to="/" class="nav-brand">Fabled Assistant</router-link>
|
|
<div class="nav-links">
|
|
<router-link to="/notes" class="nav-link">Notes</router-link>
|
|
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
|
<router-link to="/chat" class="nav-link">Chat</router-link>
|
|
<router-link to="/settings" class="nav-link">Settings</router-link>
|
|
<span class="status-indicator" :class="statusClass" :title="statusLabel">
|
|
<span class="status-dot"></span>
|
|
</span>
|
|
<button class="btn-chat-panel" @click="emit('toggleChatPanel')" title="Open chat panel">
|
|
💬
|
|
</button>
|
|
<button class="theme-toggle" @click="toggleTheme" :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`">
|
|
{{ theme === "dark" ? "\u2600" : "\u263E" }}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-header {
|
|
background: var(--color-bg-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.nav {
|
|
padding: 0.5rem 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.nav-brand {
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
.nav-link {
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
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;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.status-green .status-dot {
|
|
background: var(--color-success);
|
|
}
|
|
.status-yellow .status-dot {
|
|
background: var(--color-warning);
|
|
animation: pulse-dot 2s infinite;
|
|
}
|
|
.status-red .status-dot {
|
|
background: var(--color-danger);
|
|
}
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.btn-chat-panel {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
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);
|
|
}
|
|
.theme-toggle {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
color: var(--color-text);
|
|
line-height: 1;
|
|
}
|
|
.theme-toggle:hover {
|
|
background: var(--color-bg-card);
|
|
}
|
|
</style>
|