alibaba / alibaba/open-code-review
feat(viewer): add back navigation to improve page traversal UX
- Dominant language
- Go
- Stars
- 24.4k
- Forks
- 1.8k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 116
Description
## Description
The viewer currently relies **solely on breadcrumb path links** at the top of each page for navigation between levels:
```
/ (repos list) → /r/{repo} (sessions list) → /r/{repo}/{session} (session detail)
```
There is no dedicated "back" button or affordance beyond the breadcrumb. While breadcrumbs are standard, they can be hard to discover — especially on mobile devices where the tap target is small and the path text may be truncated.
### Current behavior
- `sessions.html`: breadcrumb shows `Open Code Review Viewer / {RepoName}` — only the brand link is clickable; the repo name is a static ``.
- `session.html`: breadcrumb shows `Open Code Review Viewer / {RepoName} / {SessionID}` — brand and repo name are clickable, session ID is static.
- No other navigation element exists to go "up" one level.
### Expected behavior
Each sub-page should offer an obvious, easily tappable way to return to the parent page — without requiring the user to parse the breadcrumb or rely on the browser back button.
## Proposed approach (open to better ideas!)
Add a **back arrow** (`←`) to the left of the page heading (`
`) on the sessions and session-detail pages, linking to the parent route:
| Page | Back link target |
|------|-----------------|
| `sessions.html` | `/` (repos list) |
| `session.html` | `/r/{EncodedRepo}` (sessions list) |
This could be a simple `← Back` placed before the `
`, styled to be visually distinct but not dominant.
**Alternative approaches welcome:**
- A floating back button (FAB-style) for mobile
- Keyboard shortcut (e.g., `Backspace` or `Alt+←`)
- Enhanced breadcrumb with chevron separators that are themselves clickable
- Sidebar navigation
Contributors are encouraged to propose and discuss other solutions in the comments.
## Scope
- File(s): `internal/viewer/templates/sessions.html`, `internal/viewer/templates/session.html`, `internal/viewer/static/style.css`
- Area: viewer navigation UX
- No backend/handler changes needed — this is purely a template + CSS change
## Acceptance Criteria
- [ ] Sessions page has a visible back link/button navigating to `/`
- [ ] Session detail page has a visible back link/button navigating to `/r/{repo}`
- [ ] The back element is easily tappable on mobile (minimum 44×44px touch target)
- [ ] Dark mode is supported (viewer uses `color-scheme: light dark`)
- [ ] Existing breadcrumb navigation is preserved (additive, not replacing)
- [ ] Tests pass (`make test`)
- [ ] Code check passes (`make check`)
## Context
Discovered during a UX review of the viewer. The three-level hierarchy is simple enough that breadcrumbs work technically, but on mobile or for users unfamiliar with the UI, an explicit back affordance significantly improves discoverability.
Related files for reference:
- `internal/viewer/handler.go` — route handling
- `internal/viewer/static/style.css` — existing design tokens and responsive styles
Contributor guide
Assessment
This issue has not been assessed yet.