fix: fix diff gutter (001-fix-diff-gutter)#34
Merged
remarkablemark merged 39 commits intomasterfrom Mar 4, 2026
Merged
Conversation
…in diff gutter - Define user stories for unified and side-by-side diff views - Specify functional requirements for accurate source line number display - Add success criteria for measurable outcomes - Include specification quality checklist Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Add visual treatment specification for dual-column gutter - Small gap with subtle vertical divider, muted color for empty numbers - GitHub-style visual pattern Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
…acts - plan.md: Technical context, constitution check, project structure - research.md: Technical decisions and best practices for dual-column gutter - data-model.md: DiffLine entity and component contracts - quickstart.md: Development setup and testing instructions - QWEN.md: Agent context update with feature technology Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Use implicit TypeScript typing for functional components - Avoid useMemo unless profiling demonstrates need (YAGNI) - Aligns with Constitution Principle V: Simplicity and Performance Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- No max-height constraint means no vertical scrolling - Content expands to fit all lines naturally - CSS grid layout handles alignment without useRef/useState/useEffect - Aligns with Constitution Principle V: Simplicity and Performance Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- 30 tasks organized by user story (US1: unified view, US2: side-by-side) - Phase 1: Setup (2 tasks) - Phase 2: Foundational (1 task - update types) - Phase 3: User Story 1 MVP (13 tasks - unified view dual-column gutter) - Phase 4: User Story 2 (6 tasks - side-by-side view) - Phase 5: Polish & validation (9 tasks) - Tests required per Constitution Principle II (Full Test Coverage) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- spec.md: SC-005 'vertical' → 'horizontal' scrolling (C1) - spec.md: Consolidate FR-001 + FR-001b into single requirement (D1) - research.md: Update risks table to remove scroll misalignment (I1) - tasks.md: Remove [P] from T003 (I2) - tasks.md: Add edge case tests T008b, T008c (C2, C3) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
… gutter - Update LineNumberGutterProps to accept lines array with metadata - Implement dual-column gutter rendering using CSS grid - Display original and modified line numbers side-by-side - Compute digit width automatically from max line number - Apply muted styling for missing line numbers - Remove separate gutters for lines diff method - Add comprehensive tests for all line number scenarios - Maintain 100% test coverage across all quality gates Quality gates: - Tests: 148 passed - Coverage: 100% (statements, branches, functions, lines) - Lint: zero errors - Type check: zero errors - Build: succeeds Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
…r overlap - Add 1rem padding to gutter width calculation - Prevents line numbers from intersecting with border - Applies to both 2-digit and 3-digit widths Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Remove scrollLeft prop from LineNumberGutter - Gutter only syncs vertical scroll position - Prevents gutter lines from shifting when content overflows - Update tests to remove scrollLeft references Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Create new SideBySideGutter component for side-by-side view - Move gutter rendering logic from DiffViewer to dedicated component - Add comprehensive tests for SideBySideGutter - Reduce code duplication in DiffViewer - Maintain 100% test coverage Quality gates: - Tests: 159 passed (+11 new) - Coverage: 100% - Lint: zero errors - Type check: zero errors Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Document CSS grid layout for dual-column line numbers - Add whitespace-nowrap requirement for long lines - Update component structure (LineNumberGutter, SideBySideGutter) - Add HTML structure examples - Mark status as Implemented Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
… lines Restructure unified view to use CSS grid rows where each row contains both the line number and content as sibling cells. This ensures line numbers automatically match the height of their corresponding content, regardless of text wrapping. - Remove separate LineNumberGutter component from unified view - Render line numbers inline as first column of each grid row - Update tests to reflect new grid structure - Remove unused scroll sync logic from unified view Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Update specification, plan, and tasks to reflect the implemented solution: - Restructured unified view to use CSS grid rows with inline line numbers - Line numbers and content are sibling cells in same grid row - Ensures automatic height matching when text wraps - Removed LineNumberGutter component from unified view - Removed unused scroll sync logic Updated files: - spec.md: Added clarification about grid row approach, updated HTML structure - plan.md: Updated summary to reflect implementation - tasks.md: Rewrote to document actual implementation approach - QWEN.md: Added recent changes summary Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
The LineNumberGutter component is no longer used after restructuring the unified view to use inline line numbers. Removing it: - Eliminates dead code (4 files deleted) - Improves test coverage to 100% - Simplifies the codebase Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Document the final implementation state: - Removed LineNumberGutter component (dead code elimination) Updated files: - spec.md: Noted LineNumberGutter removal - tasks.md: Updated Phase 3 tasks and results Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Restructure side-by-side view to render line numbers inline using CSS grid (grid-cols-[auto_1fr]) instead of a separate SideBySideGutter component. This matches the unified view implementation and ensures perfect height matching between line numbers and content. - Remove SideBySideGutter component (4 files deleted) - Update DiffViewer.tsx to render inline gutters for both columns - Update tests to query for new grid structure - Line numbers now render as first cell of each grid row Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Update specification and tasks documentation to reflect the removal of SideBySideGutter component and inline gutter implementation for side-by-side view. - Update spec.md Component Structure section - Update HTML Structure example for side-by-side view - Update Key Implementation Details - Add T007b task for SideBySideGutter removal - Add T017 task for file deletion - Update Completed Implementation Summary Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Change side-by-side view from grid to flex layout to enable proper text wrapping for long lines. - Replace grid-cols-[auto_1fr] with flex rows - Add whitespace-pre-wrap and break-words to content cells - Add min-w-0 flex-1 to allow content to shrink and wrap - Add align-top to line numbers for proper vertical alignment - Update tests for new flex-based structure Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Update specification and tasks documentation to reflect the text wrapping fix for side-by-side view. - Update spec.md HTML Structure for flex-based side-by-side layout - Update Key Implementation Details with text wrapping info - Add Phase 4 tasks (T018-T021) for text wrapping implementation - Update Completed Implementation Summary Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Create SideBySideView.tsx with extracted side-by-side diff rendering logic - Move pairLines helper and DiffRowPair type to new component - Simplify DiffViewer by delegating side-by-side rendering Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Create SideBySideView.test.tsx with 5 side-by-side specific tests - Remove side-by-side tests from DiffViewer.test.tsx - Tests now properly co-located with their components Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Fix Side-by-Side Row Height Alignment Problem: Original and modified columns render independently, causing row height mismatches when text wraps differently. Solution: Restructure SideBySideView.tsx to render each row as a unified flex container with both original and modified cells side-by-side. Changes: 1. `SideBySideView.tsx`: Replace grid layout with unified rows - Each row contains both original and modified sides in a single flex container - Both sides share the same row height (tallest content wins) - Add w-1/2 classes for equal width columns - Add border-r separator between columns 2. `SideBySideView.test.tsx`: Update tests for new structure - Update assertions to query within unified rows
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #34 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 12 12
Lines 194 186 -8
Branches 62 59 -3
=========================================
- Hits 194 186 -8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
1 participant
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.
What is the motivation for this pull request?
Fix diff gutter (
001-fix-diff-gutter) for unified and side-by-sideWhat is the current behavior?
Line numbering broken for long texts
What is the new behavior?
Line numbering fixed for long texts
Checklist: