refactor: separate top bar component

web/src/lib/components/kit/ui/Button.svelte

@@ -27,8 +27,12 @@
 	aria-label={ariaLabel}
 	onclick={() => onclick?.()}
 >
-	{#if icon}<Icon {icon} size={14} />{/if}
-	<span class="btn-label">{label}</span>
+	{#if icon}
+		<Icon {icon} size={14} />
+	{/if}
+	{#if label}
+		<span class="btn-label">{label}</span>
+	{/if}
 </button>
 
 <style>

web/src/lib/components/kit/ui/LangToggle.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	let lang = $state("RU");
+
+	// TODO: change to sectioned dual buttons
+</script>
+
+<div class="lang" role="group" aria-label="Language">
+	<button
+		type="button"
+		class="lang-btn"
+		class:active={lang === "RU"}
+		onclick={() => (lang = "RU")}>RU</button
+	><span class="lang-div">/</span>
+	<button
+		type="button"
+		class="lang-btn"
+		class:active={lang === "EN"}
+		onclick={() => (lang = "EN")}>EN</button
+	>
+</div>
+
+<style>
+	.lang {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--line);
+	}
+	.lang-btn {
+		border: 0;
+		background: transparent;
+		color: var(--muted);
+		font: 10px var(--font-mono);
+		padding: 6px 9px;
+		cursor: pointer;
+	}
+	.lang-div {
+		color: var(--foreground);
+		font-family: var(--font-sans);
+	}
+	.lang-btn.active {
+		background: var(--foreground);
+		color: var(--background);
+	}
+</style>

web/src/lib/components/kit/ui/ThemeToggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Moon, Sun } from "@lucide/svelte";
+	import IconButton from "../ui/IconButton.svelte";
+
+	interface Props {
+		theme: "light" | "dark";
+		ontoggle: () => void;
+	}
+
+	let { theme, ontoggle }: Props = $props();
+
+	// TODO: change icon animations - custom button instead of IconButton
+</script>
+
+<IconButton
+	icon={theme === "light" ? Moon : Sun}
+	label="Toggle theme"
+	variant="clear"
+	onclick={ontoggle}
+/>

web/src/lib/components/kit/ui/TopNav.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+</script>
+
+<nav class="nav">
+	<a href={resolve("/preview/demo")}>Workspace</a>
+	<a href={resolve("/preview/list-tools")}>Catalog</a>
+	<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
+	<a href={resolve("/preview/tools/remove-background-png")}>
+		Background remover
+	</a>
+</nav>
+
+<style>
+	.nav {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xxl);
+		margin-right: var(--space-xxxl);
+		margin-left: auto;
+	}
+	.nav a {
+		color: var(--color-text);
+		font: bold var(--font-text) var(--font-mono);
+		white-space: nowrap;
+		text-decoration: none;
+	}
+	.nav a:hover {
+		color: var(--color-main);
+	}
+</style>