Offer Undo after archiving and label archived mode #363
- MA
## Why Archiving a document gave no quick way back, and Archived mode still showed the Projects heading.
## What changed - Show an “Archived <title>” notice with a keyboard reachable Undo action for five seconds. Undo restores the document and returns focus to its sidebar row. - Label Archived mode and its navigation clearly, with a chevron back control. - Animate the sidebar mode change with existing motion tokens and reduced-motion support. - Integrate the current sidebar shortcut label and renew the reviewed design hashes.
## Verification 36 focused navigation tests, `bun run types`, `bun run ci`, and `bun run build` pass on the restacked branch. Initial JavaScript is 251,414 B raw / 79,337 B gzip. GitHub's browser suite will run the archive and Undo scenario on the final published head.
## Visuals 


- MA
Follow-up: mode animation now plays only on an actual switch, New document is hidden in Archived mode (Search kept), and the literal `ease-out` at navigation.css:630 (from #337's notice) now uses `var(--ease-out)`.
MaggieAppletonbase-ref-force-pushedlast month on GitHub
MaggieAppletonhead-ref-force-pushed 388c407fb55flast month on GitHub
- MA
**Review:** Changes needed
Reviewed in a headless browser (desktop 1440x900, phone 390x844, reduced motion) against the PR branch. The Archived mode work is good. The Undo path has one real bug and a few smaller issues.
**Works** - Archived mode: "Archived" heading, nav labelled "Archived documents", chevron back row, New document hidden. Looks right at desktop and in the phone drawer. Focus returns to the Archived button on back. - Mode switch: frame capture shows opacity 0 to 1 and translateX 8px to 0 over about 250ms in both directions. No animation on initial load (`animation-name: none`). With reduced motion there is no animation at all. Transform and opacity only. - Undo restores the document (5s notice, `role=status`). Archiving two documents in a row replaces the notice, and Undo restores only the latest.
**Findings** 1. `apps/web/src/navigation-shell.tsx:~693` Focus is not returned after Undo. `requestAnimationFrame` runs before `restoreChannel` resolves, so the row does not exist yet. When the archived document is the current one it has no `aria-current` row at all. Measured: after Undo `document.activeElement` is `BODY` (mouse and keyboard, desktop and reduced motion). The selector also targets the *current* page row, not the restored document's row, so if the restored document is not the open one, focus would go to the wrong row. Fix: move the focus into the `.then` after `acceptChannel`, then focus the row for `restored.channel.id` (a `data-` id or the link href), after the render. 2. Keyboard reach: the notice is the first child of the shell, so forward Tab never reaches Undo from the header. Shift+Tab from the Actions button reaches it in one step, and Enter works. Only 5s to find it. Suggest 8-10s for a keyboard-actionable notice, or pausing the timer while Undo has focus or hover. Consider moving focus to the Undo button's neighbourhood is not needed, but the timer pause is. 3. Archiving the current document leaves you on it (same URL, "Archived" chip and Restore in the header, chat disabled). This is existing behaviour and OK, but Undo and Restore are now redundant on screen. Fine as is; noting it. 4. Phone: the notice wraps ("Archived misty-summit" then "Undo" on its own line) and Undo is a ~15px-tall underlined text target. It is the first actionable notice, so this needs a larger hit area on touch (padding on `.navigation-creation-status button`, min 32-44px) or a single-line layout. 5. `apps/web/src/navigation.css` The two keyframes `project-sidebar-mode-in-archived` and `-in-active` are identical. Use one keyframe. Also both directions slide in from +8px (from the right), so going back to All documents slides the wrong way. Use -8px for the return, or drop the translate and fade only. 6. `project-sidebar.tsx` `firstMode` and `hasSwitched` refs are mutated during render. Works, but a `useState`/effect-free derivation from a previous-mode ref is the more idiomatic pattern; low priority. 7. Test `e2e/document-navigation.e2e.ts:~766` covers archive, Undo and the heading, but not focus after Undo, the notice expiring, or keyboard Undo. Add a focus assertion once finding 1 is fixed (it would currently fail, which is why it is worth having).
**E2E**: not run locally (port 8797 is held by another process; local e2e is suspended). CI ran the suite on this PR: the `e2e` job passed, so the new test passes, but it does not assert focus or expiry.
**Checks**: `format, lint, types, tests` fail (the `bun run ci` design-contract step, listed in the PR body as needing a design-contract review); `container` pass; `e2e` pass.
- MA
Addressed review: (1) focus moves to the restored row inside the restore .then (falls back to the header Actions button when the sidebar is not mounted, e.g. phone); (2) notice pauses while hovered or focused, 8s for action notices, reached with Shift+Tab from the header Actions button; e2e covers keyboard Undo; (3) Undo is a 44px touch target on coarse pointers, notice stays one line; (4) one keyframe via WAAPI reading motion tokens, direction aware (+8px entering Archived, -8px returning); (5) no render-time ref mutation. Forward Tab order is unchanged: the notice is first in the shell, so keyboard users reach it via Shift+Tab.
MaggieAppletonreferenced this in Hide the Decisions count on archived documents #383last month on GitHub
MaggieAppletonbase-ref-force-pushedlast month on GitHub
MaggieAppletonbase-ref-force-pushedlast month on GitHub
MaggieAppletonhead-ref-force-pushed 625e32285adflast month on GitHub
MaggieAppletonbase-ref-force-pushedlast month on GitHub
MaggieAppletonbase-ref-force-pushedlast month on GitHub
MaggieAppletonautomatic-base-change-succeededlast month on GitHub
MaggieAppletonhead-ref-force-pushed a0d785dff739last month on GitHub
MaggieAppletonauto-rebase-enabledlast month on GitHub
MaggieAppletonmerged ca8f79499257last month on GitHub
MaggieAppletonhead-ref-deletedlast month on GitHub