summaryrefslogtreecommitdiffhomepage
path: root/packages/frontend/src/lib/components/Header.svelte
blob: 79d371cad17366b432c5b38f7dbf4d9528157eaf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script lang="ts">
import { chatStore } from "../chat.svelte.js";
import ThemeSwitcher from "./ThemeSwitcher.svelte";

let showThemeSwitcher = $state(false);
let copyLabel = $state("Copy");

function resetCopyLabel() {
	copyLabel = "Copy";
}

async function handleCopy() {
	const text = chatStore.copyConversation();
	try {
		await navigator.clipboard.writeText(text);
		copyLabel = "Copied";
		setTimeout(resetCopyLabel, 1500);
	} catch {
		copyLabel = "Failed";
		setTimeout(resetCopyLabel, 1500);
	}
}
</script>

<header class="navbar bg-base-200 border-b border-base-300 px-4 min-h-14 flex-shrink-0">
	<div class="flex-1">
		<span class="text-xl font-bold tracking-tight">Dispatch</span>
	</div>
	<div class="flex-none flex items-center gap-3">
		<span class="text-xs text-base-content/60 hidden sm:block">
			DeepSeek V4 Flash via OpenCode Go
		</span>
		<button
			type="button"
			class="btn btn-ghost btn-sm"
			onclick={handleCopy}
			aria-label="Copy conversation"
		>
			{copyLabel}
		</button>
		<button
			type="button"
			class="btn btn-ghost btn-sm"
			onclick={() => (showThemeSwitcher = !showThemeSwitcher)}
			aria-label="Switch theme"
		>
			Theme
		</button>
	</div>
</header>

{#if showThemeSwitcher}
	<ThemeSwitcher onclose={() => (showThemeSwitcher = false)} />
{/if}