added drawers

package-lock.json

@@ -2412,6 +2412,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2840,6 +2841,24 @@
         "svelte": "^5.0.0"
       }
     },
+    "node_modules/vaul-svelte": {
+      "version": "1.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/vaul-svelte/-/vaul-svelte-1.0.0-next.7.tgz",
+      "integrity": "sha512-7zN7Bi3dFQixvvbUJY9uGDe7Ws/dGZeBQR2pXdXmzQiakjrxBvWo0QrmsX3HK+VH+SZOltz378cmgmCS9f9rSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "runed": "^0.23.2",
+        "svelte-toolbelt": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",

src/lib/components/shared/EmptyState.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { Button } from "$lib/components/ui/button";
-
-  interface Props {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon: any;
-    title: string;
-    description: string;
-    actionLabel?: string;
-    onAction?: () => void;
-    class?: string;
-  }
-
-  let {
-    icon: Icon,
-    title,
-    description,
-    actionLabel,
-    onAction,
-    class: className = ""
-  }: Props = $props();
-</script>
-
-<div class="flex flex-col items-center justify-center flex-1 text-center px-4 py-12 {className}">
-  <div class="rounded-full bg-muted p-6 mb-4">
-    <Icon class="h-12 w-12 text-muted-foreground" />
-  </div>
-  <h2 class="text-xl font-semibold text-foreground mb-2">{title}</h2>
-  <p class="text-muted-foreground max-w-sm mb-6">
-    {description}
-  </p>
-  {#if actionLabel && onAction}
-    <Button variant="default" onclick={onAction}>
-      {actionLabel}
-    </Button>
-  {/if}
-</div>

src/lib/components/shared/ResponsiveButton.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { Button } from "$lib/components/ui/button";
-
-  interface Props {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon: any;
-    label: string;
-    onclick?: (e: MouseEvent) => void;
-    mobileLabel?: string;
-    variant?:
-      | "default"
-      | "destructive"
-      | "outline"
-      | "secondary"
-      | "ghost"
-      | "link";
-    mobileVariant?:
-      | "default"
-      | "destructive"
-      | "outline"
-      | "secondary"
-      | "ghost"
-      | "link";
-    size?: "default" | "sm" | "lg" | "icon";
-    class?: string;
-    iconClass?: string;
-    title?: string;
-  }
-
-  let {
-    icon: Icon,
-    label,
-    onclick,
-    mobileLabel,
-    variant = "outline",
-    mobileVariant,
-    size = "default",
-    class: className = "h-10 w-10 sm:w-auto sm:h-10 sm:px-4",
-    iconClass,
-    title,
-  }: Props = $props();
-
-  let finalMobileVariant = $derived(mobileVariant ?? variant);
-
-  // Determine icon size based on button size if not overridden
-  let defaultIconClass = $derived.by(() => {
-    if (iconClass) return iconClass;
-    return "h-4 w-4";
-  });
-
-  let mobileIconClass = $derived(iconClass ?? "h-5 w-5");
-</script>
-
-<!-- Mobile Button -->
-<Button
-  variant={finalMobileVariant}
-  {size}
-  class="sm:hidden {className}"
-  {onclick}
-  title={title ?? label}
->
-  <Icon class={mobileIconClass} />
-  {#if mobileLabel}
-    <span>{mobileLabel}</span>
-  {/if}
-</Button>
-
-<!-- Desktop Button -->
-<Button
-  {variant}
-  {size}
-  class="hidden sm:inline-flex items-center gap-2 {className}"
-  {onclick}
-  title={title ?? label}
->
-  <Icon class={defaultIconClass} />
-  <span>{label}</span>
-</Button>

src/lib/components/story/LibraryView.svelte

@@ -6,8 +6,8 @@
   import { BookOpen, Upload, RefreshCw, Archive, Plus } from "lucide-svelte";
   import SetupWizard from "../wizard/SetupWizard.svelte";
 
-  import ResponsiveButton from "$lib/components/shared/ResponsiveButton.svelte";
-  import EmptyState from "$lib/components/shared/EmptyState.svelte";
+  import { Button } from "$lib/components/ui/button";
+  import EmptyState from "$lib/components/ui/empty-state/empty-state.svelte";
   import StoryCard from "$lib/components/story/StoryCard.svelte";
 
   // File input for import (HTML-based for mobile compatibility)
@@ -98,21 +98,24 @@
         </p>
       </div>
       <div class="flex items-center gap-1.5 sm:gap-2 shrink-0">
-        <ResponsiveButton
+        <Button
           icon={RefreshCw}
           label="Sync"
+          variant="outline"
           title="Sync stories between devices"
           onclick={() => ui.openSyncModal()}
         />
-        <ResponsiveButton
+        <Button
           icon={Archive}
           label="Vault"
+          variant="outline"
           title="Vault"
           onclick={() => ui.setActivePanel("vault")}
         />
-        <ResponsiveButton
+        <Button
           icon={Upload}
           label="Import"
+          variant="outline"
           title="Import Story"
           onclick={triggerImport}
         />
@@ -123,7 +126,7 @@
           bind:this={importFileInput}
           onchange={handleImportFileSelect}
         />
-        <ResponsiveButton
+        <Button
           variant="default"
           icon={Plus}
           label="New Story"

src/lib/components/story/StoryCard.svelte

@@ -4,7 +4,6 @@
   import * as Card from "$lib/components/ui/card";
   import TagBadge from "$lib/components/tags/TagBadge.svelte";
   import type { Story } from "$lib/types";
-  import ResponsiveButton from "../shared/ResponsiveButton.svelte";
 
   interface Props {
     story: Story;
@@ -57,14 +56,13 @@
         <Card.Title class="text-lg font-semibold leading-tight truncate">
           {s.title}
         </Card.Title>
-        <ResponsiveButton
+        <Button
           icon={Trash2}
-          variant="link"
-          class="hover:text-destructive h-auto w-auto"
+          variant="ghost"
+          class="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-transparent"
           size="icon"
           onclick={(e) => onDelete(s.id, e)}
           title="Delete story"
-          label=""
         />
       </div>
       {#if s.genre}

src/lib/components/ui/responsive-modal/responsive-modal-content.svelte

@@ -9,8 +9,8 @@
 </script>
 
  {#if isMobile.current}
-	<Drawer.Content 
-        class={cn("max-h-[85vh] h-auto p-0 pb-[env(safe-area-inset-bottom)]", className)} 
+	<Drawer.Content
+        class={cn("max-h-[85vh] h-auto p-0 pb-[env(safe-area-inset-bottom)]", className)}
         {...props}
     >
 		{@render children?.()}