feature: move all shadcn related code to src/shared/shadcn

src/shared/shadcn/ui/sidebar/constants.ts

@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';

src/shared/shadcn/ui/sidebar/context.svelte.ts

@@ -0,0 +1,81 @@
+import { IsMobile } from '$shared/shadcn/hooks/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+    /**
+     * A getter function that returns the current open state of the sidebar.
+     * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+     * component.
+     */
+    open: Getter<boolean>;
+
+    /**
+     * A function that sets the open state of the sidebar. To support `bind:open`, we need
+     * a source of truth for changing the open state to ensure it will be synced throughout
+     * the sub-components and any `bind:` references.
+     */
+    setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+    readonly props: SidebarStateProps;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    setOpen: SidebarStateProps['setOpen'];
+    #isMobile: IsMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+
+    constructor(props: SidebarStateProps) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+    }
+
+    // Convenience getter for checking if the sidebar is mobile
+    // without this, we would need to use `sidebar.isMobile.current` everywhere
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+
+    // Event handler to apply to the `<svelte:window>`
+    handleShortcutKeydown = (e: KeyboardEvent) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+
+    setOpenMobile = (value: boolean) => {
+        this.openMobile = value;
+    };
+
+    toggle = () => {
+        return this.#isMobile.current
+            ? (this.openMobile = !this.openMobile)
+            : this.setOpen(!this.open);
+    };
+}
+
+const SYMBOL_KEY = 'scn-sidebar';
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+    return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}

src/shared/shadcn/ui/sidebar/index.ts

@@ -0,0 +1,75 @@
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
+
+export {
+    Content,
+    Content as SidebarContent,
+    Footer,
+    Footer as SidebarFooter,
+    Group,
+    Group as SidebarGroup,
+    GroupAction,
+    GroupAction as SidebarGroupAction,
+    GroupContent,
+    GroupContent as SidebarGroupContent,
+    GroupLabel,
+    GroupLabel as SidebarGroupLabel,
+    Header,
+    Header as SidebarHeader,
+    Input,
+    Input as SidebarInput,
+    Inset,
+    Inset as SidebarInset,
+    Menu,
+    Menu as SidebarMenu,
+    MenuAction,
+    MenuAction as SidebarMenuAction,
+    MenuBadge,
+    MenuBadge as SidebarMenuBadge,
+    MenuButton,
+    MenuButton as SidebarMenuButton,
+    MenuItem,
+    MenuItem as SidebarMenuItem,
+    MenuSkeleton,
+    MenuSkeleton as SidebarMenuSkeleton,
+    MenuSub,
+    MenuSub as SidebarMenuSub,
+    MenuSubButton,
+    MenuSubButton as SidebarMenuSubButton,
+    MenuSubItem,
+    MenuSubItem as SidebarMenuSubItem,
+    Provider,
+    Provider as SidebarProvider,
+    Rail,
+    Rail as SidebarRail,
+    Root,
+    //
+    Root as Sidebar,
+    Separator,
+    Separator as SidebarSeparator,
+    Trigger,
+    Trigger as SidebarTrigger,
+    useSidebar,
+};

src/shared/shadcn/ui/sidebar/sidebar-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    class={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-footer"
+    data-sidebar="footer"
+    class={cn('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    child,
+    ...restProps
+}: WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+} = $props();
+
+const mergedProps = $derived({
+    class: cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+    ),
+    'data-slot': 'sidebar-group-action',
+    'data-sidebar': 'group-action',
+    ...restProps,
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <button bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </button>
+{/if}

src/shared/shadcn/ui/sidebar/sidebar-group-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-group-content"
+    data-sidebar="group-content"
+    class={cn('w-full text-sm', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    children,
+    child,
+    class: className,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+} = $props();
+
+const mergedProps = $derived({
+    class: cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+    ),
+    'data-slot': 'sidebar-group-label',
+    'data-sidebar': 'group-label',
+    ...restProps,
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <div bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </div>
+{/if}

src/shared/shadcn/ui/sidebar/sidebar-group.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-group"
+    data-sidebar="group"
+    class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-header"
+    data-sidebar="header"
+    class={cn('flex flex-col gap-2 p-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { Input } from '$shared/shadcn/input/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...restProps
+}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+    bind:ref
+    bind:value
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    class={cn('bg-background h-8 w-full shadow-none', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/sidebar/sidebar-inset.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+    bind:this={ref}
+    data-slot="sidebar-inset"
+    class={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</main>

src/shared/shadcn/ui/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    showOnHover = false,
+    children,
+    child,
+    ...restProps
+}: WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    showOnHover?: boolean;
+} = $props();
+
+const mergedProps = $derived({
+    class: cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover
+            && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+    ),
+    'data-slot': 'sidebar-menu-action',
+    'data-sidebar': 'menu-action',
+    ...restProps,
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <button bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </button>
+{/if}

src/shared/shadcn/ui/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    class={cn(
+        'text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+
+export const sidebarMenuButtonVariants = tv({
+    base:
+        'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline:
+                'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+
+export type SidebarMenuButtonVariant = VariantProps<
+    typeof sidebarMenuButtonVariants
+>['variant'];
+export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+    import * as Tooltip from '$shared/shadcn/tooltip/index.js';
+import {
+    cn,
+    type WithElementRef,
+    type WithoutChildrenOrChild,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { mergeProps } from 'bits-ui';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    child,
+    variant = 'default',
+    size = 'default',
+    isActive = false,
+    tooltipContent,
+    tooltipContentProps,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    isActive?: boolean;
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+    tooltipContent?: Snippet | string;
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+} = $props();
+
+const sidebar = useSidebar();
+
+const buttonProps = $derived({
+    class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+    'data-slot': 'sidebar-menu-button',
+    'data-sidebar': 'menu-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps,
+});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+    {@const mergedProps = mergeProps(buttonProps, props)}
+    {#if child}
+        {@render child({ props: mergedProps })}
+    {:else}
+        <button bind:this={ref} {...mergedProps}>
+            {@render children?.()}
+        </button>
+    {/if}
+{/snippet}
+
+{#if !tooltipContent}
+    {@render Button({})}
+{:else}
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({ props })}
+                {@render Button({ props })}
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content
+            side="right"
+            align="center"
+            hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+            {...tooltipContentProps}
+        >
+            {#if typeof tooltipContent === 'string'}
+                {tooltipContent}
+            {:else if tooltipContent}
+                {@render tooltipContent()}
+            {/if}
+        </Tooltip.Content>
+    </Tooltip.Root>
+{/if}

src/shared/shadcn/ui/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    class={cn('group/menu-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

src/shared/shadcn/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Skeleton } from '$shared/shadcn/skeleton/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    showIcon = false,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean;
+} = $props();
+
+// Random width between 50% and 90%
+const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+    {...restProps}
+>
+    {#if showIcon}
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+    {/if}
+    <Skeleton
+        class="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style="--skeleton-width: {width};"
+    />
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    children,
+    child,
+    class: className,
+    size = 'md',
+    isActive = false,
+    ...restProps
+}: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+} = $props();
+
+const mergedProps = $derived({
+    class: cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+    ),
+    'data-slot': 'sidebar-menu-sub-button',
+    'data-sidebar': 'menu-sub-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps,
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <a bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </a>
+{/if}

src/shared/shadcn/ui/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    class={cn('group/menu-sub-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

src/shared/shadcn/ui/sidebar/sidebar-menu-sub.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    class={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

src/shared/shadcn/ui/sidebar/sidebar-menu.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

src/shared/shadcn/ui/sidebar/sidebar-provider.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import * as Tooltip from '$shared/shadcn/tooltip/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import {
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON,
+} from './constants.js';
+import { setSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    open = $bindable(true),
+    onOpenChange = () => {},
+    class: className,
+    style,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} = $props();
+
+const sidebar = setSidebar({
+    open: () => open,
+    setOpen: (value: boolean) => {
+        open = value;
+        onOpenChange(value);
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie =
+            `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+    <div
+        data-slot="sidebar-wrapper"
+        style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+        class={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+        )}
+        bind:this={ref}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+</Tooltip.Provider>

src/shared/shadcn/ui/sidebar/sidebar-rail.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+const sidebar = useSidebar();
+</script>
+
+<button
+    bind:this={ref}
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    tabIndex={-1}
+    onclick={sidebar.toggle}
+    title="Toggle Sidebar"
+    class={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-[calc(1/2*100%-1px)] after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-end-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-start-2',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

src/shared/shadcn/ui/sidebar/sidebar-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Separator } from '$shared/shadcn/separator/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    class={cn('bg-sidebar-border', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Button } from '$shared/shadcn/button/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+import type { ComponentProps } from 'svelte';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    onclick,
+    ...restProps
+}: ComponentProps<typeof Button> & {
+    onclick?: (e: MouseEvent) => void;
+} = $props();
+
+const sidebar = useSidebar();
+</script>
+
+<Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    class={cn('size-7', className)}
+    type="button"
+    onclick={(e => {
+        onclick?.(e);
+        sidebar.toggle();
+    })}
+    {...restProps}
+>
+    <PanelLeftIcon />
+    <span class="sr-only">Toggle Sidebar</span>
+</Button>

src/shared/shadcn/ui/sidebar/sidebar.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import * as Sheet from '$shared/shadcn/sheet/index.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+import { useSidebar } from './context.svelte.js';
+
+let {
+    ref = $bindable(null),
+    side = 'left',
+    variant = 'sidebar',
+    collapsible = 'offcanvas',
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+} = $props();
+
+const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+    <div
+        class={cn(
+            'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+            className,
+        )}
+        bind:this={ref}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{:else if sidebar.isMobile}
+    <Sheet.Root
+        bind:open={() => sidebar.openMobile, v => sidebar.setOpenMobile(v)}
+        {...restProps}
+    >
+        <Sheet.Content
+            data-sidebar="sidebar"
+            data-slot="sidebar"
+            data-mobile="true"
+            class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+            style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+            {side}
+        >
+            <Sheet.Header class="sr-only">
+                <Sheet.Title>Sidebar</Sheet.Title>
+                <Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+            </Sheet.Header>
+            <div class="flex h-full w-full flex-col">
+                {@render children?.()}
+            </div>
+        </Sheet.Content>
+    </Sheet.Root>
+{:else}
+    <div
+        bind:this={ref}
+        class="text-sidebar-foreground group peer hidden md:block"
+        data-state={sidebar.state}
+        data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+        data-slot="sidebar"
+    >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div
+            data-slot="sidebar-gap"
+            class={cn(
+                'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+                'group-data-[collapsible=offcanvas]:w-0',
+                'group-data-[side=right]:rotate-180',
+                variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+            )}
+        >
+        </div>
+        <div
+            data-slot="sidebar-container"
+            class={cn(
+                'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+                side === 'left'
+                    ? 'start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'
+                    : 'end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s',
+                className,
+            )}
+            {...restProps}
+        >
+            <div
+                data-sidebar="sidebar"
+                data-slot="sidebar-inner"
+                class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+            >
+                {@render children?.()}
+            </div>
+        </div>
+    </div>
+{/if}