alibaba / alibaba/open-code-review

feat(viewer): add back navigation to improve page traversal UX

Closed
#830 2 comments 0 reactions 1 assignee Claimed by @floze-the-genius View on GitHub
enhancement good first issue help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.