refactor: swap out dropdown with reka components #1245
Conversation
WalkthroughThe pull request updates various UI components by deprecating older dropdown mechanisms and replacing them with new implementations using the Changes
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
api/src/unraid-api/unraid-file-modifier/modifications/log-viewer.modification.ts (1)
27-29: Remove unnecessary constructor.This constructor doesn't add any functionality beyond calling the parent constructor, making it redundant.
- constructor(logger: Logger) { - super(logger); - }🧰 Tools
🪛 Biome (1.9.4)
[error] 27-29: This constructor is unnecessary.
Unsafe fix: Remove the unnecessary constructor.
(lint/complexity/noUselessConstructor)
unraid-ui/src/components/common/sheet/Sheet.vue (1)
27-27: Modified type assertion for forwarded propsAdded
as anytype assertion touseForwardPropsEmitsresult.Consider using a more specific type if possible to maintain type safety instead of
any.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (57)
.github/workflows/release-production.yml(1 hunks).release-please-manifest.json(1 hunks)api/CHANGELOG.md(1 hunks)api/package.json(4 hunks)api/src/core/pubsub.ts(1 hunks)api/src/graphql/schema/utils.ts(1 hunks)api/src/unraid-api/unraid-file-modifier/modifications/log-viewer.modification.ts(1 hunks)api/src/unraid-api/unraid-file-modifier/unraid-file-modifier.service.ts(2 hunks)package.json(2 hunks)plugin/package.json(2 hunks)plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/LogViewer.page(0 hunks)unraid-ui/components.json(1 hunks)unraid-ui/package.json(4 hunks)unraid-ui/src/components/brand/brand-loading.variants.ts(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(2 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/index.ts(1 hunks)unraid-ui/src/components/common/popover/Popover.vue(1 hunks)unraid-ui/src/components/common/popover/PopoverContent.vue(2 hunks)unraid-ui/src/components/common/popover/PopoverTrigger.vue(1 hunks)unraid-ui/src/components/common/sheet/Sheet.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetClose.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetContent.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetDescription.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTitle.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTrigger.vue(1 hunks)unraid-ui/src/index.ts(3 hunks)unraid-ui/src/lib/utils.ts(1 hunks)unraid-ui/src/styles/globals.css(2 hunks)unraid-ui/stories/components/common/DropdownMenu.stories.ts(3 hunks)unraid-ui/stories/components/common/Popover.stories.ts(1 hunks)unraid-ui/tailwind.config.ts(2 hunks)web/components/Activation/Modal.vue(1 hunks)web/components/Activation/Steps.vue(2 hunks)web/components/Notifications/Sidebar.vue(1 hunks)web/components/UserProfile.ce.vue(1 hunks)web/components/UserProfile/Dropdown.vue(0 hunks)web/components/UserProfile/DropdownConnectStatus.vue(2 hunks)web/components/UserProfile/DropdownContent.vue(1 hunks)web/components/UserProfile/DropdownLaunchpad.vue(1 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)web/package.json(3 hunks)web/pages/index.vue(3 hunks)web/pages/webComponents.vue(1 hunks)web/pages/welcome.vue(1 hunks)
💤 Files with no reviewable changes (2)
- plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/LogViewer.page
- web/components/UserProfile/Dropdown.vue
✅ Files skipped from review due to trivial changes (12)
- .release-please-manifest.json
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue
- unraid-ui/src/lib/utils.ts
- plugin/package.json
- package.json
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue
- unraid-ui/src/components/common/sheet/SheetClose.vue
- unraid-ui/src/components/common/sheet/SheetTrigger.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- web/pages/index.vue
🧰 Additional context used
🧠 Learnings (1)
web/pages/welcome.vue (1)
Learnt from: pujitm
PR: unraid/api#1143
File: web/components/DummyServerSwitcher.vue:16-19
Timestamp: 2025-03-19T19:45:07.050Z
Learning: The DummyServerSwitcher component in web/components/DummyServerSwitcher.vue is a development tool for testing different server states, and includes intentional debug elements to aid development.
🧬 Code Definitions (2)
api/src/graphql/schema/utils.ts (1)
api/src/core/pubsub.ts (1) (1)
pubsub(24-24)
api/src/unraid-api/unraid-file-modifier/unraid-file-modifier.service.ts (1)
api/src/unraid-api/unraid-file-modifier/modifications/log-viewer.modification.ts (1) (1)
LogViewerModification(10-61)
🪛 Biome (1.9.4)
api/src/unraid-api/unraid-file-modifier/modifications/log-viewer.modification.ts
[error] 27-29: This constructor is unnecessary.
Unsafe fix: Remove the unnecessary constructor.
(lint/complexity/noUselessConstructor)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (108)
api/src/unraid-api/unraid-file-modifier/unraid-file-modifier.service.ts (2)
7-7: Import looks good.The import of
LogViewerModificationfollows the established pattern for modification imports in this file.
46-46: Approved, but note positioning.
LogViewerModificationis added as the first item in the modification array. This means it will be the first modification to be loaded and applied. If there's a specific reason for this ordering (like dependencies between modifications), that's great. Otherwise, consider if appending to the end might be more consistent with how new modifications are typically added.api/src/unraid-api/unraid-file-modifier/modifications/log-viewer.modification.ts (6)
1-9: Imports are appropriate.All necessary modules are imported for the functionality of this modification class.
10-25: Well-structured class definition.The class properties are clearly defined, and the
logViewerConfigstring template is appropriately structured. Good use oftrimStart()to remove leading whitespace.
31-41: Good implementation ofgeneratePatch.The method correctly handles both cases where the file exists or doesn't exist, and creates an appropriate patch.
43-49: Clear logic inshouldApply.The method clearly determines when to apply the modification based on file existence and provides appropriate reasons.
51-55: Solid implementation ofapply.The method follows a good pattern by calling
rollbackfirst to ensure a clean state before applying the new configuration.
57-60: Effectiverollbackimplementation.The method properly removes both the applied patch and the actual configuration file, with appropriate error handling using
force: true.web/components/Notifications/Sidebar.vue (1)
131-131: Added right side positioning for the notifications panelAdding
side="right"property ensures the notifications panel appears from the right side of the screen, improving the UI layout and user experience.unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue (2)
7-7: Updated import source from radix-vue to reka-uiThe import source has been changed to use the 'reka-ui' library instead of 'radix-vue', aligning with the PR objective to swap out dropdown components.
9-10: Removed unnecessary semicolonsRemoved semicolons from the end of statements for consistent code style.
Also applies to: 12-12
api/CHANGELOG.md (1)
1-12: Changelog Updated for Release v4.3.1The changelog now includes a new release section for version 4.3.1 with its proper release date, linked comparison, and a bug fix entry for the stepper functionality. The markdown formatting and version ordering appear correct. Please confirm that the release date and commit details (e.g., the commit hash and issue reference) are accurate and align with the other project documentation.
api/src/graphql/schema/utils.ts (1)
71-71:✅ Verification successful
API method update: asyncIterator → asyncIterableIterator
This change modifies the return value of the
subscribemethod to useasyncIterableIteratorinstead ofasyncIterator. This appears to be an intentional migration to a more standardized API pattern.
🏁 Script executed:
#!/bin/bash # Check how pubsub is defined in core/pubsub.ts rg -A 3 "asyncIterableIterator" api/src/core/Length of output: 144
Verified update: Usage of
asyncIterableIteratoris correctThe refactor updating
asyncIteratortoasyncIterableIteratoris intentional and consistent with the definition inapi/src/core/pubsub.ts, as confirmed by your grep output. No further changes are necessary..github/workflows/release-production.yml (1)
36-36:✅ Verification successful
Node.js version update to 22.x
The GitHub Actions workflow has been updated to use Node.js 22.x. This is a major version update from the previous 20.x.
🌐 Web query:
What is the current LTS version of Node.js?💡 Result:
The current Long-Term Support (LTS) version of Node.js is Node.js 22.x (codename "Jod"), which entered Active LTS status in October 2024 and will be supported until April 2027[1][3][5]. This version offers critical updates, security patches, and stability for production environments, with key features such as:
- Integrated WebSocket client (enabled by default)[2][4]
- V8 JavaScript engine updates (version 12.4) for enhanced performance[2][4]
- Stable Watch Mode (auto-restarts Node.js on file changes)[2]
- FileSystem glob/globSync functions for pattern matching[2][4]
Node.js 20.x (codename "Iron") has transitioned to Maintenance LTS[6][7], receiving only critical fixes until its end-of-life in April 2026[9][13]. Meanwhile, Node.js 18.x reached end-of-life on April 30, 2025, and is no longer supported[1][9][13]. Developers are advised to upgrade to Node.js 22.x for continued security, performance improvements, and compatibility with modern tools[1][5][8].
For download links and installation instructions, visit the Node.js official website[8].
Citations:
- 1: https://devblogs.microsoft.com/azure-sdk/announcing-the-end-of-support-for-node-js-18-x-in-the-azure-sdk-for-javascript/
- 2: https://nodejs.org/en/blog/announcements/v22-release-announce
- 3: https://nodejs.org/en/about/previous-releases
- 4: https://blog.risingstack.com/update-node-js-latest-version/
- 5: http://nodesource.com/blog/Node.js-v22-Long-Term-Support-LTS/
- 6: https://nodejs.org/en/blog/release/v20.9.0
- 7: https://www.herodevs.com/blog-posts/node-js-end-of-life-dates-you-should-be-aware-of
- 8: https://nodejs.org/en
- 9: https://www.herodevs.com/blog-posts/node-js-18-end-of-life-what-it-means-and-how-to-prepare
- 10: https://endoflife.date/nodejs
- 11: https://aws.amazon.com/blogs/devops/announcing-the-end-of-support-for-node-js-14-x-and-16-x-in-aws-cdk/
- 12: https://nodejs.org/en/blog/vulnerability/updates-cve-for-end-of-life
- 13: https://nodejs.org/en/blog/announcements/v18-release-announce
- 14: https://github.com/nodejs/Release
Verification Successful: Node.js 22.x Confirmed as Current LTS
The update in the workflow file is valid and correctly reflects the current LTS version.
- Verified that Node.js 22.x is the current LTS version per the latest information.
- The diff snippet (
node-version: '22.x') accurately represents the intended update.web/package.json (3)
3-3: Version bump to 4.3.1The package version has been incremented from 4.3.0 to 4.3.1, following semantic versioning principles. This suggests a patch update with backward-compatible bug fixes.
123-123: Updated package manager versionThe PNPM version has been updated from 10.6.4 to 10.6.5, which is a patch update.
107-107:✅ Verification successful
New dependency: reka-ui
Added reka-ui v2.0.2 as a dependency. This library is likely needed for the dropdown component changes mentioned in the PR objectives.
🌐 Web query:
What is reka-ui and what are its main features?💡 Result:
Reka UI is an open-source UI component library designed for building high-quality, accessible web applications with Vue.js. It provides a collection of unstyled primitives that serve as foundational building blocks for custom design systems, emphasizing accessibility and developer flexibility[7][10].
Key Features
1. Accessibility-Centric Design
- WAI-ARIA Compliance: Implements accessibility standards for screen readers and assistive technologies[10].
- Keyboard Navigation: Built-in support for intuitive keyboard interactions[3][10].
- Focus Management: Automatic handling of focus states for interactive elements[3][10].
2. Component Library
- 55+ Primitive Components: Includes essentials like accordions, buttons, and form elements, designed as low-level building blocks[2][10].
- Headless Architecture: Unstyled components allow full customization via CSS or Tailwind[7][10].
- Vue 3 Optimization: Native support for Vue 3’s Composition API and TypeScript[1][7].
3. Developer Experience
- Theming System: Supports dynamic styling through Tailwind Variants and semantic design tokens[3].
- Cross-Framework Compatibility: Works in Nuxt.js projects and standalone Vue applications[1][2][7].
- TypeScript Integration: Auto-completion for props and theme configurations[7].
4. Performance and Ecosystem
- Tailwind CSS v4 Integration: Delivers 5x faster runtime performance and 100x faster builds compared to prior versions[2][3].
- Active Community: 4.4k+ GitHub stars and 600k+ monthly downloads, backed by contributions from over 130 developers[10][12].
Comparison with Predecessors
Feature Previous Libraries (e.g., Headless UI) Reka UI Component Count Limited primitives 55+ foundational components[2][7] Accessibility Basic compliance Full WAI-ARIA support[3][10] Styling Approach Static configurations Dynamic Tailwind Variants[3] Reka UI’s design philosophy prioritizes flexibility and inclusivity, enabling developers to create applications that are both visually customizable and functionally accessible[7][10]. Its adoption in Nuxt UI v3 underscores its role in modern Vue.js ecosystems, offering performance gains and improved maintainability[1][3].
Citations:
- 1: https://ui.nuxt.com/getting-started
- 2: https://masterdaweb.com/en/blog/nuxt-ui-3-whats-new-in-this-new-version/
- 3: https://nuxt.com/blog/nuxt-ui-v3
- 4: https://reka.js.org/docs/introduction
- 5: https://reka.js.org/docs/motivation
- 6: https://github.com/nuxt/ui
- 7: https://nuxt.com/modules/reka-ui
- 8: https://github.com/unovue/reka-ui
- 9: https://reka.js.org/docs/concepts/components
- 10: https://reka-ui.com
- 11: https://github.com/unovue/reka-ui/blob/v2/README.md
- 12: https://github.com/unovue/reka-ui/activity
Review Verified: Dependency
reka-uiis Correctly AddedThe
reka-uidependency (v2.0.2) has been added toweb/package.jsonas required. Based on the gathered web information,reka-uiis an open-source Vue.js UI library emphasizing accessibility, unstyled primitive components, and support for Vue 3, which aligns well with the dropdown component changes referenced in the PR objectives. No further changes are necessary at this time.web/components/Activation/Modal.vue (2)
33-34: Button styling property updated to follow component library conventions.The change from
btnStyletovariantaligns with modern component library conventions for button styling.
41-42: Button styling property updated for consistency.This change maintains consistency with the styling update made to the first button.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue (2)
2-2: Import source changed from radix-vue to reka-ui.The component source library has been updated, which appears to be part of the dropdown refactoring mentioned in the PR title.
4-4: Semicolon removed for consistent code style.Minor style improvement to maintain consistency across the codebase.
web/components/UserProfile/DropdownConnectStatus.vue (3)
18-18: Added helper function for consistent BrandLoading rendering.Good refactoring to create a reusable helper function that ensures consistent props for the loading component.
29-31: Updated loading icon implementation and sizing.Changed from direct component reference to the helper function and updated size class from 'w-16px' to 'w-4'.
37-39: Updated loading icon implementation and sizing.Same update as the previous loading state - using the helper function and consistent sizing.
api/src/core/pubsub.ts (1)
31-31:✅ Verification successful
Updated pubsub subscription method to use asyncIterableIterator.
The change from
asyncIteratortoasyncIterableIteratorupdates the subscription implementation. This change likely provides better TypeScript compatibility or improves how the subscription data stream is consumed.
🏁 Script executed:
#!/bin/bash # Check GraphQL PubSub library documentation for asyncIterableIterator vs asyncIterator rg -A 2 -B 2 "asyncIterableIterator|asyncIterator" --type tsLength of output: 2411
Update Verified:
asyncIterableIteratorUsage is Consistent and Correct
- The change in
api/src/core/pubsub.tsnow returnspubsub.asyncIterableIterator(channel), which aligns with its usage across the codebase.- Verification confirms that similar patterns are applied in both
api/src/graphql/schema/utils.tsand within the subscription logic inlogs.resolver.ts.- This update improves TypeScript compatibility and the overall subscription data stream handling.
web/pages/webComponents.vue (1)
60-62: Component addition looks good!The addition of the ActivationCodeCe section follows the existing pattern of other component sections in this file. This provides a good showcase for the new welcome modal component.
web/components/UserProfile/DropdownLaunchpad.vue (1)
25-25: Layout approach improved with flex and growThe change from fixed width constraints to a flexible layout using
flex flex-col growis a good improvement. This allows the component to adapt to its container size more effectively.unraid-ui/src/components/brand/brand-loading.variants.ts (1)
3-24: Enhanced size variants improve component flexibilityThe addition of the
sizevariant with multiple options (sm,md,lg,full,custom) makes the BrandLoading component more versatile. The code is also better formatted for readability.unraid-ui/src/components/common/popover/PopoverTrigger.vue (1)
2-2:✅ Verification successful
Import change from radix-vue to reka-ui
The change to import from 'reka-ui' instead of 'radix-vue' appears to be part of a dependency migration. Ensure this change is consistent across all components that use these popover elements.
🏁 Script executed:
#!/bin/bash # Check for mixed usage of radix-vue and reka-ui in popover components echo "Checking for mixed imports in popover-related files:" rg -l "radix-vue" --type vue | grep -i popover rg -l "reka-ui" --type vue | grep -i popoverLength of output: 262
Attention: Confirm Consistent Dependency Migration
The import has been updated in
unraid-ui/src/components/common/popover/PopoverTrigger.vue:import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'However, our initial search encountered file type recognition issues with ripgrep. Please re-run the above script (or verify manually) to ensure no Vue files still import from
'radix-vue'. If any instances are found, update them to use'reka-ui'.
🏁 Script executed:
#!/bin/bash echo "Searching for 'radix-vue' in .vue files:" rg "radix-vue" -g "*.vue" echo "Searching for 'reka-ui' in .vue files:" rg "reka-ui" -g "*.vue"Length of output: 8091
Action: Confirm Consistency of Popover Dependency Migration
- Verified that all popover-related components—PopoverTrigger.vue, PopoverContent.vue, and Popover.vue—are now importing from
'reka-ui'.- No lingering references to
'radix-vue'were found in files related to popover elements.- Other components (e.g., tooltip, tabs) still using
'radix-vue'appear unrelated to this migration effort.unraid-ui/src/components/common/dropdown-menu/index.ts (2)
1-1: Added export for DropdownMenu componentThis export makes the DropdownMenu component available to consumers of this module, aligning with the PR's objective to swap out the dropdown with radix components.
16-17: Updated exports from 'reka-ui' instead of 'radix-vue'Good change to source these components from 'reka-ui' instead of 'radix-vue'. Additionally, the new DropdownMenuArrow export will be useful for the dropdown styling.
unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue (2)
4-7: Updated import source to 'reka-ui'Correctly updated the import source from 'radix-vue' to 'reka-ui', maintaining consistency with other imports.
12-12: Enhanced type safety with generic parametersGood enhancement to type safety by specifying the generic parameters for useForwardPropsEmits. This explicitly defines that the component emits an 'update:open' event.
web/components/UserProfile/DropdownMenu.vue (1)
19-36: Well-structured dropdown component implementationThis is a good implementation of a dropdown component using the radix components. The conditional rendering based on server state is a clean approach, and the use of teleport for positioning is appropriate.
web/components/UserProfile/DropdownContent.vue (1)
192-192: Improved responsive layout with 'grow' classGood change from fixed width constraints to using 'grow'. This allows the dropdown content to adapt to its container size, creating a more responsive layout.
unraid-ui/src/components/common/popover/Popover.vue (2)
2-3: Import updates to use reka-ui instead of radix-vueThe imports have been updated to source the types and components from 'reka-ui' instead of 'radix-vue', which aligns with the PR objective of refactoring to use radix components.
8-8: Improved type safety for forwarded props and emitsThe useForwardPropsEmits function now includes generic type parameters, specifically defining the 'update:open' event, which enhances type safety for the emitted events.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue (3)
2-4: Import updates to use reka-ui instead of radix-vueThe imports have been updated to source the components and utilities from 'reka-ui' instead of 'radix-vue', consistent with the other dropdown component changes.
6-6: Props definition reformatted to a single lineThe props definition has been condensed to a single line, improving code conciseness while maintaining the same functionality.
20-20: Class binding reformatted to a single lineThe class binding has been reformatted to a single line, maintaining the same styling logic but improving readability.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue (2)
2-9: Import updates and reorganizationThe imports have been reorganized and updated to source from 'reka-ui' instead of 'radix-vue', consistent with the dropdown component refactoring approach.
25-28: Class binding reformatted for readabilityThe class binding in the template has been reformatted with consistent indentation while preserving the same styling logic.
web/components/UserProfile.ce.vue (1)
142-146: Replaced custom dropdown with encapsulated UpcDropdownMenu componentThe OnClickOutside logic has been replaced with a more encapsulated UpcDropdownMenu component. This is a good refactoring choice as it:
- Simplifies the component by moving dropdown logic to a dedicated component
- Uses slot-based composition for the trigger, which is more Vue-idiomatic
- Eliminates the need for manually handling outside clicks
This change should make the code more maintainable and follows modern Vue composition patterns.
unraid-ui/src/components/common/sheet/SheetDescription.vue (3)
2-4: Import updates look good.The change from radix-vue to reka-ui for DialogDescription aligns with the PR objective of refactoring dropdown components. Import ordering is also improved.
6-6: Quote style update is consistent.Changed from double quotes to single quotes for HTML attribute type definition.
16-16: Template formatting improved.Condensed multi-line template to a single line, which improves readability for this simple component.
unraid-ui/stories/components/common/Popover.stories.ts (3)
1-18: Great addition of Storybook documentation.The metadata setup for the Popover component follows best practices with proper title, component reference, and control types.
20-41: Default story implementation looks good.The example demonstrates basic Popover functionality with a clear trigger button and content structure.
43-64: Custom positioning story is valuable.This example shows how to position the popover to the right side with custom offset, which is helpful for users learning the component API.
unraid-ui/package.json (4)
3-3: Version bump is appropriate.Minor version increment from 4.3.0 to 4.3.1 for this refactoring change.
53-53: Addition of reka-ui dependency is correct.This addition supports the refactoring to use radix components as seen in other files.
80-80: ESLint plugin update is good.Updated to the latest major version (10.0.0) of eslint-plugin-vue.
122-122: Package manager version update looks good.Updated from pnpm@10.6.4 to pnpm@10.6.5.
api/package.json (4)
3-3: Version bump matches UI package.Consistent minor version increment from 4.3.0 to 4.3.1 across packages.
102-102: Library updates look good.Updated graphql-subscriptions (2.0.0 → 3.0.0) and ini (4.1.2 → 5.0.0). Both are major version changes but are likely part of routine maintenance.
Also applies to: 107-107
204-204: Package manager version matches UI update.Consistent update to pnpm@10.6.5 across packages.
66-66:❓ Verification inconclusive
NestJS passport major version update.
Updated from 10.0.3 to 11.0.0. This is a major version change and should be tested thoroughly.
Please verify that this major version update doesn't introduce breaking changes:
🌐 Web query:
What are the breaking changes in @nestjs/passport 11.0.0?💡 Result:
The breaking changes in @nestjs/passport 11.0.0 primarily align with updates in the broader NestJS ecosystem and underlying dependencies. While explicit changelogs for this version are sparse, key changes can be inferred from the context:
1. Peer Dependency Updates
- Requires NestJS v10+ (up from prior versions), introducing compatibility with new NestJS core features and architectural changes[1][6].
- Aligns with Express v5 and Fastify v5, affecting route definitions (e.g., named wildcards like
*splatreplacing*in routes)[3].
2. AuthGuard and Strategy Changes
request.logInoptions: Explicitly passes session properties likekeepSessionInfoto the Passport session manager, ensuring compatibility with Express v5’s session handling[1][6].- Type safety improvements: Stricter type assertions for strategies and guards, which may affect projects relying on implicit type casting[1].
3. Dependency Updates
- Security patches: Includes updates to address vulnerabilities in transitive dependencies like
http-cache-semantics[1].- Package manager updates: Drops support for older Node.js versions (now requires Node.js v18+)[1][5].
While not directly part of @nestjs/passport, related ecosystem changes in NestJS 11 (e.g., JSON logging, Express v5 route syntax) may indirectly affect authentication flows. Developers should audit route definitions and session management logic when upgrading[3][12].
Citations:
- 1: https://github.com/nestjs/passport/releases
- 2: https://www.jsdocs.io/package/@nestjs/passport
- 3: https://trilon.io/blog/announcing-nestjs-11-whats-new
- 4: https://www.npmjs.com/package/@nestjs/jwt
- 5: https://cloudsmith.com/navigator/npm/@nestjs/passport
- 6: https://github.com/nestjs/passport
- 7: https://www.npmjs.com/package/@nestjs/passport?activeTab=versions
- 8: https://classic.yarnpkg.com/en/package/@nestjs/passport
- 9: nestjs/nest#14601
- 10: https://unpkg.com/browse/@nestjs/passport@9.0.0/package.json
- 11: https://docs.nestjs.com/recipes/passport
- 12: https://docs.nestjs.com/migration-guide
- 13: https://security.snyk.io/package/npm/@nestjs%2Fpassport
Attention: Verify Compatibility with @nestjs/passport 11.0.0
File: api/package.json
Line: 66The dependency has been updated from 10.0.3 to 11.0.0. This major version upgrade introduces several breaking changes:
- Peer Dependency Changes: Now requires NestJS v10+, so confirm that the rest of your codebase is aligned with this.
- AuthGuard & Strategy Updates: Adjustments, such as changes in how
request.logInis handled and stricter type assertions, may affect authentication flows.- Dependency Updates: The package now requires Node.js v18+ and includes updates addressing security patches and underlying libraries.
Please ensure thorough testing of authentication logic, session management, and overall compatibility with the updated NestJS ecosystem.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (3)
2-10: Import source changed from radix-vue to reka-uiThe component now imports from 'reka-ui' instead of 'radix-vue', which aligns with the PR's objective to refactor dropdowns with Radix components. The import organization has also been improved with utility imports first.
13-13: Consistent quote style in props type definitionThe props definition has been updated to use single quotes consistently for the type definition.
33-36: Added positioning constraint and updated stylingTwo key changes here:
- Added
side="bottom"prop to explicitly position the dropdown- Removed the
borderclass from the stylingThis ensures consistent positioning and styling across all dropdown menus.
unraid-ui/src/components/common/sheet/SheetContent.vue (4)
2-13: Improved import organization and updated package sourceThe imports have been reorganized with utility imports first and the DialogContentEmits type is now imported from 'reka-ui' instead of 'radix-vue', consistent with the dropdown components.
16-18: Consistent quote style in SheetContentProps interfaceThe type definitions now use single quotes consistently, improving code style uniformity.
25-26: Consistent quote style in default propsDefault prop values now use single quotes, maintaining style consistency throughout the component.
32-32: Simplified computed property implementationThe sheetClass computed property has been simplified to a single line, making the code more concise while maintaining the same functionality.
unraid-ui/src/styles/globals.css (2)
38-46: Added chart color variables for light themeNew CSS custom properties for chart colors have been added to the light theme. This enhances the styling capabilities for chart elements.
79-87: Added chart color variables for dark themeCorresponding chart color variables have been added to the dark theme with different HSL values that are appropriate for dark mode display.
unraid-ui/stories/components/common/DropdownMenu.stories.ts (3)
1-9: Consistent quote style in importsThe import statements now use single quotes consistently, improving code style uniformity.
14-20: Enhanced component documentation and controlsAdded two important improvements:
tags: ['autodocs']for automatic documentation generationargTypeswith control for theopenstate, providing a way to manipulate the dropdown's open state in StorybookThese additions will improve the component's usability in Storybook.
67-82: Improved template formattingThe template's indentation and formatting has been improved for better readability, especially for the closing tags of DropdownMenuContent and DropdownMenu.
web/components/Activation/Steps.vue (5)
24-24: Made activeStep prop optional with default valueGood change - making activeStep optional provides more flexibility while maintaining backward compatibility with the default value of 1.
78-79: Added index to v-for directiveThe addition of the index parameter in the v-for loop is a necessary improvement to support the conditional rendering of separators between steps.
81-81: Enhanced item stylingThe updated class attribute improves the component's layout and makes disabled items fully visible.
85-112: Improved StepperTrigger structureGood restructuring of the StepperTrigger component. The new implementation:
- Creates a cleaner visual hierarchy
- Improves button styling with conditional states
- Properly organizes the title and description elements
This makes the component more maintainable and visually consistent.
114-114: Simplified separator logicBetter implementation of the separator conditional rendering using the index. This is more efficient than checking if the current step is the last step.
unraid-ui/components.json (3)
6-7: Streamlined file paths in tailwind configurationThe removal of leading
./in config paths simplifies and standardizes the path format.
14-17: Enhanced aliases configurationGood additions to the aliases object:
- Added
composables: "@/composables"for better component organization- Added
lib: "@/lib"for shared utilities- Updated
utilspath to use the new structureThese changes improve module organization and make imports more consistent.
18-18: Added iconLibrary configurationSetting
iconLibraryto "lucide" standardizes the icon library used throughout the project.unraid-ui/src/components/common/sheet/Sheet.vue (3)
2-3: Updated import sources and formattingChanged imports from
radix-vuetoreka-uiand standardized to single quotes. This aligns with the library migration mentioned in the PR objectives.
5-5: Standardized string literals to single quotesConsistent use of single quotes for string literals improves code consistency.
Also applies to: 11-11
17-21: Standardized quotes in DOM manipulation methodsConsistent use of single quotes in
setAttributeandcreateElementmethods.unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue (5)
2-4: Updated imports and formattingGood reorganization of imports:
- Added explicit import for
cnutility- Changed import source from
radix-vuetoreka-ui- Standardized to single quotes
This aligns with the library migration mentioned in the PR objectives.
6-6: Improved prop type definitions formattingChanged semicolon to comma in prop type definition for better consistency with TypeScript standards.
8-12: Simplified delegatedProps computed propertyRemoved unnecessary line breaks and trailing semicolon for cleaner code.
14-14: Simplified forwardedProps assignmentRemoved unnecessary trailing semicolon.
20-24: Enhanced dropdown item stylingThe updated class binding includes:
- Added
gap-2to create proper spacing between icon and text- Updated SVG sizing to use the modern
size-4utility- Maintained conditional classes for inset items
These improvements make the dropdown items more visually consistent and accessible.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue (5)
2-3: Good job adding the utility imports separatelyAdding
cnandCheckimports at the top improves organization by separating utilities from component imports.
10-10: Library migration looks goodSuccessfully migrated from radix-vue to reka-ui while maintaining component functionality.
13-14: Nice prop/emit definition simplificationSimplified the multiline definitions to single lines improves readability while maintaining type safety.
17-20: Clean computed property refactoringThe simplified computed property looks good and maintains the same functionality.
28-31: Improved class binding formattingConsolidated the class bindings into a more readable format while preserving the same styling logic.
unraid-ui/src/components/common/popover/PopoverContent.vue (4)
2-11: Clean import restructuringGood job organizing imports and migrating from radix-vue to reka-ui. The addition of PopoverArrow is a nice enhancement.
17-20: Props with defaults look goodClean formatting of props with default values for align and sideOffset.
38-39: Removed border class from stylingRemoved the border class from the PopoverContent. Make sure this is an intentional styling change.
44-44: Nice addition of the PopoverArrowAdding the PopoverArrow with rounded corners improves the visual connection between the popover and its trigger element.
unraid-ui/src/components/common/sheet/SheetTitle.vue (3)
2-4: Import reorganization looks goodSuccessfully migrated from radix-vue to reka-ui and improved import organization.
6-6: Consistent quote usageSwitched to single quotes for HTML attributes type which matches the style in other files.
16-16: Clean template formattingConsolidated the DialogTitle component onto a single line, improving readability.
unraid-ui/tailwind.config.ts (6)
3-3: Good addition of animation supportAdding tailwindcss-animate will provide useful animation utilities across the application.
7-7: Added dark mode supportSetting darkMode to ['class'] enables class-based dark mode toggling, which is the recommended approach for controlled theme switching.
13-13: Updated content pathsRemoved tsx from stories file extensions. Make sure there are no TypeScript/JSX story files that will be missed by this change.
40-40: Animation plugin added correctlyThe tailwindcssAnimate plugin is correctly added to the plugins array.
42-92: Excellent theme extension systemThe implementation of a comprehensive theming system with:
- Variable-based border radius
- HSL color system with semantic naming
- Support for foreground variants
- Chart color palette
This approach allows for easy theme customization through CSS variables and maintains consistent design across the application.
93-93: Type-safe configurationUsing
satisfies Partial<Config>ensures type safety while allowing for partial configuration. Good practice!unraid-ui/src/index.ts (5)
16-32: Imports enhanced with new dropdown menu components.The addition of
DropdownMenuArrowandDropdownMenuPortalcomponents from the dropdown-menu module will support the dropdown refactoring.
34-34: New Popover components imported.Good addition of the Popover component family which provides a more flexible UI element for contextual content.
95-110: Export list updated with new dropdown components.The dropdown menu exports have been reorganized and enhanced with the newly imported components, maintaining consistency between imports and exports.
115-117: Popover components explicitly exported.Note that while these components are explicitly exported here, they're also covered by the wildcard export on line 166 (
export * from '@/components/common/popover'). The explicit exports provide better clarity for consumers of this module.
166-166: Existing wildcard export for Popover components.This existing line exports all components from the popover module, including the ones explicitly exported on lines 115-117. Both approaches together ensure maximum visibility and discoverability of these components.
mdatelle
force-pushed
the
fix/broken-dropdown-transition
branch
from
832ad1f to
80f5e55
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
unraid-ui/src/components/brand/brand-loading.variants.ts (1)
3-24: Enhanced flexibility with size variantsThe addition of size variants to the
brandLoadingVariantsimproves the component's flexibility by providing predefined width options (sm,md,lg,full) and acustomoption for special cases. This change aligns with the PR objective of modernizing UI components.However, I notice that while you've added the size variant, there's no default size specified in the
defaultVariantsobject. This means consumers will need to explicitly set a size when using this component.Consider adding a default size in the
defaultVariantsobject to ensure backward compatibility and prevent potential styling issues:defaultVariants: { variant: 'default', + size: 'md', },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (43)
unraid-ui/components.json(1 hunks)unraid-ui/package.json(1 hunks)unraid-ui/src/components/brand/brand-loading.variants.ts(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(2 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/index.ts(1 hunks)unraid-ui/src/components/common/popover/Popover.vue(1 hunks)unraid-ui/src/components/common/popover/PopoverContent.vue(2 hunks)unraid-ui/src/components/common/popover/PopoverTrigger.vue(1 hunks)unraid-ui/src/components/common/sheet/Sheet.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetClose.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetContent.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetDescription.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTitle.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTrigger.vue(1 hunks)unraid-ui/src/index.ts(3 hunks)unraid-ui/src/lib/utils.ts(1 hunks)unraid-ui/src/styles/globals.css(2 hunks)unraid-ui/stories/components/common/DropdownMenu.stories.ts(3 hunks)unraid-ui/stories/components/common/Popover.stories.ts(1 hunks)unraid-ui/tailwind.config.ts(2 hunks)web/components/Notifications/Sidebar.vue(1 hunks)web/components/UserProfile.ce.vue(1 hunks)web/components/UserProfile/Dropdown.vue(0 hunks)web/components/UserProfile/DropdownConnectStatus.vue(2 hunks)web/components/UserProfile/DropdownContent.vue(1 hunks)web/components/UserProfile/DropdownLaunchpad.vue(1 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)web/components/UserProfile/DropdownTrigger.vue(3 hunks)web/package.json(1 hunks)web/pages/index.vue(3 hunks)
💤 Files with no reviewable changes (1)
- web/components/UserProfile/Dropdown.vue
🚧 Files skipped from review as they are similar to previous changes (35)
- web/components/Notifications/Sidebar.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue
- unraid-ui/src/lib/utils.ts
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue
- unraid-ui/package.json
- web/components/UserProfile/DropdownLaunchpad.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue
- web/components/UserProfile/DropdownTrigger.vue
- unraid-ui/src/components/common/popover/Popover.vue
- unraid-ui/src/components/common/popover/PopoverTrigger.vue
- web/components/UserProfile/DropdownConnectStatus.vue
- unraid-ui/src/components/common/sheet/Sheet.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue
- unraid-ui/src/components/common/popover/PopoverContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue
- web/components/UserProfile/DropdownMenu.vue
- unraid-ui/src/components/common/sheet/SheetTitle.vue
- unraid-ui/src/components/common/sheet/SheetContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue
- unraid-ui/stories/components/common/Popover.stories.ts
- unraid-ui/src/components/common/sheet/SheetTrigger.vue
- unraid-ui/src/components/common/sheet/SheetClose.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue
- unraid-ui/src/index.ts
- web/components/UserProfile/DropdownContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue
- unraid-ui/src/components/common/sheet/SheetDescription.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue
- web/pages/index.vue
- unraid-ui/src/components/common/dropdown-menu/index.ts
- unraid-ui/src/styles/globals.css
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue
🧰 Additional context used
🧬 Code Definitions (1)
unraid-ui/stories/components/common/DropdownMenu.stories.ts (1)
unraid-ui/src/index.ts (1) (1)
DropdownMenu(95-95)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Cloudflare Pages
- GitHub Check: Test API
- GitHub Check: Build API
🔇 Additional comments (19)
web/package.json (1)
107-107: New Dependency Addition VerificationThe addition of
"reka-ui": "^2.0.2"is correctly included to support the refactor of the dropdown components. Please ensure that this version is compatible with the usage in components likeDropdownMenu.vueand that its API changes (if any) are properly reflected throughout the codebase.unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (4)
2-2: Import source updated correctly.The change from "radix-vue" to 'reka-ui' aligns with the PR objective to swap out dropdown components. The import of
cnutility is also properly added.Also applies to: 7-9
13-13: Props definition simplified.The props definition has been improved by removing the explicit
class: undefineddefault, making the code more concise.
33-33: Default positioning specified.Adding
side="bottom"provides a sensible default positioning for dropdown menus to appear below the trigger element.
36-36: Border style removed from dropdown.The 'border' class has been removed from the component's styling. This is a deliberate styling change that aligns with the component update.
web/components/UserProfile.ce.vue (1)
142-146: Clean dropdown component implementation.The switch to
UpcDropdownMenuwith a named slot for the trigger follows component composition best practices and eliminates the need for custom click-outside handling. Make sure the components are properly imported in the script section, as I don't see them listed there.unraid-ui/components.json (3)
6-7: Path formatting standardization looks good.Removing the leading
./from the tailwind paths creates more consistency in the configuration.
14-17: New aliases enhance code organization.The addition of aliases for
composablesandlibprovides better structure for imports. Make sure any existing imports affected by theutilspath change have been updated throughout the codebase.
18-18: Icon library configuration is a good addition.Explicitly setting
iconLibrarytolucidemakes the dependency clear for all components.unraid-ui/stories/components/common/DropdownMenu.stories.ts (4)
1-9: Clean import statements with consistent quote styleThe import statements use single quotes consistently, which aligns with modern JavaScript style conventions. The component imports follow a logical organization pattern.
12-14: Good addition of autodocs tagAdding the
tags: ['autodocs']property to the meta object enables Storybook's automatic documentation generation feature, which will create documentation pages for this component without additional configuration.
15-20: Proper control configuration for dropdown stateThe
argTypesdefinition for theopenproperty allows Storybook users to toggle the dropdown state directly in the UI. This improves the interactive documentation experience.
67-82: Fixed template indentationThe template indentation has been fixed for the closing tags of the
DropdownMenuContentandDropdownMenucomponents in theIconDropdownstory, improving readability and maintenance.unraid-ui/tailwind.config.ts (6)
3-3: Added animation support with tailwindcss-animateThe import of
tailwindcssAnimateadds animation capabilities to the Tailwind configuration, which is essential for interactive UI components like dropdowns.
7-7: Enabled class-based dark modeSetting
darkMode: ['class']configures Tailwind to use class-based dark mode instead of prefers-color-scheme media queries, giving you more control over when dark mode is applied.
40-40: Added animation plugin to TailwindThe
tailwindcssAnimateplugin has been registered, enabling animation classes that will be useful for dropdown transitions and other UI animations.
42-92: Comprehensive design system implementationThe extended theme configuration adds a robust design system using CSS variables for colors and border radius. This approach:
- Creates a consistent design language across components
- Supports theming through CSS variable changes
- Provides semantic color naming (e.g.,
primary,destructive)- Includes specialized chart colors for data visualization
This is an excellent foundation for component styling that will make the Radix dropdown components more consistent with your overall design.
93-93: Type-safe configuration with satisfies operatorUsing the
satisfies Partial<Config>ensures type checking while maintaining the inferred type of the configuration object, which is a good TypeScript practice.
13-13:❓ Verification inconclusive
Updated Storybook content pattern
The content pattern for Storybook stories has been updated to remove
.tsxextension. Verify that all your story files use the remaining extensions to ensure Tailwind correctly processes them.
🏁 Script executed:
#!/bin/bash # Check if there are any .tsx story files that might be missed by the new content pattern find ./stories -name "*.tsx" | grep "stories.tsx"Length of output: 94
Action Required: Verify Story Files Location and Extensions
The updated Tailwind Storybook content pattern now excludes the
.tsxextension. However, our initial search for a./storiesdirectory produced an error ("No such file or directory"), so we couldn’t verify if any.tsxstory files exist. Please manually check that your Storybook files are located in the correct directory and that only the supported extensions (.js, .ts, .jsx, .mdx) are in use. If your story files are stored elsewhere, update the content pattern accordingly.
mdatelle
changed the title
|
Couple things:
|
mdatelle
force-pushed
the
fix/broken-dropdown-transition
branch
from
9e728e5 to
6ea6bbe
Compare
I have a few additional items
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/components/UserProfile/DropdownTrigger.vue (1)
5-5: Remove unused import.The
Bars3BottomRightIconis imported but never used in this component. Static analysis tools have flagged this as well.- import { - Bars3BottomRightIcon, - Bars3Icon, - BellAlertIcon, - ExclamationTriangleIcon, - InformationCircleIcon, - ShieldExclamationIcon, - } from '@heroicons/vue/24/solid'; + import { + Bars3Icon, + BellAlertIcon, + ExclamationTriangleIcon, + InformationCircleIcon, + ShieldExclamationIcon, + } from '@heroicons/vue/24/solid';🧰 Tools
🪛 GitHub Check: Build Web App
[failure] 5-5:
'Bars3BottomRightIcon' is defined but never used. Allowed unused vars must match /^_/u
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (9)
web/components/Modals.ce.vue(0 hunks)web/components/UserProfile/CallbackFeedback.vue(0 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)web/components/UserProfile/DropdownTrigger.vue(3 hunks)web/components/UserProfile/Promo.vue(0 hunks)web/components/UserProfile/PromoFeature.vue(0 hunks)web/store/dropdown.ts(2 hunks)web/store/promo.ts(0 hunks)web/types/userProfile.ts(1 hunks)
💤 Files with no reviewable changes (5)
- web/components/Modals.ce.vue
- web/store/promo.ts
- web/components/UserProfile/CallbackFeedback.vue
- web/components/UserProfile/PromoFeature.vue
- web/components/UserProfile/Promo.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- web/components/UserProfile/DropdownMenu.vue
🧰 Additional context used
🪛 GitHub Check: Build Web App
web/components/UserProfile/DropdownTrigger.vue
[failure] 5-5:
'Bars3BottomRightIcon' is defined but never used. Allowed unused vars must match /^_/u
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Build API
- GitHub Check: Test API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (12)
web/types/userProfile.ts (2)
7-9: Clean code formatting improvement.The multi-line formatting of
UserProfileLinkClicktype improves readability while maintaining the same functionality. This is a good practice for complex union types.
1-23: Missing interface removal noted.According to the summary, the
UserProfilePromoFeatureinterface has been removed from this file. This aligns with the PR objective of replacing dropdown components with Reka components, as the promotional features are no longer needed in this context.web/components/UserProfile/DropdownTrigger.vue (7)
20-20: Consistency improvement by removing trailing semicolon.The trailing semicolon has been removed from the
definePropstype definition, which aligns with TypeScript best practices for type annotations.
31-33: Improved readability with expanded conditional logic.The expanded block-style conditional statement improves readability while maintaining the same logic.
38-46: Enhanced readability of conditional logic.The expanded block-style conditional statements make the code more readable and consistent.
58-69: Improved template structure for error icons.The template formatting with improved line breaks and indentation makes the code more readable.
83-83: Changed hamburger icon implementation.The PR objectives mentioned an issue with the hamburger icon's state not being directly linked to the open/closed state of the dropdown. This change replaces the previous icon implementation with
Bars3Icon. However, it doesn't appear to address the state-linking concern mentioned in the PR comments.Would it be beneficial to add a conditional class to this icon that changes based on
dropdownVisible.valueto visually indicate the dropdown state?
74-74: Consider reviewing rounded corners in hover effect.PR comments mentioned concerns about rounded corners being removed or having less curvature. This line contains a
roundedclass on a hover effect element. Ensure this matches the expected design for rounded corners.The PR comments specifically mentioned that "the rounded corners of the UPC dropdown have been removed" and "the UPC dropdown has less rounded corners than previously." Verify if the
roundedclass here provides sufficient curvature compared to the previous implementation.
51-87: Additional verification needed for dropdown behavior.According to PR comments, there are issues with the filter dropdown causing the sidebar to close unexpectedly, and z-index problems with modals. While this component handles the dropdown trigger, verification is needed to ensure these issues are addressed either here or in related components.
The implementation still uses
dropdownStore.dropdownToggle()for click handling. Please verify:
- Whether the sidebar closing issue is related to this implementation
- If z-index settings need to be adjusted to ensure modals display above dropdowns
web/store/dropdown.ts (3)
1-1: Import cleanup looks goodThe removal of unnecessary imports (
useServerStoreanduseActivationCodeStore) is appropriate since the related automatic dropdown opening logic has been removed. This helps keep the codebase clean and focused.Also applies to: 3-3
13-18: Function formatting improvementThe reformatting of
dropdownHideanddropdownShowfrom single-line arrow functions to block bodies improves readability while maintaining the same functionality. This is a good practice, especially if these functions might need to be expanded in the future.
1-27:❓ Verification inconclusive
Verify UI concerns from PR comments
The store changes look good, but please ensure the UI concerns mentioned in PR comments (rounded corners, sidebar closing issues, hamburger icon state, and z-index problems) are addressed in the component implementations that use this store.
🏁 Script executed:
#!/bin/bash # Let's check for UI-related files that might address the concerns raised in PR comments # Look for UPC dropdown components that might need rounded corners echo "Searching for UPC dropdown components..." rg -l "UpcDropdownMenu|UpcDropdown" --type vue # Look for filter dropdown components that might be causing sidebar issues echo "Searching for filter dropdown components..." rg -l "FilterDropdown|SidebarFilter" --type vue # Look for hamburger icon implementations echo "Searching for hamburger icon components..." rg -l "hamburger|HamburgerIcon" --type vue # Look for z-index definitions in CSS or style blocks echo "Searching for z-index definitions..." rg "z-index" --type vue --type cssLength of output: 656
Action: Verify UI Component Integrations
The store changes are solid, but the UI concerns from the PR comments still need a clear verification in the related Vue components. The initial file search didn’t return any results due to the use of an unrecognized file type flag. Please ensure that:
- Any dropdown components (e.g. those named with “UpcDropdownMenu” or “UpcDropdown”) have the correct rounded corners.
- The filter dropdown components (e.g. “FilterDropdown” or “SidebarFilter”) correctly resolve the sidebar‐closing issues.
- The hamburger icons (e.g. components with “hamburger” or “HamburgerIcon”) properly reflect state changes.
- Z-index values are set as intended in both the Vue templates and CSS to avoid overlapping issues.
If needed, re-run the following revised shell script for a more accurate file search:
#!/bin/bash echo "Searching for UPC dropdown components in Vue files..." rg -g "*.vue" -l "UpcDropdownMenu|UpcDropdown" echo "Searching for filter dropdown components in Vue files..." rg -g "*.vue" -l "FilterDropdown|SidebarFilter" echo "Searching for hamburger icon components in Vue files..." rg -g "*.vue" -l "hamburger|HamburgerIcon" echo "Searching for z-index definitions in Vue or CSS files..." rg -g "*.{vue,css}" -l "z-index"Please verify these points in your codebase before merging.
|
Couple minor things:
Otherwise it's looking awesome |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
unraid-ui/stories/components/form/Select.stories.ts (1)
12-28: Custom element implementation needs additional safeguards.While encapsulating modals in a shadow DOM is a good approach for style isolation, the implementation could benefit from additional features:
- Consider adding lifecycle methods like
disconnectedCallbackfor proper cleanup.- Add error handling in the constructor.
- Document the purpose of this custom element.
// Define the custom element for modals class ModalsContainer extends HTMLElement { constructor() { super(); + try { const shadow = this.attachShadow({ mode: 'open' }); const parent = document.createElement('div'); const container = document.createElement('div'); container.id = 'modals'; parent.appendChild(container); shadow.appendChild(parent); + } catch(error) { + console.error('Failed to initialize ModalsContainer:', error); + } } + + // Clean up when element is removed from the DOM + disconnectedCallback() { + // Any cleanup code if needed + } } // Register the custom element customElements.define('unraid-modals', ModalsContainer);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
unraid-ui/src/components/form/select/SelectContent.vue(4 hunks)unraid-ui/src/components/form/select/SelectTrigger.vue(2 hunks)unraid-ui/src/components/form/select/index.ts(1 hunks)unraid-ui/src/forms/Select.vue(2 hunks)unraid-ui/stories/components/form/Select.stories.ts(4 hunks)web/components/Notifications/Sidebar.vue(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- unraid-ui/src/components/form/select/index.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- web/components/Notifications/Sidebar.vue
- unraid-ui/src/components/form/select/SelectTrigger.vue
- unraid-ui/src/components/form/select/SelectContent.vue
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Build Web App
- GitHub Check: Build API
- GitHub Check: Test API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
unraid-ui/src/forms/Select.vue (3)
12-14: Import order has been adjusted appropriately.The organization of imports maintains a logical structure with related imports grouped together. The
useJsonFormsControlis now imported beforecomputed, which aligns with standard import organization patterns (external libraries first, then internal components).
29-30: Type handling improvement in onChange function.Changing the parameter type from
stringtounknownincreases flexibility for handling various input types from the Select component. The explicit conversion to string usingString(value)ensures type consistency when passing tohandleChange.This change helps accommodate the reka-ui Select component's behavior, which might return values of different types.
40-62: Verify dropdown functionality based on PR comments.The implementation looks correct, but based on the PR comments, there are concerns about the dropdown's behavior:
- Rounded corners of the UPC dropdown being removed
- Filter dropdown causing the sidebar to close
- Z-index issues with modals
These issues may be related to the styling or behavior of the imported reka components rather than the implementation in this file.
Could you confirm if the Select component styling from reka-ui matches the expected rounded corners? Also, verify that clicking the dropdown doesn't interfere with the sidebar state.
unraid-ui/stories/components/form/Select.stories.ts (4)
1-1: Import statement formatting looks good.The switch to single quotes for imports is consistent with modern style conventions.
Also applies to: 10-11
55-55: Verify modal z-index behavior.The custom modal element is correctly implemented here, but please verify that this change resolves the z-index issues mentioned in PR comments where "the z-index of the dropdown is taking precedence over any open modal."
91-91: Custom element implementation is consistent.The use of the modal container is consistent across story examples.
31-31: Minor formatting change looks good.Switching to single quotes for the title string maintains consistency.
I'll take a stab at fixing these items, as I want to try and get web components into the webgui repo for stock Unraid current prod - these changes - |
|
Notifications won't close in the webgui. Requires page refresh. 
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
unraid-ui/tsconfig.test.json (1)
7-8: TS Build Info & Types Update:
The addition of the"tsBuildInfoFile"property on line 7 is a solid improvement for speeding up incremental builds. Also, the"types"array on line 8 is now defined on a single line. Verify that the new path ("./node_modules/.tmp/tsconfig.test.tsbuildinfo") aligns with your build environment and that the single-line style is consistent with your project’s formatting guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (11)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(1 hunks)unraid-ui/src/components/common/tabs/Tabs.vue(1 hunks)unraid-ui/src/components/common/tooltip/Tooltip.vue(1 hunks)unraid-ui/src/components/form/select/SelectContent.vue(4 hunks)unraid-ui/src/composables/useTeleport.ts(1 hunks)unraid-ui/src/forms/Select.vue(3 hunks)unraid-ui/stories/components/common/Sheet.stories.ts(2 hunks)unraid-ui/tsconfig.app.json(0 hunks)unraid-ui/tsconfig.json(1 hunks)unraid-ui/tsconfig.test.json(1 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)
💤 Files with no reviewable changes (1)
- unraid-ui/tsconfig.app.json
✅ Files skipped from review due to trivial changes (1)
- unraid-ui/src/composables/useTeleport.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- web/components/UserProfile/DropdownMenu.vue
- unraid-ui/src/forms/Select.vue
- unraid-ui/src/components/form/select/SelectContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Test API
- GitHub Check: Build Web App
- GitHub Check: Build API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (13)
unraid-ui/src/components/common/tabs/Tabs.vue (3)
4-4: Good addition of HTMLAttributes import.Adding the HTMLAttributes import from Vue enhances type safety for DOM element attributes.
6-7: Props and emits are properly typed.The TypeScript generic type parameters for defineProps and defineEmits ensure proper type checking for the component's API.
9-9: Improved type assertion for forwarded props.The type assertion to
TabsRootProps & HTMLAttributesenhances type safety by ensuring that the forwarded object combines both the component-specific props and standard HTML attributes.unraid-ui/tsconfig.test.json (1)
10-10: Refined Include Patterns for Testing:
The"include"property now restricts files to those matching test file patterns (*.test.ts,*.spec.ts, etc.). This focused approach should speed up test compilation—just ensure that no valid test files are inadvertently left out.unraid-ui/tsconfig.json (1)
31-39: Expanded Exclusion for Test Files:
The update to the"exclude"array (lines 31–39) now omits test files (*.test.ts,*.spec.ts,*.test.tsx,*.spec.tsx) from the production compilation. This change appears to be in line with the updated testing configuration. Please double-check that this exclusion does not remove any files required for runtime or production builds, and that it complements the references to the test-specific TSConfig.unraid-ui/stories/components/common/Sheet.stories.ts (4)
11-15: Clean implementation of Select component importsThe addition of these Select component imports properly supports the new SheetWithSelect story and aligns with the PR objective of replacing dropdown components with reka components.
27-27: Proper inclusion of Select in subcomponentsAdding the Select component to the subcomponents list correctly documents the component hierarchy for the Storybook.
29-34: Good addition of decorator for visual consistencyThe decorator adding a min-height to the story container improves the visual presentation in Storybook. This is a helpful UX improvement.
99-160: Well-structured SheetWithSelect storyThe new story effectively demonstrates the integration of the Select component within a Sheet, providing a good example of form functionality. The implementation properly utilizes v-model binding and includes appropriate options.
However, this story doesn't appear to address any of the specific UI concerns mentioned in the PR comments regarding rounded corners, sidebar behavior, or z-index issues.
Do these changes relate to fixing any of the visual or behavioral issues mentioned in the PR comments? If not, additional changes may be needed elsewhere in the codebase.
unraid-ui/src/components/common/tooltip/Tooltip.vue (4)
2-8: Import statements have been properly organized.The imports are now clearly structured with specific components and types from 'radix-vue', and the additional import of HTMLAttributes from 'vue' supports the type assertion added in line 13.
10-11: Semicolons added for consistency.Minor formatting change that maintains code style consistency across the codebase.
13-13: Improved type safety with explicit type assertion.The explicit type assertion for the
forwardedvariable enhances type safety by ensuring it conforms to bothTooltipRootPropsand standard HTML attributes.
1-21:❓ Verification inconclusive
Verify component import source against PR objectives.
The PR objectives mention replacing dropdown components with reka components, but this file still imports from 'radix-vue' rather than 'reka-ui'. Please verify if this is intentional and if the Tooltip component should remain on radix-vue while dropdown components are migrated to reka-ui.
🏁 Script executed:
#!/bin/bash # Check if other tooltip components use radix-vue or if they've been migrated to reka-ui rg -g '*.vue' -g '*.tsx' -g '*.ts' "from 'reka-ui'" --context=2 | grep -i tooltip # Check if there are any imports from reka-ui in general rg "from 'reka-ui'" -l | wc -l # Check the pattern of dropdown component imports to compare rg -g '*.vue' -g '*.tsx' -g '*.ts' "Dropdown.*from '(radix-vue|reka-ui)'" --context=2Length of output: 3721
Please confirm Tooltip import source against migration objectives.
It appears that while dropdown components have been migrated to usereka-ui, the Tooltip component inunraid-ui/src/components/common/tooltip/Tooltip.vuestill imports fromradix-vue. Could you verify if this is intentional? If the Tooltip component should also migrate toreka-uiper the PR objectives, please update its import accordingly.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (1)
33-50:❓ Verification inconclusive
Template restructuring and styling enhancements
The template has been significantly improved with several key changes:
- Added ConfigProvider with scroll-body="true"
- Implementing teleport functionality for proper DOM placement
- Setting explicit side="bottom" for consistent positioning
- Enhanced styling with rounded-lg class and proper z-index
However, based on the PR comments, there's a concern about rounded corners and z-index behavior.
Could you verify that:
- The
rounded-lgclass provides sufficient corner rounding compared to the previous implementation?- The z-index value of 50 is high enough to avoid issues with modals as mentioned in PR comments?
Consider implementing a toggle behavior for the dropdown when clicking the same trigger twice, as mentioned in PR comments.
🏁 Script executed:
#!/bin/bash # Check if there are any modals with z-index values that might conflict rg -g "*.vue" "z-index" --no-filename | grep -i "modal" | sort -nLength of output: 63
Verification: Dropdown Menu Template Enhancements
The template now wraps the dropdown content with a ConfigProvider (using
:scroll-body="true"), and it leverages DropdownMenuPortal for correct DOM placement with a fixedside="bottom". Additionally, the use ofrounded-lgand a z-index of50align with the goal of improving styling consistency.Please manually verify the following:
- That the
rounded-lgclass achieves the intended corner rounding compared to the previous implementation.- That setting the z-index to
50continues to prevent modal overlapping issues.- Consider implementing a toggle behavior (closing the dropdown when its trigger is clicked twice) as discussed in the PR.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (3)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(1 hunks)unraid-ui/src/components/form/select/SelectContent.vue(4 hunks)unraid-ui/src/composables/useTeleport.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- unraid-ui/src/components/form/select/SelectContent.vue
- unraid-ui/src/composables/useTeleport.ts
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Build API
- GitHub Check: Build Web App
- GitHub Check: Test API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (2)
2-14: Import and teleport implementation changesThe component now imports from 'reka-ui' instead of 'radix-vue' for dropdown menu components, while also adding teleport functionality through the
useTeleportcomposable. This change helps position dropdowns properly in the DOM hierarchy, avoiding z-index and overflow issues.
16-18: Props definition updatedThe props definition has been updated to use the imported types from 'reka-ui'. The code is now more maintainable with proper type definitions.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (2)
40-40: Corner roundness should be increasedPer the PR comments, the rounded-lg class may not provide enough roundness compared to the original design. Consider using a custom radius value to match the previous appearance.
- 'z-50 min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'z-50 min-w-32 rounded-xl bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
40-40: Consider setting width to match parent elementPer the PR comments, the dropdown doesn't appear to span the width of the parent element. Consider adding a width setting or using a class like
w-fullto address this issue.- 'z-50 min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'z-50 min-w-32 w-full rounded-lg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (2)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(1 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/components/UserProfile/DropdownMenu.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue (7)
2-4: Verify imports are correctly organizedYou've added new imports for
useTeleport,cn, andConfigProvider. These are essential for the new functionality, but make sure they're organized consistently with project standards.
14-14: New teleport functionality addedThe addition of teleport functionality is a good improvement for portal management.
17-17: Props type definition updatedThe props declaration has been updated to use single quotes consistently.
33-34: Added ConfigProvider with scroll body paddingThe new ConfigProvider wrapper with scroll body padding settings should help with scroll behavior during dropdown interactions.
45-47: Added overflow handling with a wrapper divAdding the overflow-hidden wrapper is a good improvement for content management within the dropdown.
33-50:❓ Verification inconclusive
Address sidebar closing and toggle behavior issues
Two critical issues mentioned in the PR comments are not addressed in this file:
- Filter dropdown causing the sidebar to close unexpectedly
- UPC icon always opening the dropdown instead of toggling it
These issues may need to be fixed in other components or in the interaction between components.
🏁 Script executed:
#!/bin/bash # Look for relevant components handling sidebar and UPC dropdown toggle echo "Searching for sidebar components:" rg -A 5 "sidebar" --type vue --glob "!**/node_modules/**" echo "Searching for UPC icon or dropdown toggle:" rg -A 5 "UPC" --type vue --glob "!**/node_modules/**" rg -A 5 "toggle.*dropdown" --type vue --glob "!**/node_modules/**"Length of output: 436
Below is an updated verification script that sets up the Vue file type so the search can produce meaningful output. Please run this script and share the results for further analysis:
Once the results are available, we can confirm whether the issues—filter dropdown causing the sidebar to close unexpectedly and the UPC icon always opening the dropdown—involve code in other components.
🏁 Script executed:
#!/bin/bash # Add Vue file type and search for sidebar-related keywords rg --type-add 'vue:*.vue' -A 5 "sidebar" --glob "!**/node_modules/**" echo "--------------------------------" # Search for references to UPC icons rg --type-add 'vue:*.vue' -A 5 "UPC" --glob "!**/node_modules/**" echo "--------------------------------" # Search for code related to dropdown toggle behavior rg --type-add 'vue:*.vue' -A 5 "toggle.*dropdown" --glob "!**/node_modules/**"Length of output: 20549
Review Note: Confirm Dropdown Behavior Handling in Related Components
The changes in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 33–50) are strictly presentational and don't address the functional issues noted in the PR:
- The filter dropdown causing the sidebar to close unexpectedly.
- The UPC icon always opening the dropdown instead of toggling it.
Global searches indicate that references to the sidebar and UPC behaviors are handled elsewhere (e.g., in components like
UserProfile.ce.vueand within various changelog entries). It appears these issues arise from interactions in other parts of the codebase rather than within this file.Next Steps:
- Sidebar Issue: Verify that the component responsible for the filter dropdown properly manages the sidebar state.
- UPC Toggle: Check that the UPC icon’s toggle behavior is correctly implemented in its related component(s).
Please review the interaction of these components to ensure the correct toggle and state management behaviors are in place.
9-11:❓ Verification inconclusive
Import source changed from radix-vue to reka-ui
The types are now being imported from 'reka-ui' rather than 'radix-vue'. Ensure that all components using this file have been updated to work with the new implementation.
🏁 Script executed:
#!/bin/bash # Find components that might still be using the old dropdown implementation rg "from 'radix-vue'" --type vue --glob "**/*Dropdown*.vue" --glob "!**/node_modules/**"Length of output: 124
Below is a revised review comment. I've also included a new shell script to help verify that no other Vue files in the repository still reference
'radix-vue'. Please run the script and confirm that no unwanted imports remain.
Verify Migration of Dropdown Imports to
reka-uiThe import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 9–11) has been updated to pull types from'reka-ui'instead of'radix-vue'. Please ensure that all components using this file are now compatible with the new implementation.
Verify no other Vue files still import from
'radix-vue'by running the script below:#!/bin/bash # Search for any references to 'radix-vue' in Vue files (excluding node_modules) rg "from\s*['\"]radix-vue['\"]" -g "*.vue" --glob "!**/node_modules/**"If any references are found, update them accordingly.
Below is the revised review comment along with a new verification script to ensure no Vue components are still referencing
'radix-vue':
Verify All Components Updated to
reka-uiThe import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 9–11) has been correctly updated to import types from'reka-ui'instead of'radix-vue'. Please confirm that no other Vue components are still importing from'radix-vue'.
Run the following shell script to search for any references in *.vue files (excluding
node_modules):#!/bin/bash # Search for any reference to 'radix-vue' in .vue files (excluding node_modules) rg "from\\s*['\\\"]radix-vue['\\\"]" -g "*.vue" --glob "!**/node_modules/**"If any matches are found, update them accordingly.
Below is a revised review comment along with a new shell script to verify that no other Vue files reference
'radix-vue'. Please run the following command to confirm the update:
Confirm All Vue Files Use
reka-uifor Dropdown ImportsThe import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 9–11) now correctly imports types from'reka-ui'instead of'radix-vue'. To ensure consistency, please verify that no other Vue components are still referencing'radix-vue'.
Run the script below to search for any instance of
'radix-vue'in your.vuefiles (excludingnode_modules):#!/bin/bash # Search for 'radix-vue' in all .vue files, excluding node_modules fd -e vue --exclude node_modules -x grep -H "radix-vue" {}If any matches are found, update them accordingly.
Dropdown Import Update Verification
The import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vuehas been updated to import types from'reka-ui'instead of'radix-vue'. Please verify that no other Vue components still reference'radix-vue'. If any residual references exist, update them to use'reka-ui'instead.
Verification Step: Run the following shell script to search for any instances of
'radix-vue'in all Vue files (excludingnode_modules):#!/bin/bash # Search for 'radix-vue' in .vue files, excluding node_modules rg "from\s*['\"]radix-vue['\"]" -g "*.vue" --glob "!**/node_modules/**"If the search returns any results, please update those files to ensure consistency with the new implementation.
Dropdown Import Update Verification
The import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 9–11) now correctly references'reka-ui'instead of'radix-vue'. To ensure consistency across the codebase, please verify that no Vue files still import from'radix-vue'.
Verification Step: Run the shell command below to search for any residual references:
#!/bin/bash rg "from\s*['\"]radix-vue['\"]" -g "*.vue" --glob "!**/node_modules/**"If any occurrences are found, update those files to import from
'reka-ui'.
Dropdown Import Update Verification
The import in
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(lines 9–11) has been updated to import types from'reka-ui'instead of'radix-vue'. Please ensure that no Vue file elsewhere in the codebase is still referencing'radix-vue'. Since automated shell-script checks have not produced output, a manual review is recommended to confirm that all dropdown-related components and their dependencies are updated accordingly.
unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue
Outdated
Show resolved
Hide resolved
…i, and various fixes
…nMenu, and remove 3BarRight icon
…id-ui dropdown and select components
elibosley
force-pushed
the
fix/broken-dropdown-transition
branch
from
62290de to
ae35610
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
unraid-ui/tailwind.config.ts (1)
42-92: New theme configuration addresses rounded corners concernThe new theme configuration adds specific border radius values using CSS variables, which addresses the PR feedback about rounded corners in dropdowns. The comprehensive color system using HSL values also provides better theming support for the new reka components.
However, there appears to be duplication between these color definitions and those in the unraidPreset. Consider consolidating these to maintain a single source of truth.
For the border radius specifically, ensure the
--radiusCSS variable is properly defined in your CSS to achieve the rounded corners mentioned in the PR comments:theme: { extend: { borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', + lg: 'var(--radius, 0.5rem)', + md: 'calc(var(--radius, 0.5rem) - 2px)', + sm: 'calc(var(--radius, 0.5rem) - 4px)', }, // ... rest of the theme
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (75)
unraid-ui/.storybook/preview.ts(1 hunks)unraid-ui/components.json(1 hunks)unraid-ui/package.json(1 hunks)unraid-ui/src/components/brand/BrandLoading.ce.vue(2 hunks)unraid-ui/src/components/brand/brand-loading.variants.ts(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuArrow.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue(2 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue(2 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue(2 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue(1 hunks)unraid-ui/src/components/common/dropdown-menu/index.ts(1 hunks)unraid-ui/src/components/common/popover/Popover.vue(1 hunks)unraid-ui/src/components/common/popover/PopoverContent.vue(2 hunks)unraid-ui/src/components/common/popover/PopoverTrigger.vue(1 hunks)unraid-ui/src/components/common/sheet/Sheet.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetClose.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetContent.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetDescription.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTitle.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetTrigger.vue(1 hunks)unraid-ui/src/components/common/tabs/Tabs.vue(1 hunks)unraid-ui/src/components/common/tooltip/Tooltip.vue(1 hunks)unraid-ui/src/components/form/select/Select.vue(1 hunks)unraid-ui/src/components/form/select/SelectContent.vue(4 hunks)unraid-ui/src/components/form/select/SelectGroup.vue(1 hunks)unraid-ui/src/components/form/select/SelectItem.vue(1 hunks)unraid-ui/src/components/form/select/SelectItemText.vue(1 hunks)unraid-ui/src/components/form/select/SelectLabel.vue(1 hunks)unraid-ui/src/components/form/select/SelectScrollDownButton.vue(2 hunks)unraid-ui/src/components/form/select/SelectScrollUpButton.vue(2 hunks)unraid-ui/src/components/form/select/SelectSeparator.vue(2 hunks)unraid-ui/src/components/form/select/SelectTrigger.vue(2 hunks)unraid-ui/src/components/form/select/SelectValue.vue(1 hunks)unraid-ui/src/components/form/select/index.ts(1 hunks)unraid-ui/src/composables/useTeleport.ts(1 hunks)unraid-ui/src/forms/Select.vue(3 hunks)unraid-ui/src/index.ts(3 hunks)unraid-ui/src/lib/utils.ts(1 hunks)unraid-ui/src/styles/globals.css(2 hunks)unraid-ui/stories/components/common/DropdownMenu.stories.ts(5 hunks)unraid-ui/stories/components/common/Popover.stories.ts(1 hunks)unraid-ui/stories/components/common/Sheet.stories.ts(2 hunks)unraid-ui/stories/components/common/Tooltip.stories.ts(1 hunks)unraid-ui/stories/components/form/Select.stories.ts(3 hunks)unraid-ui/tailwind.config.ts(2 hunks)unraid-ui/tsconfig.app.json(0 hunks)unraid-ui/tsconfig.json(1 hunks)unraid-ui/tsconfig.test.json(1 hunks)web/components/Modals.ce.vue(0 hunks)web/components/Notifications/Sidebar.vue(2 hunks)web/components/UserProfile.ce.vue(1 hunks)web/components/UserProfile/CallbackFeedback.vue(0 hunks)web/components/UserProfile/Dropdown.vue(0 hunks)web/components/UserProfile/DropdownConnectStatus.vue(3 hunks)web/components/UserProfile/DropdownContent.vue(1 hunks)web/components/UserProfile/DropdownLaunchpad.vue(1 hunks)web/components/UserProfile/DropdownMenu.vue(1 hunks)web/components/UserProfile/DropdownTrigger.vue(3 hunks)web/components/UserProfile/Promo.vue(0 hunks)web/components/UserProfile/PromoFeature.vue(0 hunks)web/package.json(1 hunks)web/pages/index.vue(3 hunks)web/store/dropdown.ts(2 hunks)web/store/promo.ts(0 hunks)web/types/userProfile.ts(1 hunks)
💤 Files with no reviewable changes (7)
- unraid-ui/tsconfig.app.json
- web/components/Modals.ce.vue
- web/components/UserProfile/Dropdown.vue
- web/components/UserProfile/Promo.vue
- web/components/UserProfile/PromoFeature.vue
- web/store/promo.ts
- web/components/UserProfile/CallbackFeedback.vue
✅ Files skipped from review due to trivial changes (1)
- unraid-ui/stories/components/common/Tooltip.stories.ts
🚧 Files skipped from review as they are similar to previous changes (63)
- web/package.json
- unraid-ui/package.json
- unraid-ui/src/components/form/select/index.ts
- unraid-ui/tsconfig.json
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuShortcut.vue
- web/components/UserProfile/DropdownLaunchpad.vue
- web/components/Notifications/Sidebar.vue
- unraid-ui/src/components/common/tabs/Tabs.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue
- unraid-ui/src/components/form/select/SelectItemText.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSub.vue
- web/store/dropdown.ts
- web/components/UserProfile.ce.vue
- unraid-ui/src/components/common/popover/PopoverTrigger.vue
- unraid-ui/src/components/form/select/SelectValue.vue
- web/components/UserProfile/DropdownMenu.vue
- web/types/userProfile.ts
- unraid-ui/src/lib/utils.ts
- unraid-ui/src/components/common/sheet/SheetDescription.vue
- web/components/UserProfile/DropdownContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuArrow.vue
- unraid-ui/src/components/form/select/SelectLabel.vue
- unraid-ui/stories/components/common/Popover.stories.ts
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSeparator.vue
- unraid-ui/src/forms/Select.vue
- web/components/UserProfile/DropdownTrigger.vue
- unraid-ui/src/components/common/sheet/SheetClose.vue
- unraid-ui/src/components/form/select/Select.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuTrigger.vue
- web/components/UserProfile/DropdownConnectStatus.vue
- unraid-ui/src/components/common/sheet/SheetTrigger.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubTrigger.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue
- unraid-ui/src/composables/useTeleport.ts
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue
- unraid-ui/src/components/brand/BrandLoading.ce.vue
- unraid-ui/src/components/common/popover/PopoverContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue
- unraid-ui/src/components/common/tooltip/Tooltip.vue
- unraid-ui/src/components/common/sheet/SheetContent.vue
- unraid-ui/tsconfig.test.json
- unraid-ui/src/components/common/sheet/Sheet.vue
- unraid-ui/src/components/form/select/SelectGroup.vue
- unraid-ui/src/components/form/select/SelectScrollUpButton.vue
- unraid-ui/stories/components/form/Select.stories.ts
- unraid-ui/stories/components/common/DropdownMenu.stories.ts
- unraid-ui/src/components/common/popover/Popover.vue
- unraid-ui/src/components/form/select/SelectContent.vue
- unraid-ui/components.json
- unraid-ui/src/components/form/select/SelectScrollDownButton.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuSubContent.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue
- unraid-ui/src/components/form/select/SelectItem.vue
- web/pages/index.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue
- unraid-ui/src/components/common/sheet/SheetTitle.vue
- unraid-ui/src/index.ts
- unraid-ui/src/components/brand/brand-loading.variants.ts
- unraid-ui/src/components/form/select/SelectTrigger.vue
- unraid-ui/src/components/form/select/SelectSeparator.vue
- unraid-ui/src/styles/globals.css
- unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue
🧰 Additional context used
🧬 Code Definitions (1)
unraid-ui/tailwind.config.ts (1)
unraid-ui/src/theme/preset.ts (1)
unraidPreset(6-271)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build Web App
- GitHub Check: Cloudflare Pages
🔇 Additional comments (15)
unraid-ui/.storybook/preview.ts (1)
17-28: Good addition of modals container for Storybook stories.Adding this decorator ensures that all Storybook stories have access to the modal container with id="modals", which is likely necessary for the new dropdown components from the reka library to function properly. This aligns with the PR objective of replacing existing dropdown components.
While this is a good addition, consider adding a more detailed comment explaining why this modal container is necessary for the dropdown components and how it helps address z-index issues mentioned in the PR comments.
unraid-ui/src/components/common/dropdown-menu/index.ts (4)
1-1: Introduction of DropdownMenu export is a good addition.Adding the direct export of the main DropdownMenu component makes the API more intuitive for consumers of this library.
3-15: Clear and organized exports structure.The organization of these exports is clean and follows a logical pattern, making it easy to understand what components are available.
16-16: New DropdownMenuArrow component may help address UI issues.The addition of DropdownMenuArrow is a good improvement. This component likely provides visual cues for the dropdown position and could help address the concerns about visual appearance mentioned in the PR comments.
17-17: Verify migration from radix-vue to reka-ui.The change from 'radix-vue' to 'reka-ui' for DropdownMenuPortal is aligned with the PR objective. However, given the reported issues about sidebar closing and z-index problems, please verify that this migration doesn't introduce unintended behavior changes.
Consider testing these specific scenarios mentioned in the PR comments:
- Does the filter dropdown cause the sidebar to close unexpectedly?
- Is there a z-index issue when modals are open (specifically with "Check for OS Updates")?
- Do the dropdowns have proper rounded corners similar to the original design?
- Does the dropdown span the full width of its parent element?
- Does clicking the UPC icon toggle the dropdown (open/close) rather than just opening it?
unraid-ui/stories/components/common/Sheet.stories.ts (5)
11-15: Good addition of Select component importsThese import statements properly bring in the necessary components for implementing the new Select functionality within the Sheet component.
27-27: Appropriate addition to subcomponents listAdding Select to the subcomponents list is correct since it's being used in the new story.
29-34: Good use of decorators for consistent displayThe decorator provides a minimum height to ensure consistent story display in Storybook.
99-160: Well-implemented SheetWithSelect storyThe new story effectively demonstrates the integration of Select components within a Sheet. The component structure, data binding, and template organization are all properly implemented.
138-147:❓ Verification inconclusive
Consider addressing dropdown issues mentioned in PR comments
Based on the PR comments, there are concerns about dropdown behavior including sidebar closing and z-index issues with modals. Ensure this implementation addresses those concerns.
🌐 Web query:
What are best practices for handling z-index conflicts between dropdowns and modals in UI components?💡 Result:
Handling z-index conflicts between dropdowns and modals requires understanding stacking contexts and systematic management of layering. Here are the key best practices:
1. Control DOM Hierarchy
- Place modals at the root level to avoid parent stacking contexts limiting their z-index. For example, position modals as siblings to other top-level elements (e.g., headers, footers) rather than nested inside containers[1][5].
- Move dropdowns outside constrained contexts if they need to appear above modals. For example, a dropdown inside a modal may require its own stacking context at the document root[2][12].
2. Adopt a Z-Index Scale
Use a predefined z-index hierarchy to avoid arbitrary values:
- Bootstrap’s model (commonly referenced):
Modal: 1050 Dropdown: 1000- Custom scales with increments (e.g., steps of 10 or 100) allow flexibility:
This ensures modals always sit above dropdowns[4][8].:root { --z-modal: 2000; --z-dropdown: 1000; }
3. Avoid Parent Stacking Context Limitations
- Ensure parents of dropdowns/modals do not create unintended stacking contexts (e.g., via
position,transform, oropacity). If a modal’s parent has a lowz-index, its children cannot surpass it[5][9].- Remove
positionfrom non-essential containers to let child elements inherit the global stacking order[5].
4. Leverage CSS Frameworks Mindfully
- If using frameworks like Bootstrap, check their z-index defaults and align custom values with their scale. For example, set modal
z-indexto1051to override Bootstrap’s default1050[4][10].- Override framework defaults cautiously using
!importantif necessary (e.g.,.modal { z-index: 2000 !important; })[3][9].
5. Use Dynamic Z-Index Contexts
For nested components (e.g., dropdowns in modals):
- Combine z-index values from parent and child contexts (e.g., modal
z-index: 1000+ dropdownz-index: 1=1001)[7].- Precompute values with CSS-in-JS or utility classes:
.z-modal { z-index: 1000; } .z-dropdown { z-index: 1001; }
6. Debugging Common Issues
- If a dropdown appears behind a modal:
- Verify the modal’s
positionisfixed/absoluteand itsz-indexis higher than the dropdown’s[2][12].- Ensure the modal’s parent does not restrict its stacking context[5].
- For third-party components, use
appendToorportalprops to render dropdowns outside constrained DOM trees[9].
Example Implementation
/* Global z-index scale */ .modal { position: fixed; z-index: 1000; /* Topmost layer */ } .dropdown { position: absolute; z-index: 500; /* Below modals */ } /* Nested dropdown in modal */ .modal .dropdown { z-index: 1001; /* Exceeds modal’s z-index */ }By structuring z-indexes hierarchically, managing DOM placement, and respecting framework conventions, most conflicts can be resolved predictably[1][4][5].
Citations:
- 1: https://blog.pixelfreestudio.com/understanding-z-index-stacking-contexts-demystified/
- 2: https://community.feathery.io/t/z-index-on-dropdowns-multiselect/332
- 3: https://www.telerik.com/forums/z-index-lower-then-window's-(not-acceptable)
- 4: https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/
- 5: https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/
- 6: https://blog.openreplay.com/css--demystiying-the-z-property/
- 7: openedx/paragon#2990
- 8: https://css-tricks.com/handling-z-index/
- 9: https://www.telerik.com/forums/kendo-grid-in-a-modal-z-index-problems
- 10: snapappointments/bootstrap-select#608
- 11: https://discourse.cwicly.com/t/z-index-conflicts-between-cwicly-and-gutenberg-popups-modals/4453
- 12: https://w3schools.invisionzone.com/topic/57396-z-index-issues-with-modal-and-dropdown-menu/
- 13: liferay/clay#2246
- 14: https://supportcenter.devexpress.com/ticket/details/t201784/dxselectbox-drop-down-values-z-index-problems-with-bootstrap
Action: Verify Dropdown Stacking and Interaction Behavior
Please review the updated Select component’s implementation in
unraid-ui/stories/components/common/Sheet.stories.ts(lines 138–147) to ensure it addresses the issues raised in the PR comments. In particular:
Stacking Context & Z-Index:
Ensure that the dropdown’s z-index is managed to prevent conflicts with modals. This might involve:
- Rendering dropdowns outside of constrained parent containers (e.g., via portals) so that modals (typically positioned at the root level) always appear above them.
- Applying a predefined z-index scale (e.g., dropdown below modal, such as modal: 1000, dropdown: 500) to maintain a proper layering order.
Interaction Considerations:
Confirm that dropdown interactions do not inadvertently trigger sidebar closing. Validate both the DOM hierarchy and CSS positioning to avoid unexpected behavior.Please adjust the implementation as needed based on these best practices.
unraid-ui/tailwind.config.ts (5)
3-3: Added tailwindcss-animate plugin for animation supportGood addition of the
tailwindcss-animateplugin which provides animation utilities to enhance UI interactions, particularly useful for dropdown animations.
40-40: Added animation plugin to enhance UI interactionsGood integration of the
tailwindcssAnimateplugin which aligns with the PR objective of enhancing dropdown components.
93-93: Good type safety with satisfies operatorUsing
satisfies Partial<Config>provides type safety while allowing the object to maintain its inferred type structure.
13-13:✅ Verification successful
Removed .tsx extension from content scanning
The
.tsxextension has been removed from the stories pattern. This might prevent Tailwind from detecting classes used in TypeScript React story files.
🏁 Script executed:
#!/bin/bash # Check if any .tsx story files exist in the project echo "Checking for .tsx story files..." find ./stories -name "*.stories.tsx" | wc -lLength of output: 168
No .stories.tsx files currently exist—removal is acceptable.
The search found no story files with the
.tsxextension in the repository, so the current Tailwind configuration inunraid-ui/tailwind.config.tsis sufficient for now. If you plan to add TypeScript React story files later, consider updating the pattern to include.tsx.
7-7:❓ Verification inconclusive
Check for darkMode configuration conflict
The
darkMode: ['class']setting here may conflict with thedarkMode: ['selector', '[data-mode="dark"]']defined in the unraidPreset (from./src/theme/preset). Ensure this is intentional as this configuration will override the preset value.
🏁 Script executed:
#!/bin/bash # Check if there are any references to both dark mode configurations echo "Checking for dark mode usage patterns..." rg -n "data-mode=\"dark\"" --type vue --type ts echo "Checking for dark class usage..." rg -n "class=\".*dark.*\"" --type vue --type tsLength of output: 317
Dark Mode Configuration Verification – Please Confirm
It appears the initial script ran into file‐type issues. To clarify if the use of
darkMode: ['class'],in unraid-ui/tailwind.config.ts is intentionally overriding the preset’s
darkMode: ['selector', '[data-mode="dark"]'],(from ./src/theme/preset), please run the updated verification commands below:
Once you have confirmed the output, please verify if the potential configuration conflict is intended.
🏁 Script executed:
#!/bin/bash echo "Searching for darkMode configuration in unraid-ui/tailwind.config.ts..." rg -n "darkMode:" unraid-ui/tailwind.config.ts echo "Searching for darkMode configuration in preset files under src/theme..." rg -n "darkMode:" src/theme/Length of output: 457
Dark Mode Configuration Clarification – Please Verify
The dark mode setting in
unraid-ui/tailwind.config.tsis set to['class']as expected. However, our search did not locate any file at./src/theme/presetcontaining a configuration likedarkMode: ['selector', '[data-mode="dark"]']. This raises one of two possibilities:
- The unraidPreset with the alternative dark mode setting isn’t currently present (or has been relocated), meaning there’s no real conflict.
- The intended preset override is missing or misreferenced, which may require further adjustment.
Please confirm whether the absence of the preset configuration is intentional. If the alternative preset configuration is needed, consider verifying its location or reintroducing it appropriately.
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
Summary by CodeRabbit
New Features
DropdownMenucomponent in user profiles with dynamic content rendering.Popovercomponent with interactive Storybook demos, improving component discoverability.DropdownMenuArrowcomponent to enhance dropdown visuals.UpcDropdownMenucomponent.Selectcomponent for improved user interaction within theSheetcomponent.SheetWithSelectstory to showcase selection functionality within theSheetcomponent.Sidebarcomponent to improve modal behavior and content positioning.UserProfilecomponents with a new feedback function for better status indication.Style
Refactor
BrandLoadingcomponent by utilizing a new type for variants and sizes.Bug Fixes