jobizzness / jobizzness/bench

The phone's panes move: directional transitions and sheets that rise

Open
#81 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
1h 21m
Merged PRs (30d)
41

Description

Below 720px the cockpit shows one pane at a time, and it swaps them with `display: none`. A phone's panes should move.

## The evidence

`styles.css:3432-3433`:

```css
#app[data-pane="roster"] #stage { display: none; }
#app[data-pane="stage"] #roster { display: none; }
```

That is the whole transition. Tapping a roster row replaces the screen between one frame and the next, with no direction and no sense of where you came from — the one thing every native phone app does and no website does. The unblock and empty screens swap the same way (`styles.css:3700-3701`).

The navigation model underneath is already right and does not need changing: `selectedId` lives in the URL (`route.ts`), so the OS back gesture works, and `usePhoneLanding` decides which of the four screens is in front of you. This ticket is about how the change is drawn, not about what decides it.

Modals have the same flatness. `#dispatch-modal` and the other `.sheet` dialogs (styles.css:1859) appear centred and instantly. On a phone a sheet rises from the bottom edge.

## What to build

1. **Directional pane transitions.** Going deeper (roster → stage, roster → unblock) pushes in from the right; coming back slides out to the right. The direction has to be derived from the navigation, not guessed from which pane is showing — going *back* must not read as going forward.
2. **Sheets rise.** Below the breakpoint, `.sheet` dialogs enter from the bottom edge rather than appearing centred, and leave the same way. `drawer-in` (styles.css:2410) is the existing precedent for an entrance and its shape should be reused.
3. **Interruptibility.** A transition already running must not swallow a second tap. If the developer taps back while the push is still going, the app follows the second gesture.
4. **No layout thrash.** `transform` and `opacity` only. `#app` is a fixed-height flex column on a phone (`styles.css:3418-3425`) and both panes are already full width, so both can be composited without reflowing.

Use the tokens from the motion ticket.

## Acceptance criteria

- [ ] Selecting a specialist on a phone pushes the stage in from the right.
- [ ] The back control and the OS back gesture both slide it back out to the right, not in from the right again.
- [ ] Landing directly on the unblock screen at app open is **not** animated — that is where the app starts, not somewhere it navigated to.
- [ ] A second navigation during a running transition is honoured rather than dropped or queued.
- [ ] `.sheet` dialogs rise from the bottom below 720px and are unchanged above it.
- [ ] Everything here is disabled under `prefers-reduced-motion: reduce`, falling back to the current instant swap.
- [ ] Above 720px nothing changes at all.
- [ ] `pnpm typecheck` and `pnpm test` pass — in particular `tests/phone-landing.test.tsx`, which asserts on `#app[data-pane]` and must keep passing.

## Out of scope

- **A hand-rolled swipe-back gesture.** The OS back gesture already works because the selection is in the URL, and a custom edge-swipe competes with it. Not in this ticket; file it separately with a rationale if you think it is worth the conflict.
- Changing `usePhoneLanding`'s decisions about which pane is in front. This is presentation only.
- The desktop layout.

## Verification

```
pnpm typecheck
pnpm test
```

Manual, and this one genuinely cannot be tested in jsdom, which has no layout and no compositor: on a real phone, navigate in and back several times quickly and confirm it never gets stuck mid-transition or animates the wrong way. Then turn on Reduce Motion and confirm the swaps still work.

## Related

- Blocked by the motion ticket (tokens).
- #47, #57, #64 — the phone build this sits on.
- #55 — real-device proof.

Contributor guide

Open the contributing guide

Research direction

Start with styles.css:3432-3433 and 3700-3701 for the phone pane swaps, then inspect route.ts and usePhoneLanding to understand navigation direction without changing its decisions. Reuse the motion precedent at styles.css:2410 and check tests/phone-landing.test.tsx plus pnpm typecheck and pnpm test. Done means interruptible directional pane transitions, rising mobile sheets, reduced-motion fallback, and no desktop changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend, mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.