feat(layout): login, uygulama kabuğu, alt menü, hızlı ekle ve dashboard

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/layout/app-header.tsx

@@ -0,0 +1,31 @@
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import type { SessionUser } from "@/features/auth/types";
+import type { HouseholdSummary } from "@/features/households/types";
+import { tr } from "@/i18n/tr";
+import { HouseholdSwitcher } from "./household-switcher";
+import { QuickAddButton } from "./quick-add";
+import { ThemeToggle } from "./theme-toggle";
+import { UserMenu } from "./user-menu";
+
+/** Üst bar: menü düğmesi (masaüstü), hane seçici, hızlı ekle, tema ve kullanıcı menüsü. */
+export function AppHeader({
+  user,
+  households,
+  version,
+}: {
+  user: SessionUser;
+  households: HouseholdSummary[];
+  version: string;
+}) {
+  return (
+    <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b bg-background/95 px-3 backdrop-blur supports-backdrop-filter:bg-background/80 md:px-4">
+      <SidebarTrigger className="hidden md:inline-flex" aria-label={tr.nav.toggleSidebar} />
+      <HouseholdSwitcher households={households} />
+      <div className="ml-auto flex items-center gap-1">
+        <QuickAddButton className="hidden md:inline-flex" />
+        <ThemeToggle />
+        <UserMenu user={user} version={version} />
+      </div>
+    </header>
+  );
+}

src/components/layout/app-sidebar.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Logo } from "@/components/brand/logo";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { tr } from "@/i18n/tr";
+import { ADMIN_NAV, MAIN_NAV, isActivePath, isAvailable, type NavItem } from "./nav-config";
+
+function NavList({ items, pathname }: { items: NavItem[]; pathname: string }) {
+  const { setOpenMobile } = useSidebar();
+  return (
+    <SidebarMenu>
+      {items.map((item) => {
+        const Icon = item.icon;
+        if (!isAvailable(item)) {
+          return (
+            <SidebarMenuItem key={item.href}>
+              <SidebarMenuButton
+                aria-disabled
+                disabled
+                tooltip={`${item.label} · ${tr.common.comingSoon}`}
+              >
+                <Icon />
+                <span>{item.label}</span>
+              </SidebarMenuButton>
+              <SidebarMenuBadge className="text-[0.65rem] opacity-70">
+                {tr.common.comingSoon}
+              </SidebarMenuBadge>
+            </SidebarMenuItem>
+          );
+        }
+        const active = isActivePath(pathname, item.href);
+        return (
+          <SidebarMenuItem key={item.href}>
+            <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+              <Link
+                href={item.href}
+                aria-current={active ? "page" : undefined}
+                onClick={() => setOpenMobile(false)}
+              >
+                <Icon />
+                <span>{item.label}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+}
+
+/** Masaüstünde sabit yan menü; mobilde "Daha fazla" ile açılan Sheet. */
+export function AppSidebar({ isAdmin, version }: { isAdmin: boolean; version: string }) {
+  const pathname = usePathname();
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="h-14 justify-center px-3">
+        <Link
+          href="/dashboard"
+          aria-label={tr.nav.dashboard}
+          className="group-data-[collapsible=icon]:hidden"
+        >
+          <Logo />
+        </Link>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>{tr.nav.main}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <NavList items={MAIN_NAV} pathname={pathname} />
+          </SidebarGroupContent>
+        </SidebarGroup>
+        {isAdmin ? (
+          <SidebarGroup>
+            <SidebarGroupLabel>{tr.nav.admin}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <NavList items={ADMIN_NAV} pathname={pathname} />
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ) : null}
+      </SidebarContent>
+      <SidebarFooter className="px-4 pb-3 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden">
+        {tr.app.name} · {tr.app.version} {version}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

src/components/layout/bottom-nav.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Menu, Plus } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useSidebar } from "@/components/ui/sidebar";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { BOTTOM_NAV, isActivePath, isAvailable, type NavItem } from "./nav-config";
+import { useQuickAdd } from "./quick-add";
+
+const itemClass =
+  "flex min-h-14 flex-1 flex-col items-center justify-center gap-0.5 text-[0.7rem] font-medium outline-none focus-visible:bg-muted";
+
+function BottomNavLink({ item, pathname }: { item: NavItem; pathname: string }) {
+  const Icon = item.icon;
+  if (!isAvailable(item)) {
+    return (
+      <span
+        aria-disabled
+        className={cn(itemClass, "text-muted-foreground/50")}
+        title={tr.common.comingSoon}
+      >
+        <Icon className="size-5" />
+        {item.label}
+      </span>
+    );
+  }
+  const active = isActivePath(pathname, item.href);
+  return (
+    <Link
+      href={item.href}
+      aria-current={active ? "page" : undefined}
+      className={cn(itemClass, active ? "text-primary" : "text-muted-foreground")}
+    >
+      <Icon className="size-5" />
+      {item.label}
+    </Link>
+  );
+}
+
+/** Mobil alt gezinme çubuğu (md altı). */
+export function BottomNav() {
+  const pathname = usePathname();
+  const { openQuickAdd } = useQuickAdd();
+  const { setOpenMobile } = useSidebar();
+  return (
+    <nav
+      aria-label={tr.nav.main}
+      className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 pb-safe backdrop-blur supports-backdrop-filter:bg-background/80 md:hidden"
+    >
+      <div className="flex items-stretch">
+        {BOTTOM_NAV.left.map((item) => (
+          <BottomNavLink key={item.href} item={item} pathname={pathname} />
+        ))}
+        <div className="flex flex-1 items-center justify-center">
+          <button
+            type="button"
+            onClick={openQuickAdd}
+            aria-label={tr.quickAdd.button}
+            className="-mt-5 flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg outline-none focus-visible:ring-4 focus-visible:ring-ring/50"
+          >
+            <Plus className="size-6" />
+          </button>
+        </div>
+        {BOTTOM_NAV.right.map((item) => (
+          <BottomNavLink key={item.href} item={item} pathname={pathname} />
+        ))}
+        <button
+          type="button"
+          onClick={() => setOpenMobile(true)}
+          className={cn(itemClass, "text-muted-foreground")}
+        >
+          <Menu className="size-5" />
+          {tr.nav.more}
+        </button>
+      </div>
+    </nav>
+  );
+}

src/components/layout/household-switcher.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { House } from "lucide-react";
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { HouseholdSummary } from "@/features/households/types";
+import { tr } from "@/i18n/tr";
+
+/** Üst bar aktif hane seçici. FAZ 5: seçim sunucuda (cookie) saklanacak. */
+export function HouseholdSwitcher({ households }: { households: HouseholdSummary[] }) {
+  const [value, setValue] = useState(households[0]?.id);
+  const current = households.find((h) => h.id === value);
+  if (households.length === 0) return null;
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger aria-label={tr.household.label} className="w-[min(46vw,13rem)]">
+        <House className="text-muted-foreground" />
+        {/* Etiket children ile verilir: Radix aksi halde hydration'a kadar boş gösterir. */}
+        <SelectValue placeholder={tr.household.select}>{current?.name}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {households.map((h) => (
+          <SelectItem key={h.id} value={h.id}>
+            {h.name}
+            <span className="text-xs text-muted-foreground">· {tr.household.roles[h.role]}</span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

src/components/layout/nav-config.ts

@@ -0,0 +1,59 @@
+import {
+  ArrowLeftRight,
+  CalendarClock,
+  ChartColumn,
+  Coins,
+  House,
+  LayoutDashboard,
+  Package,
+  Settings,
+  ShoppingCart,
+  Target,
+  UserCog,
+  Users,
+  Wallet,
+  type LucideIcon,
+} from "lucide-react";
+import { tr } from "@/i18n/tr";
+
+export type NavItem = {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  /** Sayfanın ekleneceği faz; mevcut fazdan büyükse "Yakında" olarak pasif gösterilir. */
+  phase: number;
+};
+
+/** Şu an tamamlanmış en yüksek faz — sayfalar eklendikçe artar. */
+export const CURRENT_PHASE = 2;
+
+export const isAvailable = (item: NavItem) => item.phase <= CURRENT_PHASE;
+
+export const MAIN_NAV: NavItem[] = [
+  { href: "/dashboard", label: tr.nav.dashboard, icon: LayoutDashboard, phase: 2 },
+  { href: "/islemler", label: tr.nav.transactions, icon: ArrowLeftRight, phase: 6 },
+  { href: "/hesaplar", label: tr.nav.accounts, icon: Wallet, phase: 6 },
+  { href: "/planli", label: tr.nav.planned, icon: CalendarClock, phase: 7 },
+  { href: "/cari", label: tr.nav.contacts, icon: Users, phase: 8 },
+  { href: "/birikim", label: tr.nav.savings, icon: Coins, phase: 9 },
+  { href: "/butce", label: tr.nav.budget, icon: Target, phase: 10 },
+  { href: "/stok", label: tr.nav.stock, icon: Package, phase: 11 },
+  { href: "/alisveris", label: tr.nav.shopping, icon: ShoppingCart, phase: 13 },
+  { href: "/raporlar", label: tr.nav.reports, icon: ChartColumn, phase: 14 },
+  { href: "/ayarlar", label: tr.nav.settings, icon: Settings, phase: 5 },
+];
+
+export const ADMIN_NAV: NavItem[] = [
+  { href: "/admin/kullanicilar", label: tr.nav.adminUsers, icon: UserCog, phase: 2 },
+  { href: "/admin/haneler", label: tr.nav.adminHouseholds, icon: House, phase: 5 },
+];
+
+/** Mobil alt menü: ortada Hızlı ekle, sağda "Daha fazla" (yan menüyü açar). */
+export const BOTTOM_NAV = {
+  left: [MAIN_NAV[0]!, MAIN_NAV[1]!],
+  right: [MAIN_NAV[6]!],
+};
+
+export function isActivePath(pathname: string, href: string) {
+  return pathname === href || pathname.startsWith(`${href}/`);
+}

src/components/layout/quick-add.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { ArrowDownLeft, ArrowLeftRight, ArrowUpRight, Plus } from "lucide-react";
+import { createContext, use, useState } from "react";
+import { toast } from "sonner";
+import { ResponsiveDialog } from "@/components/responsive-dialog";
+import { Button } from "@/components/ui/button";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+
+type QuickAddKind = "expense" | "income" | "transfer";
+
+const QuickAddContext = createContext<{ openQuickAdd: () => void } | null>(null);
+
+export function useQuickAdd() {
+  const ctx = use(QuickAddContext);
+  if (!ctx) throw new Error("useQuickAdd, QuickAddProvider içinde kullanılmalı");
+  return ctx;
+}
+
+const CHOICES: {
+  kind: QuickAddKind;
+  label: string;
+  hint: string;
+  icon: typeof Plus;
+  tone: string;
+}[] = [
+  {
+    kind: "expense",
+    label: tr.quickAdd.expense,
+    hint: tr.quickAdd.expenseHint,
+    icon: ArrowUpRight,
+    tone: "text-expense bg-expense/10",
+  },
+  {
+    kind: "income",
+    label: tr.quickAdd.income,
+    hint: tr.quickAdd.incomeHint,
+    icon: ArrowDownLeft,
+    tone: "text-income bg-income/10",
+  },
+  {
+    kind: "transfer",
+    label: tr.quickAdd.transfer,
+    hint: tr.quickAdd.transferHint,
+    icon: ArrowLeftRight,
+    tone: "text-budget bg-budget/10",
+  },
+];
+
+/** Hızlı ekle (gider / gelir / transfer) — her ekrandan açılabilir. */
+export function QuickAddProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  function choose(kind: QuickAddKind) {
+    setOpen(false);
+    // FAZ 6: ilgili işlem formu açılacak.
+    toast.info(`${CHOICES.find((c) => c.kind === kind)?.label}: ${tr.quickAdd.notYet}`);
+  }
+
+  return (
+    <QuickAddContext value={{ openQuickAdd: () => setOpen(true) }}>
+      {children}
+      <ResponsiveDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={tr.quickAdd.title}
+        description={tr.quickAdd.description}
+      >
+        <div className="grid gap-2 pb-2 sm:grid-cols-3">
+          {CHOICES.map(({ kind, label, hint, icon: Icon, tone }) => (
+            <button
+              key={kind}
+              type="button"
+              onClick={() => choose(kind)}
+              className="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 sm:flex-col sm:text-center"
+            >
+              <span className={cn("flex size-10 items-center justify-center rounded-full", tone)}>
+                <Icon className="size-5" />
+              </span>
+              <span className="flex flex-col">
+                <span className="font-medium">{label}</span>
+                <span className="text-xs text-muted-foreground">{hint}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </ResponsiveDialog>
+    </QuickAddContext>
+  );
+}
+
+/** Masaüstü üst bar düğmesi. */
+export function QuickAddButton({ className }: { className?: string }) {
+  const { openQuickAdd } = useQuickAdd();
+  return (
+    <Button onClick={openQuickAdd} className={className}>
+      <Plus />
+      {tr.quickAdd.button}
+    </Button>
+  );
+}

src/components/layout/theme-toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { tr } from "@/i18n/tr";
+
+const OPTIONS = [
+  { value: "light", label: tr.theme.light, icon: Sun },
+  { value: "dark", label: tr.theme.dark, icon: Moon },
+  { value: "system", label: tr.theme.system, icon: Monitor },
+] as const;
+
+/** Açık / Koyu / Sistem tema seçici. İkon CSS ile değişir (hydration güvenli). */
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label={tr.theme.label}>
+          <Sun className="scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute scale-0 rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-36">
+        <DropdownMenuLabel>{tr.theme.label}</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={theme ?? "system"} onValueChange={setTheme}>
+          {OPTIONS.map(({ value, label, icon: Icon }) => (
+            <DropdownMenuRadioItem key={value} value={value}>
+              <Icon />
+              {label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/layout/user-menu.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { SessionUser } from "@/features/auth/types";
+import { tr } from "@/i18n/tr";
+
+export function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p.charAt(0).toLocaleUpperCase("tr-TR"))
+    .join("");
+}
+
+/** Kullanıcı menüsü: ad, rol, sürüm ve Çıkış yap. */
+export function UserMenu({ user, version }: { user: SessionUser; version: string }) {
+  const router = useRouter();
+
+  function logout() {
+    // FAZ 3: authClient.signOut() sonrası yönlendirme.
+    toast.success(tr.userMenu.loggedOut);
+    router.replace("/login");
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          className="rounded-full"
+          aria-label={tr.userMenu.open}
+        >
+          <Avatar>
+            <AvatarFallback className="bg-primary/10 font-medium text-primary">
+              {initials(user.name)}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-60">
+        <DropdownMenuLabel className="flex flex-col gap-1 font-normal">
+          <span className="truncate font-medium text-foreground">{user.name}</span>
+          <span className="truncate text-xs text-muted-foreground">@{user.username}</span>
+          <Badge variant={user.role === "admin" ? "default" : "secondary"} className="mt-1">
+            {tr.roles[user.role]}
+          </Badge>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" onSelect={logout}>
+          <LogOut />
+          {tr.userMenu.logout}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+          {tr.app.name} · {tr.app.version} {version}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/page-header.tsx

@@ -0,0 +1,20 @@
+/** Sayfa başlığı + açıklama + sağda isteğe bağlı aksiyonlar. */
+export function PageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-wrap items-end justify-between gap-3">
+      <div className="min-w-0">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  );
+}

src/components/password-input.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { tr } from "@/i18n/tr";
+
+/** Göster/gizle düğmeli şifre alanı. */
+export function PasswordInput(props: Omit<React.ComponentProps<typeof InputGroupInput>, "type">) {
+  const [visible, setVisible] = useState(false);
+  const label = visible ? tr.common.hidePassword : tr.common.showPassword;
+  return (
+    <InputGroup>
+      <InputGroupInput type={visible ? "text" : "password"} {...props} />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          size="icon-xs"
+          aria-label={label}
+          title={label}
+          aria-pressed={visible}
+          onClick={() => setVisible((v) => !v)}
+        >
+          {visible ? <EyeOff /> : <Eye />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}

src/components/providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+/** Kök istemci sağlayıcıları: tema (açık/koyu/sistem), tooltip ve bildirimler. */
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <TooltipProvider delayDuration={300}>
+        {children}
+        <Toaster position="top-center" richColors closeButton />
+      </TooltipProvider>
+    </ThemeProvider>
+  );
+}

src/components/responsive-dialog.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+};
+
+/**
+ * Masaüstünde Dialog, mobilde (neredeyse) tam ekran alttan açılan Drawer.
+ * Formlar bu bileşenle açılır (Bölüm 4: "formlar mobilde tam ekran Sheet/Drawer").
+ */
+export function ResponsiveDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  className,
+}: Props) {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent className="max-h-[96dvh]">
+          <DrawerHeader className="text-left">
+            <DrawerTitle>{title}</DrawerTitle>
+            {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+          </DrawerHeader>
+          <div className={cn("overflow-y-auto px-4 pb-2", className)}>{children}</div>
+          {footer ? <DrawerFooter className="pb-safe">{footer}</DrawerFooter> : null}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <div className={className}>{children}</div>
+        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}