unify headers

src/entrypoints/popup/App.svelte

@@ -21,7 +21,7 @@
 <div class="flex w-78 overflow-hidden" class:w-screen={$isMobile}>
 	<Toast />
 	{#if activePage === 'main'}
-		<div transition:fly={{ x: -300, duration: 150 }} class="min-w-full w-full h-75 flex-1 flex flex-col">
+		<div transition:fly={{ x: -300, duration: 150 }} class="min-w-full w-full h-80 flex-1 flex flex-col">
 			<Main
 				onSettingsOpenRequest={() => (activePage = 'settings')}
 				onSiteConfigOpenRequest={() => (activePage = 'site-config')}

src/entrypoints/popup/components/BackButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ArrowLeft } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+
+	/* types */
+	interface Props {
+		onclick: () => void;
+	}
+
+	/* states */
+	let { onclick }: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="shrink-0 flex items-center justify-center w-7 h-7 rounded-md text-gray-300 hover:text-gray-100 hover:bg-gray-800/60 cursor-pointer transition-colors"
+	{onclick}
+>
+	<Icon src={ArrowLeft} size="1.1rem" />
+</button>

src/entrypoints/popup/components/PageHeader.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/* types */
+	interface Props {
+		title: string;
+		subtitle?: string;
+		actionsLeft?: Snippet;
+		actionsRight?: Snippet;
+	}
+
+	/* states */
+	let { title, subtitle, actionsLeft, actionsRight }: Props = $props();
+</script>
+
+<div class="flex items-center gap-2 px-3 py-2.5">
+	{#if actionsLeft}
+		<div class="shrink-0 flex items-center gap-2">
+			{@render actionsLeft()}
+		</div>
+	{/if}
+
+	<div class="min-w-0 flex-1">
+		<h1 class="text-lg font-semibold text-gray-100 leading-tight truncate">{title}</h1>
+		{#if subtitle}
+			<p class="text-xs text-gray-400 leading-tight truncate" title={subtitle}>{subtitle}</p>
+		{/if}
+	</div>
+
+	{#if actionsRight}
+		<div class="shrink-0 flex items-center gap-2">
+			{@render actionsRight()}
+		</div>
+	{/if}
+</div>

src/entrypoints/popup/pages/main/Header.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { Cog6Tooth } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import PageHeader from '@/entrypoints/popup/components/PageHeader.svelte';
 	import Toggle from '@/entrypoints/popup/components/Toggle.svelte';
 	import { HostSettings } from '@/lib/settings';
 
@@ -32,15 +35,17 @@
 	});
 </script>
 
-<div class="flex justify-between items-center p-2">
-	<div class="flex items-baseline gap-2">
-		<h1>stream-bypass</h1>
-		<span class="text-xs text-gray-400">v{import.meta.env.VERSION}</span>
-	</div>
-	<div class="flex items-center gap-2">
+<PageHeader title="stream-bypass" subtitle="v{import.meta.env.VERSION}">
+	{#snippet actionsRight()}
 		{#key allHostsDisabled}
 			<Toggle bind:checked={() => !allHostsDisabled, (v) => (allHostsDisabled = !v)} />
 		{/key}
-		<button class="font-bold cursor-pointer" onclick={() => onSettingsClick()}>⋮</button>
-	</div>
-</div>
+		<button
+			type="button"
+			class="shrink-0 flex items-center justify-center w-7 h-7 rounded-md text-gray-300 hover:text-gray-100 hover:bg-gray-800/60 cursor-pointer transition-colors"
+			onclick={() => onSettingsClick()}
+		>
+			<Icon src={Cog6Tooth} size="1.1rem" />
+		</button>
+	{/snippet}
+</PageHeader>

src/entrypoints/popup/pages/main/Main.svelte

@@ -63,7 +63,7 @@
 			<Notice
 				level="warning"
 				title="Extension disabled"
-				description="Configurations are still saved and take effect when extension is re-enabled."
+				description="Configurations are still saved and take effect the when extension is re-enabled."
 			/>
 		{:else if currentMatch}
 			<div class="flex flex-col justify-between h-full px-2">

src/entrypoints/popup/pages/settings/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ArrowLeft } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
+	import BackButton from '@/entrypoints/popup/components/BackButton.svelte';
+	import PageHeader from '@/entrypoints/popup/components/PageHeader.svelte';
 
 	/* types */
 	interface Props {
@@ -11,18 +11,8 @@
 	let { onBackClick }: Props = $props();
 </script>
 
-<div class="flex justify-between items-center px-3 py-2.5">
-	<div class="flex items-center gap-2">
-		<button
-			type="button"
-			class="flex items-center justify-center w-7 h-7 rounded-md text-gray-300 hover:text-gray-100 hover:bg-gray-800/60 cursor-pointer transition-colors"
-			onclick={() => onBackClick()}
-		>
-			<Icon src={ArrowLeft} size="1.1rem" />
-		</button>
-		<div>
-			<h1 class="text-lg font-semibold text-gray-100 leading-tight">Settings</h1>
-			<p class="text-xs text-gray-400 leading-tight">Manage hosts and integrations</p>
-		</div>
-	</div>
-</div>
+<PageHeader title="Settings" subtitle="Manage hosts and integrations">
+	{#snippet actionsLeft()}
+		<BackButton onclick={onBackClick} />
+	{/snippet}
+</PageHeader>

src/entrypoints/popup/pages/site-config/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ArrowLeft } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
+	import BackButton from '@/entrypoints/popup/components/BackButton.svelte';
+	import PageHeader from '@/entrypoints/popup/components/PageHeader.svelte';
 
 	/* types */
 	interface Props {
@@ -12,16 +12,8 @@
 	let { domain, onBackClick }: Props = $props();
 </script>
 
-<div class="flex items-center gap-2 px-3 py-2.5">
-	<button
-		type="button"
-		class="flex items-center justify-center w-7 h-7 rounded-md text-gray-300 hover:text-gray-100 hover:bg-gray-800/60 cursor-pointer transition-colors"
-		onclick={() => onBackClick()}
-	>
-		<Icon src={ArrowLeft} size="1.1rem" />
-	</button>
-	<div class="min-w-0">
-		<h1 class="text-lg font-semibold text-gray-100 leading-tight">Site settings</h1>
-		<p class="text-xs text-gray-400 leading-tight truncate" title={domain}>{domain}</p>
-	</div>
-</div>
+<PageHeader title="Site settings" subtitle={domain}>
+	{#snippet actionsLeft()}
+		<BackButton onclick={onBackClick} />
+	{/snippet}
+</PageHeader>