fix(tauri): opaque overlays and menus on transparent window - #3076
fix(tauri): opaque overlays and menus on transparent window#3076gprot42 wants to merge 1 commit into
Conversation
|
Warning Review limit reached
Next review available in: 30 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThis PR adds explicit sort direction handling across explorer state, file queries, and directory sorting, and also updates the Tauri app with transparent-window styling plus browser and Vite compatibility stubs. ChangesTauri window and browser support
Explorer sort direction
Estimated code review effort: 4 (Complex) | ~60 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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. 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)
apps/tauri/src/index.css (1)
105-106: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winOverridden selectors depend on specific utility class names — fragile.
The selectors
.z-[103] .border-app-line.bg-app-boxand.border-menu-line.bg-menu\/95target elements by their Tailwind utility class names from@spacedrive/primitives. If the primitives library changes which utility classes it applies (e.g., switching frombg-menu/95tobg-menu/90), these overrides will silently stop matching and the readability bugs will reappear.Consider adding a brief comment noting which primitive component(s) these selectors target, so future maintainers can trace the dependency.
Also applies to: 113-116
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/tauri/src/index.css` around lines 105 - 106, The selector overrides in index.css are tied to Tailwind utility classes from `@spacedrive/primitives`, so add brief comments next to the affected rules to identify the primitive component(s) they target. Use the existing selector groups like .z-[103] .border-app-line.bg-app-box and .border-menu-line.bg-menu\/95 as anchors, and document the dependency so future maintainers can trace and update these overrides if the primitives’ class names change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/tauri/src/index.css`:
- Around line 105-106: The selector overrides in index.css are tied to Tailwind
utility classes from `@spacedrive/primitives`, so add brief comments next to the
affected rules to identify the primitive component(s) they target. Use the
existing selector groups like .z-[103] .border-app-line.bg-app-box and
.border-menu-line.bg-menu\/95 as anchors, and document the dependency so future
maintainers can trace and update these overrides if the primitives’ class names
change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2b873785-e715-489d-817a-55123daa78f4
📒 Files selected for processing (1)
apps/tauri/src/index.css
e824b6b to
cda9429
Compare
cda9429 to
78e09d8
Compare
![capy-ai[bot]](https://avatars.githubusercontent.com/in/1915919?s=60&v=4){kind=small}
| */ | ||
| .fixed.inset-0.z-\[102\] { | ||
| z-index: 102 !important; | ||
| background-color: color-mix(in srgb, var(--color-app) 92%, transparent) !important; |
There was a problem hiding this comment.
[🟡 Medium] [🔵 Bug]
The Tauri overlay override still mixes var(--color-app) with transparent, producing a final background with alpha below 1; because the dialog overlay itself is also opacity-animated, content can continue to bleed through during and after the transition instead of being fully obscured. Use a fully opaque app background for the overlay (or otherwise remove the transparent component) so dialogs actually cover the transparent native window.
/* apps/tauri/src/index.css */
.fixed.inset-0.z-\[102\] {
z-index: 102 !important;
background-color: color-mix(in srgb, var(--color-app) 92%, transparent) !important;
margin: 0 !important;
}| background-color: color-mix(in srgb, var(--color-app) 92%, transparent) !important; | |
| background-color: var(--color-app) !important; |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/interface/src/routes/explorer/hooks/useExplorerKeyboard.ts (1)
49-56: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winMissing
folders_firstin directory listing query.The keyboard navigation query omits
folders_firstwhile every other directory listing query in this PR includes it (useExplorerFiles,ColumnView,KnowledgeView,SizeView). SinceviewSettingsis already destructured at Line 22, this appears to be an oversight. Withoutfolders_first, the backend may return files in a different order than what's displayed, causing arrow-key navigation to jump to unexpected files.🐛 Proposed fix
path: currentPath, limit: null, include_hidden: false, sort_by: sortBy as DirectorySortBy, sort_direction: toSortDirection(sortOrder), + folders_first: viewSettings.foldersFirst, } : null!,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/interface/src/routes/explorer/hooks/useExplorerKeyboard.ts` around lines 49 - 56, The directory listing query in useExplorerKeyboard is missing folders_first, which can cause keyboard navigation to use a different ordering than the rest of the views. Update the input object built from currentPath to include folders_first using the already destructured viewSettings, matching the behavior in useExplorerFiles, ColumnView, KnowledgeView, and SizeView so arrow-key navigation stays consistent with the displayed order.
🧹 Nitpick comments (4)
apps/tauri/src/index.css (1)
82-95: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueComment says "opaque" but overlay is 92% opaque.
The comment on Line 86 states "Force a full-window opaque backdrop," but
color-mix(in srgb, var(--color-app) 92%, transparent)leaves 8% transparency. Theblur(16px)makes it effectively opaque visually, so this is likely intentional for a frosted-glass effect. Consider updating the comment to say "near-opaque" or "frosted" for accuracy.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/tauri/src/index.css` around lines 82 - 95, The comment for the full-window backdrop in the `.fixed.inset-0.z-\[102\]` rule is inaccurate because the `background-color` still uses 92% opacity and the blur creates a frosted effect rather than a truly opaque one. Update the comment near this CSS block to describe it as near-opaque or frosted-glass instead of opaque, keeping the wording aligned with the actual styling in `index.css`.apps/tauri/vite.config.ts (1)
10-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueVersion selection is nondeterministic when multiple versions are hoisted.
readdirSync(...).find(entry => entry.startsWith(${packageName}@))returns the first directory in filesystem order. If Bun's store holds more than one version of a package, an arbitrary version is picked. Consider sorting/selecting deterministically (or asserting a single match) to avoid subtle build differences.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/tauri/vite.config.ts` around lines 10 - 16, The package resolution in the bun path lookup is nondeterministic because the current find on readdirSync can return an arbitrary version when multiple hoisted entries exist. Update the version selection logic in the path-resolution helper in vite.config.ts to deterministically choose the intended package version, such as by sorting matches or requiring exactly one match, and keep the existing error handling in the same helper so ambiguous matches do not silently pick different versions across builds.core/src/ops/files/query/directory_listing.rs (1)
231-239: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract duplicated sort-direction resolution into a helper.
The exact same
unwrap_or_else(default_sort_direction)expression is repeated verbatim inquery_indexed_directory_implandsort_files. Consolidating avoids drift if the fallback logic ever changes.♻️ Proposed refactor
impl DirectoryListingQuery { + fn resolved_sort_direction(&self) -> SortDirection { + self.input + .sort_direction + .clone() + .unwrap_or_else(|| Self::default_sort_direction(&self.input.sort_by)) + } + fn default_sort_direction(sort_by: &DirectorySortBy) -> SortDirection { match sort_by { DirectorySortBy::Name | DirectorySortBy::Type => SortDirection::Asc, DirectorySortBy::Modified | DirectorySortBy::Size => SortDirection::Desc, } }Then replace both call sites:
- let direction = self - .input - .sort_direction - .clone() - .unwrap_or_else(|| Self::default_sort_direction(&self.input.sort_by)); + let direction = self.resolved_sort_direction();Also applies to: 833-837
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@core/src/ops/files/query/directory_listing.rs` around lines 231 - 239, The sort-direction fallback logic is duplicated in query_indexed_directory_impl and sort_files, so extract the repeated self.input.sort_direction.clone().unwrap_or_else(|| Self::default_sort_direction(&self.input.sort_by)) into a shared helper on DirectoryListing. Update both call sites to use that helper and keep the ASC/DESC mapping unchanged so any future fallback change stays in one place.packages/interface/src/components/TabManager/TabManagerContext.tsx (1)
87-93: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate
SortOrdertype declaration.
sortUtils.tsalready exportsSortOrder = "asc" | "desc", andcontext.tsximports/re-exports it from there. This file instead redeclares an identical type independently, risking drift if the value set ever changes in only one place.Since
components/TabManageris lower-level thanroutes/explorer, importing fromsortUtils.tsdirectly would invert the existing dependency direction (routes already import types fromTabManagerContext). Consider relocatingSortOrder(and possiblydefaultSortOrder) to a shared location both modules can depend on without new coupling.Also applies to: 113-113
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/interface/src/components/TabManager/TabManagerContext.tsx` around lines 87 - 93, Remove the duplicate SortOrder declaration from TabManagerContext and reuse the single source of truth already defined in sortUtils.ts. Update TabManagerContext, TabExplorerState, and any related exports/imports (including defaultSortOrder if needed) so both TabManager and explorer code depend on a shared type instead of redefining it locally. Keep the existing dependency direction intact by moving any shared sort constants/types to a common location if TabManagerContext still needs them.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/tauri/src/index.css`:
- Around line 14-15: Stylelint is flagging Tailwind v4’s `@source` rule as an
unknown at-rule, so update the Stylelint configuration to ignore source under
scss/at-rule-no-unknown. Use the existing Stylelint config entry where other
Tailwind at-rules like tailwind, apply, and layer are listed, and add source to
that ignoreAtRules list so the `@source` declarations in index.css stop failing
lint.
In `@packages/interface/src/routes/explorer/views/KnowledgeView.tsx`:
- Around line 95-96: The directory listing query in KnowledgeView is passing
sortBy without the narrower DirectorySortBy type, which should be aligned with
the generated input expected by this request. Update the query construction in
KnowledgeView to cast or narrow sortBy to DirectorySortBy, matching the other
directory view call sites and keeping the sort input consistent with the
directory listing API.
---
Outside diff comments:
In `@packages/interface/src/routes/explorer/hooks/useExplorerKeyboard.ts`:
- Around line 49-56: The directory listing query in useExplorerKeyboard is
missing folders_first, which can cause keyboard navigation to use a different
ordering than the rest of the views. Update the input object built from
currentPath to include folders_first using the already destructured
viewSettings, matching the behavior in useExplorerFiles, ColumnView,
KnowledgeView, and SizeView so arrow-key navigation stays consistent with the
displayed order.
---
Nitpick comments:
In `@apps/tauri/src/index.css`:
- Around line 82-95: The comment for the full-window backdrop in the
`.fixed.inset-0.z-\[102\]` rule is inaccurate because the `background-color`
still uses 92% opacity and the blur creates a frosted effect rather than a truly
opaque one. Update the comment near this CSS block to describe it as near-opaque
or frosted-glass instead of opaque, keeping the wording aligned with the actual
styling in `index.css`.
In `@apps/tauri/vite.config.ts`:
- Around line 10-16: The package resolution in the bun path lookup is
nondeterministic because the current find on readdirSync can return an arbitrary
version when multiple hoisted entries exist. Update the version selection logic
in the path-resolution helper in vite.config.ts to deterministically choose the
intended package version, such as by sorting matches or requiring exactly one
match, and keep the existing error handling in the same helper so ambiguous
matches do not silently pick different versions across builds.
In `@core/src/ops/files/query/directory_listing.rs`:
- Around line 231-239: The sort-direction fallback logic is duplicated in
query_indexed_directory_impl and sort_files, so extract the repeated
self.input.sort_direction.clone().unwrap_or_else(||
Self::default_sort_direction(&self.input.sort_by)) into a shared helper on
DirectoryListing. Update both call sites to use that helper and keep the
ASC/DESC mapping unchanged so any future fallback change stays in one place.
In `@packages/interface/src/components/TabManager/TabManagerContext.tsx`:
- Around line 87-93: Remove the duplicate SortOrder declaration from
TabManagerContext and reuse the single source of truth already defined in
sortUtils.ts. Update TabManagerContext, TabExplorerState, and any related
exports/imports (including defaultSortOrder if needed) so both TabManager and
explorer code depend on a shared type instead of redefining it locally. Keep the
existing dependency direction intact by moving any shared sort constants/types
to a common location if TabManagerContext still needs them.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: c3d1264d-391e-4901-bfee-907c17f4ba6a
⛔ Files ignored due to path filters (1)
packages/ts-client/src/generated/types.tsis excluded by!**/generated/**,!**/generated/**
📒 Files selected for processing (18)
apps/cli/src/domains/file/mod.rsapps/tauri/src/index.cssapps/tauri/src/stubs/debug.tsapps/tauri/src/stubs/spacebot-api-client.tsapps/tauri/vite.config.tscore/src/ops/files/query/directory_listing.rscore/tests/normalized_cache_fixtures_test.rspackages/interface/src/components/TabManager/TabManagerContext.tsxpackages/interface/src/routes/explorer/ExplorerView.tsxpackages/interface/src/routes/explorer/context.tsxpackages/interface/src/routes/explorer/hooks/useExplorerFiles.tspackages/interface/src/routes/explorer/hooks/useExplorerKeyboard.tspackages/interface/src/routes/explorer/sortUtils.tspackages/interface/src/routes/explorer/views/ColumnView/Column.tsxpackages/interface/src/routes/explorer/views/ColumnView/ColumnView.tsxpackages/interface/src/routes/explorer/views/KnowledgeView.tsxpackages/interface/src/routes/explorer/views/ListView/ListView.tsxpackages/interface/src/routes/explorer/views/SizeView/SizeView.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/tauri/src/stubs/debug.ts
| @source "../node_modules/@spacedrive/primitives/dist"; | ||
| @source "../node_modules/@spacedrive/ai/dist"; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Configure Stylelint to recognize Tailwind v4 @source at-rule.
Stylelint reports @source as an unknown at-rule (scss/at-rule-no-unknown). This is a false positive — @source is valid Tailwind v4 CSS syntax for specifying additional content sources. Add it to the ignore list in your Stylelint config to suppress the error.
🔧 Suggested Stylelint config fix
// In .stylelintrc or stylelint config:
{
"rules": {
"scss/at-rule-no-unknown": [true, {
"ignoreAtRules": ["source", "tailwind", "apply", "layer", "config", "plugin", "variant", "custom-variant", "utility"]
}]
}
}🧰 Tools
🪛 Stylelint (17.14.0)
[error] 14-14: Unexpected unknown at-rule "@source" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 15-15: Unexpected unknown at-rule "@source" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/tauri/src/index.css` around lines 14 - 15, Stylelint is flagging
Tailwind v4’s `@source` rule as an unknown at-rule, so update the Stylelint
configuration to ignore source under scss/at-rule-no-unknown. Use the existing
Stylelint config entry where other Tailwind at-rules like tailwind, apply, and
layer are listed, and add source to that ignoreAtRules list so the `@source`
declarations in index.css stop failing lint.
Source: Linters/SAST tools
| sort_by: sortBy, | ||
| sort_direction: toSortDirection(sortOrder), |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check the directory listing query input type for sort_by field
rg -n "sort_by" --type=ts -g '!**/node_modules/**' -C2 packages/ | head -60Repository: spacedriveapp/spacedrive
Length of output: 4685
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the view file and the generated query types around sort_by/sortBy.
FILE=packages/interface/src/routes/explorer/views/KnowledgeView.tsx
TYPES=packages/ts-client/src/generated/types.ts
printf '\n## KnowledgeView.tsx outline\n'
ast-grep outline "$FILE" --view expanded || true
printf '\n## KnowledgeView.tsx relevant lines\n'
sed -n '1,180p' "$FILE" | cat -n
printf '\n## Generated types around DirectorySortBy / sort_by\n'
rg -n "DirectorySortBy|sort_by: DirectorySortBy|type SortBy|export type SortBy" "$TYPES" -n -C2Repository: spacedriveapp/spacedrive
Length of output: 6605
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Determine the type of `sortBy` from explorer context and the directory query input type.
CONTEXT_FILE=packages/interface/src/routes/explorer/context.ts
QUERY_FILE=packages/interface/src/routes/explorer/views/KnowledgeView.tsx
TYPES=packages/ts-client/src/generated/types.ts
printf '\n## useExplorer / sortBy definitions\n'
ast-grep outline "$CONTEXT_FILE" --view expanded || true
rg -n "sortBy|sortOrder|DirectorySortBy|MediaSortBy|SortBy" "$CONTEXT_FILE" "$QUERY_FILE" "$TYPES" -C2
printf '\n## Query type for files.directory_listing\n'
rg -n "files\.directory_listing|directory_listing|sort_by: DirectorySortBy" "$TYPES" -C3Repository: spacedriveapp/spacedrive
Length of output: 2812
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the explorer context/provider and inspect the `sortBy` type.
fd -a 'context.ts' packages/interface/src/routes/explorer
fd -a 'context.tsx' packages/interface/src/routes/explorer
fd -a 'context.*' packages/interface/src/routes/explorer
printf '\n## Search for useExplorer / sortBy definitions\n'
rg -n "useExplorer|sortBy|sortOrder" packages/interface/src/routes/explorer -C3Repository: spacedriveapp/spacedrive
Length of output: 50380
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect how KnowledgeView is selected and whether it can see a MediaSortBy value.
rg -n "KnowledgeView|viewMode|SortBy =|export type SortBy|type ViewMode" \
packages/interface/src/routes/explorer -C2
printf '\n## context.tsx sort/view-mode definitions\n'
sed -n '1,240p' packages/interface/src/routes/explorer/context.tsx | cat -n
printf '\n## context.tsx sort handling section\n'
sed -n '600,760p' packages/interface/src/routes/explorer/context.tsx | cat -n
printf '\n## ExplorerView switch around KnowledgeView\n'
sed -n '1,220p' packages/interface/src/routes/explorer/ExplorerView.tsx | cat -nRepository: spacedriveapp/spacedrive
Length of output: 50380
Cast sortBy to DirectorySortBy for this query. KnowledgeView issues a directory listing request, so this value should be narrowed to match the generated input type and stay aligned with the other directory view call sites.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/interface/src/routes/explorer/views/KnowledgeView.tsx` around lines
95 - 96, The directory listing query in KnowledgeView is passing sortBy without
the narrower DirectorySortBy type, which should be aligned with the generated
input expected by this request. Update the query construction in KnowledgeView
to cast or narrow sortBy to DirectorySortBy, matching the other directory view
call sites and keeping the sort input consistent with the directory listing API.
1 participant
Summary
Test plan