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}

frontend/src/routes/EditorView.tsx

@@ -1,16 +1,27 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
+import { BookOpen, Upload } from "lucide-react";
 import { autocompletion } from "@codemirror/autocomplete";
+import type { Extension } from "@codemirror/state";
 import { useEditorStore } from "@/stores/editorStore";
 import { usePagesStore } from "@/stores/pagesStore";
 import { useUnsavedGuard } from "@/hooks/useUnsavedGuard";
 import { useCompile } from "@/hooks/useCompile";
 import { uframeHighlight } from "@/components/editor/uframeHighlight";
-import { uframeCommandSource, loadCommandsFromApi } from "@/components/editor/uframeCommands";
+import { uframeCommandSource, uframeValueHintSource, loadCommandsFromApi } from "@/components/editor/uframeCommands";
+import { keywordHoverTooltip } from "@/components/editor/uframeHover";
 import EditorPane from "@/components/editor/EditorPane";
 import PreviewPane from "@/components/editor/PreviewPane";
 import ToolBar from "@/components/editor/ToolBar";
+import { EXAMPLES } from "@/components/editor/examples";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+} from "@/components/ui/popover";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -38,11 +49,12 @@ export default function EditorView() {
     () => [
       ...uframeHighlight(),
       autocompletion({
-        override: [uframeCommandSource],
+        override: [uframeCommandSource, uframeValueHintSource],
         icons: false,
         activateOnTyping: true,
         maxOptions: 50,
       }),
+      keywordHoverTooltip,
     ],
     [],
   );
@@ -130,29 +142,115 @@ export default function EditorView() {
   }, [handleSave]);
 
   return (
-    <div className="flex flex-col h-full">
-      <ToolBar
-        pageName={pageName}
-        onNameChange={isNew ? setPageName : undefined}
-        onSaveDraft={() => handleSave(false)}
-        onPublish={() => handleSave(true)}
-        onInsertExample={(source) => setSource(source)}
-        saving={saving}
-        isDirty={isDirty}
-      />
-      <ResizablePanelGroup orientation="horizontal" className="flex-1">
-        <ResizablePanel defaultSize={50} minSize={20}>
-          <EditorPane
-            value={ufSource}
-            onChange={setSource}
-            extensions={extensions}
-          />
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={50} minSize={20}>
-          <PreviewPane />
-        </ResizablePanel>
-      </ResizablePanelGroup>
+    <div className="flex flex-col h-full max-w-5xl mx-auto w-full px-4">
+      <div className="flex flex-col flex-1 border-2 border-border min-h-0" 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'}}>
+        <ToolBar
+          pageName={pageName}
+          onNameChange={isNew ? setPageName : undefined}
+          onSaveDraft={() => handleSave(false)}
+          onPublish={() => handleSave(true)}
+          saving={saving}
+          isDirty={isDirty}
+        />
+        <ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0">
+          <ResizablePanel defaultSize={50} minSize={20}>
+            <SourcePane
+              ufSource={ufSource}
+              setSource={setSource}
+              extensions={extensions}
+            />
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={50} minSize={20}>
+            <PreviewPane />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+}
+
+
+/** Source pane — editor with header bar matching the Preview pane */
+function SourcePane({
+  ufSource,
+  setSource,
+  extensions,
+}: {
+  ufSource: string;
+  setSource: (s: string) => void;
+  extensions: Extension[];
+}) {
+  const [examplesOpen, setExamplesOpen] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch("/api/upload-image", { method: "POST", body: form });
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      toast.success(`Uploaded ${data.filename}`);
+      setSource(`image "${data.path}" braille 30\n  align center`);
+    } catch (err) {
+      toast.error(`Upload failed: ${err}`);
+    } finally {
+      setUploading(false);
+      if (fileRef.current) fileRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center px-3 py-1.5 border-b-2 border-border shrink-0 gap-2">
+        <span className="text-xs text-muted-foreground flex-1">Source</span>
+
+        <Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
+          <PopoverTrigger
+            render={
+              <button className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 cursor-pointer">
+                <BookOpen className="h-3 w-3" />
+                Examples
+              </button>
+            }
+          />
+          <PopoverContent side="bottom" align="end" sideOffset={8}>
+            <PopoverHeader>
+              <PopoverTitle>Insert Example</PopoverTitle>
+            </PopoverHeader>
+            <div className="flex flex-col gap-0.5 max-h-72 overflow-y-auto -mx-1">
+              {EXAMPLES.map((ex) => (
+                <button
+                  key={ex.name}
+                  onClick={() => { setSource(ex.source); setExamplesOpen(false); }}
+                  className="flex flex-col items-start px-2 py-1.5 text-left hover:bg-accent transition-colors cursor-pointer"
+                >
+                  <span className="text-sm font-medium">{ex.name}</span>
+                  <span className="text-xs text-muted-foreground leading-tight">{ex.description}</span>
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleUpload} />
+        <button
+          onClick={() => fileRef.current?.click()}
+          disabled={uploading}
+          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 disabled:opacity-50 cursor-pointer"
+        >
+          <Upload className="h-3 w-3" />
+          {uploading ? "Uploading…" : "Image"}
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto min-h-0">
+        <EditorPane value={ufSource} onChange={setSource} extensions={extensions} />
+      </div>
     </div>
   );
 }