Add PR and issue detail views

apps/dashboard/src/components/issues/issue-row.tsx

@@ -1,5 +1,6 @@
 import { CommentIcon, IssuesIcon } from "@quickhub/icons";
 import { cn } from "@quickhub/ui/lib/utils";
+import { Link } from "@tanstack/react-router";
 import { formatRelativeTime } from "#/components/pulls/pull-request-row";
 import type { IssueSummary } from "#/lib/github.types";
 
@@ -15,12 +16,11 @@ function getIssueStateProps(issue: IssueSummary) {
 
 export function IssueRow({ issue }: { issue: IssueSummary }) {
 	const { color } = getIssueStateProps(issue);
+	const href = `/${issue.repository.owner}/${issue.repository.name}/issues/${issue.number}`;
 
 	return (
-		<a
-			href={issue.url}
-			target="_blank"
-			rel="noopener noreferrer"
+		<Link
+			to={href}
 			className="group flex items-start gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-surface-1"
 		>
 			<div className={cn("mt-[3px] shrink-0", color)}>
@@ -53,6 +53,6 @@ export function IssueRow({ issue }: { issue: IssueSummary }) {
 					</span>
 				</div>
 			)}
-		</a>
+		</Link>
 	);
 }

apps/dashboard/src/lib/github.functions.ts

@@ -3,12 +3,14 @@ import { type Octokit as OctokitType, RequestError } from "octokit";
 import type {
 	GitHubActor,
 	GitHubLabel,
+	IssueComment,
 	IssueDetail,
 	IssueSummary,
 	MyIssuesResult,
 	MyPullsResult,
 	PullComment,
 	PullDetail,
+	PullStatus,
 	PullSummary,
 	RepositoryRef,
 	UserRepoSummary,
@@ -1066,3 +1068,168 @@ export const getIssueFromRepo = createServerFn({ method: "GET" })
 			},
 		});
 	});
+
+export const getIssueComments = createServerFn({ method: "GET" })
+	.inputValidator(identityValidator<IssueFromRepoInput>)
+	.handler(async ({ data }): Promise<IssueComment[]> => {
+		const context = await getGitHubContext();
+		if (!context) {
+			return [];
+		}
+
+		type RawIssueComment = Awaited<
+			ReturnType<GitHubClient["rest"]["issues"]["listComments"]>
+		>["data"][number];
+
+		return getCachedGitHubRequest<RawIssueComment[], IssueComment[]>({
+			context,
+			resource: "issues.comments",
+			params: data,
+			freshForMs: githubCachePolicy.detail.staleTimeMs,
+			request: (headers) =>
+				context.octokit.rest.issues.listComments({
+					owner: data.owner,
+					repo: data.repo,
+					issue_number: data.issueNumber,
+					per_page: 30,
+					headers,
+				}),
+			mapData: (comments) =>
+				comments.map((c) => ({
+					id: c.id,
+					body: c.body ?? "",
+					createdAt: c.created_at,
+					author: c.user
+						? {
+								login: c.user.login,
+								avatarUrl: c.user.avatar_url,
+								url: c.user.html_url,
+								type: c.user.type ?? "User",
+							}
+						: null,
+				})),
+		});
+	});
+
+export const getPullStatus = createServerFn({ method: "GET" })
+	.inputValidator(identityValidator<PullFromRepoInput>)
+	.handler(async ({ data }): Promise<PullStatus | null> => {
+		const context = await getGitHubContext();
+		if (!context) {
+			return null;
+		}
+
+		const pullResponse = await context.octokit.rest.pulls.get({
+			owner: data.owner,
+			repo: data.repo,
+			pull_number: data.pullNumber,
+		});
+		const pull = pullResponse.data;
+
+		const [reviewsResponse, checksResponse] = await Promise.all([
+			context.octokit.rest.pulls.listReviews({
+				owner: data.owner,
+				repo: data.repo,
+				pull_number: data.pullNumber,
+				per_page: 100,
+			}),
+			context.octokit.rest.checks
+				.listForRef({
+					owner: data.owner,
+					repo: data.repo,
+					ref: pull.head.sha,
+					per_page: 100,
+				})
+				.catch(() => null),
+		]);
+
+		const reviews = reviewsResponse.data;
+
+		const latestReviews = new Map<
+			string,
+			{ id: number; state: string; author: GitHubActor | null }
+		>();
+		for (const review of reviews) {
+			if (!review.user?.login) continue;
+			if (review.state === "COMMENTED") continue;
+			latestReviews.set(review.user.login, {
+				id: review.id,
+				state: review.state,
+				author: mapActor(review.user),
+			});
+		}
+
+		const checkRuns = checksResponse?.data.check_runs ?? [];
+		let passed = 0;
+		let failed = 0;
+		let pending = 0;
+		let skipped = 0;
+		for (const check of checkRuns) {
+			if (check.status !== "completed") {
+				pending += 1;
+			} else if (
+				check.conclusion === "success" ||
+				check.conclusion === "neutral"
+			) {
+				passed += 1;
+			} else if (check.conclusion === "skipped") {
+				skipped += 1;
+			} else {
+				failed += 1;
+			}
+		}
+
+		let behindBy: number | null = null;
+		try {
+			const comparison = await context.octokit.rest.repos.compareCommits({
+				owner: data.owner,
+				repo: data.repo,
+				base: pull.head.sha,
+				head: pull.base.ref,
+			});
+			behindBy = comparison.data.ahead_by;
+		} catch {
+			behindBy = null;
+		}
+
+		const permissions = pull.base.repo.permissions;
+		const canUpdateBranch =
+			permissions?.push === true || permissions?.admin === true;
+
+		return {
+			reviews: Array.from(latestReviews.values()),
+			checks: {
+				total: checkRuns.length,
+				passed,
+				failed,
+				pending,
+				skipped,
+			},
+			mergeable: pull.mergeable,
+			mergeableState:
+				typeof pull.mergeable_state === "string" ? pull.mergeable_state : null,
+			behindBy,
+			baseRefName: pull.base.ref,
+			canUpdateBranch,
+		};
+	});
+
+export const updatePullBranch = createServerFn({ method: "POST" })
+	.inputValidator(identityValidator<PullFromRepoInput>)
+	.handler(async ({ data }): Promise<boolean> => {
+		const context = await getGitHubContext();
+		if (!context) {
+			return false;
+		}
+
+		try {
+			await context.octokit.rest.pulls.updateBranch({
+				owner: data.owner,
+				repo: data.repo,
+				pull_number: data.pullNumber,
+			});
+			return true;
+		} catch {
+			return false;
+		}
+	});

apps/dashboard/src/lib/github.query.ts

@@ -1,13 +1,15 @@
 import { queryOptions } from "@tanstack/react-query";
 import {
 	getGitHubViewer,
+	getIssueComments,
 	getIssueFromRepo,
 	getIssuesFromRepo,
 	getIssuesFromUser,
 	getMyIssues,
 	getMyPulls,
 	getPullComments,
 	getPullFromRepo,
+	getPullStatus,
 	getPullsFromRepo,
 	getPullsFromUser,
 	getUserRepos,
@@ -105,6 +107,8 @@ export const githubQueryKeys = {
 			["github", scope.userId, "pulls", "detail", input] as const,
 		comments: (scope: GitHubQueryScope, input: PullFromRepoQueryInput) =>
 			["github", scope.userId, "pulls", "comments", input] as const,
+		status: (scope: GitHubQueryScope, input: PullFromRepoQueryInput) =>
+			["github", scope.userId, "pulls", "status", input] as const,
 	},
 	issues: {
 		mine: (scope: GitHubQueryScope) =>
@@ -115,6 +119,8 @@ export const githubQueryKeys = {
 			["github", scope.userId, "issues", "repo", input] as const,
 		detail: (scope: GitHubQueryScope, input: IssueFromRepoQueryInput) =>
 			["github", scope.userId, "issues", "detail", input] as const,
+		comments: (scope: GitHubQueryScope, input: IssueFromRepoQueryInput) =>
+			["github", scope.userId, "issues", "comments", input] as const,
 	},
 };
 
@@ -200,6 +206,19 @@ export function githubPullCommentsQueryOptions(
 	});
 }
 
+export function githubPullStatusQueryOptions(
+	scope: GitHubQueryScope,
+	input: PullFromRepoQueryInput,
+) {
+	return queryOptions({
+		queryKey: githubQueryKeys.pulls.status(scope, input),
+		queryFn: () => getPullStatus({ data: input }),
+		staleTime: githubCachePolicy.detail.staleTimeMs,
+		gcTime: githubCachePolicy.detail.gcTimeMs,
+		meta: persistedMeta,
+	});
+}
+
 export function githubMyIssuesQueryOptions(scope: GitHubQueryScope) {
 	return queryOptions({
 		queryKey: githubQueryKeys.issues.mine(scope),
@@ -248,3 +267,16 @@ export function githubIssueDetailQueryOptions(
 		meta: persistedMeta,
 	});
 }
+
+export function githubIssueCommentsQueryOptions(
+	scope: GitHubQueryScope,
+	input: IssueFromRepoQueryInput,
+) {
+	return queryOptions({
+		queryKey: githubQueryKeys.issues.comments(scope, input),
+		queryFn: () => getIssueComments({ data: input }),
+		staleTime: githubCachePolicy.detail.staleTimeMs,
+		gcTime: githubCachePolicy.detail.gcTimeMs,
+		meta: persistedMeta,
+	});
+}

apps/dashboard/src/lib/github.types.ts

@@ -110,3 +110,39 @@ export type PullComment = {
 	createdAt: string;
 	author: GitHubActor | null;
 };
+
+export type IssueComment = {
+	id: number;
+	body: string;
+	createdAt: string;
+	author: GitHubActor | null;
+};
+
+export type PullCheckRun = {
+	id: number;
+	name: string;
+	status: string;
+	conclusion: string | null;
+};
+
+export type PullReview = {
+	id: number;
+	state: string;
+	author: GitHubActor | null;
+};
+
+export type PullStatus = {
+	reviews: PullReview[];
+	checks: {
+		total: number;
+		passed: number;
+		failed: number;
+		pending: number;
+		skipped: number;
+	};
+	mergeable: boolean | null;
+	mergeableState: string | null;
+	behindBy: number | null;
+	baseRefName: string;
+	canUpdateBranch: boolean;
+};