feat: added a twist

frontend/src/components/editor/ToolBar.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useEditorStore } from "@/stores/editorStore";
+import { useBacklinks } from "@/hooks/useBacklinks";
+import BacklinkIndicator from "@/components/editor/BacklinkIndicator";
+
+interface Props {
+  pageName: string;
+  onNameChange?: (name: string) => void;
+  onSaveDraft: () => void;
+  onPublish: () => void;
+  saving: boolean;
+  isDirty: boolean;
+}
+
+export default function ToolBar({
+  pageName,
+  onNameChange,
+  onSaveDraft,
+  onPublish,
+  saving,
+  isDirty,
+}: Props) {
+  const currentPage = useEditorStore((s) => s.currentPage);
+  const backlinks = useBacklinks(currentPage?.name);
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 border-b bg-card shrink-0">
+      {onNameChange ? (
+        <Input
+          value={pageName}
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder="page-name"
+          className="font-mono w-48 h-8 text-sm"
+        />
+      ) : (
+        <span className="font-mono font-semibold text-sm">{pageName}</span>
+      )}
+
+      <div className="flex-1" />
+
+      <BacklinkIndicator backlinks={backlinks} />
+
+      {isDirty && (
+        <span className="text-xs text-muted-foreground">Unsaved</span>
+      )}
+
+      <Button variant="outline" size="sm" onClick={onSaveDraft} disabled={saving}>
+        Save Draft
+      </Button>
+      <Button size="sm" onClick={onPublish} disabled={saving}>
+        Publish
+      </Button>
+    </div>
+  );
+}