feature: add necessary shadcn components for CategoryFilter and Sidebar

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import * as Tooltip from '$shared/ui/tooltip/index.js';
+import { cn, type WithElementRef } from '$shared/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>