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

components/folders/folder-edit-dialog.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { Folder } from "@/lib/types";
+import { folderColors } from "./constants";
+
+interface FolderFormData {
+  name: string;
+  parentId: string | null;
+  color: string;
+}
+
+interface FolderEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingFolder: Folder | null;
+  formData: FolderFormData;
+  onFormDataChange: (data: FolderFormData) => void;
+  folders: Folder[];
+  onSave: () => void;
+}
+
+export function FolderEditDialog({
+  open,
+  onOpenChange,
+  editingFolder,
+  formData,
+  onFormDataChange,
+  folders,
+  onSave,
+}: FolderEditDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {editingFolder ? "Modifier le dossier" : "Nouveau dossier"}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Nom du dossier</Label>
+            <Input
+              value={formData.name}
+              onChange={(e) =>
+                onFormDataChange({ ...formData, name: e.target.value })
+              }
+              placeholder="Ex: Comptes personnels"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Dossier parent</Label>
+            <Select
+              value={formData.parentId || "root"}
+              onValueChange={(v) =>
+                onFormDataChange({
+                  ...formData,
+                  parentId: v === "root" ? null : v,
+                })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="root">Racine</SelectItem>
+                {folders
+                  .filter((f) => f.id !== editingFolder?.id)
+                  .map((folder) => (
+                    <SelectItem key={folder.id} value={folder.id}>
+                      {folder.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>Couleur</Label>
+            <div className="flex gap-2">
+              {folderColors.map(({ value }) => (
+                <button
+                  key={value}
+                  onClick={() => onFormDataChange({ ...formData, color: value })}
+                  className={cn(
+                    "w-8 h-8 rounded-full transition-transform",
+                    formData.color === value &&
+                      "ring-2 ring-offset-2 ring-primary scale-110"
+                  )}
+                  style={{ backgroundColor: value }}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Annuler
+            </Button>
+            <Button onClick={onSave} disabled={!formData.name.trim()}>
+              {editingFolder ? "Enregistrer" : "Créer"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+