Files
local-transcription/src/App.svelte
Developer af534bf768 Add Tauri v2 + Svelte 5 frontend and headless Python backend
Scaffold the cross-platform rewrite from PySide6/Qt to Tauri + Svelte,
following the same architecture as voice-to-notes. The Python backend
runs headless as a sidecar, with a FastAPI control API that the Svelte
frontend connects to via REST and WebSocket.

New files:
- backend/app_controller.py: Headless orchestration (extracted from MainWindow)
- backend/api_server.py: FastAPI control endpoints + /ws/control WebSocket
- backend/main_headless.py: Headless entry point for sidecar mode
- src-tauri/: Tauri v2 Rust shell with sidecar and dialog plugins
- src/: Svelte 5 frontend (App, Settings, Controls, TranscriptionDisplay)
- src/lib/stores/: Reactive stores for backend connection, config, transcriptions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 10:20:25 -07:00

100 lines
2.2 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
import Header from "$lib/components/Header.svelte";
import StatusBar from "$lib/components/StatusBar.svelte";
import Controls from "$lib/components/Controls.svelte";
import TranscriptionDisplay from "$lib/components/TranscriptionDisplay.svelte";
import Settings from "$lib/components/Settings.svelte";
import { backendStore } from "$lib/stores/backend";
import { configStore } from "$lib/stores/config";
let showSettings = $state(false);
let obsDisplayUrl = $derived(backendStore.obsUrl);
let syncDisplayUrl = $derived(backendStore.syncUrl);
function openSettings() {
showSettings = true;
}
function closeSettings() {
showSettings = false;
}
onMount(() => {
backendStore.connect();
configStore.loadConfig();
return () => {
backendStore.disconnect();
};
});
</script>
<div class="app-shell">
<Header onSettingsClick={openSettings} />
<StatusBar />
<div class="display-links">
<span class="link-label">OBS:</span>
<a href={obsDisplayUrl} target="_blank" rel="noopener">{obsDisplayUrl}</a>
{#if syncDisplayUrl}
<span class="link-separator">|</span>
<span class="link-label">Sync:</span>
<a href={syncDisplayUrl} target="_blank" rel="noopener"
>{syncDisplayUrl}</a
>
{/if}
</div>
<TranscriptionDisplay />
<Controls />
<div class="version-label">v{backendStore.version}</div>
</div>
{#if showSettings}
<Settings onClose={closeSettings} />
{/if}
<style>
.app-shell {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: var(--bg-primary);
}
.display-links {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 20px;
font-size: 12px;
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.link-label {
color: var(--text-secondary);
font-weight: 500;
}
.link-separator {
color: var(--text-muted);
margin: 0 4px;
}
.version-label {
position: fixed;
bottom: 6px;
right: 12px;
font-size: 11px;
color: var(--text-muted);
pointer-events: none;
z-index: 10;
}
</style>