feat: introduce new app routes with modular structure and enhanced features

Added modular app routes including `login`, `dashboard`, `categories`, `trends`, and `upload`. Introduced reusable components such as `ContentList`, `ContentSkeleton`, and `AppSidebar` for improved UI consistency. Enhanced authentication with `AuthProvider` and implemented lazy loading, dynamic layouts, and infinite scrolling for better performance.

frontend/src/components/search-sidebar.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { Search, Filter } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { CategoryService } from "@/services/category.service";
+import type { Category } from "@/types/content";
+
+export function SearchSidebar() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  
+  const [categories, setCategories] = React.useState<Category[]>([]);
+  const [query, setQuery] = React.useState(searchParams.get("query") || "");
+
+  React.useEffect(() => {
+    CategoryService.getAll().then(setCategories).catch(console.error);
+  }, []);
+
+  const updateSearch = React.useCallback((name: string, value: string | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) {
+      params.set(name, value);
+    } else {
+      params.delete(name);
+    }
+    // If we are not on explore/trends/recent, maybe we should redirect to home?
+    // For now, let's just update the URL.
+    router.push(`${pathname}?${params.toString()}`);
+  }, [router, pathname, searchParams]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateSearch("query", query);
+  };
+
+  const currentSort = searchParams.get("sort") || "trend";
+  const currentCategory = searchParams.get("category");
+
+  return (
+    <aside className="hidden lg:flex flex-col w-80 border-l bg-background">
+      <div className="p-4 border-b">
+        <h2 className="font-semibold mb-4">Rechercher</h2>
+        <form onSubmit={handleSearch} className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Rechercher des mèmes..."
+            className="pl-8"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </form>
+      </div>
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+              <Filter className="h-4 w-4" />
+              Filtres
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <p className="text-xs text-muted-foreground mb-2">Trier par</p>
+                <div className="flex flex-wrap gap-2">
+                  <Badge 
+                    variant={currentSort === "trend" ? "default" : "outline"} 
+                    className="cursor-pointer"
+                    onClick={() => updateSearch("sort", "trend")}
+                  >
+                    Tendances
+                  </Badge>
+                  <Badge 
+                    variant={currentSort === "recent" ? "default" : "outline"} 
+                    className="cursor-pointer"
+                    onClick={() => updateSearch("sort", "recent")}
+                  >
+                    Récent
+                  </Badge>
+                </div>
+              </div>
+              <Separator />
+              <div>
+                <p className="text-xs text-muted-foreground mb-2">Catégories</p>
+                <div className="flex flex-wrap gap-2">
+                  <Badge 
+                    variant={!currentCategory ? "default" : "outline"} 
+                    className="cursor-pointer"
+                    onClick={() => updateSearch("category", null)}
+                  >
+                    Tout
+                  </Badge>
+                  {categories.map((cat) => (
+                    <Badge 
+                      key={cat.id}
+                      variant={currentCategory === cat.slug ? "default" : "outline"} 
+                      className="cursor-pointer"
+                      onClick={() => updateSearch("category", cat.slug)}
+                    >
+                      {cat.name}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-medium mb-3">Tags populaires</h3>
+            <div className="flex flex-wrap gap-2">
+              {["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(tag => (
+                <Badge 
+                  key={tag} 
+                  variant={searchParams.get("tag") === tag ? "default" : "outline"} 
+                  className="cursor-pointer hover:bg-secondary"
+                  onClick={() => updateSearch("tag", searchParams.get("tag") === tag ? null : tag)}
+                >
+                  #{tag}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    </aside>
+  );
+}