feat: added a twist

frontend/src/components/editor/BacklinkIndicator.tsx

@@ -0,0 +1,44 @@
+import { Link } from "react-router-dom";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import type { BacklinkPage } from "@/hooks/useBacklinks";
+
+interface Props {
+  backlinks: BacklinkPage[];
+}
+
+export default function BacklinkIndicator({ backlinks }: Props) {
+  if (backlinks.length === 0) return null;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="sm" className="text-xs text-muted-foreground h-7 px-2">
+          ← {backlinks.length} backlink{backlinks.length !== 1 ? "s" : ""}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-2" align="end">
+        <p className="text-xs font-semibold text-muted-foreground mb-2 px-1">
+          Pages linking here
+        </p>
+        <ul className="space-y-0.5">
+          {backlinks.map((page) => (
+            <li key={page.name}>
+              <Link
+                to={`/editor/${page.name}`}
+                className="flex items-center gap-1.5 text-sm px-2 py-1 rounded hover:bg-accent"
+              >
+                <span>{page.title ?? page.name}</span>
+                {page.title && (
+                  <span className="text-xs text-muted-foreground font-mono">
+                    ({page.name})
+                  </span>
+                )}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}