Skip to content

feat(outline): PROG-80 jump to issue from Outline via a far-left gutter link#53

Merged
bryankennedy merged 3 commits into
mainfrom
iss/PROG-80
Jul 4, 2026
Merged

feat(outline): PROG-80 jump to issue from Outline via a far-left gutter link#53
bryankennedy merged 3 commits into
mainfrom
iss/PROG-80

Conversation

@exe-dev-github-integration

Copy link
Copy Markdown
Contributor

PROG-80 — Make it easier to jump to issue view from Outline mobile view

Problem

On a phone there was no way to open an issue's page from the Outline. The
only jump control was the trailing link, tucked into an
opacity-0 group-hover:opacity-100 cluster on the right edge — touch has no
hover, so it never appeared. On desktop it was reachable but sat at a right edge
that shifts with each row's text width.

Change

Per the issue, the jump control moves to a fixed gutter at the far left of
every row, and it becomes touch-reachable:

  • Far-left three-dot link — a per-row <Link> (a real anchor) rendered as a
    24×24 three-dot SVG tap target, in one predictable spot at every depth.
  • Always visible on mobile, faint-until-hover on desktop — base opacity is
    full (mobile primary); desktop uses sm:opacity-40 firming to full on
    hover / group-focus-within / focus-visible. The outline stays calm on a
    wide screen but the affordance is now discoverable — a strict improvement over
    the old fully-hidden state (the "improve desktop too" half of the ask).
  • Arc assignment unchanged — only the navigation control moved; ArcMenu
    (depth-0) stays a desktop hover affordance (already mobile-unreachable before,
    and reachable from the full issue page — no regression).
  • Capture rows get a matching empty gutter so their bullets stay aligned
    with the issue bullets now pushed right by the open-link.

Verification

  • bun run check (tsc) clean; bun test — 84 pass / 0 fail.
  • Rendered-browser check at 1200px (desktop) and 390px (mobile): the ⋯ shows in
    the left gutter at every row/depth; mobile computed opacity = 1 (visible with
    no hover); tapping it navigates to /issue/<KEY>.

Notes

  • Docs updated: docs/DECISIONS.md ### PROG-80 (rationale + rejected
    alternatives) and the Outline entry in docs/REFERENCE.md.
  • Not adopted: making the bullet icon itself the link (Workflowy-style) — two
    adjacent controls to the same page reads as redundant and risks mis-taps while
    editing a title.

…gutter

The Outline's only door to an issue's page was a trailing `…` link hidden in an
`opacity-0 group-hover:opacity-100` cluster on the right edge. Touch has no
hover, so on a phone there was no way to reach an issue from the Outline; even
on desktop the control sat at a right edge that shifts with the row's text.

Move that jump control to a fixed gutter at the far left of every row: a per-row
`<Link>` rendered as a 24x24 three-dot SVG tap target. Full opacity on mobile
(always reachable, no hover), `sm:opacity-40` firming to full on
hover/focus-within/focus-visible on desktop — discoverable there too, a strict
improvement over the old fully-hidden state. Arc assignment stays a desktop
hover affordance (navigation-only control moved). Capture rows gain a matching
empty gutter so their `+` bullets stay aligned with the issue bullets.

Docs: record the rationale as DECISIONS `### PROG-80` and update the Outline
entry in REFERENCE.
@bryankennedy bryankennedy merged commit 9feb2c1 into main Jul 4, 2026
2 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