Skip to content

Commit page, ref-aware latest commit bar, and commit links#156

Merged
stylessh merged 1 commit intomainfrom
stylessh/commit-view-and-ref-aware-explorer
Apr 18, 2026
Merged

Commit page, ref-aware latest commit bar, and commit links#156
stylessh merged 1 commit intomainfrom
stylessh/commit-view-and-ref-aware-explorer

Conversation

@stylessh
Copy link
Copy Markdown
Owner

@stylessh stylessh commented Apr 18, 2026

Summary

Adds a full commit view at /{owner}/{repo}/commit/{sha} with a read-only diff experience similar to the PR review page (file tree + unified/split diffs).

Details

  • Commit links: Overview latest-commit bar, blob file header, and directory listing rows link the commit subject to the new commit page.
  • Branch-aware header: The overview/tree LatestCommitBar loads the tip commit for the currently selected ref (getRefHeadCommit / listCommits), so it updates when switching branches instead of always showing the default branch tip.
  • Tabs: New commit tab type for the browser tab strip; ReviewSidebar is reused for the file list.

API

  • getRepoCommit — single commit + file patches
  • getRefHeadCommit — lightweight ref tip for the bar

Summary by CodeRabbit

  • New Features
    • Added dedicated commit page displaying file diffs with automatic pagination for large commits and responsive sidebar navigation
    • Made commit messages throughout the app clickable links, directing users to detailed commit views
    • Added support for commit tabs in the dashboard with icon and statistics display

Add repository commit view at /{owner}/{repo}/commit/{sha} with read-only
diffs and file tree aligned with the PR review UX.

Link commit subjects from the repo overview bar, blob header, and directory
rows. Latest commit bar uses the selected ref tip (getRefHeadCommit) so it
updates when switching branches.

Includes commit tab type, read-only diff blocks, and GitHub API wiring for
single-commit fetch and ref head resolution.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 18, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This pull request introduces a new commit viewing feature to the dashboard. It adds a dedicated page and route for viewing individual commits, along with backend functions to fetch commit data, new query builders for caching, and UI components to display commit file diffs. The tab system is extended to support "commit" type tabs, and commit messages throughout the app are made clickable to navigate to specific commits.

Changes

Cohort / File(s) Summary
New Commit Page & Route
apps/dashboard/src/routes/_protected/$owner/$repo/commit.$sha.tsx, apps/dashboard/src/components/repo/commit-page.tsx, apps/dashboard/src/routeTree.gen.ts
Added new file-based route for viewing commits with SSR disabled, loader for prefetching commit data, and SEO metadata. Created CommitPage component that fetches commit details, displays toolbar with metadata, and renders responsive layout with sidebar and diff pane using ReviewSidebar and CommitDiffPane. Route tree generated types updated to register the new commit route.
Commit Diff Display
apps/dashboard/src/components/repo/commit-diff-pane.tsx, apps/dashboard/src/components/pulls/review/review-file-diff-block.tsx
Added new CommitDiffPane component for paginated rendering of commit file diffs with scroll-based "load more", intersection observer tracking of visible files, and hash-based file navigation with requestAnimationFrame scrolling. Added readOnly prop to ReviewFileDiffBlock to suppress annotations and comment UI when viewing commits in read-only mode.
Backend & Query Layer
apps/dashboard/src/lib/github.functions.ts, apps/dashboard/src/lib/github.query.ts, apps/dashboard/src/lib/github.types.ts
Added server functions getRepoCommit and getRefHeadCommit to fetch commit metadata and file details from GitHub API with caching. Added query option builders and keys (githubRepoCommitQueryOptions, githubRefHeadCommitQueryOptions) using githubCachePolicy.detail stale/gc timings. Added types RepoCommitInput and RepoCommitDetail for commit-related data structures.
Tab System Extensions
apps/dashboard/src/lib/tab-store.ts, apps/dashboard/src/lib/use-register-tab.ts, apps/dashboard/src/components/layouts/dashboard-tabs.tsx
Extended TabType union to include "commit", updated VALID_TAB_TYPES runtime allowlist, and added GitCommitIcon to tab icon map. Updated useRegisterTab hook to accept optional tabId field for custom tab identification.
Navigation & Component Updates
apps/dashboard/src/components/repo/latest-commit-bar.tsx, apps/dashboard/src/components/repo/code-file-view.tsx, apps/dashboard/src/components/repo/folder-view.tsx, apps/dashboard/src/components/repo/repo-overview-page.tsx, apps/dashboard/src/components/pulls/review/review-page.tsx
Refactored LatestCommitBar to accept explicit props (owner, repoName, ref, etc.) instead of repo object and fetch head commit via query. Updated CodeFileView to pass owner/repo to FileCommitBar and made commit messages navigable links. Refactored FolderViewRow to split single clickable row into separate links for entry navigation and commit navigation. Updated RepoOverviewPage to pass individual props to LatestCommitBar. Exported ReviewSidebar component for reuse in commit page.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CommitPage as CommitPage Component
    participant Query as Tanstack Query
    participant Backend as Server Functions
    participant GitHub as GitHub API
    participant CommitDiffPane as CommitDiffPane
    participant ReviewFileDiffBlock as ReviewFileDiffBlock

    User->>CommitPage: Navigate to /$owner/$repo/commit/$sha
    CommitPage->>Query: useQuery(githubRepoCommitQueryOptions)
    Query->>Backend: getRepoCommit({ owner, repo, sha })
    Backend->>GitHub: repos.getCommit(owner, repo, sha)
    GitHub-->>Backend: commit details + files
    Backend-->>Query: { sha, message, date, author, files[] }
    Query-->>CommitPage: commit data
    CommitPage->>CommitDiffPane: render with commit.files
    CommitDiffPane->>CommitDiffPane: initialize pagination (INITIAL_VISIBLE_COUNT)
    loop For each visible file
        CommitDiffPane->>ReviewFileDiffBlock: render(file, readOnly=true)
        ReviewFileDiffBlock-->>CommitDiffPane: diff UI (no annotations)
    end
    CommitDiffPane->>CommitDiffPane: setup IntersectionObserver for scroll-to-load
    User->>CommitDiffPane: scroll near bottom
    CommitDiffPane->>CommitDiffPane: increment visible count by LOAD_MORE_CHUNK
    CommitDiffPane->>ReviewFileDiffBlock: render additional files
    User->>CommitDiffPane: click file in sidebar or navigate via hash
    CommitDiffPane->>CommitDiffPane: scrollToFile() via ref or hash change
    CommitDiffPane->>CommitDiffPane: requestAnimationFrame → element.scrollIntoView()
    CommitDiffPane->>CommitDiffPane: history.replaceState(hash)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~40 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ❓ Inconclusive The description covers the Summary and Details sections but lacks a Test Plan section and Screenshots section that are specified in the template. Add a Test Plan section with checkboxes for testing the commit page, branch switching, and commit links. Include before/after screenshots if UI changes are present.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: adding a commit page, making the latest commit bar ref-aware, and adding commit links throughout the codebase.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch stylessh/commit-view-and-ref-aware-explorer

Comment @coderabbitai help to get the list of available commands and usage tips.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
diffkit a991540 Apr 18 2026, 07:18 PM

@stylessh stylessh merged commit 9e7b26f into main Apr 18, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant