refactor: separate top bar component

web/src/lib/components/kit/TopBar.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-	import { resolve } from "$app/paths";
-	import { CircleQuestionMark, Moon, Sun } from "@lucide/svelte";
-	import StatusDot from "./StatusDot.svelte";
-	import IconButton from "./ui/IconButton.svelte";
-
-	interface Props {
-		theme: "light" | "dark";
-		crumb?: string;
-		status?: string;
-		ontoggle: () => void;
-	}
-
-	let { theme, crumb, status = "AUTO PIPELINE", ontoggle }: Props = $props();
-
-	let lang = $state("RU");
-</script>
-
-<header class="topbar">
-	<a class="brand" href={resolve("/")}>
-		<span class="brand-mark">EP</span>
-		<span>easy-png-tools</span>
-		{#if crumb}<span class="version">{crumb}</span>{/if}
-	</a>
-	<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>
-	<div class="top-actions">
-		<span class="status"><StatusDot /> {status}</span>
-		<IconButton
-			icon={CircleQuestionMark}
-			label="Help"
-			variant="clear"
-			onclick={() => {}}
-		/>
-		<IconButton
-			icon={theme === "light" ? Moon : Sun}
-			label="Toggle theme"
-			variant="clear"
-			onclick={ontoggle}
-		/>
-		<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>
-	</div>
-</header>
-
-<style>
-	.topbar {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 64px;
-		padding: 0 clamp(20px, 4vw, 64px);
-		background: var(--panel);
-		border-bottom: 1px solid var(--line);
-	}
-	.brand {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font: 600 14px var(--font-mono);
-		color: var(--foreground);
-		text-decoration: none;
-	}
-	.brand-mark {
-		background: var(--blue);
-		color: #fff;
-		width: 30px;
-		height: 30px;
-		font-size: 11px;
-		display: grid;
-		place-items: center;
-	}
-	.version {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.12em;
-		color: var(--blue);
-	}
-	.nav {
-		display: flex;
-		align-items: center;
-		gap: 22px;
-		margin-right: 28px;
-		margin-left: auto;
-	}
-	.nav a {
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		white-space: nowrap;
-		text-decoration: none;
-	}
-	.nav a:hover {
-		color: var(--foreground);
-	}
-	.top-actions {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-	.status {
-		display: flex;
-		align-items: center;
-		gap: 7px;
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-	}
-	.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/layout/TopBar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import LangToggle from "../ui/LangToggle.svelte";
+	import ThemeToggle from "../ui/ThemeToggle.svelte";
+	import TopNav from "../ui/TopNav.svelte";
+
+	interface Props {
+		theme: "light" | "dark";
+		crumb?: string;
+		ontoggle: () => void;
+	}
+
+	let { theme, crumb, ontoggle }: Props = $props();
+</script>
+
+<header class="topbar">
+	<a class="brand" href={resolve("/")}>
+		<span class="brand-mark">EP</span>
+		<span>easy-png-tools</span>
+		{#if crumb}
+			<span class="version">{crumb}</span>
+		{/if}
+	</a>
+	<TopNav />
+	<div class="top-actions">
+		<ThemeToggle {theme} {ontoggle} />
+		<LangToggle />
+	</div>
+</header>
+
+<style>
+	.topbar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--space-xl);
+		background: var(--color-background);
+		border-bottom: var(--size-border) solid var(--color-border);
+	}
+	.brand {
+		display: flex;
+		align-items: center;
+		gap: var(--space-m);
+		font: bold var(--font-button) var(--font-mono);
+		color: var(--color-text);
+		text-decoration: none;
+	}
+	.brand-mark {
+		background: var(--color-main);
+		color: var(--color-background);
+		width: var(--space-brand);
+		height: var(--space-brand);
+		font-size: var(--font-brand);
+		display: grid;
+		place-items: center;
+	}
+	.version {
+		font: var(--font-text) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-main);
+	}
+	.top-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xl);
+	}
+</style>

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

@@ -27,8 +27,12 @@
 	aria-label={ariaLabel}
 	onclick={() => onclick?.()}
 >
-	{#if icon}<Icon {icon} size={14} />{/if}
+	{#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>

web/src/preview.css

@@ -127,11 +127,20 @@
 		--space-m: 8px;
 		--space-l: 12px;
 		--space-xl: 16px;
+		--space-xxl: 24px;
+		--space-xxxl: 32px;
+
+		--space-brand: 32px;
+
+		--space-text-s: 0;
+		--space-text-m: 0.06em;
+		--space-text-l: 0.12em;
 
 		--size-border: 1px;
 		--size-border-thick: 2px;
 
 		--font-text: 10px;
+		--font-brand: 12px;
 		--font-button: 14px;
 
 		--radius-s: 0px;

web/src/routes/preview/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from "$app/state";
 	import Footer from "$lib/components/kit/layout/Footer.svelte";
-	import TopBar from "$lib/components/kit/TopBar.svelte";
+	import TopBar from "$lib/components/kit/layout/TopBar.svelte";
 	import type { Snippet } from "svelte";
 	import "../../preview.css";