4c519a109a
The src/lib/ directory was being excluded by a Python .gitignore rule for lib/ (meant for Python's build output). Changed to /lib/ so it only matches root-level lib/ and doesn't block src/lib/. Adds 8 files that were created but missed in the initial commit: - 5 Svelte components (Header, StatusBar, Controls, TranscriptionDisplay, Settings) - 3 TypeScript stores (backend, config, transcriptions) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
107 lines
2.1 KiB
Svelte
107 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { backendStore } from "$lib/stores/backend";
|
|
import { configStore } from "$lib/stores/config";
|
|
|
|
let statusColor = $derived.by(() => {
|
|
switch (backendStore.appState) {
|
|
case "initializing":
|
|
return "#ff9800";
|
|
case "ready":
|
|
return "#4caf50";
|
|
case "transcribing":
|
|
return "#f44336";
|
|
case "error":
|
|
return "#f44336";
|
|
default:
|
|
return "#888";
|
|
}
|
|
});
|
|
|
|
let isPulsing = $derived(backendStore.appState === "transcribing");
|
|
let userName = $derived(configStore.config.user.name);
|
|
</script>
|
|
|
|
<div class="status-bar">
|
|
<div class="status-left">
|
|
<span
|
|
class="status-indicator"
|
|
class:pulsing={isPulsing}
|
|
style="background-color: {statusColor}"
|
|
></span>
|
|
<span class="state-message">{backendStore.stateMessage}</span>
|
|
</div>
|
|
<div class="status-right">
|
|
{#if backendStore.deviceInfo}
|
|
<span class="device-info">{backendStore.deviceInfo}</span>
|
|
<span class="separator">|</span>
|
|
{/if}
|
|
<span class="user-name">{userName}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 20px;
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-indicator.pulsing {
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
|
|
}
|
|
}
|
|
|
|
.state-message {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.device-info {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.separator {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.user-name {
|
|
color: var(--accent-green);
|
|
font-weight: 500;
|
|
}
|
|
</style>
|