feat(ui): Add About dialog with app info and credits

src/components/about-dialog.tsx

@@ -0,0 +1,95 @@
+import { useEffect } from "react";
+import { openUrl } from "@tauri-apps/plugin-opener";
+
+interface AboutDialogProps {
+  version: string;
+  onClose: () => void;
+}
+
+function ExternalLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  const handleClick = () => {
+    openUrl(href).catch(console.error);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function AboutDialog({ version, onClose }: AboutDialogProps) {
+  // Close on ESC key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  // Close when panel hides (loses visibility)
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        onClose();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [onClose]);
+
+  // Close on backdrop click
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-card rounded-lg border shadow-xl p-6 max-w-xs w-full mx-4 text-center animate-in fade-in zoom-in-95 duration-200">
+        <img
+          src="/icon.png"
+          alt="OpenUsage"
+          className="w-16 h-16 mx-auto mb-3 rounded-xl"
+        />
+
+        <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="text-sm text-muted-foreground space-y-1">
+          <p>
+            Built by{" "}
+            <ExternalLink href="https://itsbyrob.in/x">Robin Ebers</ExternalLink>
+          </p>
+          <p>
+            Open source on{" "}
+            <ExternalLink href="https://github.com/robinebers/openusage">
+              GitHub
+            </ExternalLink>
+          </p>
+          <p className="text-xs pt-1">Contributions welcome</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/panel-footer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { AboutDialog } from "@/components/about-dialog";
 import type { UpdateStatus } from "@/hooks/use-app-update";
 
 interface PanelFooterProps {
@@ -13,10 +14,12 @@ function VersionDisplay({
   version,
   updateStatus,
   onUpdateInstall,
+  onVersionClick,
 }: {
   version: string;
   updateStatus: UpdateStatus;
   onUpdateInstall: () => void;
+  onVersionClick: () => void;
 }) {
   switch (updateStatus.status) {
     case "downloading":
@@ -49,9 +52,13 @@ function VersionDisplay({
       );
     default:
       return (
-        <span className="text-xs text-muted-foreground">
+        <button
+          type="button"
+          onClick={onVersionClick}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        >
           OpenUsage {version}
-        </span>
+        </button>
       );
   }
 }
@@ -63,6 +70,7 @@ export function PanelFooter({
   onUpdateInstall,
 }: PanelFooterProps) {
   const [now, setNow] = useState(() => Date.now());
+  const [showAbout, setShowAbout] = useState(false);
 
   useEffect(() => {
     if (!autoUpdateNextAt) return undefined;
@@ -83,15 +91,21 @@ export function PanelFooter({
   }, [autoUpdateNextAt, now]);
 
   return (
-    <div className="flex justify-between items-center h-8 pt-1.5 border-t">
-      <VersionDisplay
-        version={version}
-        updateStatus={updateStatus}
-        onUpdateInstall={onUpdateInstall}
-      />
-      <span className="text-xs text-muted-foreground tabular-nums">
-        {countdownLabel}
-      </span>
-    </div>
+    <>
+      <div className="flex justify-between items-center h-8 pt-1.5 border-t">
+        <VersionDisplay
+          version={version}
+          updateStatus={updateStatus}
+          onUpdateInstall={onUpdateInstall}
+          onVersionClick={() => setShowAbout(true)}
+        />
+        <span className="text-xs text-muted-foreground tabular-nums">
+          {countdownLabel}
+        </span>
+      </div>
+      {showAbout && (
+        <AboutDialog version={version} onClose={() => setShowAbout(false)} />
+      )}
+    </>
   );
 }