refactor: standardize card styles and improve layout across dashboard components

web/components/dashboard-page.tsx

@@ -1,10 +1,12 @@
 "use client"
 
 import type { ReactNode } from "react"
+import { usePathname } from "next/navigation"
 
 import { cn } from "@/lib/utils"
 import { TableCell, TableRow } from "@/components/ui/table"
 import { useI18n } from "@/i18n/provider"
+import { getPageTitleKey } from "@/lib/navigation"
 
 export function DashboardPage({
   className,
@@ -13,8 +15,15 @@ export function DashboardPage({
   className?: string
   children: ReactNode
 }) {
+  const t = useI18n()
+  const pathname = usePathname()
+  const title = t(getPageTitleKey(pathname))
+
   return (
-    <div className={cn("flex flex-1 flex-col gap-5 p-4 lg:p-6", className)}>
+    <div className={cn("flex flex-1 flex-col gap-4 p-4 lg:p-5", className)}>
+      <div className="flex min-h-8 items-center">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+      </div>
       {children}
     </div>
   )
@@ -32,7 +41,7 @@ export function DashboardToolbar({
   return (
     <div
       className={cn(
-        "flex flex-col gap-3 rounded-lg border border-border/70 bg-card/95 p-3 shadow-[0_1px_2px_rgba(15,23,42,0.04)] lg:flex-row lg:items-center lg:justify-between dark:shadow-none",
+        "flex flex-col gap-3 border-b border-border/70 bg-background pb-3 lg:flex-row lg:items-center lg:justify-between",
         className
       )}
     >
@@ -56,8 +65,8 @@ export function DashboardTableShell({
   children: ReactNode
 }) {
   return (
-    <div className={cn("space-y-4", className)}>
-      <div className="overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-[0_1px_2px_rgba(15,23,42,0.035)] dark:shadow-none">
+    <div className={cn("space-y-3", className)}>
+      <div className="overflow-hidden rounded-md border border-border/70 bg-card text-card-foreground">
         {children}
       </div>
       {pagination ? <div>{pagination}</div> : null}

web/components/dashboard-placeholder.tsx

@@ -28,25 +28,25 @@ export function DashboardPlaceholder({
   const t = useI18n()
 
   return (
-    <div className="flex flex-1 flex-col gap-6 p-4 pt-4 lg:p-6 lg:pt-6">
-      <Card className="border-dashed">
-        <CardHeader className="gap-3">
-          <span className="text-xs font-medium tracking-[0.24em] uppercase text-muted-foreground">
+    <div className="flex flex-1 flex-col gap-4 p-4 lg:p-5">
+      <Card className="rounded-md border-dashed shadow-none">
+        <CardHeader className="gap-2 p-4">
+          <span className="text-xs font-medium uppercase text-muted-foreground">
             {eyebrow}
           </span>
-          <CardTitle className="text-3xl">{title}</CardTitle>
+          <CardTitle className="text-xl">{title}</CardTitle>
           <CardDescription className="max-w-2xl text-sm leading-6">
             {description}
           </CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-4 md:grid-cols-[1.2fr_0.8fr]">
-          <div className="rounded-2xl border bg-muted/40 p-5">
+        <CardContent className="grid gap-3 p-4 pt-0 md:grid-cols-[1.2fr_0.8fr]">
+          <div className="rounded-md border bg-muted/30 p-4">
             <p className="text-sm font-medium">{t("placeholder.nextSteps")}</p>
-            <div className="mt-4 grid gap-3">
+            <div className="mt-3 grid gap-2">
               {nextSteps.map((item) => (
                 <div
                   key={item}
-                  className="flex items-start gap-3 rounded-xl bg-background p-3"
+                  className="flex items-start gap-3 rounded-md bg-background p-3"
                 >
                   <Clock3Icon className="mt-0.5 size-4 text-muted-foreground" />
                   <p className="text-sm">{item}</p>
@@ -54,14 +54,14 @@ export function DashboardPlaceholder({
               ))}
             </div>
           </div>
-          <div className="flex flex-col justify-between rounded-2xl border bg-background p-5">
+          <div className="flex flex-col justify-between rounded-md border bg-background p-4">
             <div>
               <p className="text-sm font-medium">{t("placeholder.status")}</p>
               <p className="mt-2 text-sm leading-6 text-muted-foreground">
                 {t("placeholder.statusDescription")}
               </p>
             </div>
-            <Button variant="outline" className="mt-6 justify-between">
+            <Button variant="outline" className="mt-5 justify-between">
               {t("placeholder.nextPhase")}
               <ArrowUpRightIcon />
             </Button>

web/components/nav-user.tsx

@@ -6,7 +6,10 @@ import { useState } from "react"
 import { useAuth } from "@/components/auth-provider"
 import { useI18n } from "@/i18n/provider"
 import { ChangePasswordDialog } from "@/components/change-password-dialog"
+import { LocaleSwitcher } from "@/components/locale-switcher"
 import { useNotifications } from "@/components/notification-provider"
+import { PaletteToggle } from "@/components/palette-toggle"
+import { ThemeToggle } from "@/components/theme-toggle"
 import { Badge } from "@/components/ui/badge"
 import {
   Avatar,
@@ -96,6 +99,17 @@ export function NavUser({
                 </DropdownMenuLabel>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel className="px-2 py-1.5 text-xs font-normal text-muted-foreground">
+                  {t("nav.preferences")}
+                </DropdownMenuLabel>
+                <div className="flex items-center gap-2 px-2 pb-2">
+                  <LocaleSwitcher />
+                  <PaletteToggle />
+                  <ThemeToggle />
+                </div>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
               <DropdownMenuGroup>
                 <DropdownMenuItem
                   onClick={() => {

web/components/site-header.tsx

@@ -3,13 +3,10 @@
 import { useEffect, useRef } from "react"
 import { usePathname } from "next/navigation"
 
-import { LocaleSwitcher } from "@/components/locale-switcher"
 import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
 import { useI18n } from "@/i18n/provider"
 import { getPageTitleKey } from "@/lib/navigation"
 import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
-import { PaletteToggle } from "@/components/palette-toggle"
-import { ThemeToggle } from "@/components/theme-toggle"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -77,11 +74,6 @@ export function SiteHeader() {
             </Breadcrumb>
           </div>
         </div>
-        <div className="flex items-center justify-end gap-2">
-          <LocaleSwitcher />
-          <PaletteToggle />
-          <ThemeToggle />
-        </div>
       </div>
     </header>
   )