feat: Implement a new dashboard shell with animated background, refactor dashboard data fetching into a dedicated API route, and introduce new UI components.**

src/components/branding/logo.tsx

@@ -5,30 +5,29 @@ import { cn } from "~/lib/utils";
 
 interface LogoProps {
   className?: string;
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xl" | "icon";
   animated?: boolean;
 }
 
 export function Logo({ className, size = "md", animated = true }: LogoProps) {
   const sizeClasses = {
-    sm: "text-sm",
-    md: "text-lg",
-    lg: "text-2xl",
-    xl: "text-4xl",
+    sm: "text-base",
+    md: "text-xl",
+    lg: "text-3xl",
+    xl: "text-5xl",
+    icon: "text-2xl",
   };
 
   if (!animated) {
     return <LogoContent className={className} size={size} sizeClasses={sizeClasses} />;
   }
 
-
-
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.1, ease: "easeOut" }}
-      className={cn("flex items-center", sizeClasses[size], className)}
+      className={cn("flex items-center font-mono", sizeClasses[size], className)}
     >
       <motion.span
         initial={{ opacity: 0 }}
@@ -38,28 +37,32 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
       >
         $
       </motion.span>
-      <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
-        className="inline-block w-2"
-      ></motion.span>
-      <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
-        className="text-foreground font-bold tracking-tight"
-      >
-        been
-      </motion.span>
-      <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
-        className="text-foreground/70 font-bold tracking-tight"
-      >
-        voice
-      </motion.span>
+      {size !== "icon" && (
+        <>
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
+            className="inline-block w-1" // Reduced from w-2 to w-1 (half space)
+          ></motion.span>
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
+            className="text-foreground font-bold tracking-tight"
+          >
+            been
+          </motion.span>
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
+            className="text-foreground/70 font-bold tracking-tight"
+          >
+            voice
+          </motion.span>
+        </>
+      )}
     </motion.div>
   );
 }
@@ -70,15 +73,19 @@ function LogoContent({
   sizeClasses,
 }: {
   className?: string;
-  size: "sm" | "md" | "lg" | "xl";
+  size: "sm" | "md" | "lg" | "xl" | "icon";
   sizeClasses: Record<string, string>;
 }) {
   return (
-    <div className={cn("flex items-center", sizeClasses[size], className)}>
+    <div className={cn("flex items-center font-mono", sizeClasses[size], className)}>
       <span className="text-primary font-bold tracking-tight">$</span>
-      <span className="inline-block w-2"></span>
-      <span className="text-foreground font-bold tracking-tight">been</span>
-      <span className="text-foreground/70 font-bold tracking-tight">voice</span>
+      {size !== "icon" && (
+        <>
+          <span className="inline-block w-1"></span>
+          <span className="text-foreground font-bold tracking-tight">been</span>
+          <span className="text-foreground/70 font-bold tracking-tight">voice</span>
+        </>
+      )}
     </div>
   );
 }

src/components/layout/dashboard-shell.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+import { Sidebar } from "~/components/layout/sidebar";
+import { SidebarProvider, useSidebar } from "~/components/layout/sidebar-provider";
+import { cn } from "~/lib/utils";
+import { Menu } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
+import { DashboardBreadcrumbs } from "~/components/navigation/dashboard-breadcrumbs";
+
+function DashboardContent({ children }: { children: React.ReactNode }) {
+    const { isCollapsed } = useSidebar();
+    const [isMobileOpen, setIsMobileOpen] = React.useState(false);
+
+    return (
+        <div className="bg-dashboard relative min-h-screen flex">
+            {/* Desktop Sidebar */}
+            <div className="hidden md:block">
+                <Sidebar />
+            </div>
+
+            {/* Mobile Sidebar (Sheet) */}
+            <div className="md:hidden fixed top-4 left-4 z-50">
+                <Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
+                    <SheetTrigger asChild>
+                        <Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm">
+                            <Menu className="h-5 w-5" />
+                            <span className="sr-only">Toggle menu</span>
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="p-0 w-72">
+                        <Sidebar mobile onClose={() => setIsMobileOpen(false)} />
+                    </SheetContent>
+                </Sheet>
+            </div>
+
+            {/* Main Content */}
+            <main
+                suppressHydrationWarning
+                className={cn(
+                    "flex-1 min-h-screen transition-all duration-300 ease-in-out",
+                    // Desktop margins based on collapsed state
+                    "md:ml-0",
+                    // Sidebar is fixed at left: 1rem (16px), width: 16rem (256px) or 4rem (64px)
+                    // We need margin-left = left + width + gap
+                    // Expanded: 16px + 256px + 16px (gap) = 288px (18rem)
+                    // Collapsed: 16px + 64px + 16px (gap) = 96px (6rem)
+                    isCollapsed ? "md:ml-24" : "md:ml-[18rem]"
+                )}
+            >
+                <div className="p-4 pt-16 md:pt-4">
+                    {/* Mobile header spacer is handled by pt-16 on mobile */}
+                    <div className="md:hidden mb-4">
+                        {/* Mobile Breadcrumbs could go here or be part of the page */}
+                    </div>
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+}
+
+export function DashboardShell({ children }: { children: React.ReactNode }) {
+    return (
+        <SidebarProvider>
+            <DashboardContent>{children}</DashboardContent>
+        </SidebarProvider>
+    );
+}

src/components/layout/motion-background.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { cn } from "~/lib/utils";
+
+export function MotionBackground() {
+    return (
+        <div className="fixed inset-0 -z-50 overflow-hidden pointer-events-none bg-background">
+            <div
+                className={cn(
+                    "absolute inset-[-50%] w-[200%] h-[200%]",
+                    "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
+                    "from-[oklch(var(--primary)/0.15)] via-transparent to-transparent",
+                    "animate-subtle-spin opacity-100"
+                )}
+            />
+            <div
+                className={cn(
+                    "absolute inset-[-50%] w-[200%] h-[200%]",
+                    "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
+                    "from-[oklch(var(--accent)/0.15)] via-transparent to-transparent",
+                    "animate-subtle-wave opacity-100"
+                )}
+            />
+            <div className="absolute inset-0 bg-[url('/noise.svg')] opacity-[0.02] mix-blend-overlay" />
+        </div>
+    );
+}

src/components/layout/page-header.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { DashboardBreadcrumbs } from "~/components/navigation/dashboard-breadcrumbs";
 
 interface PageHeaderProps {
   title: string;
@@ -39,24 +40,51 @@ export function PageHeader({
   };
 
   return (
-    <div className={`animate-fade-in-down mb-8 ${className}`}>
-      <div className="flex items-start justify-between gap-4">
-        <div className="animate-fade-in-up space-y-1">
-          <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
-          {description && (
-            <p
-              className={`animate-fade-in-up animate-delay-100 text-muted-foreground ${getDescriptionSpacing()} text-lg`}
-            >
-              {description}
-            </p>
-          )}
-        </div>
-        {children && (
-          <div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3">
-            {children}
+    <div className={`animate-fade-in-down mb-6 ${className}`}>
+      {variant === "large-gradient" || variant === "gradient" ? (
+        <div className="rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent pointer-events-none" />
+          <div className="p-6 relative">
+            <DashboardBreadcrumbs className="mb-4" />
+            <div className="flex items-start justify-between gap-4">
+              <div className="space-y-1">
+                <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
+                {description && (
+                  <p className={`text-muted-foreground ${getDescriptionSpacing()} text-lg`}>
+                    {description}
+                  </p>
+                )}
+              </div>
+              {children && (
+                <div className="flex flex-shrink-0 gap-2 sm:gap-3">
+                  {children}
+                </div>
+              )}
+            </div>
           </div>
-        )}
-      </div>
+        </div>
+      ) : (
+        <>
+          <DashboardBreadcrumbs className="mb-2 sm:mb-4" />
+          <div className="flex items-start justify-between gap-4">
+            <div className="animate-fade-in-up space-y-1">
+              <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
+              {description && (
+                <p
+                  className={`animate-fade-in-up animate-delay-100 text-muted-foreground ${getDescriptionSpacing()} text-lg`}
+                >
+                  {description}
+                </p>
+              )}
+            </div>
+            {children && (
+              <div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3">
+                {children}
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

src/components/layout/sidebar-provider.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+
+interface SidebarContextType {
+    isCollapsed: boolean;
+    toggleCollapse: () => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+const SidebarContext = React.createContext<SidebarContextType | undefined>(
+    undefined,
+);
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+
+    // Persist state if needed, for now just local state
+    React.useEffect(() => {
+        const saved = localStorage.getItem("sidebar-collapsed");
+        if (saved) {
+            setIsCollapsed(JSON.parse(saved));
+        }
+    }, []);
+
+    const toggleCollapse = React.useCallback(() => {
+        setIsCollapsed((prev) => {
+            const next = !prev;
+            localStorage.setItem("sidebar-collapsed", JSON.stringify(next));
+            return next;
+        });
+    }, []);
+
+    const expand = React.useCallback(() => {
+        setIsCollapsed(false);
+        localStorage.setItem("sidebar-collapsed", JSON.stringify(false));
+    }, []);
+
+    const collapse = React.useCallback(() => {
+        setIsCollapsed(true);
+        localStorage.setItem("sidebar-collapsed", JSON.stringify(true));
+    }, []);
+
+    return (
+        <SidebarContext.Provider
+            value={{ isCollapsed, toggleCollapse, expand, collapse }}
+        >
+            {children}
+        </SidebarContext.Provider>
+    );
+}
+
+export function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (context === undefined) {
+        throw new Error("useSidebar must be used within a SidebarProvider");
+    }
+    return context;
+}

src/components/layout/sidebar.tsx

@@ -5,102 +5,218 @@ import { usePathname } from "next/navigation";
 import { authClient } from "~/lib/auth-client";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Button } from "~/components/ui/button";
-import { LogOut, User } from "lucide-react";
+import {
+  LogOut,
+  User,
+  ChevronLeft,
+  ChevronRight,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings
+} from "lucide-react";
 import { navigationConfig } from "~/lib/navigation";
+import { useSidebar } from "./sidebar-provider";
+import { cn } from "~/lib/utils";
+import { Logo } from "~/components/branding/logo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { getGravatarUrl } from "~/lib/gravatar";
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 
-export function Sidebar() {
+interface SidebarProps {
+  mobile?: boolean;
+  onClose?: () => void;
+}
+
+export function Sidebar({ mobile, onClose }: SidebarProps) {
   const pathname = usePathname();
   const { data: session, isPending } = authClient.useSession();
+  const { isCollapsed, toggleCollapse } = useSidebar();
 
-  return (
-    <aside className="bg-sidebar border-sidebar-border text-sidebar-foreground fixed top-[4rem] bottom-0 left-0 z-20 hidden w-64 flex-col justify-between border-r p-6 md:flex">
-      <nav className="flex flex-col">
-        {navigationConfig.map((section, sectionIndex) => (
-          <div key={section.title} className={sectionIndex > 0 ? "mt-6" : ""}>
-            {sectionIndex > 0 && (
-              <div className="border-border/40 my-4 border-t" />
-            )}
-            <div className="text-sidebar-foreground/60 mb-3 text-xs font-semibold tracking-wider uppercase">
-              {section.title}
+  // If mobile, always expanded
+  const collapsed = mobile ? false : isCollapsed;
+
+  const SidebarContent = (
+    <div className="flex h-full flex-col justify-between">
+      <div>
+        {/* Header / Logo */}
+        <div className={cn(
+          "flex items-center h-14 px-4 mb-2",
+          collapsed ? "justify-center px-2" : "justify-between"
+        )}>
+          {!collapsed && (
+            <div className="flex items-center gap-2">
+              <Logo size="sm" />
             </div>
-            <div className="flex flex-col gap-0.5">
-              {isPending ? (
-                <>
-                  {Array.from({ length: section.links.length }).map((_, i) => (
-                    <div
-                      key={i}
-                      className="flex items-center gap-3 px-3 py-2.5"
-                    >
-                      <Skeleton className="bg-sidebar-accent/20 h-4 w-4" />
-                      <Skeleton className="bg-sidebar-accent/20 h-4 w-20" />
-                    </div>
-                  ))}
-                </>
-              ) : (
-                section.links.map((link) => {
-                  const Icon = link.icon;
-                  return (
-                    <Link
-                      key={link.href}
-                      href={link.href}
-                      aria-current={pathname === link.href ? "page" : undefined}
-                      className={`flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors ${pathname === link.href
-                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                          : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-                        }`}
-                    >
-                      <Icon className="h-4 w-4" />
-                      {link.name}
-                    </Link>
-                  );
-                })
+          )}
+          {collapsed && <Logo size="icon" />}
+
+          {!mobile && !collapsed && (
+            <div className="h-8 w-8" /> // Spacer to keep alignment if needed, or just remove
+          )}
+        </div>
+
+        {/* Navigation */}
+        <nav className={cn("flex flex-col px-2 gap-6 mt-4", collapsed && "items-center")}>
+          {navigationConfig.map((section, sectionIndex) => (
+            <div key={section.title}>
+              {!collapsed && (
+                <div className="px-2 mb-2 text-xs font-semibold text-muted-foreground/60 tracking-wider uppercase">
+                  {section.title}
+                </div>
               )}
-            </div>
-          </div>
-        ))}
-      </nav>
+              <div className="flex flex-col gap-1">
+                <div className="flex flex-col gap-1">
+                  {section.links.map((link) => {
+                    const Icon = link.icon;
+                    const isActive = pathname === link.href;
 
-      {/* User Section */}
-      <div className="border-sidebar-border border-t pt-4">
-        {isPending ? (
-          <div className="space-y-3">
-            <Skeleton className="bg-sidebar-accent/20 h-8 w-full" />
-            <Skeleton className="bg-sidebar-accent/20 h-8 w-full" />
-            <div className="flex items-center gap-3 p-3">
-              <Skeleton className="bg-sidebar-accent/20 h-8 w-8 rounded-full" />
-              <div className="flex-1">
-                <Skeleton className="bg-sidebar-accent/20 mb-1 h-4 w-24" />
-                <Skeleton className="bg-sidebar-accent/20 h-3 w-32" />
+                    if (collapsed) {
+                      return (
+                        <TooltipProvider key={link.href} delayDuration={0}>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Link
+                                href={link.href}
+                                className={cn(
+                                  "flex items-center justify-center h-10 w-10 rounded-md transition-colors",
+                                  isActive
+                                    ? "bg-primary text-primary-foreground shadow-sm"
+                                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                                )}
+                              >
+                                <Icon className="h-5 w-5" />
+                              </Link>
+                            </TooltipTrigger>
+                            <TooltipContent side="right" className="font-medium">
+                              {link.name}
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      );
+                    }
+
+                    return (
+                      <Link
+                        key={link.href}
+                        href={link.href}
+                        onClick={mobile ? onClose : undefined}
+                        className={cn(
+                          "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                          isActive
+                            ? "bg-primary/10 text-primary"
+                            : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                        )}
+                      >
+                        <Icon className="h-4 w-4" />
+                        {link.name}
+                      </Link>
+                    );
+                  })}
+                </div>
               </div>
             </div>
-          </div>
-        ) : session?.user ? (
-          <div className="space-y-3">
+          ))}
+        </nav>
+      </div>
+
+      {/* Footer / User */}
+      <div className="p-2 mt-auto space-y-2">
+        {!mobile && (
+          <div className={cn("flex", collapsed ? "justify-center" : "justify-end px-2")}>
             <Button
               variant="ghost"
-              size="sm"
-              onClick={() => authClient.signOut()}
-              className="text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent w-full justify-start px-3"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground"
+              onClick={toggleCollapse}
             >
-              <LogOut className="mr-2 h-4 w-4" />
-              Sign Out
+              {collapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
             </Button>
-            <div className="flex items-center gap-3 px-3 pt-2">
-              <div className="bg-sidebar-accent flex h-8 w-8 items-center justify-center rounded-full">
-                <User className="h-4 w-4" />
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-sidebar-foreground truncate text-sm font-medium">
-                  {session.user.name ?? "User"}
-                </p>
-                <p className="text-sidebar-foreground/60 truncate text-xs">
-                  {session.user.email}
-                </p>
-              </div>
-            </div>
           </div>
-        ) : null}
+        )}
+
+        <div className={cn(
+          "border-t border-border/50 pt-4",
+          collapsed ? "flex flex-col items-center gap-2" : "px-2"
+        )}>
+          {isPending ? (
+            <div className={cn("flex items-center gap-3", collapsed ? "justify-center" : "px-2")}>
+              <Skeleton className="h-9 w-9 rounded-full" />
+              {!collapsed && (
+                <div className="space-y-1 flex-1">
+                  <Skeleton className="h-3 w-20" />
+                  <Skeleton className="h-2 w-24" />
+                </div>
+              )}
+            </div>
+          ) : session?.user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className={cn("w-full justify-start p-0 hover:bg-transparent", collapsed && "justify-center")}>
+                  <div className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
+                    <Avatar className="h-9 w-9 border border-border">
+                      <AvatarImage src={getGravatarUrl(session.user.email)} alt={session.user.name ?? "User"} />
+                      <AvatarFallback>{session.user.name?.[0] ?? "U"}</AvatarFallback>
+                    </Avatar>
+                    {!collapsed && (
+                      <div className="flex-1 min-w-0 text-left">
+                        <p className="text-sm font-medium truncate">{session.user.name}</p>
+                        <p className="text-xs text-muted-foreground truncate">{session.user.email}</p>
+                      </div>
+                    )}
+                  </div>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="right" align="end" className="w-56" sideOffset={10}>
+                <DropdownMenuLabel>
+                  <div className="flex flex-col space-y-1">
+                    <p className="text-sm font-medium leading-none">{session.user.name}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{session.user.email}</p>
+                  </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={async () => {
+                    await authClient.signOut();
+                    window.location.href = "/";
+                  }}
+                  className="text-red-600 focus:text-red-600 focus:bg-red-100/50 dark:focus:bg-red-900/20"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Sign Out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+        </div>
       </div>
+    </div>
+  );
+
+  if (mobile) {
+    return (
+      <div className="h-full bg-background">
+        {SidebarContent}
+      </div>
+    );
+  }
+
+  return (
+    <aside
+      className={cn(
+        "fixed top-4 bottom-4 left-4 z-30 hidden md:flex flex-col",
+        "bg-card border border-border shadow-xl rounded-xl transition-all duration-300 ease-in-out",
+        isCollapsed ? "w-16" : "w-64"
+      )}
+    >
+      {SidebarContent}
     </aside>
   );
 }

src/components/navigation/dashboard-breadcrumbs.tsx

@@ -32,7 +32,9 @@ const SPECIAL_SEGMENTS: Record<string, string> = {
   dashboard: "Dashboard",
 };
 
-export function DashboardBreadcrumbs() {
+import { cn } from "~/lib/utils";
+
+export function DashboardBreadcrumbs({ className }: { className?: string }) {
   const pathname = usePathname();
   const segments = pathname.split("/").filter(Boolean);
 
@@ -144,7 +146,7 @@ export function DashboardBreadcrumbs() {
   if (breadcrumbs.length === 0) return null;
 
   return (
-    <Breadcrumb className="mb-4 sm:mb-6">
+    <Breadcrumb className={cn("mb-4 sm:mb-6", className)}>
       <BreadcrumbList className="flex-nowrap overflow-hidden">
         <BreadcrumbItem>
           <BreadcrumbLink asChild>

src/components/providers/animation-preferences-provider.tsx

@@ -398,9 +398,17 @@ export function AnimationPreferencesProvider({
 export function useAnimationPreferences(): AnimationPreferencesContextValue {
   const ctx = useContext(AnimationPreferencesContext);
   if (!ctx) {
-    throw new Error(
-      "useAnimationPreferences must be used within an AnimationPreferencesProvider",
-    );
+    // Fallback instead of throwing to prevent runtime crashes if provider is missing
+    console.warn("useAnimationPreferences used without provider");
+    return {
+      prefersReducedMotion: false,
+      animationSpeedMultiplier: 1,
+      updatePreferences: () => { },
+      setPrefersReducedMotion: () => { },
+      setAnimationSpeedMultiplier: () => { },
+      isUpdating: false,
+      lastSyncedAt: null,
+    };
   }
   return ctx;
 }

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "~/lib/utils"
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+            className
+        )}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            className
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }