-
Notifications
You must be signed in to change notification settings - Fork 0
docs(quick-020): fix shared items rendering #201
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
31388eb
docs(020): create plan to fix shared items rendering
claude b628aef
feat(020): add grid layout styles for shared browser rows and cells
claude 96b7591
fix(ui): add missing CSS grid layout for shared items rendering
claude a75e63e
docs(quick-020): fix shared items rendering
claude 4cbc55f
fix(a11y): add focus-visible style for parent directory row
FSM1 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
204 changes: 204 additions & 0 deletions
204
.planning/quick/020-fix-shared-items-rendering/020-PLAN.md
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| --- | ||
| phase: quick | ||
| plan: 020 | ||
| type: execute | ||
| wave: 1 | ||
| depends_on: [] | ||
| files_modified: | ||
| - apps/web/src/styles/shared-browser.css | ||
| - apps/web/src/styles/responsive.css | ||
| autonomous: true | ||
|
|
||
| must_haves: | ||
| truths: | ||
| - "Shared items in list view display as a horizontal grid row with NAME, SHARED BY, and DATE columns" | ||
| - "Items inside a shared folder display as a horizontal grid row with NAME, SIZE, and MODIFIED columns" | ||
| - "Parent directory row [..] displays as a horizontal grid row matching the column layout" | ||
| - "On mobile (<768px), shared rows collapse to single-column NAME-only layout, hiding SIZE/DATE/SHARED BY" | ||
| artifacts: | ||
| - path: "apps/web/src/styles/shared-browser.css" | ||
| provides: "Grid layout styles for .file-list-row and .file-list-cell-* classes" | ||
| contains: "grid-template-columns" | ||
| - path: "apps/web/src/styles/responsive.css" | ||
| provides: "Mobile responsive overrides for shared browser rows" | ||
| contains: "file-list-row" | ||
| key_links: | ||
| - from: "apps/web/src/components/file-browser/SharedFileBrowser.tsx" | ||
| to: "apps/web/src/styles/shared-browser.css" | ||
| via: "CSS class names: .file-list-row, .file-list-cell-name, .file-list-cell-size, .file-list-cell-date" | ||
| pattern: "file-list-row|file-list-cell" | ||
| --- | ||
|
|
||
| <objective> | ||
| Fix the completely broken rendering of shared items in the "shared with me" view. Rows currently stack vertically because CSS class names used in SharedFileBrowser.tsx (.file-list-row, .file-list-cell-*) have NO CSS definitions anywhere. Add grid layout styles matching the existing .file-list-item pattern from file-browser.css. | ||
|
|
||
| Purpose: The shared browser is visually unusable -- cells stack vertically instead of displaying as horizontal grid rows. | ||
| Output: Properly styled shared item rows with 3-column grid layout on desktop and collapsed layout on mobile. | ||
| </objective> | ||
|
|
||
| <execution_context> | ||
| @./.claude/get-shit-done/workflows/execute-plan.md | ||
| @./.claude/get-shit-done/templates/summary.md | ||
| </execution_context> | ||
|
|
||
| <context> | ||
| @apps/web/src/styles/shared-browser.css | ||
| @apps/web/src/styles/file-browser.css | ||
| @apps/web/src/styles/responsive.css | ||
| @apps/web/src/components/file-browser/SharedFileBrowser.tsx | ||
| </context> | ||
|
|
||
| <tasks> | ||
|
|
||
| <task type="auto"> | ||
| <name>Task 1: Add grid layout styles for shared browser rows and cells</name> | ||
| <files>apps/web/src/styles/shared-browser.css</files> | ||
| <action> | ||
| Add CSS rules to shared-browser.css for the missing classes. Model these after the .file-list-item styles in file-browser.css (lines 296-306) but adapted for the shared browser's class names. | ||
|
|
||
| Add these rule blocks (insert after the existing `.shared-list-row:focus-visible` block, before the `/* Error state */` section): | ||
|
|
||
| 1. `.file-list-row` -- base row style: | ||
| - `display: grid` | ||
| - `grid-template-columns: 1fr 120px 180px` (matches .file-list-header and .file-list-item) | ||
| - `gap: var(--spacing-md)` | ||
| - `padding: var(--spacing-sm) var(--spacing-md)` | ||
| - `cursor: pointer` | ||
| - `transition: background-color 0.15s ease` | ||
| - `border-bottom: var(--border-thickness) solid var(--color-border-dim)` | ||
| - `font-family: var(--font-family-mono)` | ||
|
|
||
| 2. `.file-list-row:last-child` -- remove bottom border on last row: | ||
| - `border-bottom: none` | ||
|
|
||
| 3. `.file-list-row:hover` -- hover highlight: | ||
| - `background-color: var(--color-green-darker)` | ||
|
|
||
| 4. `.file-list-row:focus-visible` -- keyboard focus (accessibility requirement per CLAUDE.md): | ||
| - `outline: 1px solid var(--color-green-primary)` | ||
| - `outline-offset: -1px` | ||
|
|
||
| 5. `.file-list-row--parent` -- parent directory row: | ||
| - `cursor: pointer` | ||
|
|
||
| 6. `.file-list-row--parent:hover`: | ||
| - `background-color: var(--color-green-darker)` | ||
|
|
||
| 7. `.file-list-cell` -- base cell style: | ||
| - `display: flex` | ||
| - `align-items: center` | ||
| - `min-width: 0` (prevent overflow) | ||
|
|
||
| 8. `.file-list-cell-name` -- name column: | ||
| - `display: flex` | ||
| - `align-items: center` | ||
| - `gap: 6px` | ||
| - `min-width: 0` (allow text truncation) | ||
|
|
||
| 9. `.file-list-cell-size` -- size column: | ||
| - `display: flex` | ||
| - `align-items: center` | ||
| - `color: var(--color-text-secondary)` | ||
| - `font-size: var(--font-size-sm)` | ||
|
|
||
| 10. `.file-list-cell-date` -- date column: | ||
| - `display: flex` | ||
| - `align-items: center` | ||
| - `color: var(--color-text-secondary)` | ||
| - `font-size: var(--font-size-sm)` | ||
|
|
||
| 11. `.file-icon` -- icon in shared rows: | ||
| - `font-size: var(--font-size-sm)` | ||
| - `flex-shrink: 0` | ||
|
|
||
| 12. `.file-name` -- file/folder name text: | ||
| - `white-space: nowrap` | ||
| - `overflow: hidden` | ||
| - `text-overflow: ellipsis` | ||
| - `color: var(--color-text-primary)` | ||
| - `font-size: var(--font-size-sm)` | ||
|
|
||
| IMPORTANT: Use modern CSS color syntax (space-separated, NOT comma rgba()) per CLAUDE.md coding guidelines. | ||
| IMPORTANT: Scope all these rules inside `.shared-browser` to avoid leaking styles to the main file browser. Use `.shared-browser .file-list-row` etc. This prevents conflicts with file-browser.css which uses different class names (.file-list-item). | ||
| </action> | ||
| <verify> | ||
| Run `cd /home/user/cipher-box && npx grep-css-classes` or manually verify: | ||
| 1. `grep 'file-list-row' apps/web/src/styles/shared-browser.css` returns multiple matches | ||
| 2. `grep 'grid-template-columns' apps/web/src/styles/shared-browser.css` returns at least 1 match | ||
| 3. `grep 'file-list-cell' apps/web/src/styles/shared-browser.css` returns multiple matches | ||
| 4. `grep 'file-icon' apps/web/src/styles/shared-browser.css` returns at least 1 match | ||
| 5. `grep 'file-name' apps/web/src/styles/shared-browser.css` returns at least 1 match | ||
| 6. Run `cd /home/user/cipher-box && npm run build --workspace=apps/web` to confirm no CSS syntax errors | ||
| </verify> | ||
| <done> | ||
| All .file-list-row, .file-list-cell-*, .file-icon, and .file-name classes have CSS definitions scoped under .shared-browser. Shared rows display as 3-column grid (1fr 120px 180px) matching the header. Build passes. | ||
| </done> | ||
| </task> | ||
|
|
||
| <task type="auto"> | ||
| <name>Task 2: Add mobile responsive overrides for shared browser rows</name> | ||
| <files>apps/web/src/styles/responsive.css</files> | ||
| <action> | ||
| Add mobile responsive overrides for the shared browser's .file-list-row classes inside the existing `@media (max-width: 768px)` block in responsive.css. Place them right after the existing `.file-list-item` responsive rules (around line 99). | ||
|
|
||
| Add these rules inside the existing `@media (max-width: 768px)` block: | ||
|
|
||
| 1. `.shared-browser .file-list-row` -- collapse to name-only on mobile: | ||
| - `grid-template-columns: 1fr` | ||
|
|
||
| 2. `.shared-browser .file-list-cell-size`, `.shared-browser .file-list-cell-date` -- hide size and date: | ||
| - `display: none` | ||
|
|
||
| 3. `.shared-browser .shared-by-cell` -- hide shared-by column on mobile: | ||
| - `display: none` | ||
|
|
||
| 4. `.shared-browser .file-list-header-shared-by` -- hide shared-by header on mobile: | ||
| - `display: none` | ||
|
|
||
| 5. Also update `.shared-browser .file-list-header` to use single column on mobile: | ||
| - `grid-template-columns: 1fr` | ||
|
|
||
| These mirror the existing pattern where `.file-list-item` gets `grid-template-columns: 1fr auto` and size/date columns are hidden (lines 96-110 of responsive.css). | ||
|
|
||
| IMPORTANT: Add these inside the EXISTING `@media (max-width: 768px)` block. Do NOT create a new media query block. | ||
| </action> | ||
| <verify> | ||
| 1. `grep -A2 'shared-browser.*file-list-row' apps/web/src/styles/responsive.css` shows the mobile override | ||
| 2. `grep 'shared-by-cell' apps/web/src/styles/responsive.css` returns match for hidden column | ||
| 3. Run `cd /home/user/cipher-box && npm run build --workspace=apps/web` to confirm no CSS syntax errors | ||
| </verify> | ||
| <done> | ||
| On mobile viewports (<768px), shared browser rows collapse to single-column layout. Size, date, and shared-by columns are hidden. Build passes with no errors. | ||
| </done> | ||
| </task> | ||
|
|
||
| </tasks> | ||
|
|
||
| <verification> | ||
| 1. `npm run build --workspace=apps/web` passes with no errors | ||
| 2. Every CSS class used in SharedFileBrowser.tsx has a corresponding CSS definition: | ||
| - .file-list-row -> shared-browser.css (scoped under .shared-browser) | ||
| - .file-list-row--parent -> shared-browser.css | ||
| - .file-list-cell -> shared-browser.css | ||
| - .file-list-cell-name -> shared-browser.css | ||
| - .file-list-cell-size -> shared-browser.css | ||
| - .file-list-cell-date -> shared-browser.css | ||
| - .file-icon -> shared-browser.css | ||
| - .file-name -> shared-browser.css | ||
| 3. Grid template (1fr 120px 180px) on rows matches the header grid template | ||
| 4. Mobile responsive rules hide secondary columns on small screens | ||
| 5. Focus-visible styles present on .file-list-row for keyboard accessibility | ||
| </verification> | ||
|
|
||
| <success_criteria> | ||
| - Shared items in list view render as horizontal 3-column rows (NAME | SHARED BY | DATE) | ||
| - Items inside shared folders render as horizontal 3-column rows (NAME | SIZE | MODIFIED) | ||
| - Parent directory [..] row renders as horizontal 3-column row | ||
| - Hover and focus-visible states work on all rows | ||
| - Mobile layout collapses to single NAME column | ||
| - Web app builds successfully with no CSS errors | ||
| </success_criteria> | ||
|
|
||
| <output> | ||
| After completion, create `.planning/quick/020-fix-shared-items-rendering/020-SUMMARY.md` | ||
| </output> |
42 changes: 42 additions & 0 deletions
42
.planning/quick/020-fix-shared-items-rendering/020-SUMMARY.md
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| # Quick Task 020: Fix Shared Items Rendering | ||
|
|
||
| ## Result: COMPLETE | ||
|
|
||
| ## Problem | ||
|
|
||
| The `SharedFileBrowser.tsx` component used CSS class names (`.file-list-row`, `.file-list-cell-name`, `.file-list-cell-size`, `.file-list-cell-date`, `.file-icon`, `.file-name`) that had **no CSS definitions anywhere** in the codebase. The main file browser uses different class names (`.file-list-item`, `.file-list-item-name`, etc.) which are properly styled with CSS Grid layout. | ||
|
|
||
| This caused shared items to render with cells stacking vertically instead of horizontally in columns — making the "Shared with me" view completely broken visually. | ||
|
|
||
| ## Changes | ||
|
|
||
| ### Task 1: Add grid layout styles (shared-browser.css) | ||
|
|
||
| Added CSS rules scoped under `.shared-browser` for all missing classes: | ||
|
|
||
| - `.file-list-row` — CSS Grid layout with `grid-template-columns: 1fr 120px 180px` matching the header | ||
| - `.file-list-row--parent` — parent directory row hover styles | ||
| - `.file-list-cell` / `.file-list-cell-name` / `.file-list-cell-size` / `.file-list-cell-date` — flex cell styles | ||
| - `.file-icon` / `.file-name` — icon and name text styles with truncation | ||
| - Hover, focus-visible, and last-child border states | ||
|
|
||
| ### Task 2: Add mobile responsive overrides (responsive.css) | ||
|
|
||
| Added inside existing `@media (max-width: 768px)` block: | ||
|
|
||
| - `.shared-browser .file-list-row` collapses to `grid-template-columns: 1fr` | ||
| - Size, date, shared-by columns hidden on mobile | ||
| - Shared-by header hidden on mobile | ||
|
|
||
| ## Files Modified | ||
|
|
||
| | File | Change | | ||
| | ---------------------------------------- | --------------------------------------------- | | ||
| | `apps/web/src/styles/shared-browser.css` | Added 86 lines of grid layout styles | | ||
| | `apps/web/src/styles/responsive.css` | Added 17 lines of mobile responsive overrides | | ||
|
|
||
| ## Verification | ||
|
|
||
| - Web app builds successfully (`pnpm --filter web build`) | ||
| - All CSS class names used in `SharedFileBrowser.tsx` now have corresponding CSS definitions | ||
| - Grid template (1fr 120px 180px) on rows matches the header grid template |
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
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
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.