Add document pinning to TextFrame for side-by-side comparison - #58
Open
Korede-TA wants to merge 4 commits into
Open
Add document pinning to TextFrame for side-by-side comparison#58Korede-TA wants to merge 4 commits into
Korede-TA wants to merge 4 commits into
Conversation
✅ Deploy Preview for akb-suruleredotdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Issue #41 - scrollTo focused node: - Add data-node-id attributes to rendered nodes in TextFrame - useEffect on selectionStore.focused to smooth-scroll to the focused element within the panel; no-ops if the node isn't in scope Issue #40 - comparison mode / pin TextFrame to a document: - Add textPinned: Record<string, NodeId | null> to viewStore, keyed by mosaic path (unique per pane, enabling two TextFrames with separate pins) - Add setPinnedDoc(paneId, docId) action, persisted in localStorage - TextFrame: PinBar shows a document picker select; when pinned, renders PinnedDocView — scrollable list of all child chunks of the pinned doc, with the focused chunk highlighted via .text-frame-chunk-focused - Add comparison layout preset { direction: 'row', first: 'text', second: 'text' } - AppShell: pass path-based paneId to each frame for per-pane uniqueness; use path-aware frame removal (updateTree + createRemoveUpdate) so closing one text pane in comparison mode doesn't close both https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
Korede-TA
force-pushed
the
claude/m4-textframe-comparison
branch
from
May 29, 2026 04:06
fa143b6 to
f2930db
Compare
overflow-y: auto only activates when the element has a constrained height. Without height: 100%, the flex container grows to fit all content and never scrolls. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
Strip leading non-alphanumeric chars from sort key so items like '(PDF) Foo' sort under F rather than appearing before letter-starting entries. Compute the sort key once per item to avoid re-calling deriveLabel for each comparison. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
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
2 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.
Summary
This PR adds the ability to "pin" a document in the TextFrame, allowing users to view a fixed document's chunks while independently selecting and navigating other nodes elsewhere in the UI. This enables side-by-side comparison workflows.
Key Changes
TextFrame refactoring: Split into three sub-components:
UnpinnedView: Follow-selection mode (existing behavior)PinnedDocView: Fixed document mode showing all chunks with click-to-selectPinBar: Toolbar with document picker dropdown and unpin buttonView state management:
textPinnedrecord toViewStateto track pinned documents per panesetPinnedDoc()action to manage pinning statesetLevel()to intelligently carry over selection when changing hierarchy levels (going up walks parent chain, going down collects descendants)Selection and scrolling:
useEffecthooks to auto-scroll focused nodes into view with smooth behaviordata-node-idattributes for DOM query selectorsUI/UX:
Layout:
AppShellto pass mosaic path aspaneIdfor multi-pane supportTesting:
setLevel()behavior covering up/down transitions, multi-selection, and edge casesImplementation Details
scrollIntoView({ behavior: 'smooth', block: 'nearest' })https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ