feat(web): install and configure nuxt ui #1524

mdatelle · 2025-07-17T21:10:32Z

Summary by CodeRabbit

New Features
- Introduced a primary color palette and enhanced color theming for the UI.
- Added and showcased new UI button variants with primary color styling on the main page.
- Integrated the @nuxt/ui module to enable advanced UI components and theming options.
Style
- Updated keyframe animations in global styles for improved CSS structure.
- Refined color variables and UI color states for both light and dark modes.
Chores
- Added @nuxt/ui as a project dependency.
- Centralized UI configuration for easier theming management.

coderabbitai · 2025-07-17T21:10:38Z

Walkthrough

The changes introduce and configure the @nuxt/ui library in the web application, define a custom primary color palette, and update UI components to utilize these new styles. CSS keyframe animations are refactored for clarity. Minor code and style cleanups are included, alongside a demonstration of new UI button styles.

Changes

File(s)	Change Summary
unraid-ui/src/styles/globals.css	Moved keyframe animations from CSS variables to explicit `@keyframes` blocks; removed an extra blank line.
web/app.config.ts	Added new config file exporting a UI color theme object.
web/app.vue	Wrapped layout and page components inside the new `<UApp>` UI component.
web/assets/main.css	Imported `@nuxt/ui`; defined a new orange primary color palette and mapped UI color variables.
web/nuxt.config.ts	Added `@nuxt/ui` to modules; defined UI theme with primary color; code formatting and comment cleanup.
web/package.json	Added `@nuxt/ui` dependency.
web/pages/index.vue	Imported and showcased `UButton` with various variants; changed `callbackDestination` type for flexibility.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App (app.vue)
    participant UApp
    participant NuxtLayout
    participant NuxtPage

    User->>App (app.vue): Loads application
    App (app.vue)->>UApp: Renders UApp wrapper
    UApp->>NuxtLayout: Renders layout
    NuxtLayout->>NuxtPage: Renders page content

sequenceDiagram
    participant User
    participant IndexPage (index.vue)
    participant UButton

    User->>IndexPage: Visits index page
    IndexPage->>UButton: Renders UButton with primary color and variants

Estimated code review effort

2 (~18 minutes)

Suggested reviewers

mdatelle
zackspear
pujitm

Poem

Orange hues now light the way,
With buttons bright for all to play.
Keyframes dance in tidy lines,
UI modules, new designs!
Reviewers, take a cheerful glance—
The code’s been dressed up for its next advance.
🟧✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 73e6267 and 18de609.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

unraid-ui/src/styles/globals.css (1 hunks)
web/app.config.ts (1 hunks)
web/app.vue (2 hunks)
web/assets/main.css (3 hunks)
web/nuxt.config.ts (7 hunks)
web/package.json (1 hunks)
web/pages/index.vue (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (7)

web/app.vue
web/app.config.ts
web/package.json
web/assets/main.css
web/pages/index.vue
unraid-ui/src/styles/globals.css
web/nuxt.config.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

GitHub Check: Build API
GitHub Check: Build Web App
GitHub Check: Test API
GitHub Check: Deploy Storybook
GitHub Check: Analyze (javascript-typescript)

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2025-07-17T21:12:28Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

github-actions · 2025-07-17T21:16:45Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

github-actions · 2025-07-18T15:48:37Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

github-actions · 2025-07-18T16:07:56Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

github-actions · 2025-07-21T15:16:23Z

🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev

web/pages/index.vue

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (4)

web/app.vue (1)
4-4: Trim stray whitespace in import statement

There are two spaces before the closing brace – tiny nit, but it shows up in lint rules configured for this repo.
-import { NuxtLayout, NuxtPage, UApp  } from '#components';
+import { NuxtLayout, NuxtPage, UApp } from '#components';
web/app.config.ts (1)
1-7: Prefer defineAppConfig for type-safe configuration

Using the helper improves auto-completion and avoids any future inference issues.
-export default {
-  ui: {
-    colors: {
-      primary: 'primary',
-    },
-  },
-};
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'primary',
+    },
+  },
+});
web/assets/main.css (2)

15-26: Palette definition OK – double-check overlap with Tailwind’s built-ins

These orange shades closely match Tailwind’s orange palette. If you don’t need custom values, you could reference Tailwind tokens to avoid maintenance overhead, but current values are perfectly valid.

106-116: Dark mode duplicate values

--ui-primary* for .dark duplicates the root values. If the intention is identical shades in both modes, consider removing the .dark block to reduce noise.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2c62e0a and 0868cde.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

unraid-ui/src/styles/globals.css (1 hunks)
web/app.config.ts (1 hunks)
web/app.vue (2 hunks)
web/assets/main.css (3 hunks)
web/nuxt.config.ts (7 hunks)
web/package.json (1 hunks)
web/pages/index.vue (4 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

web/**/*.ts

📄 CodeRabbit Inference Engine (CLAUDE.md)

Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Files:

web/app.config.ts
web/nuxt.config.ts

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/__test__/components/**/*.ts : Use `mount` from Vue Test Utils for component testing

Learnt from: elibosley
PR: unraid/api#972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: pujitm
PR: unraid/api#975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like `TabsList` and `TabsTrigger` used in `web/components/Notifications/TabList.vue` are automatically available without imports.

Learnt from: elibosley
PR: unraid/api#974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like `LoadingSpinner` in `web/components/Loading/Error.vue` are not necessary.

Learnt from: elibosley
PR: unraid/api#1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: mdatelle
PR: unraid/api#1122
File: web/components/UserProfile/DropdownLaunchpad.vue:38-42
Timestamp: 2025-02-06T17:24:58.784Z
Learning: In the DropdownLaunchpad.vue component, the current implementation of conditional icon rendering using `h(BrandLoading, { variant: 'white' })` is a temporary fix to maintain build stability, with a proper refactoring being handled in a separate branch.

Learnt from: pujitm
PR: unraid/api#974
File: web/components/Loading/Error.vue:50-50
Timestamp: 2024-12-06T17:34:16.133Z
Learning: In this project, the `Button` component from `~/components/shadcn/Button.vue` is autoloaded and does not need to be imported manually in components like `web/components/Loading/Error.vue`.

Learnt from: mdatelle
PR: unraid/api#1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Ensure Vue reactivity imports are added to original store files as they may be missing because Nuxt auto import was turned on

Learnt from: elibosley
PR: unraid/api#1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Learnt from: pujitm
PR: unraid/api#975
File: web/components/Notifications/TabList.vue:1-4
Timestamp: 2024-12-09T15:45:46.492Z
Learning: In our Nuxt.js setup for the `web` project, it's not necessary to explicitly import `computed` from `vue` in Vue components, as it's globally available.

web/app.vue (12)

Learnt from: elibosley
PR: #972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like TabsList and TabsTrigger used in web/components/Notifications/TabList.vue are automatically available without imports.

Learnt from: elibosley
PR: #974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like LoadingSpinner in web/components/Loading/Error.vue are not necessary.

Learnt from: elibosley
PR: #1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: pujitm
PR: #974
File: web/components/Loading/Error.vue:50-50
Timestamp: 2024-12-06T17:34:16.133Z
Learning: In this project, the Button component from ~/components/shadcn/Button.vue is autoloaded and does not need to be imported manually in components like web/components/Loading/Error.vue.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Ensure Vue reactivity imports are added to original store files as they may be missing because Nuxt auto import was turned on

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Avoid relying on Nuxt's auto-imports in test environment

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Don't rely on Nuxt auto-imports in tests

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-4
Timestamp: 2024-12-09T15:45:46.492Z
Learning: In our Nuxt.js setup for the web project, it's not necessary to explicitly import computed from vue in Vue components, as it's globally available.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/components/**/*.ts : Use mount from Vue Test Utils for component testing

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.449Z
Learning: Applies to web/test/**/* : Use mount from Vue Test Utils for component testing in web/test

Learnt from: zackspear
PR: #1143
File: web/pages/webComponents.vue:28-29
Timestamp: 2025-02-18T18:38:24.981Z
Learning: In Vue components, when there's a repeating pattern of heading + content + divider, prefer using a wrapper component that takes the heading as a prop and content via slots, rather than duplicating the structure. This improves maintainability and reduces code duplication.

web/package.json (12)

Learnt from: mdatelle
PR: #1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Learnt from: elibosley
PR: #1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: pujitm
PR: #1211
File: unraid-ui/package.json:43-43
Timestamp: 2025-03-14T19:18:23.324Z
Learning: The @internationalized/number package is a dependency of reka-ui, which is used for number formatting in the Unraid UI components.

Learnt from: elibosley
PR: #1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Learnt from: zackspear
PR: #1079
File: web/scripts/deploy-dev.sh:51-54
Timestamp: 2025-01-29T00:59:26.633Z
Learning: For the Unraid web components deployment process, JS file validation isn't required in auth-request.php updates since the files come from the controlled build pipeline where we are the source.

Learnt from: elibosley
PR: #1120
File: plugin/package.json:1-8
Timestamp: 2025-02-05T14:43:25.062Z
Learning: The repository uses Renovate for automated dependency updates, making strict version pinning in package.json less critical as updates are handled automatically through PRs.

Learnt from: elibosley
PR: #972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/api-rules.mdc:0-0
Timestamp: 2025-07-21T14:00:06.245Z
Learning: Applies to api/src/unraid-api/**/* : Prefer adding new files to the NestJS repository located at api/src/unraid-api/ instead of the legacy code

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-4
Timestamp: 2024-12-09T15:45:46.492Z
Learning: In our Nuxt.js setup for the web project, it's not necessary to explicitly import computed from vue in Vue components, as it's globally available.

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like TabsList and TabsTrigger used in web/components/Notifications/TabList.vue are automatically available without imports.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Ensure Vue reactivity imports are added to original store files as they may be missing because Nuxt auto import was turned on

Learnt from: elibosley
PR: #974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like LoadingSpinner in web/components/Loading/Error.vue are not necessary.

web/app.config.ts (13)

Learnt from: elibosley
PR: #972
File: web/store/theme.ts:46-49
Timestamp: 2024-12-17T14:59:32.458Z
Learning: In the web/store/theme.ts file of the Unraid web application, the header is intentionally designed to have a light background with dark text in dark mode, and a dark background with light text in light mode.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/mocks/**/*.ts : Frequently used mocks are stored under web/test/mocks

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.449Z
Learning: Applies to web/**/*.ts : Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Learnt from: elibosley
PR: #1181
File: web/store/theme.ts:0-0
Timestamp: 2025-02-24T14:51:21.328Z
Learning: In the Unraid API project's theme system, exact TypeScript type definitions are preferred over index signatures for theme variables to ensure better type safety.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/store/**/*.ts : Set initial state for focused testing in store tests

Learnt from: elibosley
PR: #1063
File: web/_data/serverState.ts:137-147
Timestamp: 2025-01-27T14:57:46.617Z
Learning: The values in web/_data/serverState.ts are used for testing purposes and should remain as hardcoded mock data to facilitate testing different scenarios.

Learnt from: pujitm
PR: #1367
File: packages/unraid-api-plugin-connect/src/pubsub/user.service.ts:44-52
Timestamp: 2025-04-23T20:19:42.542Z
Learning: The project uses a custom or extended implementation of NestJS ConfigService that includes a set() method for runtime configuration mutation, unlike the standard @nestjs/config package which only provides getter methods.

Learnt from: pujitm
PR: #1211
File: web/codegen.ts:14-14
Timestamp: 2025-03-12T13:35:43.900Z
Learning: The JSON scalar type in web/codegen.ts was temporarily changed from 'string' to 'any' for compatibility with JsonForms integration. This change facilitates the implementation of the Connect settings web component.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Place all mock declarations at the top level

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/components/**/*.ts : Test component behavior and output, not implementation details

Learnt from: elibosley
PR: #972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: elibosley
PR: #1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: elibosley
PR: #1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

web/assets/main.css (16)

Learnt from: elibosley
PR: #1181
File: web/store/theme.ts:210-216
Timestamp: 2025-02-21T18:40:10.810Z
Learning: When updating theme-related CSS variables via cssText, preserve existing non-theme styles by filtering out only theme-related rules (those starting with '--') and combining them with the new theme styles.

Learnt from: elibosley
PR: #1155
File: web/store/theme.ts:49-50
Timestamp: 2025-02-20T15:52:56.733Z
Learning: CSS variable names in the theme store should be concise and follow established patterns. For example, prefer '--gradient-start' over '--color-customgradient-start' to maintain consistency with other variable names.

Learnt from: elibosley
PR: #972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: elibosley
PR: #1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: mdatelle
PR: #1106
File: web/components/UserProfile.ce.vue:168-170
Timestamp: 2025-02-07T19:25:02.936Z
Learning: Files with .ce.vue extension are web components that require self-contained styles. Global style imports within these components are valid and necessary for proper encapsulation.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Ensure Vue reactivity imports are added to original store files as they may be missing because Nuxt auto import was turned on

Learnt from: elibosley
PR: #972
File: web/store/theme.ts:46-49
Timestamp: 2024-12-17T14:59:32.458Z
Learning: In the web/store/theme.ts file of the Unraid web application, the header is intentionally designed to have a light background with dark text in dark mode, and a dark background with light text in light mode.

Learnt from: elibosley
PR: #1522
File: web/components/UserProfile/DropdownTrigger.vue:0-0
Timestamp: 2025-07-17T14:09:37.222Z
Learning: Tailwind CSS v4 changed gradient utility classes from bg-gradient-to-r to bg-linear-to-r. The new syntax uses bg-linear-to-r instead of the v3 syntax bg-gradient-to-r for linear gradients.

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like TabsList and TabsTrigger used in web/components/Notifications/TabList.vue are automatically available without imports.

Learnt from: elibosley
PR: #1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Learnt from: elibosley
PR: #974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like LoadingSpinner in web/components/Loading/Error.vue are not necessary.

Learnt from: pujitm
PR: #1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in web/components get built as custom elements and prefixed with unraid-, making them available as HTML custom elements at runtime.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.108Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Avoid relying on Nuxt's auto-imports in test environment

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-4
Timestamp: 2024-12-09T15:45:46.492Z
Learning: In our Nuxt.js setup for the web project, it's not necessary to explicitly import computed from vue in Vue components, as it's globally available.

Learnt from: elibosley
PR: #1522
File: unraid-ui/src/styles/globals.css:172-174
Timestamp: 2025-07-18T16:13:55.872Z
Learning: In Tailwind CSS v4, --breakpoint-* is valid syntax within the @theme directive for defining custom breakpoints. The wildcard pattern allows you to define breakpoints like --breakpoint-xs, --breakpoint-2xl, etc. Setting --breakpoint-*: initial is the documented way to remove default breakpoints. This syntax is specific to Tailwind's theme system and is not subject to standard CSS custom property naming rules.

unraid-ui/src/styles/globals.css (8)