feat: build docker card layout

[mdatelle]

Summary by CodeRabbit

• New Features

  • Introduced a comprehensive Docker management interface with detail and card views, including new components for container overview, logs, console, editing, and web preview.
  • Added a new layout and navigation system for detailed item views with tabbed content and groupable card layouts.
  • Enabled dynamic loading and registration of Unraid UI web components, including a new <unraid-detail-test /> web component.
  • Added new page and layout components for enhanced UI flexibility.

• Enhancements

  • Updated environment variable handling and documentation, including production license key support.
  • Switched to "@nuxt/ui-pro" for advanced UI features and updated related configuration.
  • Improved theme initialization and UI configuration injection.

• Chores

  • Added development dependencies and updated ignore rules for environment files.
  • Adjusted ESLint configuration for component definition checks.

• Style

  • Minor improvements to import statements and style tag formatting.

• Documentation

  • Updated example environment variable files and comments for clarity.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces a comprehensive suite of new Vue 3 components for Docker container management, including detailed layouts, card views, and supporting UI elements. It transitions the UI library from @nuxt/ui to @nuxt/ui-pro, updates environment and ignore files, and enhances web component registration and Nuxt configuration. Several new page and layout files are also added.

Changes

Cohort / File(s)	Change Summary
Docker UI Components web/components/Docker/Console.vue, .../Edit.vue, .../HeaderContent.vue, .../Logs.vue, .../Overview.vue, .../Preview.vue	Added new Vue 3 components for Docker management: Console, Edit, HeaderContent, Logs, Overview, and Preview, each with typed props and tailored UI for container operations.
Card Layout Components web/components/LayoutViews/Card/Card.vue, .../CardGrid.vue, .../CardGroupHeader.vue, .../CardHeader.vue, .../CardItem.vue	Introduced a card-based layout system with selection, grouping, filtering, and management actions, including grid, header, group header, and individual card item components.
Detail Layout Components web/components/LayoutViews/Detail/Detail.vue, .../DetailContentHeader.vue, .../DetailLeftNavigation.vue, .../DetailRightContent.vue, .../DetailTest.ce.vue	Added a detailed layout view with left navigation, right content area, tab support, and a test component. Includes navigation, header, and content display logic for hierarchical data.
Docker Page and Demo web/pages/docker.vue, plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/DetailTest.page	Added a new Docker management page and a plugin test page, each utilizing the new UI components and layouts for container operations and demonstration.
Web Component Registration & Plugins web/pages/webComponents.vue, web/components/Wrapper/web-component-plugins.ts	Enhanced web component registration logic for dev/prod environments, added a new custom element, and improved plugin configuration with UI settings and locale handling.
Layouts and App Structure web/layouts/default.vue, .../unraid-next.vue, web/app.vue	Added a new layout for Unraid Next, removed unused imports, and improved theme initialization and styling.
Environment & Ignore Files .gitignore, web/.gitignore, web/.env.example, web/.env.production, .github/workflows/main.yml	Updated environment variable handling, removed production env file, adjusted ignore rules, and modified workflow to handle new env file creation.
Nuxt Config & UI Library web/nuxt.config.ts, web/package.json, web/assets/main.css	Switched UI library from @nuxt/ui to @nuxt/ui-pro, updated Nuxt config for custom elements and auto-imports, and changed CSS import accordingly.
Shared/Plugin Dependencies packages/unraid-api-plugin-health/package.json, packages/unraid-shared/package.json	Added pify as a new devDependency in both package.json files.
Linting and Miscellaneous web/eslint.config.mjs, web/pages/index.vue	Commented out a Vue lint rule and removed unused imports for cleaner code.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DockerPage (docker.vue)
    participant DetailLayout (Detail.vue)
    participant CardLayout (Card.vue)
    participant DockerComponents (Overview/Edit/Logs/Console/Preview)

    User->>DockerPage: Visit Docker page
    DockerPage->>DockerPage: Load dockerContainers list
    DockerPage->>DockerPage: Select viewMode (detail/card)
    alt detail view
        DockerPage->>DetailLayout: Render with items and tabs
        DetailLayout->>DockerComponents: Render selected tab/component (Overview, Edit, etc.)
    else card view
        DockerPage->>CardLayout: Render with items
        CardLayout->>User: Allow selection, grouping, actions
    end

Loading

sequenceDiagram
    participant WebComponentsPage (webComponents.vue)
    participant Window
    participant Loader
    participant CustomElements

    WebComponentsPage->>Window: Check __unraidUiComponentsRegistered
    alt Not registered
        WebComponentsPage->>Loader: Load components (dev: import, prod: script tag)
        Loader->>Window: Set __unraidUiComponentsRegistered = true
        Loader->>CustomElements: Register web components
    end
    WebComponentsPage->>CustomElements: Use <unraid-detail-test />

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• fix: inject Tailwind CSS into client entry point #1537: Both PRs modify web/nuxt.config.ts to add custom elements and adjust UI/styling integration, showing a shared focus on Nuxt configuration and component registration.
• feat: build out docker components  #1427: Both PRs expand Docker-related Vue components and layouts, indicating a related domain focus on Docker UI, though with different files and specific features.

Suggested reviewers

• zackspear
• pujitm

Poem

In the warren of code, new cards now appear,
Docker containers managed with cheer.
Tabs and layouts, details galore,
Web components knocking at the door!
With UI-Pro and themes so bright,
This rabbit hops through code—what a delight!
🐇✨

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/build-docker-card-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

• X
• Mastodon
• Reddit
• LinkedIn

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

[claude]

Claude finished @mdatelle's task —— View job

---

PR Review Complete ✅

Review Summary:
Comprehensive review of the feat: build docker card layout PR (26 commits, 36 files, +2468/-81 lines).

Review Checklist:

• Analyze new Card layout components
• Review Detail layout components
• Examine Docker-specific components
• Check configuration changes
• Assess security implications
• Evaluate performance considerations
• Review code quality and best practices
• Check for potential bugs
• Assess test coverage

---

🎯 Overall Assessment: GOOD

This is a well-structured implementation of a Docker container management UI with both card and detail views. The architecture is solid and follows Vue.js best practices.

✅ Strengths

Architecture & Design

• Clean separation of concerns: Card and Detail layout components are well-organized with clear responsibilities
• Reusable component hierarchy: Good abstraction with Card.vue and Detail.vue as orchestrators
• Responsive design: Proper mobile/desktop handling with UDrawer for mobile navigation
• TypeScript implementation: Strong type safety with well-defined interfaces

Code Quality

• Consistent patterns: All components follow similar prop/emit patterns
• Good Vue.js practices: Proper use of computed, ref, watch, and composables
• Clean templating: Well-structured template organization with semantic HTML

UI/UX Features

• Dual view modes: Toggle between card and detail views
• Batch operations: Multi-select functionality with bulk actions
• Interactive elements: Hover states, expansion/collapse, proper accessibility

⚠️ Areas for Improvement

1. Console Logging Issues web/components/LayoutViews/Card/Card.vue:126-131, Detail/Detail.vue:118-128

const handleAddAction = () => {
  console.log('Add action triggered'); // Remove before production
};

Impact: Development console logs left in production code
Recommendation: Replace with proper event handling or remove

2. Missing Test Coverage

• No tests found for new layout components
• Risk: Core UI functionality untested
• Recommendation: Add unit tests for component behavior, state management, and user interactions

3. Hardcoded Values web/components/LayoutViews/Card/CardItem.vue:73

<div class="text-sm ml-4">Uptime: 10 hours</div>

Impact: Static data in dynamic component
Recommendation: Use dynamic props or computed values

4. Performance Considerations

• Large navigation computation: DetailLeftNavigation.vue:59-82 creates complex nested structures
• Potential memory usage: Multiple computed properties recalculating on every change
• Recommendation: Consider memoization for expensive calculations

5. Accessibility Gaps

• Missing ARIA labels for interactive elements
• No keyboard navigation patterns documented
• Click handlers without keyboard equivalents: CardItem.vue hover-only buttons

🔒 Security Assessment: CLEAN

• No security vulnerabilities detected
• Proper event handling without XSS risks
• No sensitive data exposure in console logs (after cleanup)

🚀 Performance Notes

• Bundle impact: Adds ~2.4k lines of code
• Component tree depth: Well-optimized, no excessive nesting
• State management: Efficient reactive patterns used

🧪 Test Coverage Concerns

Critical Gap: Zero test coverage for new components

• No unit tests for Card/Detail layouts
• No integration tests for Docker components
• No accessibility testing

Recommended Test Areas:

• Component rendering and prop handling
• User interaction flows (select, expand, navigation)
• Mobile/desktop responsive behavior
• Error states and edge cases

📋 Action Items

Before Merge:

1. Remove console.log statements from production code
2. Replace hardcoded "Uptime: 10 hours" with dynamic data
3. Add basic unit tests for core components

Post-Merge:
4. Implement comprehensive test suite
5. Add ARIA labels and keyboard navigation
6. Consider performance optimizations for large datasets
7. Add error boundaries and loading states

✨ Verdict

Approve with minor fixes. This is a solid foundation for the Docker management interface. The architecture is sound and extensible. Address the console logging and hardcoded values before merging, then prioritize test coverage in follow-up work.

---

[claude]

Claude finished @mdatelle's task —— View job

---

PR Review: Docker Card Layout Implementation

Review Checklist:

• Analyze new Card layout components
• Review Detail layout modifications
• Examine Docker page changes
• Check code quality and best practices
• Assess security implications
• Evaluate performance considerations
• Review test coverage
• Provide comprehensive feedback

---

🎯 Overall Assessment: GOOD

This is a well-structured implementation of a Docker container management UI with both card and detail views. The architecture is solid and follows Vue.js best practices.

✅ Strengths

Architecture & Design

• Clean separation of concerns: Card and Detail layout components are well-organized with clear responsibilities
• Reusable component hierarchy: Good abstraction with Card.vue and Detail.vue as orchestrators
• Responsive design: Proper mobile/desktop handling with UDrawer for mobile navigation
• TypeScript implementation: Strong type safety with well-defined interfaces

Code Quality

• Consistent patterns: All components follow similar prop/emit patterns
• Good Vue.js practices: Proper use of computed, ref, watch, and composables
• Clean templating: Well-structured template organization with semantic HTML

UI/UX Features

• Dual view modes: Toggle between card and detail views
• Batch operations: Multi-select functionality with bulk actions
• Interactive elements: Hover states, expansion/collapse, proper accessibility

⚠️ Areas for Improvement

1. Console Logging Issues web/components/LayoutViews/Card/Card.vue:126-131, Detail/Detail.vue:118-128

const handleAddAction = () => {
  console.log('Add action triggered'); // Remove before production
};

Impact: Development console logs left in production code
Recommendation: Replace with proper event handling or remove

2. Missing Test Coverage

• No tests found for new layout components
• Risk: Core UI functionality untested
• Recommendation: Add unit tests for component behavior, state management, and user interactions

3. Hardcoded Values web/components/LayoutViews/Card/CardItem.vue:73

<div class="text-sm ml-4">Uptime: 10 hours</div>

Impact: Static data in dynamic component
Recommendation: Use dynamic props or computed values

4. Performance Considerations

• Large navigation computation: DetailLeftNavigation.vue:59-82 creates complex nested structures
• Potential memory usage: Multiple computed properties recalculating on every change
• Recommendation: Consider memoization for expensive calculations

5. Accessibility Gaps

• Missing ARIA labels for interactive elements
• No keyboard navigation patterns documented
• Click handlers without keyboard equivalents: CardItem.vue hover-only buttons

🔒 Security Assessment: CLEAN

• No security vulnerabilities detected
• Proper event handling without XSS risks
• No sensitive data exposure in console logs (after cleanup)

🚀 Performance Notes

• Bundle impact: Adds ~2.4k lines of code
• Component tree depth: Well-optimized, no excessive nesting
• State management: Efficient reactive patterns used

🧪 Test Coverage Concerns

Critical Gap: Zero test coverage for new components

• No unit tests for Card/Detail layouts
• No integration tests for Docker components
• No accessibility testing

Recommended Test Areas:

• Component rendering and prop handling
• User interaction flows (select, expand, navigation)
• Mobile/desktop responsive behavior
• Error states and edge cases

📋 Action Items

Before Merge:

1. Remove console.log statements from production code
2. Replace hardcoded "Uptime: 10 hours" with dynamic data
3. Add basic unit tests for core components

Post-Merge:
4. Implement comprehensive test suite
5. Add ARIA labels and keyboard navigation
6. Consider performance optimizations for large datasets
7. Add error boundaries and loading states

✨ Verdict

Approve with minor fixes. This is a solid foundation for the Docker management interface. The architecture is sound and extensible. Address the console logging and hardcoded values before merging, then prioritize test coverage in follow-up work.

---

[claude]

Claude finished @mdatelle's task —— View job

---

PR Review: Docker Card Layout Implementation

Review Checklist:

• Read and analyze all changed files
• Assess code quality and best practices
• Check for potential bugs or issues
• Review performance considerations
• Evaluate security concerns
• Assess test coverage
• Provide comprehensive feedback

---

🎯 Overall Assessment: GOOD

This is a well-structured implementation of a Docker container management UI with both card and detail views. The architecture is solid and follows Vue.js best practices.

✅ Strengths

Architecture & Design

• Clean separation of concerns: Card and Detail layout components are well-organized with clear responsibilities
• Reusable component hierarchy: Good abstraction with Card.vue and Detail.vue as orchestrators
• Consistent TypeScript interfaces: Well-defined Item and TabItem types shared across components
• Proper Vue 3 patterns: Excellent use of computed, ref, watch, and proper prop/emit patterns

Code Quality

• Type safety: Strong TypeScript implementation with well-defined interfaces
• Event handling: Clean emit/prop patterns for parent-child communication
• Template organization: Well-structured templates with semantic HTML
• Responsive design: Good mobile/desktop considerations

UI/UX Features

• Dual view modes: Clean toggle between card and detail views
• Interactive elements: Proper hover states, selection handling, and visual feedback
• Status indicators: Nice status badge system with color coding
• Bulk operations: Multi-select functionality with batch actions

⚠️ Areas for Improvement

1. Console Logging Issues

Files: web/components/LayoutViews/Card/Card.vue:128,132,145,152, web/components/LayoutViews/Detail/Detail.vue:119,123,127, web/components/LayoutViews/Card/CardItem.vue:35

const handleAddAction = () => {
  console.log('Add action triggered'); // Remove before production
};

Impact: Development console logs left in production code
Recommendation: Replace with proper event handling or remove entirely

2. Hardcoded Values

File: web/components/LayoutViews/Card/CardItem.vue:110

<div class="text-sm ml-4">Uptime: 10 hours</div>

Impact: Static data in dynamic component
Recommendation: Use dynamic props or computed values from item.status

3. Missing Error Handling

• Array bounds: DetailRightContent.vue:34-38 has bounds checking but could be more robust
• Undefined items: No fallback handling for missing selectedItem in some components
• Network failures: No error states for Docker operations

4. Performance Considerations

• Large navigation computation: Detail.vue:90-108 creates complex nested structures that could be optimized
• Frequent re-renders: Multiple computed properties may recalculate unnecessarily
• Memory usage: expandedGroups and state objects could grow large with many containers

5. Accessibility Gaps

• Missing ARIA labels: Interactive buttons lack proper accessibility attributes
• Keyboard navigation: No documented keyboard shortcuts or focus management
• Screen reader support: Status indicators need better semantic markup

6. Component Coupling

• Tight coupling: Card and Detail components share identical interfaces but implement differently
• Props drilling: Some props are passed through multiple component layers
• State management: Local state could benefit from composables for shared logic

🔒 Security Assessment: CLEAN

• No XSS vulnerabilities detected
• Proper event handling without unsafe operations
• No sensitive data exposure (after console log cleanup)
• Safe prop binding and template rendering

🚀 Performance Notes

• Bundle impact: Adds significant code (~600+ lines) but well-structured
• Component tree: Reasonable nesting depth, no excessive component layers
• State reactivity: Efficient reactive patterns, minimal unnecessary updates

🧪 Test Coverage Concerns

Critical Gap: No test coverage visible for new components

• No unit tests for Card/Detail layout components
• No integration tests for Docker-specific functionality
• No accessibility testing implementation

Recommended Test Areas:

• Component rendering with various prop combinations
• User interaction flows (selection, expansion, navigation)
• Error states and edge cases
• Mobile responsive behavior
• Keyboard accessibility patterns

📋 Action Items

Before Merge:

1. Remove console.log statements from all production code
2. Replace hardcoded "Uptime: 10 hours" with dynamic data source
3. Add basic error boundaries for component failure scenarios

Post-Merge Priority:

4. Implement comprehensive test suite for new components
5. Add ARIA labels and keyboard navigation support
6. Consider performance optimizations for large container lists
7. Extract shared logic into composables to reduce code duplication

Future Enhancements:

8. Add loading states for async operations
9. Implement error handling for Docker API failures
10. Consider virtualization for large container lists

✨ Specific Code Recommendations

Replace Console Logs (High Priority)

// Instead of:
const handleAddAction = () => {
  console.log('Add action triggered');
};

// Use:
const handleAddAction = () => {
  emit('add-container');
};

Fix Hardcoded Values (High Priority)

<!-- Instead of: -->
<div class="text-sm ml-4">Uptime: 10 hours</div>

<!-- Use: -->
<div v-if="item.uptime" class="text-sm ml-4">Uptime: {{ item.uptime }}</div>

Add Error Handling (Medium Priority)

const getCurrentTabComponent = () => {
  try {
    const tabIndex = parseInt(props.selectedTab);
    if (isNaN(tabIndex) || tabIndex < 0 || tabIndex >= props.tabs.length) {
      return null;
    }
    return props.tabs[tabIndex]?.component || null;
  } catch (error) {
    console.error('Error getting tab component:', error);
    return null;
  }
};

Verdict: Approve with Minor Fixes ✅

This is a solid foundation for Docker container management. The architecture is well-designed and the code follows Vue.js best practices. Address the console logging and hardcoded values before merging, then prioritize test coverage in follow-up work.

The implementation demonstrates good understanding of Vue 3 patterns and provides a clean, extensible foundation for future Docker management features.

---

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR1572/dynamix.unraid.net.plg