alice.pds.demo.boltless.dev / core
This repository has no description
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

web/settings: match SettingsNav to the design system navigation

the DS navigation frame gaps its items by 4px and clips each one so a
long label cannot grow it taller. add both, with a truncating label span
so clipped text ends in an ellipsis instead of vanishing.

figma draws the item 36px tall where this renders 38px, but that 2px is
the CSS border adding to a box whose figma stroke sits inside it, and
Button md carries the same offset — leave it.

add stories too: /settings is auth-gated, so storybook is the only place
these four item states can be reviewed.

Signed-off-by: eti <eti@eti.tf>

author
eti committer
dawn date (Jul 31, 2026, 10:57 PM +0300) commit dabd9cf3 parent 45e0e3d5 change-id utupkyyl
+59 -3
+54
web/src/lib/components/settings/SettingsNav.stories.svelte
··· 1 + <script module lang="ts"> 2 + import { defineMeta } from "@storybook/addon-svelte-csf"; 3 + import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte"; 4 + import User from "$icon/user-round"; 5 + import Key from "$icon/key"; 6 + import Mail from "$icon/mail"; 7 + import Bell from "$icon/bell"; 8 + import Volleyball from "$icon/volleyball"; 9 + import Spool from "$icon/spool"; 10 + import Globe from "$icon/globe"; 11 + 12 + const items: SettingsNavItem[] = [ 13 + { id: "profile", label: "Profile", href: "/settings", icon: User }, 14 + { id: "keys", label: "Keys", href: "/settings/keys", icon: Key }, 15 + { id: "emails", label: "Emails", href: "/settings/emails", icon: Mail }, 16 + { id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell }, 17 + { id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball }, 18 + { id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool }, 19 + { id: "sites", label: "Sites", href: "/settings/sites", icon: Globe } 20 + ]; 21 + 22 + const { Story } = defineMeta({ 23 + title: "Settings/SettingsNav", 24 + component: SettingsNav, 25 + tags: ["autodocs"], 26 + args: { items, active: "profile" } 27 + }); 28 + </script> 29 + 30 + <!-- the frame stretches to its container in the settings layout, so the stories put it 31 + in a tall box rather than letting it hug its items --> 32 + <Story name="Default"> 33 + {#snippet template(args)} 34 + <div class="flex h-[568px] w-44 items-stretch"> 35 + <SettingsNav {...args} /> 36 + </div> 37 + {/snippet} 38 + </Story> 39 + 40 + <Story name="Active elsewhere" args={{ active: "notifications" }}> 41 + {#snippet template(args)} 42 + <div class="flex h-[568px] w-44 items-stretch"> 43 + <SettingsNav {...args} /> 44 + </div> 45 + {/snippet} 46 + </Story> 47 + 48 + <Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}> 49 + {#snippet template(args)} 50 + <div class="flex h-[568px] w-44 items-stretch"> 51 + <SettingsNav {...args} /> 52 + </div> 53 + {/snippet} 54 + </Story>
+5 -3
web/src/lib/components/settings/SettingsNav.svelte
··· 27 27 // grows by 1px on hover. 28 28 const itemClass = (isActive: boolean) => 29 29 [ 30 - "flex min-h-8 w-full items-center gap-1.5 rounded-sm border px-3 py-1.5", 30 + "flex min-h-8 w-full items-center gap-1.5 overflow-hidden rounded-sm border px-3 py-1.5", 31 31 "typography-paragraph-regular text-foreground-default no-underline hover:no-underline", 32 32 "transition-colors duration-150 ease-in-out", 33 33 "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus", ··· 38 38 </script> 39 39 40 40 <nav 41 - class="flex w-full shrink-0 flex-col border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0" 41 + class="flex w-full shrink-0 flex-col gap-1 border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0" 42 42 aria-label={label} 43 43 > 44 44 {#each items as item (item.id)} ··· 52 52 {#if Glyph} 53 53 <Glyph class="size-3.5 shrink-0" aria-hidden="true" /> 54 54 {/if} 55 - {item.label} 55 + <!-- Figma clips the item rather than letting a long label wrap it taller; an 56 + ellipsis keeps that height without hiding the label outright --> 57 + <span class="min-w-0 truncate">{item.label}</span> 56 58 </a> 57 59 {/each} 58 60 </nav>