Improve repository experience by adding a commits browser

apps/dashboard/package.json

@@ -7,7 +7,7 @@
 	},
 	"scripts": {
 		"predev": "node ../../scripts/link-worktree-dev-vars.mjs",
-		"dev": "vite dev --port 3000",
+		"dev": "NODE_OPTIONS='--max-old-space-size=4096' vite dev --port 3000",
 		"build": "NODE_OPTIONS='--max-old-space-size=4096' vite build",
 		"preview": "vite preview",
 		"test": "vitest run",

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

@@ -35,6 +35,7 @@ const tabIconMap = {
 	review: ReviewsIcon,
 	repo: ArchiveIcon,
 	commit: GitCommitIcon,
+	commits: GitCommitIcon,
 } as const;
 
 function useScrollShadows(tabCount: number) {
@@ -298,7 +299,9 @@ function ScrollActiveTabIntoView({
 	useEffect(() => {
 		const container = scrollRef.current;
 		if (!container) return;
-		const activeTab = container.querySelector<HTMLElement>(".active");
+		const activeTab = container.querySelector<HTMLElement>(
+			"[data-active='true']",
+		);
 		if (!activeTab) return;
 
 		const { left: cLeft, right: cRight } = container.getBoundingClientRect();
@@ -332,9 +335,11 @@ const DetailTab = memo(function DetailTab({
 	onContextMenu: () => void;
 	routerRef: React.RefObject<ReturnType<typeof useRouter>>;
 }) {
+	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	const preloadTab = () => {
 		void preloadRouteOnce(routerRef.current, tab.url);
 	};
+	const isActive = isTabActive(tab, pathname);
 
 	return (
 		<Link
@@ -355,9 +360,10 @@ const DetailTab = memo(function DetailTab({
 			onFocus={preloadTab}
 			onTouchStart={preloadTab}
 			onContextMenu={onContextMenu}
-			activeOptions={{ exact: true }}
-			activeProps={{ className: "active" }}
-			className="group relative flex h-8 shrink-0 items-center gap-1.5 rounded-md px-3 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground [&.active]:bg-surface-1 [&.active]:text-foreground"
+			data-active={isActive}
+			className={cn(
+				"group relative flex h-8 shrink-0 items-center gap-1.5 rounded-md px-3 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground data-[active=true]:bg-surface-1 data-[active=true]:text-foreground",
+			)}
 		>
 			{tab.avatarUrl ? (
 				<img
@@ -423,3 +429,22 @@ const DetailTab = memo(function DetailTab({
 		</Link>
 	);
 });
+
+function isTabActive(tab: Tab, pathname: string) {
+	if (tab.type === "repo") {
+		const repoPath = `/${tab.repo}`;
+		return (
+			pathname === repoPath ||
+			pathname === `${repoPath}/` ||
+			pathname.startsWith(`${repoPath}/tree/`) ||
+			pathname.startsWith(`${repoPath}/blob/`)
+		);
+	}
+
+	return normalizePath(pathname) === normalizePath(tab.url);
+}
+
+function normalizePath(path: string) {
+	if (path.length > 1 && path.endsWith("/")) return path.slice(0, -1);
+	return path;
+}

apps/dashboard/src/components/navigation/command-palette.tsx

@@ -90,20 +90,25 @@ export function CommandPalette() {
 				value={search}
 				onValueChange={setSearch}
 			/>
-			<CommandList>
+			<CommandList className="px-0">
 				<CommandEmpty>
 					{getEmptyMessage(
 						search,
 						shouldSearchGitHub && githubSearchQuery.isFetching,
 					)}
 				</CommandEmpty>
 				{Array.from(groups.entries()).map(([groupName, groupItems]) => (
-					<CommandGroup key={groupName} heading={groupName}>
+					<CommandGroup
+						key={groupName}
+						heading={groupName}
+						className="!p-0 [&_[cmdk-group-heading]]:px-4"
+					>
 						{groupItems.map((item) => (
 							<CommandItemUI
 								key={item.id}
 								value={`${item.label} ${(item.keywords ?? []).join(" ")}`}
 								onSelect={() => handleSelect(item)}
+								className="rounded-none !px-4"
 							>
 								{item.icon && (
 									<item.icon

apps/dashboard/src/components/repo/code-explorer-toolbar.tsx

@@ -59,7 +59,7 @@ export function CodeExplorerToolbar({
 	);
 }
 
-function BranchSelector({
+export function BranchSelector({
 	repo,
 	currentRef,
 	scope,

apps/dashboard/src/components/repo/code-file-view.tsx

@@ -217,7 +217,13 @@ export function CodeFileView({
 		const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${currentRef}/${path}`;
 		return (
 			<div className="flex flex-col gap-4">
-				<FileCommitBar owner={owner} repo={repo} commit={commit} />
+				<FileCommitBar
+					owner={owner}
+					repo={repo}
+					currentRef={currentRef}
+					path={path}
+					commit={commit}
+				/>
 				<div className="overflow-hidden rounded-lg border">
 					<FileViewHeader
 						fileName={fileName}
@@ -278,7 +284,13 @@ export function CodeFileView({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<FileCommitBar owner={owner} repo={repo} commit={commit} />
+			<FileCommitBar
+				owner={owner}
+				repo={repo}
+				currentRef={currentRef}
+				path={path}
+				commit={commit}
+			/>
 			<div className="overflow-hidden rounded-lg border">
 				<FileViewHeader
 					fileName={fileName}
@@ -328,7 +340,13 @@ function SvgFileView({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<FileCommitBar owner={owner} repo={repo} commit={commit} />
+			<FileCommitBar
+				owner={owner}
+				repo={repo}
+				currentRef={currentRef}
+				path={path}
+				commit={commit}
+			/>
 			<div className="overflow-hidden rounded-lg border">
 				<FileViewHeader
 					fileName={fileName}
@@ -467,10 +485,14 @@ function FileViewHeader({
 function FileCommitBar({
 	owner,
 	repo,
+	currentRef,
+	path,
 	commit,
 }: {
 	owner: string;
 	repo: string;
+	currentRef: string;
+	path: string;
 	commit: FileLastCommit | null | undefined;
 }) {
 	if (!commit) {
@@ -515,6 +537,15 @@ function FileCommitBar({
 					</TooltipContent>
 				</Tooltip>
 				<span>{formatRelativeTime(commit.date)}</span>
+				<Link
+					to="/$owner/$repo/commits/$"
+					params={{ owner, repo, _splat: `${currentRef}/${path}` }}
+					aria-label="View commits"
+					className="-my-1 -mr-1 flex items-center gap-1 rounded-md px-2 py-1.5 font-medium text-foreground transition-colors hover:bg-surface-2"
+				>
+					<GitCommitIcon size={14} />
+					<span className="hidden sm:inline">History</span>
+				</Link>
 			</div>
 		</div>
 	);

apps/dashboard/src/components/repo/folder-view.tsx

@@ -56,6 +56,8 @@ export function FolderView({
 					scope={scope}
 					defaultBranch={repo.defaultBranch}
 					defaultBranchTip={repo.latestCommit}
+					path={currentPath}
+					historyLabel="History"
 				/>
 				<div className="overflow-hidden rounded-b-lg border">
 					{entries.map((entry, index) => (

apps/dashboard/src/components/repo/latest-commit-bar.tsx

@@ -10,6 +10,7 @@ import { Link } from "@tanstack/react-router";
 import { formatRelativeTime } from "#/lib/format-relative-time";
 import {
 	type GitHubQueryScope,
+	githubFileLastCommitQueryOptions,
 	githubRefHeadCommitQueryOptions,
 } from "#/lib/github.query";
 import type { RepoOverview } from "#/lib/github.types";
@@ -21,27 +22,44 @@ export function LatestCommitBar({
 	scope,
 	defaultBranch,
 	defaultBranchTip,
+	path,
+	historyLabel = "Commits",
 }: {
 	owner: string;
 	repoName: string;
 	ref: string;
 	scope: GitHubQueryScope;
 	defaultBranch: string;
 	defaultBranchTip: RepoOverview["latestCommit"];
+	path?: string;
+	historyLabel?: string;
 }) {
-	const tipQuery = useQuery({
+	const pathCommitQuery = useQuery({
+		...githubFileLastCommitQueryOptions(scope, {
+			owner,
+			repo: repoName,
+			ref,
+			path: path ?? "",
+		}),
+		enabled: !!path,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	});
+	const refCommitQuery = useQuery({
 		...githubRefHeadCommitQueryOptions(scope, {
 			owner,
 			repo: repoName,
 			ref,
 		}),
+		enabled: !path,
 		placeholderData:
-			ref === defaultBranch && defaultBranchTip != null
+			!path && ref === defaultBranch && defaultBranchTip != null
 				? defaultBranchTip
 				: undefined,
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 	});
+	const tipQuery = path ? pathCommitQuery : refCommitQuery;
 
 	const commit = tipQuery.data;
 
@@ -95,6 +113,19 @@ export function LatestCommitBar({
 					</TooltipContent>
 				</Tooltip>
 				<span>{formatRelativeTime(commit.date)}</span>
+				<Link
+					to="/$owner/$repo/commits/$"
+					params={{
+						owner,
+						repo: repoName,
+						_splat: path ? `${ref}/${path}` : ref,
+					}}
+					aria-label="View commits"
+					className="-my-1 -mr-1 flex items-center gap-1 rounded-md px-2 py-1.5 font-medium text-foreground transition-colors hover:bg-surface-2"
+				>
+					<GitCommitIcon size={14} />
+					<span className="hidden sm:inline">{historyLabel}</span>
+				</Link>
 			</div>
 		</div>
 	);