feat(web): build docker detail layout #1533

mdatelle · 2025-07-21T21:32:25Z

Summary by CodeRabbit

New Features
- Introduces a Docker management UI with Detail and Card views, tabs (Overview, Logs, Console, Preview, Edit), header controls, and a new “unraid-next” layout.
- Adds a “Detail Test” web component and demo pages.
- Adds keyboard shortcut support.
Refactor
- Updated default layout navigation with nested dropdowns and improved app wrapper.
Style
- Minor CSS formatting.
Chores
- Migrated to Nuxt UI Pro in Vue mode; updated UI colors and toaster defaults.
- Added type auto-registrations, env handling improvements, CI env injection, and .gitignore updates.
Documentation
- Guidance updated to use Nuxt UI in Vue mode.

coderabbitai · 2025-07-21T21:32:31Z

Walkthrough

Introduces a Docker UI feature set (Detail and Card views with tabs: Overview, Logs, Console, Preview, Edit), a new layout, supporting components, and pages. Migrates Nuxt UI usage to “Vue mode” with a client plugin, adjusts configuration, env handling, and CI. Adds web component registration logic and a plugin page entry.

Changes

Cohort / File(s)	Summary
Nuxt UI in Vue mode + configuration `web/nuxt.config.ts`, `web/plugins/nuxt-ui.client.ts`, `web/app.config.ts`, `web/app.vue`, `web/pages/index.vue`	Removes @nuxt/ui module config; adds Vite plugin for UI; initializes Nuxt UI via a client plugin (Vue mode) and exposes appConfig; updates UI colors and toaster; switches UButton import; replaces UApp wrapper with div.
Docker Detail & Card feature `web/components/LayoutViews/Detail/`, `web/components/LayoutViews/Card/`, `web/components/Docker/`, `web/pages/docker.vue`, `web/pages/docker/`	Adds Detail and Card layouts with navigation, header, grid, and item components; provides Docker-specific subcomponents (Overview, Logs, Console, Preview, Edit); introduces pages to showcase views; adds header content controls and tab wiring.
Web components & wrapper `web/pages/webComponents.vue`, `web/components/Wrapper/web-component-plugins.ts`, `web/components/LayoutViews/Detail/DetailTest.ce.vue`, `plugin/source/.../DetailTest.page`	Implements guarded web component registration (dev/prod paths), provides Nuxt UI config to app via wrapper, adds a Detail test custom element and a Dynamix page to render it.
Environment, gitignore, and CI `web/.env.example`, `web/.env.production`, `web/.gitignore`, `.gitignore`, `.github/workflows/main.yml`	Updates env example (account URL, license key), removes production env values, adjusts ignore patterns for env files, and writes NUXT_UI_PRO_LICENSE to .env.production in CI.
Type declarations (auto-generated) `web/auto-imports.d.ts`, `web/components.d.ts`	Adds global typings for Nuxt UI composables and components to improve IDE/type support.
Composables `web/composables/defineShortcuts.ts`, `web/composables/useUIConfig.ts`	Adds keyboard shortcuts handler and a multi-source UI config resolver with defaults.
Layouts & navigation `web/layouts/unraid-next.vue`, `web/layouts/default.vue`	Adds a new layout initializing theme defaults; enhances default layout with hierarchical route rendering and dropdowns.
Dependencies `web/package.json`, `packages/unraid-api-plugin-health/package.json`, `packages/unraid-shared/package.json`	Replaces @nuxt/ui with @nuxt/ui-pro in web; adds devDependency pify to two packages.
Minor/misc `web/assets/main.css`, `web/eslint.config.mjs`, `CLAUDE.md`	Inserts a blank line in CSS; disables vue/no-undef-components rule; updates internal documentation note.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Page as Nuxt Page
  participant Plugin as nuxt-ui.client (Vue mode)
  participant UI as Nuxt UI (Vue)
  participant Cfg as appConfig

  Note over Plugin,UI: Client init (pre)
  Plugin->>Cfg: useAppConfig()
  Plugin->>UI: vueApp.use(ui, { prefix: 'U', appConfig })
  Plugin->>Page: provide('appConfig'), set window.appConfig

  User->>Page: Navigate to Docker Detail/Card pages
  Page->>UI: Use U* components (global)
  Page->>Cfg: Read via inject / globalProperties / window

sequenceDiagram
  autonumber
  actor User
  participant Detail as Detail.vue
  participant Left as DetailLeftNavigation
  participant Right as DetailRightContent
  participant Tabs as UTabs

  User->>Left: Select item / expand groups / multi-select
  Left-->>Detail: update:selectedId / update:selectedItems / update:expandedGroups
  Detail->>Right: selectedItem, tabs, selectedTab
  User->>Tabs: Change tab
  Tabs-->>Right: update:selectedTab
  Right-->>Detail: update:selectedTab

sequenceDiagram
  autonumber
  participant Page as webComponents.vue
  participant Window as window.customElements
  participant Loader as Dev: dynamic import<br/>Prod: script tag

  Page->>Page: if (window.__unraidUiComponentsRegistered) return
  Page->>Loader: Load components (env-dependent)
  Loader-->>Page: Components ready
  Page->>Window: customElements.get(...) checks
  Page->>Page: window.__unraidUiComponentsRegistered = true

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

feat: build docker card layout #1572 — Mirrors the same Docker UI feature introduction, Nuxt UI migration to Vue mode, web components registration, and env/CI adjustments across matching files.

Suggested reviewers

zackspear
pujitm

Poem

A bunny debugged the docks tonight,
Tabbing through logs by moonlit light.
Cards flip, details sing—how neat!
Web components hop to meet.
Vue-mode carrots line the row,
Ship set sail—let’s watch it go! 🥕🚢

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/build-docker-detail-layout

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 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.
- 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.
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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit 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

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
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.

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (5)

web/layouts/default.vue (1)

63-67: Nit: Use scoped styles to prevent leakage

The global @unraid/ui/styles & ~/assets/main.css are already imported project-wide. Importing them again inside the layout duplicates CSS.

Unless this file is built as an isolated custom element, drop the imports or add scoped to avoid duplicate rules.
web/pages/docker.vue (3)
2-2: Remove unnecessary component imports.

Based on this project's Nuxt configuration, UI components are autoloaded and don't require explicit imports.
-import { UButton, UPageHeader } from '#components';
9-9: Use more descriptive variable names.

The variable test doesn't clearly indicate it represents the page title. Consider renaming for better readability.
-const test = 'Unraid Next Page';
+const title = 'Unraid Next Page';
And update the template usage:
-    <UPageHeader :title="test" :description="description" />
+    <UPageHeader :title="title" :description="description" />
17-18: Remove duplicate content.

The description text is repeated both in the page header and the first paragraph.
-    <p class="mb-4">This is a sample page using the Unraid Next layout.</p>
-    <p class="mb-4">You can customize this page as needed.</p>
+    <p class="mb-4">You can customize this page as needed.</p>
web/layouts/unraid-next.vue (1)
4-4: Remove unnecessary component imports.

Consistent with the project's Nuxt autoloading configuration, these UI components don't require explicit imports.
-import { UNavigationMenu, UPage } from '#components';

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 407585c and 4fa2563.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (7)

.gitignore (1 hunks)
web/assets/main.css (1 hunks)
web/layouts/default.vue (2 hunks)
web/layouts/unraid-next.vue (1 hunks)
web/nuxt.config.ts (1 hunks)
web/package.json (1 hunks)
web/pages/docker.vue (1 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/nuxt.config.ts

🧠 Learnings (8)

📓 Common learnings

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: 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: elibosley
PR: unraid/api#1101
File: api/src/unraid-api/unraid-file-modifier/modifications/patches/default-page-layout.patch:6-20
Timestamp: 2025-01-31T22:01:41.842Z
Learning: The default-page-layout.patch is used to remove the old jGrowl notification system from Unraid pages, as notifications are handled by a new system implemented on a different page.

Learnt from: elibosley
PR: unraid/api#1101
File: api/src/unraid-api/unraid-file-modifier/modifications/patches/default-page-layout.patch:6-20
Timestamp: 2025-01-31T22:01:41.842Z
Learning: The default-page-layout.patch removes the old jGrowl notification system and is complemented by the unraid-toaster component implementation. The new system is added through the DefaultPageLayout modification which inserts the toaster component with proper position configuration based on user preferences.

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: 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.

web/assets/main.css (14)

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: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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.139Z
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-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: 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: 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: 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: #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: #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: 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.

web/package.json (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: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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.139Z
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: 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: 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: #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: #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: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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.

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: 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.

web/layouts/default.vue (24)

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/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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: 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: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
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: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Applies to web/**/*.ts : Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Learnt from: pujitm
PR: #1417
File: web/components/ConnectSettings/ConnectSettings.ce.vue:11-18
Timestamp: 2025-06-13T17:14:21.739Z
Learning: The project’s build tooling auto-imports common Vue/Pinia helpers such as storeToRefs, so explicit import statements for them are not required.

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.139Z
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: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. The setActivePinia(createPinia()) call at the module level in store files is intentional and ensures all web components share a single Pinia store instance, which is the desired behavior. This shared state approach is critical for the application's architecture to function correctly.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files ensures that all web components share a single Pinia store instance, which is the desired behavior. Without this initialization, each web component would have its own isolated store, breaking the intended architecture.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to maintain proper isolation and encapsulation.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to function correctly.

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: #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.

Learnt from: elibosley
PR: #1369
File: web/components/Activation/WelcomeModal.ce.vue:40-40
Timestamp: 2025-04-25T13:29:07.868Z
Learning: The #confirmPassword selector in the WelcomeModal.ce.vue component is intentionally looking for an element that exists in the Unraid OS login page (.login.php), not within the component itself. This is used as part of a font-size adjustment workaround to handle different CSS between login and authenticated pages.

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: 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: 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: #1101
File: api/src/unraid-api/unraid-file-modifier/modifications/patches/default-page-layout.patch:24-27
Timestamp: 2025-01-31T22:01:22.708Z
Learning: The Unraid UI uses a modern notification system with a custom unraid-toaster component replacing the legacy jGrowl notifications. The system is backed by a comprehensive GraphQL API with real-time subscription support for notification updates.

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.

web/nuxt.config.ts (12)