Launch prep: alpha notice, extension prompt, legal pages, redirect extension

README.md

@@ -2,6 +2,9 @@
 
 A fast, design-first GitHub dashboard for developers who want to stay on top of their pull requests, issues, and code reviews — without the noise.
 
+> [!WARNING]
+> **Alpha** — DiffKit is in early release. Expect bugs, errors, and rough edges. Feedback and issue reports are welcome on [GitHub Issues](https://github.com/stylessh/diffkit/issues).
+
 ## Features
 
 - **Pull Requests** — View, filter, and manage your open PRs across repos

apps/dashboard/src/components/layouts/alpha-notice-dialog.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {
+	Alert,
+	AlertDescription,
+	AlertTitle,
+} from "@diffkit/ui/components/alert";
+import { Button } from "@diffkit/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@diffkit/ui/components/dialog";
+import { useEffect, useState } from "react";
+import { siteConfig } from "#/lib/site-config";
+import { useHasMounted } from "#/lib/use-has-mounted";
+
+const STORAGE_KEY = "diffkit-alpha-notice-dismissed";
+
+const issuesUrl = `${siteConfig.githubRepositoryUrl}/issues`;
+
+export function AlphaNoticeDialog() {
+	const hasMounted = useHasMounted();
+	const [open, setOpen] = useState(false);
+
+	useEffect(() => {
+		if (!hasMounted) {
+			return;
+		}
+		try {
+			if (!localStorage.getItem(STORAGE_KEY)) {
+				setOpen(true);
+			}
+		} catch {
+			// Storage blocked — skip modal
+		}
+	}, [hasMounted]);
+
+	function dismiss() {
+		try {
+			localStorage.setItem(STORAGE_KEY, "1");
+		} catch {
+			// ignore
+		}
+		setOpen(false);
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={(next) => !next && dismiss()}>
+			<DialogContent className="top-[14%] translate-y-0 gap-0 p-0 sm:max-w-lg">
+				<DialogHeader className="gap-1.5 px-5 pt-5 pb-4">
+					<DialogTitle className="text-[0.9375rem]">
+						Welcome to {siteConfig.name}
+					</DialogTitle>
+					<DialogDescription className="text-[0.8125rem]">
+						Thanks for trying the dashboard — here is what you should know
+						before you dive in.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="px-5 pb-5">
+					<Alert className="border-amber-500/40 bg-amber-500/[0.12] text-foreground dark:bg-amber-500/15">
+						<AlertTitle className="text-amber-950 dark:text-amber-50">
+							Alpha software
+						</AlertTitle>
+						<AlertDescription className="text-amber-950/90 dark:text-amber-50/85">
+							DiffKit is in early release. Expect bugs, rough edges, and
+							unfinished flows. When something breaks, please report it on our
+							GitHub issues board — it helps us ship a stable product.
+						</AlertDescription>
+					</Alert>
+				</div>
+
+				<DialogFooter className="border-t border-border/70 px-5 py-3.5">
+					<Button type="button" variant="ghost" size="sm" asChild>
+						<a href={issuesUrl} target="_blank" rel="noopener noreferrer">
+							Report an issue
+						</a>
+					</Button>
+					<Button type="button" size="sm" onClick={dismiss}>
+						Got it
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/dashboard/src/components/layouts/dashboard-bottombar.tsx

@@ -3,15 +3,15 @@ import { cn } from "@diffkit/ui/lib/utils";
 import { useShowOrgSetupQueryState } from "#/lib/github-access-dialog-query";
 import { openGitHubAccessPrompt } from "#/lib/github-access-modal-store";
 import { removeWarning, useWarnings } from "#/lib/warning-store";
+import { ExtensionInstallPrompt } from "./extension-install-prompt";
 
 export function DashboardBottomBar() {
 	const warnings = useWarnings();
 	const [, setShowOrgSetup] = useShowOrgSetupQueryState();
 
-	if (warnings.length === 0) return null;
-
 	return (
-		<div className="flex flex-col gap-1 px-2 pb-2">
+		<div className="empty:hidden flex flex-row flex-wrap items-start gap-1 px-2 pb-2">
+			<ExtensionInstallPrompt />
 			{warnings.map((warning) => (
 				<div
 					key={warning.id}

apps/dashboard/src/components/layouts/dashboard-layout.tsx

@@ -1,15 +1,18 @@
 import { useQuery } from "@tanstack/react-query";
 import { getRouteApi, Outlet } from "@tanstack/react-router";
+import { motion } from "motion/react";
 import { lazy, Suspense } from "react";
 import {
 	githubMyIssuesQueryOptions,
 	githubMyPullsQueryOptions,
 } from "#/lib/github.query";
 import { useGitHubRevalidation } from "#/lib/use-github-revalidation";
 import { useHasMounted } from "#/lib/use-has-mounted";
+import { useMediaQuery } from "#/lib/use-media-query";
 import { DashboardBottomBar } from "./dashboard-bottombar";
 import { DashboardMobileNav } from "./dashboard-mobile-nav";
 import {
+	SIDE_PANEL_WIDTH,
 	SidePanelProvider,
 	SidePanelSlot,
 	SidePanelToggle,
@@ -27,6 +30,11 @@ const GitHubAccessDialog = lazy(() =>
 		default: mod.GitHubAccessDialog,
 	})),
 );
+const AlphaNoticeDialog = lazy(() =>
+	import("./alpha-notice-dialog").then((mod) => ({
+		default: mod.AlphaNoticeDialog,
+	})),
+);
 
 const routeApi = getRouteApi("/_protected");
 
@@ -61,6 +69,8 @@ export function DashboardLayout() {
 	const tabsReady = hasMounted && Boolean(pullsQuery.data && issuesQuery.data);
 
 	const sidePanel = useSidePanelSlot();
+	const isXl = useMediaQuery("(min-width: 1280px)");
+	const showPanel = isXl && sidePanel.hasContent && !sidePanel.collapsed;
 
 	return (
 		<div className="isolate flex h-dvh flex-col bg-muted">
@@ -83,19 +93,29 @@ export function DashboardLayout() {
 					toggle: sidePanel.toggle,
 				}}
 			>
-				<div className="flex flex-1 overflow-hidden p-2 pt-0">
-					<div className="relative flex-1 overflow-hidden rounded-xl border bg-card shadow-[0_1px_4px_0_rgba(0,0,0,0.03)]">
+				<motion.div
+					initial={false}
+					animate={{
+						gridTemplateColumns: showPanel
+							? `minmax(0, 1fr) ${SIDE_PANEL_WIDTH}px`
+							: "minmax(0, 1fr) 0px",
+					}}
+					transition={{ type: "spring", stiffness: 400, damping: 35 }}
+					className="grid flex-1 overflow-hidden p-2 pt-0"
+				>
+					<div className="relative overflow-hidden rounded-xl border bg-card shadow-[0_1px_4px_0_rgba(0,0,0,0.03)]">
 						<div className="h-full">
 							<Outlet />
 						</div>
 						<SidePanelToggle />
 					</div>
+
 					<SidePanelSlot
 						slotRef={sidePanel.setNode}
 						collapsed={sidePanel.collapsed}
 						onHasContent={sidePanel.setHasContent}
 					/>
-				</div>
+				</motion.div>
 			</SidePanelProvider>
 			<DashboardBottomBar />
 			<DashboardMobileNav
@@ -111,6 +131,7 @@ export function DashboardLayout() {
 			/>
 			<Suspense>
 				<CommandPalette />
+				<AlphaNoticeDialog />
 				<GitHubAccessDialog userId={user.id} />
 			</Suspense>
 		</div>

apps/dashboard/src/components/layouts/dashboard-side-panel.tsx

@@ -10,6 +10,9 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
+// w-72 (288px) + pl-2 (8px)
+export const SIDE_PANEL_WIDTH = 296;
+
 type SidePanelState = {
 	node: HTMLDivElement | null;
 	collapsed: boolean;
@@ -66,6 +69,8 @@ export function SidePanelSlot({
 }) {
 	const [hasChildren, setHasChildren] = useState(false);
 	const innerRef = useRef<HTMLDivElement | null>(null);
+	const ghostRef = useRef<HTMLDivElement | null>(null);
+	const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	const refCallback = useCallback(
 		(el: HTMLDivElement | null) => {
@@ -86,31 +91,52 @@ export function SidePanelSlot({
 		};
 
 		check();
-		const observer = new MutationObserver(check);
+		const observer = new MutationObserver((mutations) => {
+			const has = el.childNodes.length > 0;
+
+			if (!has && ghostRef.current) {
+				// Content removed — clone into ghost for exit animation
+				ghostRef.current.innerHTML = "";
+				for (const mutation of mutations) {
+					for (const node of mutation.removedNodes) {
+						ghostRef.current.appendChild(node.cloneNode(true));
+					}
+				}
+				if (exitTimer.current) clearTimeout(exitTimer.current);
+				exitTimer.current = setTimeout(() => {
+					if (ghostRef.current) ghostRef.current.innerHTML = "";
+				}, 500);
+			} else if (has && ghostRef.current) {
+				// Content added — clear ghost
+				ghostRef.current.innerHTML = "";
+				if (exitTimer.current) clearTimeout(exitTimer.current);
+			}
+
+			setHasChildren(has);
+			onHasContent(has);
+		});
 		observer.observe(el, { childList: true });
 		el.addEventListener("sidepanel-content", check);
 		return () => {
 			observer.disconnect();
 			el.removeEventListener("sidepanel-content", check);
+			if (exitTimer.current) clearTimeout(exitTimer.current);
 		};
 	}, [onHasContent]);
 
 	const show = hasChildren && !collapsed;
 
 	return (
-		<motion.div
-			animate={{ width: show ? "auto" : 0 }}
-			transition={{ type: "spring", stiffness: 400, damping: 35 }}
-			className="hidden shrink-0 overflow-hidden xl:block"
-		>
+		<div className="hidden overflow-hidden xl:block">
 			<motion.div
 				animate={{ opacity: show ? 1 : 0 }}
 				transition={{ duration: show ? 0.2 : 0.1, delay: show ? 0.1 : 0 }}
 				className="h-full overflow-y-auto overflow-x-hidden pb-2 pl-2"
 			>
 				<div ref={refCallback} />
+				<div ref={ghostRef} className="pointer-events-none" aria-hidden />
 			</motion.div>
-		</motion.div>
+		</div>
 	);
 }
 

apps/dashboard/src/components/layouts/extension-install-prompt.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { XIcon } from "@diffkit/icons";
+import { Logo } from "@diffkit/ui/components/logo";
+import { useEffect, useState } from "react";
+import { isDiffKitExtensionPresent } from "#/lib/diffkit-extension-detect";
+import {
+	recordExtensionInstallPromptDismissed,
+	shouldShowExtensionInstallPrompt,
+} from "#/lib/extension-install-prompt-storage";
+import { siteConfig } from "#/lib/site-config";
+import { useHasMounted } from "#/lib/use-has-mounted";
+
+export function ExtensionInstallPrompt() {
+	const hasMounted = useHasMounted();
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		if (!hasMounted) {
+			return;
+		}
+
+		function applyVisibility() {
+			setVisible(shouldShowExtensionInstallPrompt(isDiffKitExtensionPresent()));
+		}
+
+		applyVisibility();
+
+		if (isDiffKitExtensionPresent()) {
+			return;
+		}
+
+		const el = document.documentElement;
+		const observer = new MutationObserver(() => {
+			if (isDiffKitExtensionPresent()) {
+				setVisible(false);
+				observer.disconnect();
+			} else {
+				applyVisibility();
+			}
+		});
+		observer.observe(el, {
+			attributes: true,
+			attributeFilter: ["data-diffkit-extension"],
+		});
+		return () => observer.disconnect();
+	}, [hasMounted]);
+
+	function dismiss() {
+		recordExtensionInstallPromptDismissed();
+		setVisible(false);
+	}
+
+	if (!visible) {
+		return null;
+	}
+
+	const installHref = siteConfig.browserExtensionInstallUrl;
+
+	return (
+		<div
+			className={
+				"flex w-fit max-w-full items-center gap-2 rounded-lg bg-surface-1 px-3 py-2 text-xs text-foreground"
+			}
+		>
+			<Logo className="size-4 shrink-0" aria-hidden />
+			<span className="min-w-0 flex-1">
+				Install the DiffKit extension to redirect GitHub PRs, issues, and
+				matching pages here.
+			</span>
+			<a
+				href={installHref}
+				target="_blank"
+				rel="noopener noreferrer"
+				className="shrink-0 rounded-md bg-foreground/10 px-2 py-0.5 font-medium transition-colors hover:bg-foreground/15"
+			>
+				Install
+			</a>
+			<button
+				type="button"
+				onClick={dismiss}
+				className="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground"
+				aria-label="Dismiss"
+			>
+				<XIcon size={12} strokeWidth={2} />
+			</button>
+		</div>
+	);
+}