feat(ui): wrap lines, sticky file header, persisted viewed state (#33, #35) - #4
Merged
Conversation
Two things made long files painful to read in tour mode: - the tree/tour file viewer did not wrap long lines, it only scrolled horizontally (the diff view already wrapped) - the file path scrolled away, so you had to scroll back up to know which file you were looking at Changes: - new `wrapLines` setting (default on, persisted in localStorage) exposed as "Wrap lines" in the options popover of both the diff and the tree views - wrapping is driven by `data-wrap-lines` on <html> plus `.code-cell` / `.code-scroll` / `.code-table` classes, same approach as the theme, so no prop drilling down to every line - with wrapping off, code containers scroll horizontally and tables switch to `table-layout: auto` so split panes don't overlap - the tree/tour file viewer gets a sticky header with the file path, the tour line range and a copy-path button, mirroring the diff view's file header - tour scroll-to-highlight now offsets by the sticky header height Default behaviour for the diff view is unchanged: it already wrapped. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- the p-6 on the scrolling <main> insets the sticky rectangle, so top-0 left a strip of code visible above the pinned header. -top-6 cancels it. - the "Wrap lines" menu item now shows Off as well as On, instead of only labelling the enabled state. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Marking a file as viewed collapsed it, but the state lived only in React state, so a browser refresh expanded every file again. It was also lost on any live diff refetch, since the collapse set is rebuilt from scratch whenever the diff object changes. Viewed paths are now stored in localStorage keyed by repo root and ref, capped to the ten most recently used refs so the store can't grow without bound. Each mark is stored alongside a fingerprint of the file's diff. On load the fingerprint is recomputed and the mark is kept only if it still matches, so a file you edited since reviewing it expands again while untouched files stay collapsed. The fingerprint covers file identity, status, and every add/delete line, excluding context lines, hunk headers and line numbers so an unrelated edit elsewhere in the file doesn't unmark a reviewed hunk. Content is trimmed so toggling the hide-whitespace filter doesn't churn marks. Viewed now also takes precedence over a file having comments, which previously force-expanded it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two upstream UI features, merged unmodified, taken in before the walkthrough work because they
touch the same components.
tree/file-viewer.tsxandtree-page.tsx, the current tour viewer, so it is cheaper to build the reordered walkthrough on top of it than to merge it afterwards.One thing to revisit later: nilbuild#35 keeps viewed state in localStorage. If review state moves into the
SQLite session so the agent can see what has already been reviewed, this becomes redundant.
160 tests pass.
Stacked on #3.
🤖 Generated with Claude Code
https://claude.ai/code/session_018PkYQzbsnMihHesafWvXKs