wiki-viewer 1.9.0 → 1.10.1

package/.next/standalone/src/app/s/[token]/page.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import {
+	AlertCircle,
+	Eye,
+	Lock,
+	Loader2,
+	FileText,
+	Copy,
+	Check,
+	ChevronDown,
+	Link,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ThemeProvider } from "@/components/theme-provider";
+import { KBEditor } from "@/components/editor/editor";
+import { useEditorStore } from "@/stores/editor-store";
+import { ViewWidthToggle } from "@/components/view-width-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+type ShareState =
+	| { kind: "loading" }
+	| { kind: "password"; message: string }
+	| { kind: "error"; title: string; message: string }
+	| { kind: "content"; content: string; filename: string; viewCount: number };
+
+export default function SharedPage({
+	params,
+}: {
+	params: Promise<{ token: string }>;
+}) {
+	const [token, setToken] = useState<string | null>(null);
+	const [state, setState] = useState<ShareState>({ kind: "loading" });
+	const [password, setPassword] = useState("");
+	const [verifying, setVerifying] = useState(false);
+	const [pwdError, setPwdError] = useState(false);
+	const [copied, setCopied] = useState<string | null>(null);
+
+	const copyShareLink = () => {
+		if (!token) return;
+		const url = `${window.location.origin}/s/${token}`;
+		void navigator.clipboard.writeText(url);
+		setCopied("link");
+		setTimeout(() => setCopied(null), 2000);
+	};
+
+	const copyRawContent = async () => {
+		if (state.kind !== "content") return;
+		try {
+			await navigator.clipboard.writeText(state.content);
+			setCopied("raw");
+			setTimeout(() => setCopied(null), 2000);
+		} catch {
+			// silently fail
+		}
+	};
+
+	const copyFormattedContent = async () => {
+		if (state.kind !== "content") return;
+		try {
+			const { markdownToHtml } = await import("@/lib/markdown/to-html");
+			const html = await markdownToHtml(state.content);
+			if ("ClipboardItem" in window && navigator.clipboard.write) {
+				await navigator.clipboard.write([
+					new ClipboardItem({
+						"text/html": new Blob([html], { type: "text/html" }),
+						"text/plain": new Blob([state.content], { type: "text/plain" }),
+					}),
+				]);
+			} else {
+				await navigator.clipboard.writeText(state.content);
+			}
+			setCopied("formatted");
+			setTimeout(() => setCopied(null), 2000);
+		} catch {
+			// silently fail
+		}
+	};
+
+	const fetchShare = useCallback(
+		async () => {
+			if (!token) return;
+			setState({ kind: "loading" });
+			try {
+				const res = await fetch(`/api/share/${token}`);
+				const data = await res.json();
+
+				if (res.ok && data.content !== undefined) {
+					useEditorStore.setState({
+						currentPath: `shared/${token}/${data.filename ?? "document"}`,
+						content: data.content,
+						frontmatter: null,
+						isLoading: false,
+						loadStatus: "ok",
+						isDirty: false,
+						currentRevision: null,
+						saveStatus: "saved",
+					});
+					setState({
+						kind: "content",
+						content: data.content,
+						filename: data.filename ?? "document",
+						viewCount: data.viewCount ?? 0,
+					});
+				} else if (res.status === 401 && data.protected) {
+					setState({ kind: "password", message: data.message ?? "" });
+				} else if (res.status === 410) {
+					setState({
+						kind: "error",
+						title: "Link unavailable",
+						message: data.message ?? "This share link is no longer available.",
+					});
+				} else if (res.status === 404) {
+					setState({
+						kind: "error",
+						title: "Not found",
+						message: "This share link does not exist.",
+					});
+				} else {
+					setState({
+						kind: "error",
+						title: "Error",
+						message: data.message ?? "Something went wrong. Try again later.",
+					});
+				}
+			} catch {
+				setState({
+					kind: "error",
+					title: "Connection error",
+					message: "Could not reach the server. Check your connection.",
+				});
+			}
+		},
+		[token],
+	);
+
+	// Resolve token from params
+	useEffect(() => {
+		void params.then((p) => setToken(p.token));
+	}, [params]);
+
+	// Fetch on token resolve (no password)
+	useEffect(() => {
+		if (token) void fetchShare();
+	}, [token, fetchShare]);
+
+	const handleSubmitPassword = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!password.trim() || !token) return;
+		setVerifying(true);
+		setPwdError(false);
+		try {
+			const res = await fetch(`/api/share/${token}`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ password: password.trim() }),
+			});
+			const data = await res.json();
+
+			if (res.ok && data.content !== undefined) {
+				useEditorStore.setState({
+					currentPath: `shared/${token}/${data.filename ?? "document"}`,
+					content: data.content,
+					frontmatter: null,
+					isLoading: false,
+					loadStatus: "ok",
+					isDirty: false,
+					currentRevision: null,
+					saveStatus: "saved",
+				});
+				setState({
+					kind: "content",
+					content: data.content,
+					filename: data.filename ?? "document",
+					viewCount: data.viewCount ?? 0,
+				});
+			} else if (res.status === 403) {
+				setPwdError(true);
+				setState({ kind: "password", message: "Incorrect password" });
+			} else if (res.status === 429) {
+				setState({ kind: "password", message: "Too many attempts. Try again later." });
+			} else {
+				setState({ kind: "error", title: "Error", message: data.message ?? "Something went wrong." });
+			}
+		} catch {
+			setState({ kind: "error", title: "Connection error", message: "Could not reach the server." });
+		}
+		setVerifying(false);
+	};
+
+	return (
+		<ThemeProvider>
+			<div className="min-h-screen flex flex-col bg-background text-foreground">
+				<header className="border-b border-border bg-muted/50">
+					<div className="mx-auto flex max-w-4xl items-center gap-2 px-4 py-2">
+						{state.kind === "content" ? (
+							<>
+								<div className="flex items-center gap-2 min-w-0 flex-1">
+									<span className="h-2 w-2 rounded-full bg-green-500 shrink-0" />
+									<span className="text-sm font-mono truncate" title={state.filename}>
+										{state.filename}
+									</span>
+								</div>
+								<div className="flex items-center gap-1 shrink-0">
+									<DropdownMenu>
+										<DropdownMenuTrigger asChild>
+											<Button
+												size="sm"
+												variant="ghost"
+												className="h-7 gap-1.5 px-2 text-xs data-[state=open]:bg-transparent"
+												title="Copy link, raw content, or formatted content"
+											>
+												{copied === "link" ? (
+													<Check className="h-3.5 w-3.5 text-green-500" />
+												) : (
+													<Copy className="h-3.5 w-3.5" />
+												)}
+												Copy
+												<ChevronDown className="h-3 w-3 opacity-60" />
+											</Button>
+										</DropdownMenuTrigger>
+										<DropdownMenuContent align="end" className="w-48">
+											<DropdownMenuItem onClick={copyShareLink}>
+												<Link className="mr-2 h-3.5 w-3.5" />
+												Copy share link
+											</DropdownMenuItem>
+											<DropdownMenuSeparator />
+											<DropdownMenuItem onClick={copyRawContent}>
+												<FileText className="mr-2 h-3.5 w-3.5" />
+												Copy raw content
+											</DropdownMenuItem>
+											<DropdownMenuItem onClick={copyFormattedContent}>
+												<FileText className="mr-2 h-3.5 w-3.5" />
+												Copy formatted content
+											</DropdownMenuItem>
+										</DropdownMenuContent>
+									</DropdownMenu>
+									<ViewWidthToggle />
+									<ThemeToggle />
+									<span className="text-xs text-muted-foreground ml-2">
+										{state.viewCount} view
+										{state.viewCount !== 1 ? "s" : ""}
+									</span>
+								</div>
+							</>
+						) : (
+							<>
+								<Eye className="h-4 w-4 text-muted-foreground" />
+								<span className="text-xs font-medium text-muted-foreground">
+									Shared document
+								</span>
+							</>
+						)}
+					</div>
+				</header>
+
+				{state.kind === "loading" && (
+					<div className="flex-1 flex items-center justify-center">
+						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+					</div>
+				)}
+
+				{state.kind === "password" && (
+					<div className="flex-1 flex items-center justify-center px-4">
+						<Card className="max-w-sm w-full p-6">
+							<div className="flex flex-col items-center gap-4 text-center">
+								<div className="rounded-full bg-muted p-3">
+									<Lock className="h-6 w-6 text-muted-foreground" />
+								</div>
+								<div className="space-y-1">
+									<h1 className="text-base font-medium">
+										Password required
+									</h1>
+									<p className="text-sm text-muted-foreground">
+										{state.message ||
+											"This document is password-protected."}
+									</p>
+								</div>
+								<form
+									onSubmit={handleSubmitPassword}
+									className="w-full space-y-3"
+								>
+									<Input
+										type="password"
+										placeholder="Enter password"
+										value={password}
+										onChange={(e) => {
+											setPassword(e.target.value);
+											setPwdError(false);
+										}}
+										autoFocus
+									/>
+									{pwdError && (
+										<p className="text-xs text-destructive flex items-center gap-1">
+											<AlertCircle className="h-3 w-3" />
+											Wrong password. Try again.
+										</p>
+									)}
+									<Button
+										type="submit"
+										className="w-full"
+										disabled={verifying || !password.trim()}
+									>
+										{verifying ? (
+											<Loader2 className="h-4 w-4 animate-spin" />
+										) : (
+											"View document"
+										)}
+									</Button>
+								</form>
+							</div>
+						</Card>
+					</div>
+				)}
+
+				{state.kind === "error" && (
+					<div className="flex-1 flex flex-col items-center justify-center gap-4 px-4 text-center">
+						<div className="rounded-full bg-muted p-3">
+							<AlertCircle className="h-6 w-6 text-muted-foreground" />
+						</div>
+						<div className="space-y-1">
+							<h1 className="text-base font-medium">{state.title}</h1>
+							<p className="text-sm text-muted-foreground">
+								{state.message}
+							</p>
+						</div>
+					</div>
+				)}
+
+				{state.kind === "content" && (
+					<KBEditor mode="viewing" />
+				)}
+
+				{state.kind === "content" && (
+					<footer className="border-t border-border bg-muted/30">
+						<div className="mx-auto flex max-w-4xl items-center gap-2 px-4 py-2">
+							<FileText className="h-3 w-3 text-muted-foreground" />
+							<span className="text-xs text-muted-foreground">
+								{state.filename}
+							</span>
+						</div>
+					</footer>
+				)}
+			</div>
+		</ThemeProvider>
+	);
+}

package/.next/standalone/src/components/share-dialog.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import {
+	Copy,
+	Check,
+	Globe,
+	Loader2,
+	Lock,
+	Trash2,
+	Clock,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+} from "@/components/ui/dialog";
+import { showSuccess, showError } from "@/lib/toast";
+import { wsFetch } from "@/lib/workspace-client";
+
+interface Share {
+	id: string;
+	token: string;
+	url: string;
+	hasPassword: boolean;
+	expiresAt: string | null;
+	createdAt: string;
+	viewCount: number;
+	isExpired: boolean;
+}
+
+interface ShareDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	filePath: string;
+}
+
+export function ShareDialog({
+	open,
+	onOpenChange,
+	filePath,
+}: ShareDialogProps) {
+	const [shares, setShares] = useState<Share[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [creating, setCreating] = useState(false);
+
+	// Form fields
+	const [password, setPassword] = useState("");
+	const [enablePassword, setEnablePassword] = useState(false);
+	const [enableExpiry, setEnableExpiry] = useState(false);
+	const [expiryDays, setExpiryDays] = useState("7");
+
+	// Copied state per share token
+	const [copiedToken, setCopiedToken] = useState<string | null>(null);
+
+	const loadShares = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await wsFetch(
+				`/api/share?path=${encodeURIComponent(filePath)}`,
+			);
+			if (res.ok) {
+				const data = await res.json();
+				setShares(data.shares ?? []);
+			}
+		} catch {
+			// silently fail
+		}
+		setLoading(false);
+	}, [filePath]);
+
+	useEffect(() => {
+		if (open) void loadShares();
+	}, [open, loadShares]);
+
+	const handleCreate = async () => {
+		setCreating(true);
+		try {
+			const body: Record<string, unknown> = { path: filePath };
+			if (enablePassword && password.trim()) {
+				body.password = password.trim();
+			}
+			if (enableExpiry && expiryDays) {
+				const d = new Date();
+				d.setDate(d.getDate() + Number(expiryDays));
+				body.expiresAt = d.toISOString();
+			}
+			const res = await wsFetch("/api/share", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(body),
+			});
+			if (!res.ok) {
+				const e = await res.json();
+				showError(e.error ?? "Failed to create share link");
+				return;
+			}
+			showSuccess("Share link created");
+			setPassword("");
+			setEnablePassword(false);
+			setEnableExpiry(false);
+			setExpiryDays("7");
+			await loadShares();
+		} catch {
+			showError("Failed to create share link");
+		} finally {
+			setCreating(false);
+		}
+	};
+
+	const handleRevoke = async (token: string) => {
+		try {
+			const res = await fetch(`/api/share/${token}`, { method: "DELETE" });
+			if (!res.ok) {
+				showError("Failed to revoke share link");
+				return;
+			}
+			showSuccess("Share link revoked");
+			await loadShares();
+		} catch {
+			showError("Failed to revoke share link");
+		}
+	};
+
+	const copyLink = (url: string, token: string) => {
+		const fullUrl = `${window.location.origin}${url}`;
+		void navigator.clipboard.writeText(fullUrl);
+		setCopiedToken(token);
+		setTimeout(() => setCopiedToken(null), 2000);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Share document</DialogTitle>
+					<DialogDescription>
+						Create a public link to share this document as read-only.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					{/* Create new share */}
+					<div className="rounded-sm border border-border p-3 space-y-3">
+						<h3 className="text-sm font-medium">New share link</h3>
+
+						{/* Password toggle */}
+						<div className="flex items-center justify-between">
+							<Label htmlFor="share-pwd" className="text-xs gap-1.5 flex items-center">
+								<Lock className="h-3 w-3 text-muted-foreground" />
+								Password protect
+							</Label>
+							<Switch
+								id="share-pwd"
+								checked={enablePassword}
+								onCheckedChange={setEnablePassword}
+							/>
+						</div>
+						{enablePassword && (
+							<Input
+								type="password"
+								placeholder="Set a password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+							/>
+						)}
+
+						{/* Expiry toggle */}
+						<div className="flex items-center justify-between">
+							<Label htmlFor="share-expiry" className="text-xs gap-1.5 flex items-center">
+								<Clock className="h-3 w-3 text-muted-foreground" />
+								Set expiration
+							</Label>
+							<Switch
+								id="share-expiry"
+								checked={enableExpiry}
+								onCheckedChange={setEnableExpiry}
+							/>
+						</div>
+						{enableExpiry && (
+							<div className="flex items-center gap-2">
+								<Input
+									type="number"
+									min={1}
+									max={365}
+									value={expiryDays}
+									onChange={(e) => setExpiryDays(e.target.value)}
+									className="w-20"
+								/>
+								<span className="text-xs text-muted-foreground">days</span>
+							</div>
+						)}
+
+						<Button
+							size="sm"
+							className="w-full gap-1.5"
+							onClick={handleCreate}
+							disabled={creating}
+						>
+							{creating ? (
+								<Loader2 className="h-3.5 w-3.5 animate-spin" />
+							) : (
+								<Globe className="h-3.5 w-3.5" />
+							)}
+							Create link
+						</Button>
+					</div>
+
+					{/* Existing shares */}
+					<div className="space-y-2">
+						<h3 className="text-xs font-medium text-muted-foreground">
+							{shares.length > 0
+								? `Active links (${shares.length})`
+								: loading
+									? "Loading..."
+									: "No active links"}
+						</h3>
+						{loading && (
+							<div className="flex justify-center py-2">
+								<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+							</div>
+						)}
+						{shares.map((share) => (
+							<div
+								key={share.id}
+								className="flex items-center gap-2 rounded-sm border border-border p-2"
+							>
+								<div className="flex-1 min-w-0">
+									<div className="flex items-center gap-1.5">
+										<span className="text-xs font-mono truncate">
+											{window.location.origin}/s/{share.token}
+										</span>
+									</div>
+									<div className="flex items-center gap-2 mt-0.5">
+										{share.hasPassword && (
+											<span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+												<Lock className="h-2.5 w-2.5" />
+												pwd
+											</span>
+										)}
+										{share.expiresAt && (
+											<span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+												<Clock className="h-2.5 w-2.5" />
+												{formatExpiry(share.expiresAt)}
+											</span>
+										)}
+										<span className="text-[10px] text-muted-foreground">
+											{share.viewCount} view
+											{share.viewCount !== 1 ? "s" : ""}
+										</span>
+										{share.isExpired && (
+											<span className="text-[10px] text-destructive">
+												expired
+											</span>
+										)}
+									</div>
+								</div>
+								<div className="flex items-center gap-1 shrink-0">
+									<Button
+										size="sm"
+										variant="ghost"
+										className="h-7 w-7 p-0"
+										title="Copy link"
+										onClick={() => copyLink(share.url, share.token)}
+									>
+										{copiedToken === share.token ? (
+											<Check className="h-3.5 w-3.5 text-green-500" />
+										) : (
+											<Copy className="h-3.5 w-3.5" />
+										)}
+									</Button>
+									<Button
+										size="sm"
+										variant="ghost"
+										className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+										title="Revoke link"
+										onClick={() => handleRevoke(share.token)}
+									>
+										<Trash2 className="h-3.5 w-3.5" />
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function formatExpiry(iso: string): string {
+	const d = new Date(iso);
+	const now = new Date();
+	const ms = d.getTime() - now.getTime();
+	if (ms <= 0) return "expired";
+	const days = Math.floor(ms / 86400000);
+	const hours = Math.floor((ms % 86400000) / 3600000);
+	if (days > 0) return `${days}d`;
+	if (hours > 0) return `${hours}h`;
+	return "<1h";
+}

package/.next/standalone/src/components/ui/switch.tsx

@@ -12,7 +12,7 @@ function Switch({
 		<SwitchPrimitive.Root
 			data-slot="switch"
 			className={cn(
-				"peer data-[state=checked]:bg-accent data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-sm border-2 border-transparent shadow-e-1 transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+				"peer data-[state=checked]:bg-[var(--switch-checked)] data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-sm border-2 border-transparent shadow-e-1 transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
 				className,
 			)}
 			{...props}