Revamp MergeStatusCard with collapsible sections and merge actions

apps/dashboard/.dev.vars.example

@@ -6,6 +6,8 @@
 # 5. Install the app on the repositories or organizations you want DiffKit to access
 GITHUB_APP_CLIENT_ID=
 GITHUB_APP_CLIENT_SECRET=
+# The slug from your GitHub App URL (https://github.com/apps/<slug>)
+GITHUB_APP_SLUG=
 
 # GitHub webhook secret used to verify deliveries to /api/webhooks/github
 # For local development, point your GitHub App webhook URL at a tunnel that forwards here.

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

@@ -0,0 +1,44 @@
+import { AlertCircleIcon, XIcon } from "@diffkit/icons";
+import { cn } from "@diffkit/ui/lib/utils";
+import { removeWarning, useWarnings } from "#/lib/warning-store";
+
+export function DashboardBottomBar() {
+	const warnings = useWarnings();
+
+	if (warnings.length === 0) return null;
+
+	return (
+		<div className="flex flex-col gap-1 px-2 pb-2">
+			{warnings.map((warning) => (
+				<div
+					key={warning.id}
+					className={cn(
+						"flex w-fit items-center gap-2 rounded-lg bg-yellow-500 px-3 py-2 text-xs text-yellow-950 dark:bg-yellow-500 dark:text-yellow-950",
+					)}
+				>
+					<AlertCircleIcon size={14} strokeWidth={2} className="shrink-0" />
+					<span className="min-w-0 flex-1">{warning.message}</span>
+					{warning.action && (
+						<a
+							href={warning.action.href}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="shrink-0 rounded-md bg-yellow-950/10 px-2 py-0.5 font-medium transition-colors hover:bg-yellow-950/20"
+						>
+							{warning.action.label}
+						</a>
+					)}
+					{warning.dismissible && (
+						<button
+							type="button"
+							onClick={() => removeWarning(warning.id)}
+							className="flex size-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-yellow-600/20"
+						>
+							<XIcon size={12} strokeWidth={2} />
+						</button>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}

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

@@ -7,6 +7,7 @@ import {
 } from "#/lib/github.query";
 import { useGitHubRevalidation } from "#/lib/use-github-revalidation";
 import { useHasMounted } from "#/lib/use-has-mounted";
+import { DashboardBottomBar } from "./dashboard-bottombar";
 import { DashboardTopbar } from "./dashboard-topbar";
 
 const routeApi = getRouteApi("/_protected");
@@ -57,6 +58,7 @@ export function DashboardLayout() {
 					</div>
 				</div>
 			</div>
+			<DashboardBottomBar />
 			<CommandPalette />
 		</div>
 	);