Add file-path component for consistent path rendering#73
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (9)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughIntroduces a reusable Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tests/Feature/View/FilePathComponentTest.php (1)
84-89: Remove non-essential inline comments in this assertion block.The comments at Line 84 and Line 88 describe straightforward expectations and can be dropped to keep the test body cleaner.
♻️ Proposed cleanup
- // Directory span: shrinkable + ellipsizing expect($html) ->toContain('min-w-0') ->toContain('truncate') - // Basename span: shrink-0 keeps it whole when the row narrows ->toContain('shrink-0');As per coding guidelines, "Prefer PHPDoc blocks over inline comments. Only add inline comments for exceptionally complex logic."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tests/Feature/View/FilePathComponentTest.php` around lines 84 - 89, Remove the two non-essential inline comments in the assertion block that starts with expect($html) and asserts ->toContain('min-w-0')->toContain('truncate')->toContain('shrink-0'); specifically delete the comment describing "Directory span: shrinkable + ellipsizing" and the inline comment "Basename span: shrink-0 keeps it whole when the row narrows", leaving only the chain of expectations intact in the test.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@tests/Feature/View/FilePathComponentTest.php`:
- Around line 84-89: Remove the two non-essential inline comments in the
assertion block that starts with expect($html) and asserts
->toContain('min-w-0')->toContain('truncate')->toContain('shrink-0');
specifically delete the comment describing "Directory span: shrinkable +
ellipsizing" and the inline comment "Basename span: shrink-0 keeps it whole when
the row narrows", leaving only the chain of expectations intact in the test.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 48bce30d-df11-4a75-bed5-3745b26f29bf
📒 Files selected for processing (9)
resources/CLAUDE.mdresources/views/components/diff/file-header.blade.phpresources/views/components/file-path.blade.phpresources/views/components/project-list.blade.phpresources/views/livewire/⚡comments-drawer.blade.phpresources/views/livewire/⚡diff-file.blade.phpresources/views/pages/⚡review-page.blade.phptests/Feature/View/FilePathComponentTest.phptests/Unit/Livewire/DiffFileTest.php
Adds <x-file-path> as the single way to render a path: directory dimmed, basename in font-semibold. The component lays out inline-flex so the directory ellipsizes first when a row narrows — the basename is never the clipped token. Migrated the review-page sidebar file list, recently-reviewed list, diff-file header (including renames), comments-drawer header, and project-list path subtitle. Codified the rules under "Paths & identifiers" in resources/CLAUDE.md so future call sites stay consistent. https://claude.ai/code/session_01XdgmqDwfhqvV7FRr2jyfjw
fgilio
force-pushed
the
claude/bold-file-names-1SWcI
branch
from
5fa3a4a to
0660ea3
Compare
Renders 9 path-treatment variants — control, three opacity-only variants at 60/50/40 dim, color-+-medium-weight, real-muted-color, muted+medium, muted+medium with no emphasis on single-token rows, and a tracking-tight option — across narrow/medium/wide column widths so we can pick before committing to one. Sample paths cover deep nesting, long basenames, single-token files, and the dotted hidden-dir case from the screenshots. Delete the route in routes/web.php and the page once a treatment is picked. https://claude.ai/code/session_01XdgmqDwfhqvV7FRr2jyfjw
Drops font-semibold on the basename and opacity-60 on the directory in favor of real muted colors: directory at text-gh-muted/70, basename at text-gh-text. Renames keep the old path slightly more faded (text-gh-muted/50). Same change applied to the Alpine-rendered recently-reviewed list on the review page. Why color over weight: monospace bold is loud and produced a "shouty" texture in long lists. Color-only hierarchy reads calmer while still making the basename pop. Why real colors over opacity: opacity-60 of an already-muted parent (e.g. project-list path subtitle) compounded to barely-legible — real colors compose predictably across contexts. Removes /file-path-lab and its route now that the variant is picked. https://claude.ai/code/session_01XdgmqDwfhqvV7FRr2jyfjw
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
Introduces a new
<x-file-path>Blade component that standardizes how file paths are displayed throughout the application. The component implements an identifier-first visual hierarchy where the basename is emphasized and the directory is dimmed, with intelligent truncation that preserves the filename when space is constrained.Key Changes
New component:
resources/views/components/file-path.blade.phpold-pathprop for displaying file renames with→arrowinline-flexlayout with shrinkable directory and fixed-width basename to prevent filename clippingfont-semiboldon basename,opacity-60on directorytitleattribute by default; allows caller overrideComprehensive test suite:
tests/Feature/View/FilePathComponentTest.phpUpdated documentation:
resources/CLAUDE.mdApplied component across codebase:
resources/views/components/diff/file-header.blade.php: Replaced manual rename renderingresources/views/pages/⚡review-page.blade.php: Updated trash list and addedpathDir()/pathBase()Alpine helpersresources/views/livewire/⚡comments-drawer.blade.php: Replaced truncated path displayresources/views/components/project-list.blade.php: Replaced project path renderingTest update:
tests/Unit/Livewire/DiffFileTest.php→(Unicode arrow) instead of→HTML entityImplementation Details
The component encodes a key UX principle: when scanning lists, users hunt for the identifier (filename) first; the directory only disambiguates when basenames collide. The layout uses
inline-flexwithmin-w-0on the directory span to allow it to shrink and ellipsize whileshrink-0on the basename ensures it never gets clipped. This prevents the frustrating UX of seeingapp/Domains/Metadata/Traits/HasTaxonomies.p…where the critical identifier is hidden.For Alpine-rendered paths (client-side text updates), the review page now includes
pathDir()andpathBase()helper functions that mirror the component's splitting logic, ensuring visual consistency.https://claude.ai/code/session_01XdgmqDwfhqvV7FRr2jyfjw
Summary by CodeRabbit
New Features
Documentation
Tests