Add repositories page with filtering and navigation

apps/dashboard/package.json

@@ -44,6 +44,7 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-dropzone": "^15.0.0",
+		"recharts": "^3.8.1",
 		"tailwindcss": "^4.1.18"
 	},
 	"devDependencies": {

apps/dashboard/src/components/filters/filter-bar.tsx

@@ -22,15 +22,18 @@ import type {
 
 export const FilterBar = memo(function FilterBar<T extends FilterableItem>({
 	state,
+	searchPlaceholder = "Search by title, author, repo, or #…",
 }: {
 	state: ListFilterState<T>;
+	searchPlaceholder?: string;
 }) {
 	return (
 		<div className="mb-6 flex flex-col gap-3">
 			<div className="flex items-center gap-2">
 				<SearchInput
 					value={state.searchQuery}
 					onChange={state.setSearchQuery}
+					placeholder={searchPlaceholder}
 				/>
 				<SortDropdown
 					options={state.sortOptions}
@@ -78,16 +81,19 @@ export const FilterBar = memo(function FilterBar<T extends FilterableItem>({
 	);
 }) as <T extends FilterableItem>(props: {
 	state: ListFilterState<T>;
+	searchPlaceholder?: string;
 }) => React.ReactNode;
 
 // ── Search Input ───────────────────────────────────────────────────────
 
 function SearchInput({
 	value,
 	onChange,
+	placeholder,
 }: {
 	value: string;
 	onChange: (v: string) => void;
+	placeholder: string;
 }) {
 	return (
 		<div className="flex w-[280px] items-center gap-2 rounded-lg border border-border/50 bg-surface-1 px-3 py-1.5 transition-colors focus-within:border-border">
@@ -96,7 +102,7 @@ function SearchInput({
 				type="text"
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
-				placeholder="Search by title, author, repo…"
+				placeholder={placeholder}
 				className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground/60"
 			/>
 			{value && (
@@ -274,17 +280,19 @@ function AddFilterButton({
 	const [open, setOpen] = useState(false);
 	const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
 	const ref = useRef<HTMLDivElement>(null);
+	const directFilterDef = filterDefs.length === 1 ? filterDefs[0] : null;
 	const close = () => {
 		setOpen(false);
 		setSelectedFieldId(null);
 	};
 
 	const activeFieldIds = new Set(activeFilters.map((f) => f.fieldId));
-	const selectedOptions = selectedFieldId
-		? (availableOptions.get(selectedFieldId) ?? [])
+	const activeFieldId = directFilterDef?.id ?? selectedFieldId;
+	const selectedOptions = activeFieldId
+		? (availableOptions.get(activeFieldId) ?? [])
 		: [];
 	const selectedValues =
-		activeFilters.find((f) => f.fieldId === selectedFieldId)?.values ??
+		activeFilters.find((f) => f.fieldId === activeFieldId)?.values ??
 		new Set<string>();
 
 	return (
@@ -306,13 +314,27 @@ function AddFilterButton({
 					{/* biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss */}
 					<div className="fixed inset-0 z-40" onClick={close} />
 					<div className="absolute left-0 top-full z-50 mt-1.5 flex gap-1">
-						<FieldPickerInline
-							filterDefs={filterDefs}
-							activeFieldIds={activeFieldIds}
-							selectedFieldId={selectedFieldId}
-							onSelect={setSelectedFieldId}
-						/>
-						{selectedFieldId && (
+						{directFilterDef ? (
+							<ValuePickerInline
+								options={selectedOptions}
+								selectedValues={selectedValues}
+								onToggle={(value) => {
+									if (selectedValues.has(value)) {
+										onRemoveValue(directFilterDef.id, value);
+									} else {
+										onAdd(directFilterDef.id, value);
+									}
+								}}
+							/>
+						) : (
+							<FieldPickerInline
+								filterDefs={filterDefs}
+								activeFieldIds={activeFieldIds}
+								selectedFieldId={selectedFieldId}
+								onSelect={setSelectedFieldId}
+							/>
+						)}
+						{!directFilterDef && selectedFieldId && (
 							<ValuePickerInline
 								key={selectedFieldId}
 								options={selectedOptions}

apps/dashboard/src/components/filters/index.ts

@@ -11,7 +11,12 @@ export {
 	pullSortOptions,
 	repoPullFilterDefs,
 } from "./pull-filters";
-export type { FilterableItem, ListFilterState } from "./use-list-filters";
+export type {
+	FilterableItem,
+	FilterDefinition,
+	ListFilterState,
+	SortOption,
+} from "./use-list-filters";
 export { applyFilters, useListFilters } from "./use-list-filters";
 export {
 	applyRepoFilters,

apps/dashboard/src/components/layouts/dashboard-content-loading.tsx

@@ -1,12 +1,9 @@
-import { LoaderCircleIcon } from "@diffkit/icons";
+import { Spinner } from "@diffkit/ui/components/spinner";
 
 export function DashboardContentLoading() {
 	return (
 		<div className="flex h-full items-center justify-center">
-			<LoaderCircleIcon
-				className="size-5 animate-spin text-muted-foreground"
-				strokeWidth={1.75}
-			/>
+			<Spinner size={20} className="text-muted-foreground" />
 		</div>
 	);
 }

apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx

@@ -1,4 +1,5 @@
 import {
+	ArchiveIcon,
 	GitPullRequestIcon,
 	HomeIcon,
 	InboxIcon,
@@ -84,6 +85,7 @@ export function DashboardMobileNav({
 	const navItems: MobileNavItem[] = [
 		{ to: "/", label: "Overview", icon: HomeIcon },
 		{ to: "/inbox", label: "Inbox", icon: InboxIcon },
+		{ to: "/repos", label: "Repos", icon: ArchiveIcon },
 		{
 			to: "/pulls",
 			label: "Pulls",

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

@@ -1,4 +1,5 @@
 import {
+	ArchiveIcon,
 	BugIcon,
 	ExternalLinkIcon,
 	GitPullRequestIcon,
@@ -276,6 +277,13 @@ export function DashboardTopbar({
 									<DropdownMenuShortcut keys={["G", "U"]} />
 								</Link>
 							</DropdownMenuItem>
+							<DropdownMenuItem asChild>
+								<Link to="/repos">
+									<ArchiveIcon size={16} strokeWidth={2} />
+									Repositories
+									<DropdownMenuShortcut keys={["G", "O"]} />
+								</Link>
+							</DropdownMenuItem>
 							<DropdownMenuItem asChild>
 								<Link to="/settings">
 									<SettingsIcon size={16} strokeWidth={2} />

apps/dashboard/src/components/repo/repo-commit-sparkline.tsx

@@ -0,0 +1,111 @@
+import { useQuery } from "@tanstack/react-query";
+import { useId } from "react";
+import { Area, AreaChart } from "recharts";
+import {
+	type GitHubQueryScope,
+	githubRepoParticipationQueryOptions,
+} from "#/lib/github.query";
+import { useHasMounted } from "#/lib/use-has-mounted";
+
+const CHART_W = 168;
+const CHART_H = 52;
+const ACTIVE_LINE = "#60C679";
+
+/** Inactive series: theme foreground so contrast tracks light/dark; opacity keeps it subdued vs text. */
+const INACTIVE_STROKE = "var(--foreground)";
+
+const ACTIVE_GRADIENT_STOPS = [
+	{ offset: "0%", opacity: 0.52 },
+	{ offset: "50%", opacity: 0.2 },
+	{ offset: "100%", opacity: 0 },
+] as const;
+
+const INACTIVE_GRADIENT_STOPS = [
+	{ offset: "0%", opacity: 0.44 },
+	{ offset: "50%", opacity: 0.14 },
+	{ offset: "100%", opacity: 0 },
+] as const;
+
+/** Weekly commit sparkline; muted when there are no commits in the loaded range. */
+export function RepoCommitSparkline({
+	scope,
+	owner,
+	repo,
+}: {
+	scope: GitHubQueryScope;
+	owner: string;
+	repo: string;
+}) {
+	const fillGradientId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+	const hasMounted = useHasMounted();
+	const query = useQuery({
+		...githubRepoParticipationQueryOptions(scope, { owner, repo }),
+		enabled: hasMounted,
+	});
+
+	if (!hasMounted || query.isLoading) {
+		return (
+			<div
+				className="h-[52px] w-[168px] shrink-0 rounded-sm bg-muted/15"
+				aria-hidden
+			/>
+		);
+	}
+
+	const weekly = query.data?.weeklyCommits ?? [];
+	const hasActivity =
+		weekly.length > 0 && weekly.some((n) => typeof n === "number" && n > 0);
+	const strokeColor = hasActivity ? ACTIVE_LINE : INACTIVE_STROKE;
+	const strokeOpacity = hasActivity ? 1 : 0.5;
+	const gradientStops = hasActivity
+		? ACTIVE_GRADIENT_STOPS
+		: INACTIVE_GRADIENT_STOPS;
+
+	const chartData =
+		weekly.length > 0
+			? weekly.map((commits, i) => ({ i, commits }))
+			: Array.from({ length: 52 }, (_, i) => ({ i, commits: 0 }));
+
+	const chartLabel = hasActivity
+		? `Weekly commit activity for ${owner}/${repo}, last 52 weeks`
+		: `No commits in the last 52 weeks for ${owner}/${repo}`;
+
+	return (
+		<div
+			role="img"
+			className="pointer-events-none shrink-0 select-none"
+			aria-label={chartLabel}
+		>
+			<AreaChart
+				width={CHART_W}
+				height={CHART_H}
+				data={chartData}
+				margin={{ top: 6, right: 2, bottom: 4, left: 2 }}
+			>
+				<defs>
+					<linearGradient id={fillGradientId} x1="0" y1="0" x2="0" y2="1">
+						{gradientStops.map((stop) => (
+							<stop
+								key={stop.offset}
+								offset={stop.offset}
+								stopColor={strokeColor}
+								stopOpacity={stop.opacity}
+							/>
+						))}
+					</linearGradient>
+				</defs>
+				<Area
+					type="monotone"
+					dataKey="commits"
+					stroke={strokeColor}
+					strokeWidth={2}
+					strokeOpacity={strokeOpacity}
+					fill={`url(#${fillGradientId})`}
+					dot={false}
+					isAnimationActive={false}
+					connectNulls
+				/>
+			</AreaChart>
+		</div>
+	);
+}