From f4908fe1be93269e0ec91dedae9e009fd8d5f1d3 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 16:55:02 +0300
Subject: [PATCH] =?UTF-8?q?web/components:=20make=20Topbar=20Dropdown=20cl?=
 =?UTF-8?q?eaner=20=E2=80=94=20add=20Separator=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/shell/Topbar.svelte    | 16 +++---
 web/src/lib/components/ui/DropdownItem.svelte | 49 ++++++-------------
 web/src/lib/components/ui/Separator.svelte    |  9 ++++
 3 files changed, 34 insertions(+), 40 deletions(-)
 create mode 100644 web/src/lib/components/ui/Separator.svelte

diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index 17826f2d2..bd03724a6 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -18,9 +18,11 @@
 	import User from "../ui/User.svelte";
 	import TopbarSearch from "./TopbarSearch.svelte";
 	import type { CurrentUser } from "$lib/auth.svelte";
+	import Separator from "../ui/Separator.svelte";
 
 	interface Props {
-		variant: "marketing" | "app";
+		/** `bare` is the onboarding chrome: the wordmark alone, nothing to click away to */
+		variant: "marketing" | "app" | "bare";
 		onSignOut?: () => void | Promise<void>;
 		user: CurrentUser | null;
 		loading?: boolean;
@@ -39,7 +41,7 @@
 
 <nav
 	class={`h-11 w-full px-5
-	        ${variant === "marketing" ? "" : "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"}
+	        ${variant === "app" ? "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]" : ""}
 	      `}
 	aria-label="main"
 >
@@ -59,7 +61,9 @@
 		</div>
 
 		<div class={variant === "marketing" ? "flex items-center gap-3.5" : "flex items-center gap-4"}>
-			{#if variant === "marketing"}
+			{#if variant === "bare"}
+				<!-- nothing: onboarding has no escape hatches in the bar itself -->
+			{:else if variant === "marketing"}
 				<TopbarSearch />
 
 				{@render divider()}
@@ -124,10 +128,7 @@
 					{:else if user}
 						<Dropdown id="profile-menu" group="topbar" align="right">
 							{#snippet trigger()}
-								<User
-									did={user.did}
-									handle={user.handle}
-								/>
+								<User did={user.did} handle={user.handle} />
 							{/snippet}
 							<DropdownItem href={`/${user.handle}`} icon={UserIcon}>Profile</DropdownItem>
 							<DropdownItem href={`/${user.handle}?tab=repos`} icon={BookMarked}>
@@ -137,6 +138,7 @@
 								Strings
 							</DropdownItem>
 							<DropdownItem href="/settings" icon={Cog}>Settings</DropdownItem>
+							<Separator/>
 							<DropdownItem danger icon={LogOut} onclick={onSignOut}>Logout</DropdownItem>
 						</Dropdown>
 					{:else}
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 72996d0b5..7dd9fc1ed 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdownItem = tv({
-		base: "flex w-full cursor-pointer items-center gap-2 bg-transparent p-2 text-left no-underline hover:bg-background-subtle hover:no-underline dark:hover:bg-background-muted",
+		base: "w-full justify-start rounded-none p-2 text-left focus-visible:-outline-offset-2",
 		variants: {
 			danger: {
 				false: "",
@@ -22,6 +22,8 @@
 	import type { Component, Snippet } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { getContext } from "svelte";
+	import Button from "./Button.svelte";
+
 	interface Props {
 		href?: string;
 		icon?: Component<SvelteHTMLElements["svg"]>;
@@ -38,7 +40,7 @@
 		"dropdown-register"
 	);
 
-	let el = $state<HTMLElement>();
+	let el = $state<HTMLAnchorElement | HTMLButtonElement>();
 
 	$effect(() => {
 		if (!el || !registerItem) return;
@@ -51,34 +53,15 @@
 	};
 </script>
 
-{#if href}
-	<a
-		bind:this={el}
-		href={resolve(href as "/")}
-		class={classes}
-		role="menuitem"
-		tabindex={-1}
-		onclick={handleClick}
-	>
-		{#if icon}
-			{@const Glyph = icon}
-			<Glyph class="size-4" aria-hidden="true" />
-		{/if}
-		{@render children()}
-	</a>
-{:else}
-	<button
-		bind:this={el}
-		type="button"
-		class={classes}
-		role="menuitem"
-		tabindex={-1}
-		onclick={handleClick}
-	>
-		{#if icon}
-			{@const Glyph = icon}
-			<Glyph class="size-4" aria-hidden="true" />
-		{/if}
-		{@render children()}
-	</button>
-{/if}
+<Button
+	bind:ref={el}
+	variant="ghost"
+	href={href ? resolve(href as "/") : undefined}
+	class={classes}
+	{icon}
+	role="menuitem"
+	tabindex={-1}
+	onclick={handleClick}
+>
+	{@render children()}
+</Button>
diff --git a/web/src/lib/components/ui/Separator.svelte b/web/src/lib/components/ui/Separator.svelte
new file mode 100644
index 000000000..8781b965b
--- /dev/null
+++ b/web/src/lib/components/ui/Separator.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = "" }: Props = $props();
+</script>
+
+<hr class="border-none bg-border-default w-full min-h-px {className}" />
-- 
2.51.2