Update the homepage layout and add search and view mode functionality

Refactors the Home page component to improve header design, add a search input with Lucide icons, and implement a view mode toggle for media outlets using React state.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/u6Yn0uG

client/src/pages/Home.tsx

@@ -8,10 +8,12 @@ import CategoryTabs from "@/components/CategoryTabs";
 import MediaOutletCard from "@/components/MediaOutletCard";
 import AuctionCard from "@/components/AuctionCard";
 import type { MediaOutlet, Auction } from "@shared/schema";
+import { Search, Settings, Grid, List } from "lucide-react";
 
 export default function Home() {
   const { user } = useAuth();
   const [selectedCategory, setSelectedCategory] = useState("People");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("list");
 
   const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
     queryKey: ["/api/media-outlets", selectedCategory],
@@ -35,53 +37,38 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen bg-background">
-      {/* Header */}
-      <header className="bg-card border-b border-border sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-6 py-4">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Clean Header */}
+      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
+        <div className="max-w-4xl mx-auto px-4 py-3">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-8">
-              <div className="flex items-center space-x-3">
-                <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
-                  S
+            {/* Logo and User */}
+            <div className="flex items-center space-x-3">
+              {user?.profileImageUrl ? (
+                <img 
+                  src={user.profileImageUrl} 
+                  alt={user.firstName || 'User'} 
+                  className="w-8 h-8 rounded-full object-cover"
+                />
+              ) : (
+                <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-sm font-semibold">
+                  {user?.firstName?.charAt(0) || 'U'}
                 </div>
-                <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
+              )}
+              <div>
+                <div className="font-bold text-lg">SAPIENS</div>
+                <div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
               </div>
-              
-              <nav className="hidden md:flex space-x-6">
-                <Link href="/" className="text-foreground hover:text-primary transition-colors">Home</Link>
-                <Link href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors">Auctions</Link>
-                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
-                {(user?.role === 'admin' || user?.role === 'superadmin') && (
-                  <Link href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
-                    Dashboard
-                  </Link>
-                )}
-              </nav>
             </div>
             
-            <div className="flex items-center space-x-4">
-              <div className="relative">
-                <Input 
-                  type="text" 
-                  placeholder="Search media outlets, topics..." 
-                  className="w-64"
-                  data-testid="input-search"
-                />
-                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
-              </div>
-              
-              <div className="flex items-center space-x-2">
-                <span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  onClick={handleLogout}
-                  data-testid="button-logout"
-                >
-                  Logout
-                </Button>
-              </div>
+            {/* Actions */}
+            <div className="flex items-center space-x-2">
+              <Button variant="ghost" size="sm">
+                <Search className="h-4 w-4" />
+              </Button>
+              <Button variant="ghost" size="sm">
+                <Settings className="h-4 w-4" />
+              </Button>
             </div>
           </div>
         </div>