feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states

components/categories/category-search-bar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, X, ChevronsUpDown } from "lucide-react";
+
+interface CategorySearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  allExpanded: boolean;
+  onToggleAll: () => void;
+}
+
+export function CategorySearchBar({
+  searchQuery,
+  onSearchChange,
+  allExpanded,
+  onToggleAll,
+}: CategorySearchBarProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative flex-1 max-w-sm">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          placeholder="Rechercher une catégorie ou un mot-clé..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-9"
+        />
+        {searchQuery && (
+          <button
+            onClick={() => onSearchChange("")}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+      <Button variant="outline" size="sm" onClick={onToggleAll}>
+        <ChevronsUpDown className="w-4 h-4 mr-2" />
+        {allExpanded ? "Tout replier" : "Tout déplier"}
+      </Button>
+    </div>
+  );
+}
+