feat: templates

frontend/src/components/editor/ToolBar.tsx

@@ -1,14 +1,25 @@
+import { useState } from "react";
+import { BookOpen } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+} from "@/components/ui/popover";
 import { useEditorStore } from "@/stores/editorStore";
 import { useBacklinks } from "@/hooks/useBacklinks";
 import BacklinkIndicator from "@/components/editor/BacklinkIndicator";
+import { EXAMPLES } from "@/components/editor/examples";
 
 interface Props {
   pageName: string;
   onNameChange?: (name: string) => void;
   onSaveDraft: () => void;
   onPublish: () => void;
+  onInsertExample: (source: string) => void;
   saving: boolean;
   isDirty: boolean;
 }
@@ -18,11 +29,13 @@ export default function ToolBar({
   onNameChange,
   onSaveDraft,
   onPublish,
+  onInsertExample,
   saving,
   isDirty,
 }: Props) {
   const currentPage = useEditorStore((s) => s.currentPage);
   const backlinks = useBacklinks(currentPage?.name);
+  const [examplesOpen, setExamplesOpen] = useState(false);
 
   return (
     <div className="flex items-center gap-3 px-4 py-2 border-b bg-card shrink-0">
@@ -37,6 +50,42 @@ export default function ToolBar({
         <span className="font-mono font-semibold text-sm">{pageName}</span>
       )}
 
+      <Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
+        <PopoverTrigger
+          render={
+            <button
+              className="inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium h-8 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
+              title="Insert example template"
+            >
+              <BookOpen className="h-3.5 w-3.5" />
+              <span>Examples</span>
+            </button>
+          }
+        />
+        <PopoverContent side="bottom" align="start" 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={() => {
+                  onInsertExample(ex.source);
+                  setExamplesOpen(false);
+                }}
+                className="flex flex-col items-start rounded-md px-2 py-1.5 text-left hover:bg-accent transition-colors"
+              >
+                <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>
+
       <div className="flex-1" />
 
       <BacklinkIndicator backlinks={backlinks} />
@@ -45,7 +94,12 @@ export default function ToolBar({
         <span className="text-xs text-muted-foreground">Unsaved</span>
       )}
 
-      <Button variant="outline" size="sm" onClick={onSaveDraft} disabled={saving}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onSaveDraft}
+        disabled={saving}
+      >
         Save Draft
       </Button>
       <Button size="sm" onClick={onPublish} disabled={saving}>