Skip to content

feat(snapshots): Set nice UI for left side of header#111822

Merged
NicoHinderling merged 2 commits intomasterfrom
03-30-feat_snapshots_set_nice_ui_for_left_side_of_header
Mar 30, 2026
Merged

feat(snapshots): Set nice UI for left side of header#111822
NicoHinderling merged 2 commits intomasterfrom
03-30-feat_snapshots_set_nice_ui_for_left_side_of_header

Conversation

@NicoHinderling
Copy link
Copy Markdown
Contributor

@NicoHinderling NicoHinderling commented Mar 30, 2026

before:
CleanShot 2026-03-30 at 13 35 40@2x

after:
CleanShot 2026-03-30 at 13 36 50@2x

Summary

Redesigns the snapshot page header (top-left section) with a cleaner layout:

  • Title: Changed from "Snapshots" to singular "Snapshot", removed breadcrumbs and feature badge
  • VCS metadata row: PR number, commit SHA, and branch name now display with proper icons (IconPullRequest, IconCommit, IconStack) and purple linked text
  • Comparing row: New "Comparing: Head vs Base" section for diff-mode snapshots
    • Head button toggles between diff and solo view (?view=solo query param)
    • Base button navigates to the base artifact's snapshot page
    • Both use pill-shaped buttons with accent-colored eye icons

Uses Sentry design system components (Button, LinkButton, Text, Flex, ExternalLink) throughout. VCS items are rendered from a declarative config array for cleaner code.

Test plan

  • Visit a snapshot page with diff comparison data (e.g. /preprod/snapshots/169382/)
  • Verify header shows "Snapshot" title, VCS info row with correct icons and purple links
  • Verify "Comparing" row appears with Head and Base pill buttons
  • Click Head → URL gets ?view=solo, button turns primary (purple), content switches to solo view
  • Click Head again → returns to diff view
  • Click Base → navigates to base artifact's snapshot page
  • Verify VCS links (PR, commit, branch) open correct GitHub URLs
  • Visit a solo-mode snapshot (no base) → "Comparing" row should not appear

Copy link
Copy Markdown
Contributor Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 30, 2026
@NicoHinderling NicoHinderling marked this pull request as ready for review March 30, 2026 20:35
@NicoHinderling NicoHinderling requested a review from a team as a code owner March 30, 2026 20:35
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

@NicoHinderling NicoHinderling force-pushed the 03-30-feat_snapshots_set_nice_ui_for_left_side_of_header branch from 40b217d to 5b098d2 Compare March 30, 2026 20:43
@NicoHinderling NicoHinderling merged commit e7b3832 into master Mar 30, 2026
75 checks passed
@NicoHinderling NicoHinderling deleted the 03-30-feat_snapshots_set_nice_ui_for_left_side_of_header branch March 30, 2026 22:01
dashed pushed a commit that referenced this pull request Apr 1, 2026
before: 
<img width="1510" height="694" alt="CleanShot 2026-03-30 at 13 35 40@2x"
src="https://github.com/user-attachments/assets/c8425aea-5d0c-42d2-8b98-40bab7ac3237"
/>

after:
<img width="1512" height="682" alt="CleanShot 2026-03-30 at 13 36 50@2x"
src="https://github.com/user-attachments/assets/cc5ab558-01a8-4399-9eee-047254148bc1"
/>


## Summary

Redesigns the snapshot page header (top-left section) with a cleaner
layout:

- **Title**: Changed from "Snapshots" to singular "Snapshot", removed
breadcrumbs and feature badge
- **VCS metadata row**: PR number, commit SHA, and branch name now
display with proper icons (`IconPullRequest`, `IconCommit`, `IconStack`)
and purple linked text
- **Comparing row**: New "Comparing: **Head** vs **Base**" section for
diff-mode snapshots
- **Head** button toggles between diff and solo view (`?view=solo` query
param)
  - **Base** button navigates to the base artifact's snapshot page
  - Both use pill-shaped buttons with accent-colored eye icons

Uses Sentry design system components (`Button`, `LinkButton`, `Text`,
`Flex`, `ExternalLink`) throughout. VCS items are rendered from a
declarative config array for cleaner code.

## Test plan

- [ ] Visit a snapshot page with diff comparison data (e.g.
`/preprod/snapshots/169382/`)
- [ ] Verify header shows "Snapshot" title, VCS info row with correct
icons and purple links
- [ ] Verify "Comparing" row appears with Head and Base pill buttons
- [ ] Click Head → URL gets `?view=solo`, button turns primary (purple),
content switches to solo view
- [ ] Click Head again → returns to diff view
- [ ] Click Base → navigates to base artifact's snapshot page
- [ ] Verify VCS links (PR, commit, branch) open correct GitHub URLs
- [ ] Visit a solo-mode snapshot (no base) → "Comparing" row should not
appear
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants