feat: added a twist

2026-04-01 00:53:55 +02:00
parent 0b7deee59e
commit b40c6436cd
76 changed files with 15121 additions and 64 deletions
--- a/frontend/src/routes/DashboardView.tsx
+++ b/frontend/src/routes/DashboardView.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { usePagesStore } from "@/stores/pagesStore";
+import StatusBadge from "@/components/dashboard/StatusBadge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+export default function DashboardView() {
+  const { pages, isLoading, fetchPages, deletePage } = usePagesStore();
+  const navigate = useNavigate();
+  const [pageToDelete, setPageToDelete] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchPages();
+  }, []);
+
+  const handleDelete = async () => {
+    if (!pageToDelete) return;
+    await deletePage(pageToDelete);
+    toast.success(`"${pageToDelete}" deleted`);
+    setPageToDelete(null);
+  };
+
+  if (isLoading)
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        Loading...
+      </div>
+    );
+
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-xl font-semibold">Pages</h1>
+        <Button onClick={() => navigate("/editor/new")}>
+          <Plus className="w-4 h-4 mr-2" />
+          New Page
+        </Button>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Title</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Size</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {pages.map((p) => (
+            <TableRow key={p.name}>
+              <TableCell className="font-mono">
+                {p.name}
+                {p.name === "index" && (
+                  <span className="ml-2 text-xs text-primary">homepage</span>
+                )}
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {p.title ?? "—"}
+              </TableCell>
+              <TableCell>
+                <StatusBadge published={p.published} hasSource={p.has_source} />
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {p.size != null ? `${p.size} B` : "—"}
+              </TableCell>
+              <TableCell>
+                <div className="flex gap-1 justify-end">
+                  {p.has_source && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => navigate(`/editor/${p.name}`)}
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    onClick={() => setPageToDelete(p.name)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+          {pages.length === 0 && (
+            <TableRow>
+              <TableCell
+                colSpan={5}
+                className="text-center text-muted-foreground py-8"
+              >
+                No pages yet. Create one to get started.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      <AlertDialog
+        open={pageToDelete !== null}
+        onOpenChange={(open) => !open && setPageToDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete "{pageToDelete}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently deletes the page and its source. This cannot be
+              undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-white hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}