feat: implement dashboard layout shell with responsive sidebar, global dark theme, and navigation pages

components/layout/dashboard-shell.tsx

@@ -10,23 +10,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { sidebarData } from "@/config/sidebar";
 import { cn } from "@/lib/utils";
 import { AnimatePresence, motion } from "framer-motion";
-import {
-  BookOpenText,
-  CheckSquare2,
-  ChevronRight,
-  LogOut,
-  Menu,
-  MessageCircleHeart,
-  PanelLeftClose,
-  Settings2,
-  Sparkles,
-} from "lucide-react";
+import { ChevronDown, LogOut, Menu, Settings2 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 
 type DashboardShellProps = {
   children: React.ReactNode;
@@ -38,110 +29,23 @@ type DashboardShellProps = {
   };
 };
 
-type RouteMeta = {
-  eyebrow: string;
-  title: string;
-  description: string;
-};
-
-const routes = [
-  {
-    label: "Dashboard",
-    href: "/",
-    icon: Sparkles,
-    description: "Günün ritmi ve genel görünüm",
-  },
-  {
-    label: "Günlük",
-    href: "/journal",
-    icon: BookOpenText,
-    description: "Düşünceler, duygu ve enerji kayıtları",
-  },
-  {
-    label: "Görevler",
-    href: "/tasks",
-    icon: CheckSquare2,
-    description: "Planlar, öncelikler ve aksiyonlar",
-  },
-  {
-    label: "Sohbet",
-    href: "/chat",
-    icon: MessageCircleHeart,
-    description: "AI ile bağlamsal yansıma alanı",
-  },
-  {
-    label: "Ayarlar",
-    href: "/settings",
-    icon: Settings2,
-    description: "Profil, güvenlik ve AI tercihleri",
-  },
-] as const;
-
-const routeMeta: Record<string, RouteMeta> = {
-  "/": {
-    eyebrow: "MindSpace Workspace",
-    title: "Günün Nabzı",
-    description: "Verilerini, odağını ve kişisel akışını tek panelden yönet.",
-  },
-  "/journal": {
-    eyebrow: "Journal",
-    title: "Düşünce Akışı",
-    description: "Bugünün zihinsel yükünü yaz, duygu ve enerji izlerini kaydet.",
-  },
-  "/tasks": {
-    eyebrow: "Tasks",
-    title: "Aksiyon Katmanı",
-    description: "Önceliklerini sadeleştir, küçük ama net adımlar belirle.",
-  },
-  "/chat": {
-    eyebrow: "Reflective AI",
-    title: "Yansıtıcı Sohbet",
-    description: "Geçmiş kayıtlarınla bağ kuran özel AI eşlikçin burada.",
-  },
-  "/settings": {
-    eyebrow: "Preferences",
-    title: "Hesap ve Kontroller",
-    description: "Profilini, güvenliği ve AI ayarlarını tek yerden yönet.",
-  },
-};
-
 export function DashboardShell({ children, user }: DashboardShellProps) {
   const pathname = usePathname();
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
 
   const closeMobileSidebar = () => setIsMobileSidebarOpen(false);
 
-  const currentMeta = useMemo(() => {
-    if (pathname === "/") return routeMeta["/"];
-    if (pathname?.startsWith("/journal")) return routeMeta["/journal"];
-    if (pathname?.startsWith("/tasks")) return routeMeta["/tasks"];
-    if (pathname?.startsWith("/chat")) return routeMeta["/chat"];
-    if (pathname?.startsWith("/settings")) return routeMeta["/settings"];
-
-    return routeMeta["/"];
-  }, [pathname]);
-
-  const todayLabel = useMemo(
-    () =>
-      new Intl.DateTimeFormat("tr-TR", {
-        weekday: "long",
-        day: "numeric",
-        month: "long",
-      }).format(new Date()),
-    [],
-  );
-
   return (
-    <div className="relative min-h-screen overflow-hidden bg-background text-foreground">
+    <div className="relative h-screen overflow-hidden bg-background text-foreground">
       <AmbientBackdrop />
 
-      <div className="relative z-10 flex min-h-screen">
-        <div className="hidden shrink-0 lg:block lg:w-[320px]">
-          <div className="sticky top-0 h-screen p-4 pr-0">
-            <SidebarPanel pathname={pathname} user={user} desktop />
-          </div>
+      <div className="relative z-10 flex h-screen">
+        {/* Desktop Sidebar */}
+        <div className="hidden shrink-0 lg:block lg:w-[260px] h-screen border-r border-white/5 bg-[#0A0710]">
+          <SidebarPanel pathname={pathname} user={user} desktop />
         </div>
 
+        {/* Mobile Sidebar */}
         <AnimatePresence>
           {isMobileSidebarOpen ? (
             <motion.div
@@ -161,7 +65,7 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
                 animate={{ x: 0, opacity: 1 }}
                 exit={{ x: -48, opacity: 0 }}
                 transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
-                className="relative z-10 h-full w-[min(88vw,340px)] p-4 pr-2"
+                className="relative z-10 h-full w-[min(88vw,280px)] bg-[#0A0710]"
               >
                 <SidebarPanel
                   pathname={pathname}
@@ -173,19 +77,28 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
           ) : null}
         </AnimatePresence>
 
-        <div className="flex min-h-screen min-w-0 flex-1 flex-col">
-          <header className="sticky top-0 z-30 px-4 pb-3 pt-4 md:px-6 lg:px-8">
-            <TopBar
-              user={user}
-              currentMeta={currentMeta}
-              todayLabel={todayLabel}
-              onOpenSidebar={() => setIsMobileSidebarOpen(true)}
-            />
-          </header>
+        {/* Main Content Area (Scrollable internally) */}
+        <div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
+          {/* Mobile Menu Button */}
+          <div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
+            <div className="flex items-center gap-2">
+              <Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
+              <span className="font-semibold text-sm">Cognis</span>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="rounded-lg border-border bg-white/5 h-8 w-8"
+              onClick={() => setIsMobileSidebarOpen(true)}
+            >
+              <Menu className="h-4 w-4" />
+            </Button>
+          </div>
 
-          <main className="flex-1 px-4 pb-6 md:px-6 md:pb-8 lg:px-8">
-            <div className="min-h-[calc(100vh-7rem)] rounded-[28px] border border-white/8 bg-[linear-gradient(180deg,rgba(31,23,43,0.84),rgba(18,13,28,0.72))] shadow-[0_30px_120px_rgba(7,5,14,0.45)] ring-1 ring-white/6 backdrop-blur-xl">
-              <div className="h-full p-4 md:p-6 lg:p-8">{children}</div>
+          <main className="flex-1 p-4 lg:p-8">
+            <div className="min-h-[calc(100vh-2rem)] rounded-2xl border border-white/5 bg-[linear-gradient(180deg,rgba(31,23,43,0.3),rgba(18,13,28,0.1))] shadow-2xl ring-1 ring-white/5 backdrop-blur-xl">
+              <div className="h-full p-6 md:p-8">{children}</div>
             </div>
           </main>
         </div>
@@ -206,304 +119,139 @@ function SidebarPanel({
   onNavigate?: () => void;
 }) {
   return (
-    <aside className="flex h-full flex-col overflow-hidden rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.96),rgba(18,13,28,0.88))] shadow-[0_24px_100px_rgba(7,5,14,0.52)] ring-1 ring-white/6 backdrop-blur-xl">
-      <div className="relative overflow-hidden border-b border-white/8 px-5 pb-5 pt-6">
-        <div className="absolute -left-8 top-0 h-24 w-24 rounded-full bg-primary/20 blur-3xl" />
-        <div className="absolute right-0 top-8 h-16 w-16 rounded-full bg-white/10 blur-2xl" />
-
-        <Link href="/" className="relative flex items-center gap-4" onClick={onNavigate}>
-          <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/5 shadow-[0_12px_40px_rgba(0,0,0,0.22)]">
-            <Image
-              src="/logo/logo.png"
-              alt="MindSpace Logo"
-              width={40}
-              height={40}
-              className="h-10 w-10 object-contain"
-              priority
-            />
-          </div>
-          <div className="min-w-0">
-            <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-primary/80">
-              Private Space
-            </div>
-            <div className="truncate text-xl font-semibold tracking-tight text-foreground">
-              MindSpace
-            </div>
-            <div className="text-sm text-muted-foreground">
-              Dingin, güvenli ve odaklı çalışma alanı
-            </div>
-          </div>
+    <aside className="flex h-full flex-col overflow-hidden">
+      {/* Header / Logo */}
+      <div className="pt-8 pb-4 flex justify-center">
+        <Link href="/" className="relative flex items-center justify-center" onClick={onNavigate}>
+          <Image
+            src="/logo/logo.png"
+            alt="Cognis Logo"
+            width={48}
+            height={48}
+            className="object-contain transition-transform hover:scale-105"
+            priority
+          />
         </Link>
       </div>
 
-      <div className="px-4 pt-4">
-        <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3 text-sm text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-          <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-primary/70">
-            Focus Layer
-          </div>
-          Yaz, gözlemle, planla. Tüm akışı sade ama güçlü bir panelde tut.
-        </div>
-      </div>
+      {/* Main Navigation Links */}
+      <nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
+        {sidebarData.map((group, groupIdx) => (
+          <div key={groupIdx} className="space-y-1">
+            <h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
+              {group.title}
+            </h4>
+            <div className="space-y-1">
+              {group.items.map((route) => {
+                const isActive =
+                  route.href === "/"
+                    ? pathname === "/"
+                    : route.href
+                    ? pathname === route.href || pathname.startsWith(route.href + "/")
+                    : false;
 
-      <nav className="flex-1 space-y-2 overflow-y-auto px-4 py-5">
-        {routes.map((route) => {
-          const isActive =
-            route.href === "/"
-              ? pathname === "/"
-              : pathname === route.href || pathname.startsWith(route.href + "/");
-
-          return (
-            <Link
-              key={route.href}
-              href={route.href}
-              className="block"
-              onClick={onNavigate}
-            >
-              <motion.div
-                whileHover={{ x: 6 }}
-                transition={{ duration: 0.22, ease: "easeOut" }}
-                className={cn(
-                  "group relative overflow-hidden rounded-2xl border px-4 py-3.5 transition-all",
-                  isActive
-                    ? "border-primary/35 bg-primary/[0.14] shadow-[0_16px_40px_rgba(108,91,176,0.22)]"
-                    : "border-white/8 bg-white/[0.03] hover:border-white/16 hover:bg-white/[0.06]",
-                )}
-              >
-                {isActive ? (
-                  <motion.div
-                    layoutId="dashboard-nav-active"
-                    className="absolute inset-0 rounded-2xl bg-[linear-gradient(135deg,rgba(108,91,176,0.2),rgba(108,91,176,0.08),transparent)]"
-                  />
-                ) : null}
-
-                <div className="relative flex items-center gap-3">
-                  <div
-                    className={cn(
-                      "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border transition-all",
-                      isActive
-                        ? "border-primary/30 bg-primary/20 text-primary-foreground shadow-[0_12px_28px_rgba(108,91,176,0.22)]"
-                        : "border-white/8 bg-white/5 text-muted-foreground group-hover:border-primary/20 group-hover:bg-primary/10 group-hover:text-foreground",
-                    )}
+                return (
+                  <Link
+                    key={route.href || route.title}
+                    href={route.href || "#"}
+                    className="block w-full"
+                    onClick={onNavigate}
                   >
-                    <route.icon className="h-5 w-5" />
-                  </div>
-
-                  <div className="min-w-0 flex-1">
                     <div
                       className={cn(
-                        "flex items-center gap-2 text-sm font-semibold",
-                        isActive ? "text-foreground" : "text-foreground/90",
+                        "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
+                        isActive
+                          ? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
+                          : "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
                       )}
                     >
-                      {route.label}
-                      <ChevronRight
-                        className={cn(
-                          "h-4 w-4 transition-all",
-                          isActive
-                            ? "translate-x-0 text-primary"
-                            : "translate-x-[-4px] opacity-0 group-hover:translate-x-0 group-hover:opacity-100",
-                        )}
-                      />
+                      {route.icon && (
+                        <route.icon
+                          className={cn(
+                            "h-[18px] w-[18px] shrink-0 transition-colors",
+                            isActive ? "text-primary-foreground" : "text-muted-foreground/70",
+                          )}
+                          strokeWidth={isActive ? 2.5 : 2}
+                        />
+                      )}
+                      <span className="text-[14px]">{route.title}</span>
                     </div>
-                    <div className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-                      {route.description}
-                    </div>
-                  </div>
-                </div>
-              </motion.div>
-            </Link>
-          );
-        })}
-      </nav>
-
-      <div className="border-t border-white/8 p-4 pt-5">
-        <div className="mb-4 rounded-2xl border border-white/8 bg-white/5 p-3">
-          <div className="flex items-center gap-3">
-            <Avatar user={user} size="sm" />
-            <div className="min-w-0">
-              <div className="truncate text-sm font-semibold text-foreground">
-                {user.displayName}
-              </div>
-              <div className="truncate text-xs text-muted-foreground">
-                {user.email}
-              </div>
+                  </Link>
+                );
+              })}
             </div>
           </div>
-        </div>
+        ))}
+      </nav>
 
-        <form action={signOut}>
-          <Button
-            type="submit"
-            variant="outline"
+      {/* Bottom User Profile & Settings Section */}
+      <div className="mt-auto p-3">
+        <div className="mb-2">
+          <Link
+            href="/settings"
+            onClick={onNavigate}
             className={cn(
-              "h-12 w-full justify-start gap-3 rounded-2xl border-white/10 bg-white/[0.04] px-4 text-sm font-semibold text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition-all",
-              "hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive",
+              "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
+              pathname.startsWith("/settings")
+                ? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
+                : "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent"
             )}
           >
-            <LogOut className="h-4 w-4" />
-            Çıkış Yap
-          </Button>
-        </form>
+            <Settings2 className="h-[18px] w-[18px] shrink-0" strokeWidth={pathname.startsWith("/settings") ? 2.5 : 2} />
+            <span className="text-[14px]">Ayarlar</span>
+          </Link>
+        </div>
 
-        {!desktop ? (
-          <div className="mt-3 text-center text-[11px] uppercase tracking-[0.24em] text-muted-foreground/60">
-            Secure workspace
-          </div>
-        ) : null}
+        {/* Separator */}
+        <div className="h-[1px] w-full bg-white/5 mb-3" />
+        
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between gap-2 rounded-md p-2 transition-all hover:bg-white/5 outline-none"
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <Avatar user={user} size="sm" />
+                <div className="min-w-0 text-left">
+                  <div className="truncate text-sm font-medium text-foreground leading-tight">
+                    {user.displayName}
+                  </div>
+                </div>
+              </div>
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            side="right"
+            align="end"
+            sideOffset={16}
+            className="w-56 rounded-lg border border-white/10 bg-[#0A0710] p-1 text-foreground shadow-2xl"
+          >
+            <DropdownMenuLabel className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+              {user.email}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator className="bg-white/5" />
+            <form action={signOut}>
+              <button type="submit" className="w-full">
+                <DropdownMenuItem className="rounded-md px-2 py-1.5 text-destructive focus:bg-destructive/10 focus:text-destructive cursor-pointer flex items-center gap-2 text-sm">
+                  <LogOut className="h-4 w-4" />
+                  Çıkış Yap
+                </DropdownMenuItem>
+              </button>
+            </form>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </aside>
   );
 }
 
-function TopBar({
-  user,
-  currentMeta,
-  todayLabel,
-  onOpenSidebar,
-}: {
-  user: DashboardShellProps["user"];
-  currentMeta: RouteMeta;
-  todayLabel: string;
-  onOpenSidebar: () => void;
-}) {
-  return (
-    <div className="overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.82),rgba(18,13,28,0.68))] px-4 py-4 shadow-[0_20px_80px_rgba(7,5,14,0.3)] ring-1 ring-white/6 backdrop-blur-xl md:px-5">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex min-w-0 items-start gap-3">
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-lg"
-            className="mt-0.5 shrink-0 rounded-2xl border-white/10 bg-white/[0.04] lg:hidden"
-            onClick={onOpenSidebar}
-          >
-            <Menu className="h-5 w-5" />
-          </Button>
-
-          <div className="min-w-0">
-            <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.26em] text-primary/80">
-              {currentMeta.eyebrow}
-            </div>
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-              <h1 className="text-2xl font-semibold tracking-tight text-foreground md:text-[2rem]">
-                {currentMeta.title}
-              </h1>
-              <div className="rounded-full border border-white/8 bg-white/[0.04] px-3 py-1 text-xs font-medium text-muted-foreground">
-                {todayLabel}
-              </div>
-            </div>
-            <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
-              {currentMeta.description}
-            </p>
-          </div>
-        </div>
-
-        <div className="hidden items-center gap-3 md:flex">
-          <div className="rounded-full border border-white/8 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-muted-foreground">
-            Protected session
-          </div>
-          <UserMenu user={user} />
-        </div>
-      </div>
-
-      <div className="mt-4 flex items-center justify-end md:hidden">
-        <UserMenu user={user} compact />
-      </div>
-    </div>
-  );
-}
-
-function UserMenu({
-  user,
-  compact = false,
-}: {
-  user: DashboardShellProps["user"];
-  compact?: boolean;
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "group flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] p-1.5 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition-all outline-none hover:border-white/16 hover:bg-white/[0.07]",
-            compact ? "w-full justify-between" : "min-w-[220px]",
-          )}
-        >
-          <div className="flex items-center gap-3">
-            <Avatar user={user} />
-            <div className={cn("min-w-0", compact ? "max-w-[160px]" : "max-w-[180px]")}>
-              <div className="truncate text-sm font-semibold text-foreground">
-                {user.displayName}
-              </div>
-              <div className="truncate text-xs text-muted-foreground">
-                {user.email}
-              </div>
-            </div>
-          </div>
-
-          <div className="mr-1 flex h-8 w-8 items-center justify-center rounded-xl bg-white/5 text-muted-foreground transition-all group-hover:bg-white/10 group-hover:text-foreground">
-            <PanelLeftClose className="h-4 w-4 rotate-[-90deg]" />
-          </div>
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        align="end"
-        className="w-72 rounded-2xl border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.98),rgba(18,13,28,0.94))] p-2 text-foreground shadow-[0_20px_60px_rgba(7,5,14,0.45)] backdrop-blur-xl"
-      >
-        <DropdownMenuLabel className="px-3 py-2 text-foreground">
-          <div className="flex items-center gap-3">
-            <Avatar user={user} />
-            <div className="min-w-0">
-              <div className="truncate text-sm font-semibold">{user.displayName}</div>
-              <div className="truncate text-xs font-normal text-muted-foreground">
-                {user.email}
-              </div>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator className="bg-white/8" />
-        <DropdownMenuItem asChild className="rounded-xl px-3 py-2.5">
-          <Link href="/settings" className="flex items-center gap-2">
-            <Settings2 className="h-4 w-4" />
-            Ayarlar
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild className="rounded-xl px-3 py-2.5">
-          <Link href="/journal" className="flex items-center gap-2">
-            <BookOpenText className="h-4 w-4" />
-            Günlük Alanı
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator className="bg-white/8" />
-        <div className="px-3 py-2 text-xs leading-5 text-muted-foreground">
-          Bu menü profil ve hızlı erişim içindir. Ana çıkış aksiyonu soldaki
-          panelin altındadır.
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function Avatar({
-  user,
-  size = "md",
-}: {
-  user: DashboardShellProps["user"];
-  size?: "sm" | "md";
-}) {
-  const dimensions = size === "sm" ? "h-11 w-11 text-sm" : "h-12 w-12 text-sm";
-
+function Avatar({ user }: { user: DashboardShellProps["user"] }) {
   if (user.avatarUrl) {
     return (
-      <div
-        className={cn(
-          "overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-[0_12px_36px_rgba(0,0,0,0.18)]",
-          dimensions,
-        )}
-      >
-        {/* Avatar URL dış kaynaklı olduğu için bu önizlemede native img kullanıyoruz. */}
+      <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary/20 bg-primary/10">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={user.avatarUrl}
@@ -515,12 +263,7 @@ function Avatar({
   }
 
   return (
-    <div
-      className={cn(
-        "flex items-center justify-center rounded-2xl border border-white/10 bg-[linear-gradient(135deg,rgba(108,91,176,0.32),rgba(255,255,255,0.08))] font-semibold text-foreground shadow-[0_12px_36px_rgba(0,0,0,0.18)]",
-        dimensions,
-      )}
-    >
+    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/30 bg-primary/20 font-semibold text-primary-foreground text-sm">
       {user.shortName}
     </div>
   );
@@ -529,17 +272,8 @@ function Avatar({
 function AmbientBackdrop() {
   return (
     <>
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(108,91,176,0.18),transparent_34%),radial-gradient(circle_at_85%_14%,rgba(255,255,255,0.08),transparent_18%),radial-gradient(circle_at_bottom_right,rgba(108,91,176,0.14),transparent_28%)]" />
-      <motion.div
-        animate={{ x: [0, 28, 0], y: [0, -20, 0] }}
-        transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
-        className="pointer-events-none absolute left-[-8rem] top-10 h-64 w-64 rounded-full bg-primary/10 blur-[120px]"
-      />
-      <motion.div
-        animate={{ x: [0, -32, 0], y: [0, 24, 0] }}
-        transition={{ duration: 17, repeat: Infinity, ease: "easeInOut" }}
-        className="pointer-events-none absolute bottom-0 right-[-8rem] h-72 w-72 rounded-full bg-white/5 blur-[130px]"
-      />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(108,91,176,0.1),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(108,91,176,0.1),transparent_30%)]" />
     </>
   );
 }
+