fix(web): update dashboard pages, layouts, and listing forms

Update 12 page/layout files across auth, dashboard, listings, and search
routes to improve type safety, fix component imports, and align with
latest API changes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/[locale]/(dashboard)/layout.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { LogOut, Menu, X } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 import { useTheme } from '@/components/providers/theme-provider';
 import { Button } from '@/components/ui/button';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
@@ -14,12 +16,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const { user, logout } = useAuthStore();
   const { theme, toggleTheme } = useTheme();
   const t = useTranslations();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const navItems = [
     { href: '/dashboard' as const, label: t('dashboard.title'), icon: '🏠' },
     { href: '/listings' as const, label: t('dashboard.listings'), icon: '📋' },
     { href: '/listings/new' as const, label: t('dashboard.createListing'), icon: '➕' },
     { href: '/analytics' as const, label: t('dashboard.analytics'), icon: '📊' },
+    { href: '/dashboard/saved-searches' as const, label: t('dashboard.savedSearches'), icon: '🔖' },
     { href: '/dashboard/valuation' as const, label: t('dashboard.aiValuation'), icon: '🤖' },
     { href: '/dashboard/profile' as const, label: t('dashboard.profile'), icon: '👤' },
     { href: '/dashboard/subscription' as const, label: t('dashboard.subscription'), icon: '💎' },
@@ -28,30 +32,106 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   return (
     <div className="min-h-screen bg-background">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      <aside
+        role="navigation"
+        aria-label={t('nav.dashboardNav')}
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform md:hidden',
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        )}
+      >
+        <div className="flex h-14 items-center border-b px-4">
+          <Link href="/" className="flex items-center space-x-2">
+            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
+          </Link>
+          <button
+            aria-label={t('nav.closeMenu')}
+            className="ml-auto"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <nav className="flex flex-col gap-1 p-3">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={() => setSidebarOpen(false)}
+              className={cn(
+                'flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
+                pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              )}
+            >
+              <span aria-hidden="true">{item.icon}</span>
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="mt-auto border-t p-3">
+          {user && (
+            <p className="mb-2 truncate px-3 text-xs text-muted-foreground">{user.fullName}</p>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start gap-2"
+            onClick={() => logout()}
+          >
+            <LogOut className="h-4 w-4" aria-hidden="true" />
+            {t('common.logout')}
+          </Button>
+        </div>
+      </aside>
+
       <header
         role="banner"
         className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
       >
         <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
+          {/* Mobile hamburger */}
+          <button
+            aria-label={t('nav.openMenu')}
+            className="mr-3 inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+
           <Link href="/" className="mr-6 flex items-center space-x-2">
             <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
           </Link>
 
-          <nav aria-label={t('nav.dashboardNav')} className="flex items-center space-x-1">
+          {/* Desktop nav */}
+          <nav aria-label={t('nav.dashboardNav')} className="hidden items-center space-x-1 md:flex">
             {navItems.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
                 aria-label={item.label}
                 className={cn(
-                  'rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground sm:px-3',
+                  'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
                   pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
                     ? 'bg-accent text-accent-foreground'
                     : 'text-muted-foreground',
                 )}
               >
-                <span className="sm:mr-1.5" aria-hidden="true">{item.icon}</span>
-                <span className="hidden sm:inline">{item.label}</span>
+                <span className="mr-1.5" aria-hidden="true">{item.icon}</span>
+                <span className="hidden lg:inline">{item.label}</span>
               </Link>
             ))}
           </nav>
@@ -80,7 +160,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                 </svg>
               )}
             </Button>
-            <Button variant="ghost" size="sm" onClick={() => logout()}>
+            <Button variant="ghost" size="sm" className="hidden md:inline-flex" onClick={() => logout()}>
               {t('common.logout')}
             </Button>
           </div>