feat: implement issues #5-#8 — error states, header search, delete/toggle visibility, auth-aware UI

src/app/(main)/layout.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { Sparkles, Home, BarChart3, Compass, User, Menu, X, Search } from "lucide-react"
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
@@ -72,6 +72,13 @@ export default function MainLayout({
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState("")
+  const router = useRouter()
+
+  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && searchQuery.trim()) {
+      router.push(`/explore?search=${encodeURIComponent(searchQuery.trim())}`)
+    }
+  }
 
   return (
     <div className="min-h-screen flex flex-col">
@@ -90,6 +97,7 @@ export default function MainLayout({
                 placeholder="Search comparisons..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
                 className="pl-9 h-9"
               />
             </div>
@@ -146,6 +154,7 @@ export default function MainLayout({
                 placeholder="Search comparisons..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
                 className="pl-9"
               />
             </div>