feat: in-app changelog (#309)

* feat: add in-app changelog

- Implement useChangelog hook to fetch GitHub releases
- Create ChangelogDialog with current version filtering
- Add interactive markdown parsing for links, bolds, PRs, and users

* test: add changelog dialog tests

Add Vitest/RTL coverage for changelog dialog states and link behaviors.

* fix: prevent double Escape in dialogs

Ensure AboutDialog only listens for Escape in the about view, wire ChangelogDialog Escape to go back to About, remove the redundant Close button in the changelog header, and update dialog tests to match the new navigation behavior.

* fix: prevent crash on null changelog markdown

* fix: avoid nested buttons in changelog links

* fix: use UTC date for changelog release

* fix: harden changelog dialog for null fields

* feat: fetch only current version in use-changelog

* feat: support autolinking plain URLs in changelog

* fix: clear stale changelog on refetch

* fix: improve plain URL auto-linking detection

* test: mock useChangelog in about-dialog.test.tsx

* fix: preserve ? and () in plain URL auto-linking

---------

Co-authored-by: Robin Ebers <robin.ebers@gmail.com>

Author: hearsilent

src/components/about-dialog.test.tsx

@@ -8,10 +8,20 @@ const openerState = vi.hoisted(() => ({
   openUrlMock: vi.fn(() => Promise.resolve()),
 }))
 
+const changelogState = vi.hoisted(() => ({
+  releases: [] as import("@/hooks/use-changelog").Release[],
+  loading: false,
+  error: null as string | null,
+}))
+
 vi.mock("@tauri-apps/plugin-opener", () => ({
   openUrl: openerState.openUrlMock,
 }))
 
+vi.mock("@/hooks/use-changelog", () => ({
+  useChangelog: () => changelogState,
+}))
+
 describe("AboutDialog", () => {
   it("renders version, links, and maintainers", () => {
     render(<AboutDialog version="1.2.3" onClose={() => {}} />)
@@ -40,6 +50,20 @@ describe("AboutDialog", () => {
     expect(onClose).toHaveBeenCalled()
   })
 
+  it("goes back to about view on Escape when showing changelog", async () => {
+    const onClose = vi.fn()
+    render(<AboutDialog version="1.2.3" onClose={onClose} />)
+
+    // Switch to changelog view.
+    await userEvent.click(screen.getByRole("button", { name: "View Changelog" }))
+
+    // Press Escape; should go back to About view, not close.
+    await userEvent.keyboard("{Escape}")
+
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByText("OpenUsage")).toBeInTheDocument()
+  })
+
   it("does not close on other keys", async () => {
     const onClose = vi.fn()
     render(<AboutDialog version="1.2.3" onClose={onClose} />)

src/components/about-dialog.tsx

@@ -1,5 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
+import { ChangelogDialog } from "./changelog-dialog";
+import { Button } from "@/components/ui/button";
 
 interface AboutDialogProps {
   version: string;
@@ -29,8 +31,14 @@ function ExternalLink({
 }
 
 export function AboutDialog({ version, onClose }: AboutDialogProps) {
+  const [view, setView] = useState<"about" | "changelog">("about");
+
   // Close on ESC key
   useEffect(() => {
+    if (view !== "about") {
+      return;
+    }
+
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -39,7 +47,7 @@ export function AboutDialog({ version, onClose }: AboutDialogProps) {
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, [onClose, view]);
 
   // Close when panel hides (loses visibility)
   useEffect(() => {
@@ -59,6 +67,18 @@ export function AboutDialog({ version, onClose }: AboutDialogProps) {
     }
   };
 
+  if (view === "changelog") {
+    return (
+      <ChangelogDialog
+        currentVersion={version}
+        onBack={() => setView("about")}
+        // In changelog view, Escape should go back to About instead of
+        // closing the entire dialog, so hand off to setView.
+        onClose={() => setView("about")}
+      />
+    );
+  }
+
   return (
     <div
       className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-xl"
@@ -73,9 +93,19 @@ export function AboutDialog({ version, onClose }: AboutDialogProps) {
 
         <h2 className="text-xl font-semibold mb-1">OpenUsage</h2>
 
-        <span className="inline-block text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full mb-4">
-          v{version}
-        </span>
+        <div className="flex flex-col items-center gap-2 mb-4">
+          <span className="inline-block text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+            v{version}
+          </span>
+          <Button
+            size="xs"
+            variant="outline"
+            onClick={() => setView("changelog")}
+            className="text-[10px] h-5 px-1.5"
+          >
+            View Changelog
+          </Button>
+        </div>
 
         <div className="text-sm text-muted-foreground space-y-1">
           <p>
@@ -103,3 +133,4 @@ export function AboutDialog({ version, onClose }: AboutDialogProps) {
     </div>
   );
 }
+