From 3e89d2998588f8e35c524e523ba2ee853f0f6475 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 20 Apr 2026 11:31:17 +0200
Subject: refactor: restructure files to their domains,  new preview overlay
 system, and dep graph

---
 .../components/changelog-notification.tsx          |  87 ------------
 .../changelog/components/copy-markdown-button.tsx  |  98 -------------
 apps/web/src/lib/changelog/components/release.tsx  | 153 ---------------------
 3 files changed, 338 deletions(-)
 delete mode 100644 apps/web/src/lib/changelog/components/changelog-notification.tsx
 delete mode 100644 apps/web/src/lib/changelog/components/copy-markdown-button.tsx
 delete mode 100644 apps/web/src/lib/changelog/components/release.tsx

(limited to 'apps/web/src/lib/changelog/components')

diff --git a/apps/web/src/lib/changelog/components/changelog-notification.tsx b/apps/web/src/lib/changelog/components/changelog-notification.tsx
deleted file mode 100644
index 4433df30..00000000
--- a/apps/web/src/lib/changelog/components/changelog-notification.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Button } from "@/components/ui/button";
-import { getSortedReleases } from "../utils";
-import type { Release } from "../utils";
-
-const STORAGE_KEY = "last-seen-version";
-
-export function ChangelogNotification() {
-	const [release, setRelease] = useState<Release | null>(null);
-
-	useEffect(() => {
-		const releases = getSortedReleases();
-		const latest = releases[0];
-		if (!latest) return;
-
-		let storedVersion: string | null = null;
-		try {
-			storedVersion = localStorage.getItem(STORAGE_KEY);
-		} catch {
-			// localStorage unavailable
-		}
-
-		const isOutdated =
-			storedVersion === null ||
-			storedVersion.localeCompare(latest.version, undefined, {
-				numeric: true,
-			}) < 0;
-
-		// TODO(v0.4): revert to the standard "null = first-time visitor, record silently"
-		// path. The null case intentionally shows the card for this release so existing
-		// users who never had the key get the 0.3.0 announcement.
-		if (!isOutdated) return;
-
-		try {
-			localStorage.setItem(STORAGE_KEY, latest.version);
-		} catch {
-			// ignore
-		}
-
-		setRelease(latest);
-	}, []);
-
-	if (!release) return null;
-
-	return (
-		<div className="fixed bottom-5 left-5 z-50 flex w-72 flex-col gap-3 rounded-xl border bg-card p-4 shadow-lg">
-			<div className="flex items-start justify-between gap-2">
-				<div className="flex flex-col gap-1">
-					<span className="text-sm font-semibold leading-snug">
-						{release.title}
-					</span>
-					<span className="text-xs text-muted-foreground">
-						v{release.version}
-					</span>
-				</div>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="-mr-1 -mt-1 shrink-0"
-					onClick={() => setRelease(null)}
-					aria-label="Dismiss"
-				>
-					<HugeiconsIcon icon={Cancel01Icon} className="size-4" />
-				</Button>
-			</div>
-
-			{release.summary && (
-				<p className="text-xs leading-relaxed text-muted-foreground">
-					{release.summary}
-				</p>
-			)}
-
-			<div className="flex justify-end">
-				<Button asChild size="sm">
-					<Link href="/changelog" onClick={() => setRelease(null)}>
-						See full changelog
-					</Link>
-				</Button>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/web/src/lib/changelog/components/copy-markdown-button.tsx b/apps/web/src/lib/changelog/components/copy-markdown-button.tsx
deleted file mode 100644
index bc7e94bf..00000000
--- a/apps/web/src/lib/changelog/components/copy-markdown-button.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { CheckIcon, ClipboardIcon } from "lucide-react";
-import {
-	getSectionTitle,
-	groupAndOrderChanges,
-	isSectionCollapsible,
-} from "../utils";
-import type { Change } from "../utils";
-import { cn } from "@/utils/ui";
-import { Button } from "@/components/ui/button";
-
-function buildMarkdown({
-	description,
-	changes,
-}: {
-	description?: string;
-	changes: Change[];
-}): string {
-	const lines: string[] = [];
-
-	if (description) {
-		lines.push(description, "");
-	}
-
-	const { grouped, orderedTypes } = groupAndOrderChanges({ changes });
-
-	for (const type of orderedTypes) {
-		if (isSectionCollapsible({ type })) {
-			lines.push(
-				buildCollapsibleMarkdownSection({
-					title: getSectionTitle({ type }),
-					changes: grouped[type],
-				}),
-				"",
-			);
-			continue;
-		}
-
-		lines.push(`## ${getSectionTitle({ type })}`);
-		for (const change of grouped[type]) {
-			lines.push(`- ${change.text}`);
-		}
-		lines.push("");
-	}
-
-	return lines.join("\n").trimEnd();
-}
-
-function buildCollapsibleMarkdownSection({
-	title,
-	changes,
-}: {
-	title: string;
-	changes: Change[];
-}): string {
-	const bulletLines = changes.map((change) => `- ${change.text}`).join("\n");
-
-	return `<details>\n<summary>${title}</summary>\n\n${bulletLines}\n\n</details>`;
-}
-
-export function CopyMarkdownButton({
-	description,
-	changes,
-}: {
-	description?: string;
-	changes: Change[];
-}) {
-	const [copied, setCopied] = useState(false);
-
-	const handleCopy = async () => {
-		const markdown = buildMarkdown({ description, changes });
-		await navigator.clipboard.writeText(markdown);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	return (
-		<Button
-			size="sm"
-			variant="text"
-			onClick={handleCopy}
-			className={cn(
-				"flex items-center gap-1.5",
-				copied && "pointer-events-none",
-			)}
-			title="Copy as markdown"
-		>
-			{copied ? (
-				<CheckIcon className="size-4" />
-			) : (
-				<ClipboardIcon className="size-4" />
-			)}
-			{copied ? "Copied!" : "Copy markdown"}
-		</Button>
-	);
-}
diff --git a/apps/web/src/lib/changelog/components/release.tsx b/apps/web/src/lib/changelog/components/release.tsx
deleted file mode 100644
index 475b0a6d..00000000
--- a/apps/web/src/lib/changelog/components/release.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import type { ReactNode } from "react";
-import Link from "next/link";
-import { cn } from "@/utils/ui";
-import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
-import {
-	getSectionTitle,
-	groupAndOrderChanges,
-	isSectionCollapsible,
-	type Change,
-	type Release,
-} from "../utils";
-import { ArrowRightIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-export function ReleaseArticle({
-	variant,
-	isLatest,
-	children,
-}: {
-	variant: "list" | "detail";
-	isLatest?: boolean;
-	children: ReactNode;
-}) {
-	if (variant === "list") {
-		return (
-			<article className="relative sm:pl-10">
-				<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
-					<div
-						className={cn(
-							"size-[11px] rounded-full border-[1.5px]",
-							isLatest
-								? "border-foreground bg-foreground"
-								: "border-muted-foreground/30 bg-background",
-						)}
-					/>
-				</div>
-				<div className="flex flex-col gap-5">{children}</div>
-			</article>
-		);
-	}
-
-	return <article className="flex flex-col gap-8">{children}</article>;
-}
-
-export function ReleaseMeta({ release }: { release: Release }) {
-	return (
-		<span className="text-sm font-medium tracking-widest text-muted-foreground">
-			{release.version} — {release.date}
-		</span>
-	);
-}
-
-const titleSizes: Record<"h1" | "h2", string> = {
-	h1: "text-4xl",
-	h2: "text-2xl",
-};
-
-export function ReleaseTitle({
-	as: As,
-	href,
-	children,
-}: {
-	as: "h1" | "h2";
-	href?: string;
-	children: ReactNode;
-}) {
-	return (
-		<As className={cn("font-bold tracking-tight", titleSizes[As])}>
-			{href ? (
-				<Link href={href} className="hover:underline underline-offset-4">
-					{children}
-				</Link>
-			) : (
-				children
-			)}
-		</As>
-	);
-}
-
-export function ReleaseDescription({ children }: { children: ReactNode }) {
-	return (
-		<p className="text-base text-foreground leading-relaxed max-w-xl">
-			{children}
-		</p>
-	);
-}
-
-export function ReleaseChanges({ release }: { release: Release }) {
-	const { grouped, orderedTypes } = groupAndOrderChanges({
-		changes: release.changes,
-	});
-
-	return (
-		<div className="flex flex-col gap-4">
-			{orderedTypes.map((type) => (
-				<ReleaseChangeSection key={type} type={type} changes={grouped[type]} />
-			))}
-		</div>
-	);
-}
-
-function ReleaseChangeSection({
-	type,
-	changes,
-}: {
-	type: string;
-	changes: Change[];
-}) {
-	const title = getSectionTitle({ type });
-
-	if (isSectionCollapsible({ type })) {
-		return (
-			<details className="group flex flex-col gap-1.5">
-				<summary className="flex w-fit cursor-pointer list-none items-center gap-1.5 text-base font-semibold text-foreground [&::-webkit-details-marker]:hidden">
-					<span>{title}:</span>
-					<HugeiconsIcon
-						icon={ArrowRightIcon}
-						className="size-3 shrink-0 text-muted-foreground group-open:rotate-90"
-					/>
-				</summary>
-				<ReleaseChangeList changes={changes} />
-			</details>
-		);
-	}
-
-	return (
-		<div className="flex flex-col gap-1.5">
-			<h3 className="text-base font-semibold text-foreground">{title}:</h3>
-			<ReleaseChangeList changes={changes} />
-		</div>
-	);
-}
-
-function ReleaseChangeList({
-	changes,
-	className,
-}: {
-	changes: Change[];
-	className?: string;
-}) {
-	return (
-		<ul className={cn("list-disc space-y-1.5 pl-5", className)}>
-			{changes.map((change) => (
-				<li
-					key={change.text}
-					className="text-base leading-relaxed text-foreground"
-				>
-					<ReactMarkdownWrapper inline>{change.text}</ReactMarkdownWrapper>
-				</li>
-			))}
-		</ul>
-	);
-}
-- 
cgit v1.3.1