feat: styles

frontend/src/routes/DashboardView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { MoreVertical, Plus, RotateCcw } from "lucide-react";
 import { usePagesStore } from "@/stores/pagesStore";
 import StatusBadge from "@/components/dashboard/StatusBadge";
 import { Button } from "@/components/ui/button";
@@ -13,6 +13,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,11 +33,61 @@ export default function DashboardView() {
   const { pages, isLoading, fetchPages, deletePage } = usePagesStore();
   const navigate = useNavigate();
   const [pageToDelete, setPageToDelete] = useState<string | null>(null);
+  const [restarting, setRestarting] = useState(false);
+
+  const handleRestart = async () => {
+    setRestarting(true);
+    try {
+      const res = await fetch("/api/restart", { method: "POST" });
+      if (!res.ok) throw new Error(await res.text());
+      toast.success("NomadNet restarted");
+    } catch (e) {
+      toast.error(`Restart failed: ${e}`);
+    } finally {
+      setRestarting(false);
+    }
+  };
 
   useEffect(() => {
     fetchPages();
   }, []);
 
+  const handleUnpublish = async (name: string) => {
+    try {
+      const res = await fetch(`/api/pages/${name}`);
+      const data = await res.json();
+      if (data.source) {
+        await fetch(`/api/pages/${name}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ source: data.source, publish: false }),
+        });
+        toast.success(`"${name}" unpublished`);
+        fetchPages();
+      }
+    } catch (e) {
+      toast.error(`Failed: ${e}`);
+    }
+  };
+
+  const handlePublish = async (name: string) => {
+    try {
+      const res = await fetch(`/api/pages/${name}`);
+      const data = await res.json();
+      if (data.source) {
+        await fetch(`/api/pages/${name}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ source: data.source, publish: true }),
+        });
+        toast.success(`"${name}" published`);
+        fetchPages();
+      }
+    } catch (e) {
+      toast.error(`Failed: ${e}`);
+    }
+  };
+
   const handleDelete = async () => {
     if (!pageToDelete) return;
     await deletePage(pageToDelete);
@@ -48,28 +103,41 @@ export default function DashboardView() {
     );
 
   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 className="max-w-5xl mx-auto px-4">
+      <div className="border-2 border-border" style={{boxShadow:'3px 3px 0 0 var(--border),5px 3px 0 0 transparent,7px 3px 0 0 var(--border),4px 4px 0 0 transparent,6px 4px 0 0 var(--border),3px 5px 0 0 var(--border),5px 5px 0 0 transparent,7px 5px 0 0 var(--border),4px 6px 0 0 var(--border),6px 6px 0 0 transparent'}}>
+        {/* Header row */}
+        <div className="flex items-center px-4 py-2 border-b-2 border-border">
+          <h1 className="text-sm font-semibold flex-1">Pages</h1>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleRestart} disabled={restarting}>
+              <RotateCcw className="w-4 h-4 mr-2" />
+              Restart
+            </Button>
+            <Button onClick={() => navigate("/editor/new")}>
+              <Plus className="w-4 h-4 mr-2" />
+            New Page
+          </Button>
+        </div>
       </div>
 
-      <Table>
-        <TableHeader>
-          <TableRow>
+        {/* Table inside bordered container */}
+        <Table>
+          <TableHeader>
+            <TableRow>
             <TableHead>Name</TableHead>
             <TableHead>Title</TableHead>
             <TableHead>Status</TableHead>
             <TableHead>Size</TableHead>
-            <TableHead />
+            <TableHead className="w-8" />
           </TableRow>
         </TableHeader>
         <TableBody>
           {pages.map((p) => (
-            <TableRow key={p.name}>
+            <TableRow
+              key={p.name}
+              className="cursor-pointer"
+              onClick={() => navigate(`/editor/${p.name}`)}
+            >
               <TableCell className="font-mono">
                 {p.name}
                 {p.name === "index" && (
@@ -85,26 +153,42 @@ export default function DashboardView() {
               <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)}
+              <TableCell className="text-right w-8">
+                <Popover>
+                  <PopoverTrigger
+                    render={
+                      <button
+                        onClick={(e) => e.stopPropagation()}
+                        className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                      >
+                        <MoreVertical className="w-4 h-4" />
+                      </button>
+                    }
+                  />
+                  <PopoverContent side="bottom" align="end" sideOffset={4}
+                    className="w-36 p-1"
                   >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); navigate(`/editor/${p.name}`); }}
+                      className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                    >Edit</button>
+                    {p.published ? (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handleUnpublish(p.name); }}
+                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                      >Unpublish</button>
+                    ) : (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handlePublish(p.name); }}
+                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                      >Publish</button>
+                    )}
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setPageToDelete(p.name); }}
+                      className="w-full text-left px-3 py-1.5 text-xs text-destructive hover:bg-accent transition-colors cursor-pointer"
+                    >Delete</button>
+                  </PopoverContent>
+                </Popover>
               </TableCell>
             </TableRow>
           ))}
@@ -119,7 +203,8 @@ export default function DashboardView() {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+        </Table>
+      </div>{/* end bordered container */}
 
       <AlertDialog
         open={pageToDelete !== null}