Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
9b7e375
feat: set up base layout and content test
Jul 21, 2025
151be64
chore: update example andn remove env.production from tracking
Jul 22, 2025
c2944cf
chore: ignore all .env unless force tracked and align example with pr…
Jul 22, 2025
1bea98e
chore: fix typo
Jul 22, 2025
a719b57
feat: create base Detail component and placeholder tab components
Jul 22, 2025
4a4ffda
feat: use and customize NavigationMenu and update status badges
Jul 23, 2025
a69bee2
refactor: get menu children working
Jul 23, 2025
990b59d
feat: add navigation header controls, custom group dropdown, and spac…
Jul 23, 2025
0ba573e
test: create detail page and web component to test in webgui
Jul 24, 2025
9c083a0
update main.yml and remove cat command
Jul 24, 2025
d2805cc
refactor: update main.yml to include .env.production
Jul 24, 2025
5cd27ff
test: create proper test setup for Detail layout
Jul 24, 2025
435e77d
chore: register DetailTest in config
Jul 24, 2025
61a0cb9
chore: update dependencies and clean up unused imports in components
elibosley Jul 27, 2025
f6c9951
feat: set up base layout and content test
Jul 21, 2025
b816886
refactor: break up Detail component into seperate components
Jul 30, 2025
15ddf2f
fix: fix typescript error
Jul 30, 2025
56e7607
refactor: use more generic naming with item prop
Jul 30, 2025
0c082fd
refactor: remove old Detail component and update test component
Jul 30, 2025
0c0d416
refactor: consolidate interfaces, fix typescript error, and include s…
Jul 30, 2025
e392204
feat: add responsive styles
Jul 31, 2025
0853c99
refactor: use Drawer component for mobile view navigation
Jul 31, 2025
8ac4155
refactor: update dropdown menus
Jul 31, 2025
ae22ce1
fix: include nuxt ui configuration files in web-components-plugins
Aug 1, 2025
076e711
feat: build docker card layout (#1572)
mdatelle Aug 27, 2025
57488a3
commit changes
elibosley Aug 28, 2025
81acd60
feat: use vue mode
elibosley Aug 29, 2025
246919b
chore: update environment configuration and remove unused files
elibosley Sep 4, 2025
36f2caa
feat: enhance type declarations and update project structure
elibosley Sep 6, 2025
4a85d7e
refactor: update mount-engine test to ensure immediate component moun…
elibosley Sep 6, 2025
dae0c2b
style: update CSS variables for primary color and ring
elibosley Sep 6, 2025
8bdaa68
feat: enhance CSS variables and theme configurations
elibosley Sep 7, 2025
030d682
refactor: clean up type declarations by removing unused component imp…
elibosley Sep 7, 2025
a8c5543
feat: enhance button component and update project structure
elibosley Sep 7, 2025
ff45f12
feat: add test:watch script and improve button component props handling
elibosley Sep 7, 2025
30d1298
feat: refactor API key management and update GraphQL queries
elibosley Sep 7, 2025
8469699
feat: enhance accessibility and update sandbox attributes in components
elibosley Sep 7, 2025
e9ea493
feat: update component registry and fix CSS source path
elibosley Sep 7, 2025
75930a4
refactor: simplify manifest file validation logic
elibosley Sep 8, 2025
fe38e34
fix: update paths for plugin build and manifest validation
elibosley Sep 8, 2025
9a9de63
feat: add display settings modification for Unraid UI
elibosley Sep 8, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion .github/workflows/build-plugin.yml
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ jobs:
uses: actions/download-artifact@v5
with:
pattern: unraid-wc-rich
path: ${{ github.workspace }}/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/nuxt
path: ${{ github.workspace }}/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/standalone
merge-multiple: true
- name: Download Unraid API
uses: actions/download-artifact@v5
Expand Down
3 changes: 1 addition & 2 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,6 @@ jobs:
echo VITE_CONNECT=${{ secrets.VITE_CONNECT }} >> .env
echo VITE_UNRAID_NET=${{ secrets.VITE_UNRAID_NET }} >> .env
echo VITE_CALLBACK_KEY=${{ secrets.VITE_CALLBACK_KEY }} >> .env
cat .env

- name: Install Node
uses: actions/setup-node@v4
Expand Down Expand Up @@ -385,7 +384,7 @@ jobs:
uses: actions/upload-artifact@v4
with:
name: unraid-wc-rich
path: web/.nuxt/standalone-apps
path: web/dist

build-plugin-staging-pr:
name: Build and Deploy Plugin
Expand Down
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ unraid-ui/node_modules/
# TypeScript v1 declaration files
typings/

# Auto-generated type declarations for Nuxt UI
auto-imports.d.ts
components.d.ts

# Optional npm cache directory
.npm

Expand Down Expand Up @@ -118,3 +122,4 @@ api/dev/Unraid.net/myservers.cfg

# local Mise settings
.mise.toml

93 changes: 82 additions & 11 deletions @tailwind-shared/css-variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,59 @@

/* Light mode defaults */
:root {
/* Override Tailwind v4 global styles to use webgui variables */
--ui-bg: var(--background-color) !important;
--ui-text: var(--text-color) !important;
/* Nuxt UI Color System - Primary (Orange for Unraid) */
--ui-color-primary-50: #fff7ed;
--ui-color-primary-100: #ffedd5;
--ui-color-primary-200: #fed7aa;
--ui-color-primary-300: #fdba74;
--ui-color-primary-400: #fb923c;
--ui-color-primary-500: #ff8c2f;
--ui-color-primary-600: #ea580c;
--ui-color-primary-700: #c2410c;
--ui-color-primary-800: #9a3412;
--ui-color-primary-900: #7c2d12;
--ui-color-primary-950: #431407;

/* Nuxt UI Color System - Neutral (True Gray) */
--ui-color-neutral-50: #fafafa;
--ui-color-neutral-100: #f5f5f5;
--ui-color-neutral-200: #e5e5e5;
--ui-color-neutral-300: #d4d4d4;
--ui-color-neutral-400: #a3a3a3;
--ui-color-neutral-500: #737373;
--ui-color-neutral-600: #525252;
--ui-color-neutral-700: #404040;
--ui-color-neutral-800: #262626;
--ui-color-neutral-900: #171717;
--ui-color-neutral-950: #0a0a0a;

/* Nuxt UI Default color shades */
--ui-primary: var(--ui-color-primary-500);
--ui-secondary: var(--ui-color-neutral-500);

/* Nuxt UI Design Tokens - Text */
--ui-text-dimmed: var(--ui-color-neutral-400);
--ui-text-muted: var(--ui-color-neutral-500);
--ui-text-toned: var(--ui-color-neutral-600);
--ui-text: var(--ui-color-neutral-700);
--ui-text-highlighted: var(--ui-color-neutral-900);
--ui-text-inverted: white;

/* Nuxt UI Design Tokens - Background */
--ui-bg: white;
--ui-bg-muted: var(--ui-color-neutral-50);
--ui-bg-elevated: var(--ui-color-neutral-100);
--ui-bg-accented: var(--ui-color-neutral-200);
--ui-bg-inverted: var(--ui-color-neutral-900);

/* Nuxt UI Design Tokens - Border */
--ui-border: var(--ui-color-neutral-200);
--ui-border-muted: var(--ui-color-neutral-200);
--ui-border-accented: var(--ui-color-neutral-300);
--ui-border-inverted: var(--ui-color-neutral-900);

/* Nuxt UI Radius */
--ui-radius: 0.5rem;

--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
Expand All @@ -16,15 +66,15 @@
--card-foreground: 0 0% 3.9%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--primary: 0 0% 9%;
--primary: 24 100% 50%; /* Orange #ff8c2f in HSL */
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--ring: 0 0% 3.9%;
--ring: 24 100% 50%; /* Orange ring to match primary */
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
Expand All @@ -34,9 +84,30 @@

/* Dark mode */
.dark {
/* Override Tailwind v4 global styles to use webgui variables */
--ui-bg: var(--background-color) !important;
--ui-text: var(--text-color) !important;
/* Nuxt UI Default color shades - Dark mode */
--ui-primary: var(--ui-color-primary-400);
--ui-secondary: var(--ui-color-neutral-400);

/* Nuxt UI Design Tokens - Text (Dark) */
--ui-text-dimmed: var(--ui-color-neutral-500);
--ui-text-muted: var(--ui-color-neutral-400);
--ui-text-toned: var(--ui-color-neutral-300);
--ui-text: var(--ui-color-neutral-200);
--ui-text-highlighted: white;
--ui-text-inverted: var(--ui-color-neutral-900);

/* Nuxt UI Design Tokens - Background (Dark) */
--ui-bg: var(--ui-color-neutral-900);
--ui-bg-muted: var(--ui-color-neutral-800);
--ui-bg-elevated: var(--ui-color-neutral-800);
--ui-bg-accented: var(--ui-color-neutral-700);
--ui-bg-inverted: white;

/* Nuxt UI Design Tokens - Border (Dark) */
--ui-border: var(--ui-color-neutral-800);
--ui-border-muted: var(--ui-color-neutral-700);
--ui-border-accented: var(--ui-color-neutral-700);
--ui-border-inverted: white;

--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
Expand All @@ -48,15 +119,15 @@
--card-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--primary: 24 100% 50%; /* Orange #ff8c2f in HSL */
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 0 0% 83.1%;
--ring: 24 100% 50%; /* Orange ring to match primary */
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
Expand Down
1 change: 1 addition & 0 deletions @tailwind-shared/index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* Tailwind Shared Styles - Single entry point for all shared CSS */
@import './css-variables.css';
@import './unraid-theme.css';
@import './theme-variants.css';
@import './base-utilities.css';
@import './sonner.css';
96 changes: 96 additions & 0 deletions @tailwind-shared/theme-variants.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/**
* Tailwind v4 Theme Variants
* Defines theme-specific CSS variables that can be switched via classes
* These are applied dynamically based on the theme selected in GraphQL
*/

/* Default/White Theme */
:root,
.theme-white {
--header-text-primary: #ffffff;
--header-text-secondary: #999999;
--header-background-color: #1c1b1b;
--header-gradient-start: rgba(28, 27, 27, 0);
--header-gradient-end: rgba(28, 27, 27, 0.7);
--ui-border-muted: hsl(240 5% 20%);
--color-border: #383735;
--color-alpha: #ff8c2f;
--color-beta: #1c1b1b;
--color-gamma: #ffffff;
--color-gamma-opaque: rgba(255, 255, 255, 0.3);
}

/* Black Theme */
.theme-black,
.theme-black.dark {
--header-text-primary: #1c1b1b;
--header-text-secondary: #999999;
--header-background-color: #f2f2f2;
--header-gradient-start: rgba(242, 242, 242, 0);
--header-gradient-end: rgba(242, 242, 242, 0.7);
--ui-border-muted: hsl(240 5.9% 90%);
--color-border: #e0e0e0;
--color-alpha: #ff8c2f;
--color-beta: #f2f2f2;
--color-gamma: #1c1b1b;
--color-gamma-opaque: rgba(28, 27, 27, 0.3);
}

/* Gray Theme */
.theme-gray {
--header-text-primary: #ffffff;
--header-text-secondary: #999999;
--header-background-color: #1c1b1b;
--header-gradient-start: rgba(28, 27, 27, 0);
--header-gradient-end: rgba(28, 27, 27, 0.7);
--ui-border-muted: hsl(240 5% 25%);
--color-border: #383735;
--color-alpha: #ff8c2f;
--color-beta: #383735;
--color-gamma: #ffffff;
--color-gamma-opaque: rgba(255, 255, 255, 0.3);
}

/* Azure Theme */
.theme-azure {
--header-text-primary: #1c1b1b;
--header-text-secondary: #999999;
--header-background-color: #f2f2f2;
--header-gradient-start: rgba(242, 242, 242, 0);
--header-gradient-end: rgba(242, 242, 242, 0.7);
--ui-border-muted: hsl(210 40% 80%);
--color-border: #5a8bb8;
--color-alpha: #ff8c2f;
--color-beta: #e7f2f8;
--color-gamma: #336699;
--color-gamma-opaque: rgba(51, 102, 153, 0.3);
}

/* Dark Mode Overrides */
.dark {
--ui-border-muted: hsl(240 5% 20%);
--color-border: #383735;
}

/*
* Dynamic color variables for user overrides from GraphQL
* These are set via JavaScript and override the theme defaults
*/
.has-custom-header-text {
--header-text-primary: var(--custom-header-text-primary);
--color-header-text-primary: var(--custom-header-text-primary);
}

.has-custom-header-meta {
--header-text-secondary: var(--custom-header-text-secondary);
--color-header-text-secondary: var(--custom-header-text-secondary);
}

.has-custom-header-bg {
--header-background-color: var(--custom-header-background-color);
--color-header-background: var(--custom-header-background-color);
--header-gradient-start: var(--custom-header-gradient-start);
--header-gradient-end: var(--custom-header-gradient-end);
--color-header-gradient-start: var(--custom-header-gradient-start);
--color-header-gradient-end: var(--custom-header-gradient-end);
}
28 changes: 14 additions & 14 deletions @tailwind-shared/unraid-theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -85,22 +85,22 @@
--color-primary-950: #431407;

/* Header colors */
--color-header-text-primary: var(--header-text-primary);
--color-header-text-secondary: var(--header-text-secondary);
--color-header-background-color: var(--header-background-color);
--color-header-text-primary: #1c1c1c;
--color-header-text-secondary: #999999;
--color-header-background: #f2f2f2;

/* Legacy colors */
--color-alpha: var(--color-alpha);
--color-beta: var(--color-beta);
--color-gamma: var(--color-gamma);
--color-gamma-opaque: var(--color-gamma-opaque);
--color-customgradient-start: var(--color-customgradient-start);
--color-customgradient-end: var(--color-customgradient-end);
/* Legacy colors - defaults (overridden by theme-variants.css) */
Comment on lines 87 to +92
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Back-compat alias for renamed header background token

--color-header-background-color was renamed; add an alias to avoid breaking existing CSS until consumers migrate.

   /* Header colors */
   --color-header-text-primary: #1c1c1c;
   --color-header-text-secondary: #999999;
   --color-header-background: #f2f2f2;
+  /* Back-compat alias — remove after downstream migration */
+  --color-header-background-color: var(--color-header-background);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* Header colors */
--color-header-text-primary: var(--header-text-primary);
--color-header-text-secondary: var(--header-text-secondary);
--color-header-background-color: var(--header-background-color);
--color-header-text-primary: #1c1c1c;
--color-header-text-secondary: #999999;
--color-header-background: #f2f2f2;
/* Legacy colors */
--color-alpha: var(--color-alpha);
--color-beta: var(--color-beta);
--color-gamma: var(--color-gamma);
--color-gamma-opaque: var(--color-gamma-opaque);
--color-customgradient-start: var(--color-customgradient-start);
--color-customgradient-end: var(--color-customgradient-end);
/* Legacy colors - defaults (overridden by theme-variants.css) */
/* Header colors */
--color-header-text-primary: #1c1c1c;
--color-header-text-secondary: #999999;
--color-header-background: #f2f2f2;
/* Back-compat alias — remove after downstream migration */
--color-header-background-color: var(--color-header-background);
/* Legacy colors - defaults (overridden by theme-variants.css) */
🤖 Prompt for AI Agents
In @tailwind-shared/unraid-theme.css around lines 87 to 92, add a
backward-compatibility alias for the renamed header background token by defining
--color-header-background-color to reference the existing
--color-header-background variable (so existing consumer CSS using the old name
continues to work); place the alias next to the current
--color-header-background declaration and ensure it uses
var(--color-header-background) so updates remain in sync.

--color-alpha: #ff8c2f;
--color-beta: #f2f2f2;
--color-gamma: #999999;
--color-gamma-opaque: rgba(153, 153, 153, 0.5);
--color-customgradient-start: rgba(242, 242, 242, 0);
--color-customgradient-end: rgba(242, 242, 242, 0.85);

/* Gradients */
--color-header-gradient-start: var(--header-gradient-start);
--color-header-gradient-end: var(--header-gradient-end);
--color-banner-gradient: var(--banner-gradient);
/* Gradients - defaults (overridden by theme-variants.css) */
--color-header-gradient-start: rgba(242, 242, 242, 0);
--color-header-gradient-end: rgba(242, 242, 242, 0.85);
--color-banner-gradient: none;

/* Font sizes */
--font-10px: 10px;
Expand Down
2 changes: 1 addition & 1 deletion api/dev/configs/api.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "4.18.2",
"version": "4.19.1",
"extraOrigins": [],
"sandbox": true,
"ssoSubIds": [],
Expand Down
6 changes: 6 additions & 0 deletions api/generated-schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -1361,6 +1361,12 @@ type CpuLoad {

"""The percentage of time the CPU spent servicing hardware interrupts."""
percentIrq: Float!

"""The percentage of time the CPU spent running virtual machines (guest)."""
percentGuest: Float!

"""The percentage of CPU time stolen by the hypervisor."""
percentSteal: Float!
}

type CpuUtilization implements Node {
Expand Down
Loading
Loading