feature: add necessary shadcn components for CategoryFilter and Sidebar

src/shared/ui/sheet/index.ts

@@ -0,0 +1,34 @@
+import Close from './sheet-close.svelte';
+import Content from './sheet-content.svelte';
+import Description from './sheet-description.svelte';
+import Footer from './sheet-footer.svelte';
+import Header from './sheet-header.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Portal from './sheet-portal.svelte';
+import Title from './sheet-title.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Root from './sheet.svelte';
+
+export {
+    Close,
+    Close as SheetClose,
+    Content,
+    Content as SheetContent,
+    Description,
+    Description as SheetDescription,
+    Footer,
+    Footer as SheetFooter,
+    Header,
+    Header as SheetHeader,
+    Overlay,
+    Overlay as SheetOverlay,
+    Portal,
+    Portal as SheetPortal,
+    Root,
+    //
+    Root as Sheet,
+    Title,
+    Title as SheetTitle,
+    Trigger,
+    Trigger as SheetTrigger,
+};

src/shared/ui/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

src/shared/ui/sheet/sheet-content.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+export const sheetVariants = tv({
+    base:
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    variants: {
+        side: {
+            top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+            bottom:
+                'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+            left:
+                'data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
+            right:
+                'data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+
+export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+    import { cn, type WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
+import XIcon from '@lucide/svelte/icons/x';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ComponentProps } from 'svelte';
+import SheetOverlay from './sheet-overlay.svelte';
+import SheetPortal from './sheet-portal.svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    side = 'right',
+    portalProps,
+    children,
+    ...restProps
+}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    side?: Side;
+    children: Snippet;
+} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+        bind:ref
+        data-slot="sheet-content"
+        class={cn(sheetVariants({ side }), className)}
+        {...restProps}
+    >
+        {@render children?.()}
+        <SheetPrimitive.Close
+            class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+        >
+            <XIcon class="size-4" />
+            <span class="sr-only">Close</span>
+        </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+</SheetPortal>

src/shared/ui/sheet/sheet-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { cn } from '$shared/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+    bind:ref
+    data-slot="sheet-description"
+    class={cn('text-muted-foreground text-sm', className)}
+    {...restProps}
+/>

src/shared/ui/sheet/sheet-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/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="sheet-footer"
+    class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/ui/sheet/sheet-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '$shared/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="sheet-header"
+    class={cn('flex flex-col gap-1.5 p-4', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn } from '$shared/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+    bind:ref
+    data-slot="sheet-overlay"
+    class={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+    )}
+    {...restProps}
+/>

src/shared/ui/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />

src/shared/ui/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { cn } from '$shared/utils/shadcn-utils.js';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+    bind:ref
+    data-slot="sheet-title"
+    class={cn('text-foreground font-semibold', className)}
+    {...restProps}
+/>

src/shared/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

src/shared/ui/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+
+let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />