wiki-viewer 1.8.2 → 1.8.3

package/.next/standalone/src/components/editor/backlinks-panel.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronRight, Link2 } from "lucide-react";
+import { wsFetch } from "@/lib/workspace-client";
+import { useEditorStore } from "@/stores/editor-store";
+
+interface BacklinkEntry {
+	path: string;
+	snippet: string;
+}
+
+function slugFromPath(filePath: string): string {
+	const base = filePath.split("/").pop() ?? filePath;
+	return base.replace(/\.md$/i, "");
+}
+
+/**
+ * True if `content` contains an actual wiki-link to `slug`, i.e. `[[slug]]`,
+ * `[[slug|alias]]`, or `[[slug#anchor]]`. FTS matches tokenised prose, so we
+ * re-check the raw text to drop false positives (a page merely mentioning the
+ * word, not linking to it).
+ */
+function hasWikiLinkTo(content: string, slug: string): boolean {
+	const esc = slug.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const re = new RegExp(`\\[\\[${esc}(?:\\|[^\\]#|]+|#[a-z0-9-]+)?\\]\\]`, "i");
+	return re.test(content);
+}
+
+/** Display the last two path segments, e.g. "notes/my-page.md" → "notes / my-page" */
+function displayPath(filePath: string): string {
+	const parts = filePath.replace(/\.md$/i, "").split("/");
+	return parts.length > 1 ? parts.slice(-2).join(" / ") : parts[0] ?? filePath;
+}
+
+interface BacklinksPanelProps {
+	currentPath: string;
+}
+
+export function BacklinksPanel({ currentPath }: BacklinksPanelProps) {
+	const [backlinks, setBacklinks] = useState<BacklinkEntry[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [collapsed, setCollapsed] = useState(false);
+
+	const slug = slugFromPath(currentPath);
+
+	useEffect(() => {
+		if (!slug) return;
+		let cancelled = false;
+		setLoading(true);
+		setBacklinks([]);
+
+		// Search for the slug surrounded by [[ ]] — FTS may not match brackets,
+		// but we pass the full pattern; backend uses BM25 on tokenised text so
+		// results will include pages that mention the slug near [[ ]].
+		// FTS is a coarse candidate filter (it tokenises and strips brackets), so
+		// we fetch each candidate's raw content and confirm a literal [[slug]] link.
+		(async () => {
+			try {
+				const r = await wsFetch("/api/wiki/search", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ query: slug, limit: 50 }),
+				});
+				const d: {
+					matches?: Array<{ path: string; score: number; snippet: string }>;
+				} = r.ok ? await r.json() : { matches: [] };
+
+				const candidates = (d.matches ?? []).filter(
+					(m) => m.path !== currentPath && /\.md$/i.test(m.path),
+				);
+
+				const confirmed = await Promise.all(
+					candidates.map(async (m) => {
+						try {
+							const cr = await wsFetch(
+								`/api/wiki/content?path=${encodeURIComponent(m.path)}`,
+							);
+							if (!cr.ok) return null;
+							const { content } = (await cr.json()) as { content: string };
+							if (!hasWikiLinkTo(content, slug)) return null;
+							return { path: m.path, snippet: m.snippet } as BacklinkEntry;
+						} catch {
+							return null;
+						}
+					}),
+				);
+
+				if (cancelled) return;
+				setBacklinks(
+					confirmed.filter((b): b is BacklinkEntry => b !== null),
+				);
+			} catch {
+				if (!cancelled) setBacklinks([]);
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [currentPath, slug]);
+
+	// Hide entirely when loading with no prior results or genuinely empty
+	if (!loading && backlinks.length === 0) return null;
+
+	return (
+		<div className="max-w-[var(--editor-max-w,48rem)] mx-auto px-4 sm:px-8 pb-8 pt-1">
+			<div className="border-t border-border/60 pt-4">
+				<button
+					onClick={() => setCollapsed((c) => !c)}
+					className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60 hover:text-muted-foreground transition-colors mb-2"
+					aria-expanded={!collapsed}
+				>
+					{collapsed ? (
+						<ChevronRight className="h-3 w-3 shrink-0" />
+					) : (
+						<ChevronDown className="h-3 w-3 shrink-0" />
+					)}
+					<Link2 className="h-3 w-3 shrink-0" />
+					<span className="font-medium">Linked from</span>
+					{backlinks.length > 0 && (
+						<span className="opacity-50 tabular-nums">({backlinks.length})</span>
+					)}
+					{loading && <span className="opacity-40 ml-1">…</span>}
+				</button>
+
+				{!collapsed && backlinks.length > 0 && (
+					<ul className="flex flex-col gap-1.5">
+						{backlinks.map((bl) => (
+							<li key={bl.path} className="flex flex-col">
+								<button
+									onClick={() => useEditorStore.getState().loadPage(bl.path)}
+									className="text-left text-[12px] text-primary/70 hover:text-primary hover:underline underline-offset-2 truncate transition-colors"
+									title={bl.path}
+								>
+									{displayPath(bl.path)}
+								</button>
+								{bl.snippet && (
+									<p className="text-[10.5px] text-muted-foreground/50 line-clamp-1 mt-0.5">
+										{bl.snippet}
+									</p>
+								)}
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/document-outline.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { List } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Heading {
+	level: number;
+	text: string;
+	pos: number; // ProseMirror doc position (start of node)
+	uid: string; // unique id within the doc (text + index dedup)
+}
+
+function extractHeadings(editor: Editor): Heading[] {
+	const headings: Heading[] = [];
+	const seen = new Map<string, number>();
+	editor.state.doc.forEach((node, pos) => {
+		if (node.type.name === "heading") {
+			const text = node.textContent;
+			const level = node.attrs.level as number;
+			const base = text.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "") || "heading";
+			const count = (seen.get(base) ?? 0) + 1;
+			seen.set(base, count);
+			const uid = count === 1 ? base : `${base}-${count}`;
+			headings.push({ level, text, pos, uid });
+		}
+	});
+	return headings;
+}
+
+interface DocumentOutlineProps {
+	editor: Editor | null;
+	scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export function DocumentOutline({ editor, scrollContainerRef }: DocumentOutlineProps) {
+	const [headings, setHeadings] = useState<Heading[]>([]);
+	const [activeUid, setActiveUid] = useState<string | null>(null);
+	const [collapsed, setCollapsed] = useState(false);
+	const [scrollProgress, setScrollProgress] = useState(0);
+	const observerRef = useRef<IntersectionObserver | null>(null);
+
+	// Extract headings on every doc update
+	useEffect(() => {
+		if (!editor) return;
+		const update = () => setHeadings(extractHeadings(editor));
+		editor.on("update", update);
+		update();
+		return () => { editor.off("update", update); };
+	}, [editor]);
+
+	// Reading-progress bar: track scroll on the scroll container
+	useEffect(() => {
+		const el = scrollContainerRef.current;
+		if (!el) return;
+		let rafId = 0;
+		const onScroll = () => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(() => {
+				const total = el.scrollHeight - el.clientHeight;
+				setScrollProgress(total > 0 ? Math.min(1, el.scrollTop / total) : 0);
+			});
+		};
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			el.removeEventListener("scroll", onScroll);
+			cancelAnimationFrame(rafId);
+		};
+	}, [scrollContainerRef]);
+
+	// Scroll-spy: observe heading DOM nodes
+	useEffect(() => {
+		observerRef.current?.disconnect();
+		const container = scrollContainerRef.current;
+		if (!container || !editor || headings.length === 0) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						const uid = (entry.target as HTMLElement).dataset.outlineId;
+						if (uid) setActiveUid(uid);
+					}
+				}
+			},
+			{ root: container, rootMargin: "-8% 0px -72% 0px", threshold: 0 },
+		);
+
+		// Tag and observe each heading node via ProseMirror pos→DOM
+		for (const h of headings) {
+			try {
+				const { node } = editor.view.domAtPos(h.pos + 1);
+				const el: HTMLElement | null =
+					node.nodeType === Node.ELEMENT_NODE
+						? (node as HTMLElement).closest("h1,h2,h3,h4,h5,h6") ?? (node as HTMLElement)
+						: (node as Node).parentElement?.closest("h1,h2,h3,h4,h5,h6") ?? null;
+				if (el) {
+					el.dataset.outlineId = h.uid;
+					observer.observe(el);
+				}
+			} catch {
+				// pos might be out of range during transition — skip
+			}
+		}
+
+		observerRef.current = observer;
+		return () => { observer.disconnect(); };
+	}, [headings, editor, scrollContainerRef]);
+
+	const scrollToHeading = useCallback(
+		(h: Heading) => {
+			if (!editor) return;
+			try {
+				const { node } = editor.view.domAtPos(h.pos + 1);
+				const el: HTMLElement | null =
+					node.nodeType === Node.ELEMENT_NODE
+						? (node as HTMLElement).closest("h1,h2,h3,h4,h5,h6") ?? (node as HTMLElement)
+						: (node as Node).parentElement?.closest("h1,h2,h3,h4,h5,h6") ?? null;
+				el?.scrollIntoView({ behavior: "smooth", block: "start" });
+			} catch {
+				// ignore
+			}
+		},
+		[editor],
+	);
+
+	const showToc = headings.length >= 2;
+	const [overlayOpen, setOverlayOpen] = useState(false);
+
+	const headingList = (
+		<>
+			{headings.map((h, i) => (
+				<button
+					key={`${h.uid}-${i}`}
+					onClick={() => {
+						scrollToHeading(h);
+						setOverlayOpen(false);
+					}}
+					title={h.text}
+					className={cn(
+						"text-left text-[10.5px] leading-snug py-0.5 rounded truncate transition-colors",
+						activeUid === h.uid
+							? "text-primary bg-primary/10 font-medium"
+							: "text-muted-foreground/60 hover:text-foreground hover:bg-accent",
+					)}
+					style={{ paddingLeft: `${(h.level - 1) * 8 + 4}px` }}
+				>
+					{h.text}
+				</button>
+			))}
+		</>
+	);
+
+	return (
+		<>
+			{/* Reading-progress bar — thin line at very top of editor area */}
+			<div
+				aria-hidden
+				className="absolute top-0 left-0 right-0 h-0.5 z-30 pointer-events-none"
+			>
+				<div
+					className="h-full bg-primary/35 transition-[width] duration-100 ease-out"
+					style={{ width: `${scrollProgress * 100}%` }}
+				/>
+			</div>
+
+			{/* TOC rail — xl+ screens (enough side gutter to avoid content overlap) */}
+			{showToc && (
+				<div className="absolute right-1 top-4 z-20 hidden xl:block w-40">
+					<button
+						onClick={() => setCollapsed((c) => !c)}
+						className="flex items-center gap-1 mb-1.5 px-1 py-0.5 rounded text-muted-foreground/40 hover:text-muted-foreground hover:bg-accent transition-colors text-[10px]"
+						aria-label={collapsed ? "Expand outline" : "Collapse outline"}
+					>
+						<List className="h-3 w-3" />
+						{!collapsed && <span>Outline</span>}
+					</button>
+					{!collapsed && (
+						<nav
+							aria-label="Document outline"
+							className="flex flex-col gap-px max-h-[50vh] overflow-y-auto pr-1"
+						>
+							{headingList}
+						</nav>
+					)}
+				</div>
+			)}
+
+			{/* Floating toggle + overlay — below xl, where there's no room for a rail */}
+			{showToc && (
+				<div className="absolute right-2 top-2 z-30 xl:hidden">
+					<button
+						onClick={() => setOverlayOpen((o) => !o)}
+						className="flex items-center gap-1 px-1.5 py-1 rounded bg-background/80 backdrop-blur border border-border/60 text-muted-foreground/60 hover:text-foreground hover:bg-accent transition-colors text-[10px] shadow-sm"
+						aria-label="Document outline"
+						aria-expanded={overlayOpen}
+					>
+						<List className="h-3.5 w-3.5" />
+					</button>
+					{overlayOpen && (
+						<>
+							<button
+								aria-hidden
+								tabIndex={-1}
+								className="fixed inset-0 z-0 cursor-default"
+								onClick={() => setOverlayOpen(false)}
+							/>
+							<nav
+								aria-label="Document outline"
+								className="absolute right-0 top-9 z-10 w-52 max-h-[60vh] overflow-y-auto flex flex-col gap-px rounded-lg border border-border bg-popover p-2 shadow-lg"
+							>
+								{headingList}
+							</nav>
+						</>
+					)}
+				</div>
+			)}
+		</>
+	);
+}