ENHANCED: Add the Sage file grid and floating selection actions - #40
bmdavis419 wants to merge 9 commits into
Conversation
|
Warning Review limit reached
On-demand reviews are free for the next 9 days. After that, they cost $0.25 per reviewed file. Or wait 33 minutes for your next included review. View limit detailsLimit details: You’ve used all 6 included reviews currently available. Your 49 included PR review attempts over the past 7 days set your current allowance at 6 reviews per hour. Review configuration: ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Team Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (35)
Comment |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| [data-theme='b'] .tag-chip[aria-pressed='true'] { | ||
| background: var(--tag-color, var(--color-accent-500)); | ||
| border-color: var(--tag-color, var(--color-accent-500)); | ||
| color: #fff; |
There was a problem hiding this comment.
🟡 Medium src/app.css:419
Selected Iris TagChips use white text against the user-controlled --tag-color, so light or white tag colors make the tag name and count nearly invisible and the active filter unreadable. Constrain tag colors to a contrast-safe palette or compute a contrasting foreground color before applying this style.
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/app.css around line 419:
Selected Iris `TagChip`s use white text against the user-controlled `--tag-color`, so light or white tag colors make the tag name and count nearly invisible and the active filter unreadable. Constrain tag colors to a contrast-safe palette or compute a contrasting foreground color before applying this style.
| if (file.kind === 'site' || type === 'text/html') return 'site'; | ||
| if (type.startsWith('image/')) return 'image'; | ||
| if (ARCHIVE.test(type)) return 'archive'; |
There was a problem hiding this comment.
🟡 Medium dashboard/file-family.ts:19
fileFamily returns other for page.html and backup.zip when API/MCP uploads use application/octet-stream, so their site/archive labels, icons, and colors are incorrect. Add filename-extension fallbacks for sites and archives alongside the content-type checks.
-\tif (file.kind === 'site' || type === 'text/html') return 'site';
+\tif (file.kind === 'site' || type === 'text/html' || /\.html?$/i.test(file.displayName)) return 'site';
\tif (type.startsWith('image/')) return 'image';
-\tif (ARCHIVE.test(type)) return 'archive';
+\tif (ARCHIVE.test(type) || /\.(zip|gz|tar|tgz|7z|rar|bz2)$/i.test(file.displayName)) return 'archive';🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/lib/dashboard/file-family.ts around lines 19-21:
`fileFamily` returns `other` for `page.html` and `backup.zip` when API/MCP uploads use `application/octet-stream`, so their site/archive labels, icons, and colors are incorrect. Add filename-extension fallbacks for sites and archives alongside the content-type checks.
4e460fa to
2b6018d
Compare
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <UploadQueue {uploads} /> | ||
| {#if selection.selectedFiles.length > 0 || uploads.items.length > 0} | ||
| <div | ||
| class="dashboard-dock pointer-events-none fixed right-3 bottom-3 z-40 flex max-h-[calc(100dvh-1.5rem)] max-w-[calc(100vw-1.5rem)] flex-col items-end gap-3 overflow-y-auto overscroll-contain p-1 sm:right-5 sm:bottom-5 sm:max-h-[calc(100dvh-2.5rem)] sm:max-w-[calc(100vw-2.5rem)]" |
There was a problem hiding this comment.
- When selected-file controls are present and a bulk mutation fails, the toast and bulk bar occupy the same bottom-right pixels.
apps/web/src/lib/components/Dashboard.svelte:350usesfixed right/bottom ... z-40, whileapps/web/src/lib/components/ui/Toast.svelte:34uses the same fixed bottom-right placement withz-[100].- Separate the bottom-right regions or place the dock in a non-conflicting corner; pointer events do not resolve visual occlusion.
Artifacts
- The authored Playwright script renders matching pre-change and current dock/toast layouts, records both, and measures their stacking geometry; it directly checks whether the toast covers the controls.
- Captured command output records the before/current rectangles, z-indexes, and topmost element at the intersection; it confirms unchanged overlap and toast precedence.
- Chromium capture of the parent Dashboard dock layout with selected-file controls and a bulk-action error toast; the toast covers the controls.
- Chromium capture of the current Dashboard dock layout after `pointer-events-none` was added; the toast still covers the controls.
| <UploadQueue {uploads} /> | ||
| {#if selection.selectedFiles.length > 0 || uploads.items.length > 0} | ||
| <div | ||
| class="dashboard-dock pointer-events-none fixed right-3 bottom-3 z-40 flex max-h-[calc(100dvh-1.5rem)] max-w-[calc(100vw-1.5rem)] flex-col items-end gap-3 overflow-y-auto overscroll-contain p-1 sm:right-5 sm:bottom-5 sm:max-h-[calc(100dvh-2.5rem)] sm:max-w-[calc(100vw-2.5rem)]" |
There was a problem hiding this comment.
- Bug
- When selected-file controls are present and a bulk mutation fails, the toast and bulk bar occupy the same bottom-right pixels. The toast paints over the controls, so they are visually obscured.
- Cause
apps/web/src/lib/components/Dashboard.svelte:350usesfixed right/bottom ... z-40, whileapps/web/src/lib/components/ui/Toast.svelte:34uses the same fixed bottom-right placement withz-[100]. The current change addspointer-events-noneto the dock but leaves both rectangles and z-indexes unchanged.
- Fix
- Separate the bottom-right regions (for example, offset the toast above the dock while actions/uploads are present), or place the dock in a non-conflicting corner. Do not rely on pointer-events to resolve visual occlusion.
Artifacts
- The authored Playwright script renders matching pre-change and current dock/toast layouts, records both, and measures their stacking geometry; it directly checks whether the toast covers the controls.
- Captured command output records the before/current rectangles, z-indexes, and topmost element at the intersection; it confirms unchanged overlap and toast precedence.
- Chromium capture of the parent Dashboard dock layout with selected-file controls and a bulk-action error toast; the toast covers the controls.
- Chromium capture of the current Dashboard dock layout after `pointer-events-none` was added; the toast still covers the controls.
| line-height: 1.1rem; | ||
| -webkit-line-clamp: 9; | ||
| } | ||
| [data-theme='e'] .thumb-icon { |
There was a problem hiding this comment.
🟡 Medium src/app.css:704
Variant E renders quarantined files with a completely blank thumbnail: FileCardStack provides only the quarantine placeholder .thumb-icon, but this rule hides every .thumb-icon. Scope the hide rule to non-fallback thumbnails so the quarantine placeholder remains visible.
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/app.css around line 704:
Variant E renders quarantined files with a completely blank thumbnail: `FileCardStack` provides only the quarantine placeholder `.thumb-icon`, but this rule hides every `.thumb-icon`. Scope the hide rule to non-fallback thumbnails so the quarantine placeholder remains visible.
| } | ||
|
|
||
| /* A · Ember — orange on true neutrals; orange means "public". */ | ||
| [data-theme='a'] { |
There was a problem hiding this comment.
🟡 Medium src/app.css:351
Variant D primary buttons render white text on #2b93e4 at only about 3.3:1 contrast, and variant A renders white text on #f97316 at about 2.8:1; both fail the 4.5:1 minimum for normal-size labels. Set a dark --accent-fg in the light-mode rules for [data-theme='d'] and [data-theme='a'] (as already done for their dark-mode variants).
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/app.css around line 351:
Variant D primary buttons render white text on `#2b93e4` at only about 3.3:1 contrast, and variant A renders white text on `#f97316` at about 2.8:1; both fail the 4.5:1 minimum for normal-size labels. Set a dark `--accent-fg` in the light-mode rules for `[data-theme='d']` and `[data-theme='a']` (as already done for their dark-mode variants).
| --radius-2xl: 0.25rem; | ||
| --family-image: #c026d3; | ||
| --family-code: #16a34a; | ||
| --family-data: #ca8a04; |
There was a problem hiding this comment.
🟡 Medium src/app.css:443
In the light Terminal variant, data file links use #ca8a04 and render at only about 3.0:1 contrast on the white table background, so they fail the 4.5:1 requirement and are hard to read. Use a darker light-mode --family-data value while retaining the existing dark-mode override.
- --family-data: #ca8a04;
+ --family-data: #a16207;🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/app.css around line 443:
In the light Terminal variant, `data` file links use `#ca8a04` and render at only about 3.0:1 contrast on the white table background, so they fail the 4.5:1 requirement and are hard to read. Use a darker light-mode `--family-data` value while retaining the existing dark-mode override.
Geist and Geist Mono replace Inter, the gray scale moves to true neutrals, and each variant remaps the accent scale plus one signature: Ember (orange, public rule on thumbs), Iris (violet, tag color as structure), Terminal (amber, mono names, type-family tints), Tide (blue, search hero with ambient glow), Sage (mint, drawn rule and typographic placeholders). Components gain stable hook classes and data attributes the variant CSS targets; nothing changes without a data-theme on the shell. In development the thumbnail route serves images unresized when the local runtime cannot transform them, so the grid shows real previews. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2b6018d to
9a23825
Compare
| if (ARCHIVE_EXT.test(file.displayName)) return 'archive'; | ||
| return 'other'; |
There was a problem hiding this comment.
🟡 Medium dashboard/file-family.ts:29
fileFamily returns other for image uploads such as photo.jpg with MIME type application/octet-stream, so they receive the generic badge/color. Unlike the other families, the extension fallback has no image check; add one for common image extensions before the final return.
if (ARCHIVE_EXT.test(file.displayName)) return 'archive';
+ if (/\.(avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(file.displayName)) return 'image';
return 'other';🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/lib/dashboard/file-family.ts around lines 29-30:
`fileFamily` returns `other` for image uploads such as `photo.jpg` with MIME type `application/octet-stream`, so they receive the generic badge/color. Unlike the other families, the extension fallback has no image check; add one for common image extensions before the final return.
|
|
||
| <div | ||
| class="pointer-events-none fixed right-4 bottom-4 z-[100] flex w-[min(24rem,calc(100%-2rem))] flex-col gap-2" | ||
| class="toast-region pointer-events-none fixed top-4 right-4 z-[100] flex max-h-[calc(50dvh-1.5rem)] w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 overflow-y-auto overscroll-contain" |
There was a problem hiding this comment.
🟡 Medium ui/Toast.svelte:34
The fixed z-[100] toast region now covers the header's Settings and Sign out controls on desktop, so those controls cannot be clicked while a toast is visible. Because each toast has pointer-events-auto, restore the region to the bottom placement instead of top-4.
| class="toast-region pointer-events-none fixed top-4 right-4 z-[100] flex max-h-[calc(50dvh-1.5rem)] w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 overflow-y-auto overscroll-contain" | |
| class="pointer-events-none fixed bottom-4 right-4 z-[100] flex max-h-[calc(50dvh-1.5rem)] w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 overflow-y-auto overscroll-contain" |
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/lib/components/ui/Toast.svelte around line 34:
The fixed `z-[100]` toast region now covers the header's `Settings` and `Sign out` controls on desktop, so those controls cannot be clicked while a toast is visible. Because each toast has `pointer-events-auto`, restore the region to the bottom placement instead of `top-4`.
|
|
||
| <div | ||
| class="pointer-events-none fixed right-4 bottom-4 z-[100] flex w-[min(24rem,calc(100%-2rem))] flex-col gap-2" | ||
| class="toast-region pointer-events-none fixed top-4 right-4 z-[100] flex max-h-[calc(50dvh-1.5rem)] w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 overflow-y-auto overscroll-contain" |
There was a problem hiding this comment.
On a narrow authenticated dashboard, a visible notification occupies the same top-right area as Settings and Sign out. The changed fixed, high-layer toast intercepts clicks on both controls, so users cannot open Settings or sign out until they dismiss or wait for the notification. Move the notification below the header or reserve space for the account controls at narrow breakpoints.
Knowledge Base Used: File platform and web application
Artifacts
- The executable Chromium probe renders the authenticated header and representative toast in both placements, measures hit targets, and clicks the controls; it is the validation method.
- The shell command records the exact Bun invocation and working directory before running the Playwright validation; it documents the executed command.
- The executed probe output records 390×844 geometry, browser hit-test targets, click outcomes, and successful exit code; the top toast intercepts both controls.
- Chromium recording of the prior bottom-right toast placement with visible Settings and Sign out controls; both controls remain reachable.
Before change: bottom-right toast below authenticated header
- Poster frame from the prior placement at 390×844, showing the toast below the header controls; no overlap occurs.
- Chromium recording of the current top-right toast placement with visible Settings and Sign out controls; the toast overlays them.
After change: top-right toast over Settings and Sign out
- Poster frame from the current placement at 390×844, showing the toast covering the authenticated account controls; the overlap is visible.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/lib/components/ui/Toast.svelte
Line: 34
Comment:
**Toast blocks account controls**
On a narrow authenticated dashboard, a visible notification occupies the same top-right area as Settings and Sign out. The changed fixed, high-layer toast intercepts clicks on both controls, so users cannot open Settings or sign out until they dismiss or wait for the notification. Move the notification below the header or reserve space for the account controls at narrow breakpoints.
**Knowledge Base Used:** [File platform and web application](https://app.greptile.com/davis7dotsh/-/custom-context/knowledge-base/davis7dotsh/adrive/-/docs/file-platform.md)
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.
1 participant
Preserve the approved Sage
/Edesign: file facts above flat previews, floating selection actions, and shift-click selection. Keep quarantine/pending states visible, expose touch selection controls, fit narrow screens, and return from file details to the selected variant and filters. Development image previews stream originals when local transforms are unavailable.Uploads and selection actions share a bounded dock. Notifications occupy a separate upper region while the dock stays reachable below, including on short screens. Iris selected custom tags choose readable foreground colors; generic-MIME archives use their filename extension. Sage styling remains the approved design, and default promotion is separate work.
Validation:
Stack layer 11/11: depends on #39. Browser proof uses disposable local data and development providers; production transforms, live providers, and deployment verification remain launch checks. No merge or deployment.
Note
Add Sage
FileCardStackgrid, design variant A-E routing, and shared selection utilitiesvariantroute matcher, reactive context provider, and a layout-level variant switcher. Each variant gets theme-scoped CSS in app.css covering accents, typography, and component hooks.FileCardStackcomponent renders file facts above a stacked preview, with a matchingFileGridSkeleton, animated count line, hex badges, and reduced-motion handling.fileFamilyMIME/extension classifier,tagForegroundhex-contrast picker,shiftSelectHandlersfor shift-click selection, andformatShortDate.BulkActionBarandUploadQueueinto a single shared dock region in Dashboard.svelte; the upload queue is now in-flow rather than a fixed viewport overlay.dashboardReturnHrefnow accepts only root or single-letter A–E dashboard paths and rejects control characters; file-detail back links fall back to the dashboard root for other values.UploadQueueno longer independently overlays the bottom-right viewport.Macroscope summarized 9a23825.
Not safe to merge until notifications no longer cover the authenticated account controls on narrow screens.
Fix with agent prompt
Summary
Reviews (2) · Last reviewed commit: "Keep notifications clear of floating fil..."