alice.pds.demo.boltless.dev
This repository has no description
web/components: make Topbar Dropdown cleaner — add Separator component
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Aug 4, 2026, 4:55 PM +0300)
commit
f4908fe1
f4908fe1be93269e0ec91dedae9e009fd8d5f1d3
parent
8d4db7e0
8d4db7e03088321ef6a89a156f242d75fbe54806
+34
-40
+9
-7
web/src/lib/components/shell/Topbar.svelte
+9
-7
web/src/lib/components/shell/Topbar.svelte
···
18
18
import User from "../ui/User.svelte";
19
19
import TopbarSearch from "./TopbarSearch.svelte";
20
20
import type { CurrentUser } from "$lib/auth.svelte";
21
+
import Separator from "../ui/Separator.svelte";
21
22
22
23
interface Props {
23
-
variant: "marketing" | "app";
24
+
/** `bare` is the onboarding chrome: the wordmark alone, nothing to click away to */
25
+
variant: "marketing" | "app" | "bare";
24
26
onSignOut?: () => void | Promise<void>;
25
27
user: CurrentUser | null;
26
28
loading?: boolean;
···
39
41
40
42
<nav
41
43
class={`h-11 w-full px-5
42
-
${variant === "marketing" ? "" : "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"}
44
+
${variant === "app" ? "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]" : ""}
43
45
`}
44
46
aria-label="main"
45
47
>
···
59
61
</div>
60
62
61
63
<div class={variant === "marketing" ? "flex items-center gap-3.5" : "flex items-center gap-4"}>
62
-
{#if variant === "marketing"}
64
+
{#if variant === "bare"}
65
+
<!-- nothing: onboarding has no escape hatches in the bar itself -->
66
+
{:else if variant === "marketing"}
63
67
<TopbarSearch />
64
68
65
69
{@render divider()}
···
124
128
{:else if user}
125
129
<Dropdown id="profile-menu" group="topbar" align="right">
126
130
{#snippet trigger()}
127
-
<User
128
-
did={user.did}
129
-
handle={user.handle}
130
-
/>
131
+
<User did={user.did} handle={user.handle} />
131
132
{/snippet}
132
133
<DropdownItem href={`/${user.handle}`} icon={UserIcon}>Profile</DropdownItem>
133
134
<DropdownItem href={`/${user.handle}?tab=repos`} icon={BookMarked}>
···
137
138
Strings
138
139
</DropdownItem>
139
140
<DropdownItem href="/settings" icon={Cog}>Settings</DropdownItem>
141
+
<Separator/>
140
142
<DropdownItem danger icon={LogOut} onclick={onSignOut}>Logout</DropdownItem>
141
143
</Dropdown>
142
144
{:else}
+16
-33
web/src/lib/components/ui/DropdownItem.svelte
+16
-33
web/src/lib/components/ui/DropdownItem.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const dropdownItem = tv({
5
-
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",
5
+
base: "w-full justify-start rounded-none p-2 text-left focus-visible:-outline-offset-2",
6
6
variants: {
7
7
danger: {
8
8
false: "",
···
22
22
import type { Component, Snippet } from "svelte";
23
23
import type { SvelteHTMLElements } from "svelte/elements";
24
24
import { getContext } from "svelte";
25
+
import Button from "./Button.svelte";
26
+
25
27
interface Props {
26
28
href?: string;
27
29
icon?: Component<SvelteHTMLElements["svg"]>;
···
38
40
"dropdown-register"
39
41
);
40
42
41
-
let el = $state<HTMLElement>();
43
+
let el = $state<HTMLAnchorElement | HTMLButtonElement>();
42
44
43
45
$effect(() => {
44
46
if (!el || !registerItem) return;
···
51
53
};
52
54
</script>
53
55
54
-
{#if href}
55
-
<a
56
-
bind:this={el}
57
-
href={resolve(href as "/")}
58
-
class={classes}
59
-
role="menuitem"
60
-
tabindex={-1}
61
-
onclick={handleClick}
62
-
>
63
-
{#if icon}
64
-
{@const Glyph = icon}
65
-
<Glyph class="size-4" aria-hidden="true" />
66
-
{/if}
67
-
{@render children()}
68
-
</a>
69
-
{:else}
70
-
<button
71
-
bind:this={el}
72
-
type="button"
73
-
class={classes}
74
-
role="menuitem"
75
-
tabindex={-1}
76
-
onclick={handleClick}
77
-
>
78
-
{#if icon}
79
-
{@const Glyph = icon}
80
-
<Glyph class="size-4" aria-hidden="true" />
81
-
{/if}
82
-
{@render children()}
83
-
</button>
84
-
{/if}
56
+
<Button
57
+
bind:ref={el}
58
+
variant="ghost"
59
+
href={href ? resolve(href as "/") : undefined}
60
+
class={classes}
61
+
{icon}
62
+
role="menuitem"
63
+
tabindex={-1}
64
+
onclick={handleClick}
65
+
>
66
+
{@render children()}
67
+
</Button>