feat(ui): webgui-compatible web component library (#1075)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Eli Bosley <ekbosley@gmail.com>

- **CI/CD**
	- Updated GitHub Actions workflow to build Unraid UI Web Components.
	- Adjusted artifact naming and download configurations.

- **Web Components**
	- Added new web components and registration mechanism.
	- Implemented toast notifications.
	- Enhanced UI component library.

- **Notifications**
	- Added real-time notification subscription.
	- Created notification settings page.
	- Implemented notification toast system.

- **API Improvements**
	- Refactored GraphQL schema loading.
	- Updated authentication and cookie handling.
	- Improved error logging and server initialization.

- **Development Tools**
	- Updated ESLint configuration.
	- Enhanced import path management.
	- Added new development dependencies.

.github/workflows/main.yml

@@ -101,42 +101,35 @@ jobs:
           name: unraid-api
           path: ${{ github.workspace }}/api/deploy/release/*.tgz
 
-  # build-unraid-ui:
+  build-unraid-ui-webcomponents:
-  #   name: Build Unraid UI Library
+    name: Build Unraid UI Library (Webcomponent Version)
-  #   defaults:
+    defaults:
-  #     run:
+      run:
-  #       working-directory: unraid-ui
+        working-directory: unraid-ui
-  #   runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-  #   steps:
+    steps:
-  #     - name: Checkout repo
+      - name: Checkout repo
-  #       uses: actions/checkout@v4
+        uses: actions/checkout@v4
-  #
+  
-  #     - name: Install node
+      - name: Install node
-  #       uses: actions/setup-node@v4
+        uses: actions/setup-node@v4
-  #       with:
+        with:
-  #         cache: "npm"
+          cache: "npm"
-  #         cache-dependency-path: |
+          cache-dependency-path: |
-  #           unraid-ui/package-lock.json
+            unraid-ui/package-lock.json
-  #         node-version-file: ".nvmrc"
+          node-version-file: ".nvmrc"
-  #
+  
-  #     - name: Install dependencies
+      - name: Install dependencies
-  #       run: npm install
+        run: npm install
-  #
+  
-  #     - name: Build
+      - name: Build
-  #       run: npm run build
+        run: npm run build:wc
-  #
+  
-  #     - name: Make Built Node Artifact
+      - name: Upload Artifact to Github
-  #       run: |
+        uses: actions/upload-artifact@v4
-  #         mkdir unraid-ui-dist
+        with:
-  #         mv dist/ unraid-ui-dist/dist/
+          name: unraid-wc-ui
-  #         mv package.json unraid-ui-dist/package.json
+          path: unraid-ui/dist/
-  #         ls unraid-ui-dist
-  #
-  #     - name: Upload Artifact to Github
-  #       uses: actions/upload-artifact@v4
-  #       with:
-  #         name: unraid-ui
-  #         path: unraid-ui/unraid-ui-dist
 
   build-web:
     # needs: [build-unraid-ui]
@@ -190,11 +183,11 @@ jobs:
       - name: Upload build to Github artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: unraid-web
+          name: unraid-wc-rich
           path: web/.nuxt/nuxt-custom-elements/dist/unraid-components
 
   build-plugin:
-    needs: [build-test-api, build-web]
+    needs: [build-test-api, build-web, build-unraid-ui-webcomponents]
     defaults:
       run:
         working-directory: plugin
@@ -206,11 +199,12 @@ jobs:
           timezoneLinux: "America/Los_Angeles"
       - name: Checkout repo
         uses: actions/checkout@v4
-      - name: Download unraid web components
+      - name: Download Unraid Web Components
         uses: actions/download-artifact@v4
         with:
-          name: unraid-web
+          pattern: unraid-wc-*
           path: ./plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components
+          merge-multiple: true
       - name: Build Plugin
         run: |
           cd source/dynamix.unraid.net

api/.eslintrc.ts

@@ -1,9 +1,13 @@
-
-import type { Linter } from 'eslint';
 import eslint from '@eslint/js';
+import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+import prettier from 'eslint-plugin-prettier';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, {
+    plugins: {
+        'no-relative-import-paths': noRelativeImportPaths,
+        prettier: prettier,
+    },
     rules: {
         '@typescript-eslint/no-redundant-type-constituents': 'off',
         '@typescript-eslint/no-unsafe-call': 'off',
@@ -17,5 +21,14 @@ export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.r
         'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
         '@typescript-eslint/no-unused-vars': 'off',
         '@typescript-eslint/no-unused-expressions': 'off',
+        'import/no-unresolved': 'off',
+        'import/extensions': 'off',
+        'import/no-absolute-path': 'off',
+        'import/prefer-default-export': 'off',
+        'no-relative-import-paths/no-relative-import-paths': [
+            'error',
+            { allowSameFolder: false, rootDir: 'src', prefix: '@app' },
+        ],
+        'prettier/prettier': 'error',
     },
 });

api/package.json

@@ -16,8 +16,8 @@
         "codegen:watch": "DOTENV_CONFIG_PATH='./.env.staging' graphql-codegen --config codegen.ts --watch -r dotenv/config",
         "codegen:local": "NODE_TLS_REJECT_UNAUTHORIZED=0  MOTHERSHIP_GRAPHQL_LINK='https://mothership.localhost/ws' graphql-codegen --config codegen.ts --watch",
         "tsc": "tsc --noEmit",
-        "lint": "eslint --flag unstable_ts_config --config .eslintrc.ts src/",
+        "lint": "eslint --config .eslintrc.ts src/",
-        "lint:fix": "eslint --flag unstable_ts_config --fix --config .eslintrc.ts src/",
+        "lint:fix": "eslint --fix --config .eslintrc.ts src/",
         "test:watch": "vitest --pool=forks",
         "test": "vitest run --pool=forks",
         "coverage": "vitest run --pool=forks --coverage",
@@ -44,7 +44,6 @@
     "dependencies": {
         "@apollo/client": "^3.11.8",
         "@apollo/server": "^4.11.2",
-        "@as-integrations/fastify": "^2.1.1",
         "@fastify/cookie": "^9.4.0",
         "@graphql-codegen/client-preset": "^4.5.0",
         "@graphql-tools/load-files": "^7.0.0",
@@ -62,7 +61,6 @@
         "@reflet/cron": "^1.3.1",
         "@runonflux/nat-upnp": "^1.0.2",
         "accesscontrol": "^2.2.1",
-        "btoa": "^1.2.1",
         "bycontract": "^2.0.11",
         "bytes": "^3.1.2",
         "cacheable-lookup": "^7.0.0",
@@ -73,13 +71,13 @@
         "cli-table": "^0.3.11",
         "command-exists": "^1.2.9",
         "convert": "^5.5.1",
+        "cookie": "^1.0.2",
         "cross-fetch": "^4.0.0",
         "docker-event-emitter": "^0.3.0",
         "dockerode": "^3.3.5",
         "dotenv": "^16.4.5",
         "execa": "^9.5.1",
         "exit-hook": "^4.0.0",
-        "express": "^4.21.1",
         "filenamify": "^6.0.0",
         "fs-extra": "^11.2.0",
         "glob": "^11.0.1",
@@ -105,12 +103,10 @@
         "nestjs-pino": "^4.1.0",
         "node-cache": "^5.1.2",
         "node-window-polyfill": "^1.0.2",
-        "openid-client": "^6.1.3",
         "p-retry": "^6.2.0",
         "passport-custom": "^1.1.1",
         "passport-http-header-strategy": "^1.1.0",
         "path-type": "^6.0.0",
-        "pidusage": "^3.0.2",
         "pino": "^9.5.0",
         "pino-http": "^10.3.0",
         "pino-pretty": "^11.3.0",
@@ -118,12 +114,10 @@
         "reflect-metadata": "^0.1.14",
         "request": "^2.88.2",
         "semver": "^7.6.3",
-        "stoppable": "^1.1.0",
         "strftime": "^0.10.3",
-        "systeminformation": "^5.23.5",
+        "systeminformation": "^5.25.11",
         "uuid": "^11.0.2",
         "ws": "^8.18.0",
-        "xhr2": "^0.2.1",
         "zod": "^3.23.8"
     },
     "devDependencies": {
@@ -142,13 +136,11 @@
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@swc/core": "^1.10.1",
         "@types/async-exit-hook": "^2.0.2",
-        "@types/btoa": "^1.2.5",
         "@types/bytes": "^3.1.4",
         "@types/cli-table": "^0.3.4",
         "@types/command-exists": "^1.2.3",
         "@types/cors": "^2.8.17",
         "@types/dockerode": "^3.3.31",
-        "@types/express": "^5.0.0",
         "@types/graphql-fields": "^1.3.9",
         "@types/graphql-type-uuid": "^0.2.6",
         "@types/ini": "^4.1.1",
@@ -156,7 +148,6 @@
         "@types/lodash": "^4.17.13",
         "@types/mustache": "^4.2.5",
         "@types/node": "^22.9.0",
-        "@types/pidusage": "^2.0.5",
         "@types/pify": "^5.0.4",
         "@types/semver": "^7.5.8",
         "@types/sendmail": "^1.4.7",
@@ -169,6 +160,8 @@
         "@vitest/ui": "^2.1.4",
         "cz-conventional-changelog": "3.3.0",
         "eslint": "^9.14.0",
+        "eslint-plugin-no-relative-import-paths": "^1.6.1",
+        "eslint-plugin-prettier": "^5.2.3",
         "graphql-codegen-typescript-validation-schema": "^0.16.0",
         "jiti": "^2.4.0",
         "nodemon": "^3.1.7",
@@ -179,7 +172,6 @@
         "unplugin-swc": "^1.5.1",
         "vite": "^5.4.10",
         "vite-plugin-node": "^4.0.0",
-        "vite-plugin-static-copy": "^2.0.0",
         "vite-tsconfig-paths": "^5.1.0",
         "vitest": "^2.1.8",
         "zx": "^8.2.0"

api/src/cli.ts

@@ -24,7 +24,7 @@ const getUnraidApiLocation = async () => {
 try {
     await CommandFactory.run(CliModule, {
         cliName: 'unraid-api',
-        logger: LOG_LEVEL === 'TRACE' && new LogService(), // - enable this to see nest initialization issues
+        logger: LOG_LEVEL === 'TRACE' ? new LogService() : false, // - enable this to see nest initialization issues
         completion: {
             fig: false,
             cmd: 'completion-script',

api/src/core/utils/files/load-file-from-path.ts

@@ -0,0 +1,23 @@
+import { readFile } from 'fs/promises';
+import { extname } from 'path';
+import { readFileSync } from 'fs';
+import { fileExists, fileExistsSync } from '@app/core/utils/files/file-exists';
+
+export const loadFileFromPath = async (filePath: string): Promise<{ fileContents: string; extension: string }> => {
+	if (await fileExists(filePath)) {
+		const fileContents = await readFile(filePath, 'utf-8');
+		const extension = extname(filePath);
+		return { fileContents, extension };
+	}
+
+	throw new Error(`Failed to load file at path: ${filePath}`);
+};
+
+export const loadFileFromPathSync = (filePath: string): string => {
+	if (fileExistsSync(filePath)) {
+		const fileContents = readFileSync(filePath, 'utf-8').toString();
+		return fileContents;
+	}
+
+	throw new Error(`Failed to load file at path: ${filePath}`);
+};

api/src/core/utils/misc/get-key-file.ts

@@ -0,0 +1,19 @@
+import { type RootState, store } from '@app/store';
+import { basename, join } from 'path';
+import { readFile } from 'fs/promises';
+
+// Get key file
+export const getKeyFile = async function (appStore: RootState = store.getState()) {
+	const { emhttp, paths } = appStore;
+
+	// If emhttp's state isn't loaded then return null as we can't load the key yet
+	if (emhttp.var?.regFile === undefined) return null;
+
+	// If the key location is empty return an empty string as there is no key
+	if (emhttp.var?.regFile.trim() === '') return '';
+
+	const keyFileName = basename(emhttp.var?.regFile);
+	const registrationKeyFilePath = join(paths['keyfile-base'], keyFileName);
+	const keyFile = await readFile(registrationKeyFilePath, 'binary');
+	return Buffer.from(keyFile, 'binary').toString('base64').trim().replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+};

api/src/core/utils/misc/parse-config.ts

@@ -5,6 +5,7 @@ import { accessSync, readFileSync } from 'fs';
 import { access } from 'fs/promises';
 import { F_OK } from 'constants';
 import { extname } from 'path';
+import { fileExistsSync } from '@app/core/utils/files/file-exists';
 
 type ConfigType = 'ini' | 'cfg';
 
@@ -71,20 +72,6 @@ const fixObjectArrays = (object: Record<string, any>) => {
     };
 };
 
-export const fileExists = async (path: string) =>
-    access(path, F_OK)
-        .then(() => true)
-        .catch(() => false);
-
-export const fileExistsSync = (path: string) => {
-    try {
-        accessSync(path, F_OK);
-        return true;
-    } catch (error: unknown) {
-        return false;
-    }
-};
-
 export const getExtensionFromPath = (filePath: string): string => extname(filePath);
 
 const isFilePathOptions = (

api/src/graphql/schema/index.ts

@@ -1,9 +0,0 @@
-import { join } from 'path';
-import { loadFilesSync } from '@graphql-tools/load-files';
-import { mergeTypeDefs } from '@graphql-tools/merge';
-
-const files = loadFilesSync(join(import.meta.dirname, './types'), {
-    extensions: ['graphql'],
-});
-
-export const typeDefs = mergeTypeDefs(files);

api/src/graphql/schema/loadTypesDefs.ts

@@ -0,0 +1,26 @@
+import { mergeTypeDefs } from '@graphql-tools/merge';
+import { logger } from '@app/core/log';
+
+export const loadTypeDefs = async () => {
+    // TypeScript now knows this returns Record<string, () => Promise<string>>
+    const typeModules = import.meta.glob('./types/**/*.graphql', { query: '?raw', import: 'default' });
+
+    try {
+        const files = await Promise.all(
+            Object.values(typeModules).map(async (importFn) => {
+                const content = await importFn();
+                if (typeof content !== 'string') {
+                    throw new Error('Invalid GraphQL type definition format');
+                }
+                return content;
+            })
+        );
+        if (!files.length) {
+            throw new Error('No GraphQL type definitions found');
+        }
+        return mergeTypeDefs(files);
+    } catch (error) {
+        logger.error('Failed to load GraphQL type definitions:', error);
+        throw error;
+    }
+};

api/src/index.ts

@@ -28,7 +28,6 @@ import { setupDynamixConfigWatch } from '@app/store/watch/dynamix-config-watch';
 import { setupRegistrationKeyWatch } from '@app/store/watch/registration-watch';
 import { StateManager } from '@app/store/watch/state-watch';
 import { setupVarRunWatch } from '@app/store/watch/var-run-watch';
-import { bootstrapNestServer } from '@app/unraid-api/main';
 
 import { setupNewMothershipSubscription } from './mothership/subscribe-to-mothership';
 
@@ -40,82 +39,86 @@ const unlinkUnixPort = () => {
     }
 };
 
-try {
+export const viteNodeApp = async () => {
-    environment.IS_MAIN_PROCESS = true;
+    try {
+        environment.IS_MAIN_PROCESS = true;
 
-    logger.info('ENV %o', envVars);
+        logger.info('ENV %o', envVars);
-    logger.info('PATHS %o', store.getState().paths);
+        logger.info('PATHS %o', store.getState().paths);
 
-    const cacheable = new CacheableLookup();
+        const cacheable = new CacheableLookup();
 
-    Object.assign(global, { WebSocket });
+        Object.assign(global, { WebSocket });
-    // Ensure all DNS lookups are cached for their TTL
+        // Ensure all DNS lookups are cached for their TTL
-    cacheable.install(http.globalAgent);
+        cacheable.install(http.globalAgent);
-    cacheable.install(https.globalAgent);
+        cacheable.install(https.globalAgent);
 
-    // Start file <-> store sync
+        // Start file <-> store sync
-    // Must occur before config is loaded to ensure that the handler can fix broken configs
+        // Must occur before config is loaded to ensure that the handler can fix broken configs
-    await startStoreSync();
+        await startStoreSync();
 
-    // Load my servers config file into store
+        // Load my servers config file into store
-    await store.dispatch(loadConfigFile());
+        await store.dispatch(loadConfigFile());
 
-    // Load emhttp state into store
+        // Load emhttp state into store
-    await store.dispatch(loadStateFiles());
+        await store.dispatch(loadStateFiles());
 
-    // Load initial registration key into store
+        // Load initial registration key into store
-    await store.dispatch(loadRegistrationKey());
+        await store.dispatch(loadRegistrationKey());
 
-    // Load my dynamix config file into store
+        // Load my dynamix config file into store
-    await store.dispatch(loadDynamixConfigFile());
+        await store.dispatch(loadDynamixConfigFile());
 
-    await setupNewMothershipSubscription();
+        await setupNewMothershipSubscription();
 
-    // Start listening to file updates
+        // Start listening to file updates
-    StateManager.getInstance();
+        StateManager.getInstance();
 
-    // Start listening to key file changes
+        // Start listening to key file changes
-    setupRegistrationKeyWatch();
+        setupRegistrationKeyWatch();
 
-    // Start listening to docker events
+        // Start listening to docker events
-    setupVarRunWatch();
+        setupVarRunWatch();
 
-    // Start listening to dynamix config file changes
+        // Start listening to dynamix config file changes
-    setupDynamixConfigWatch();
+        setupDynamixConfigWatch();
 
-    // If port is unix socket, delete old socket before starting http server
+        // If port is unix socket, delete old socket before starting http server
-    unlinkUnixPort();
+        unlinkUnixPort();
 
-    startMiddlewareListeners();
+        startMiddlewareListeners();
 
-    // Start webserver
+        // Start webserver
-    server = await bootstrapNestServer();
+        const { bootstrapNestServer } = await import('@app/unraid-api/main');
 
-    asyncExitHook(
+        server = await bootstrapNestServer();
-        async (signal) => {
+
-            console.log('exithook', signal);
+        asyncExitHook(
+            async (signal) => {
+                logger.info('Exiting with signal %s', signal);
+                await server?.close?.();
+                // If port is unix socket, delete socket before exiting
+                unlinkUnixPort();
+
+                shutdownApiEvent();
+
+                gracefulExit();
+            },
+            { wait: 9999 }
+        );
+    } catch (error: unknown) {
+        if (error instanceof Error) {
+            logger.error(error, 'API-ERROR');
+        } else {
+            logger.error(error, 'Encountered unexpected error');
+        }
+        if (server) {
             await server?.close?.();
-            // If port is unix socket, delete socket before exiting
+        }
-            unlinkUnixPort();
+        shutdownApiEvent();
-
+        // Kill application
-            shutdownApiEvent();
+        gracefulExit(1);
-
-            gracefulExit();
-        },
-        { wait: 9999 }
-    );
-    // Start a loop to run the app
-    await new Promise(() => {});
-} catch (error: unknown) {
-    if (error instanceof Error) {
-        logger.error(error, 'API-ERROR');
-    } else {
-        logger.error(error, 'Encountered unexpected error');
     }
-    if (server) {
+};
-        await server?.close?.();
+
-    }
+await viteNodeApp();
-    shutdownApiEvent();
-    // Kill application
-    gracefulExit(1);
-}

api/src/mothership/jobs/token-refresh-jobs.ts

@@ -1,56 +0,0 @@
-import { OAUTH_CLIENT_ID, OAUTH_OPENID_CONFIGURATION_URL } from '@app/consts';
-import { mothershipLogger } from '@app/core';
-import { getters, store } from '@app/store';
-import { updateAccessTokens } from '@app/store/modules/config';
-import { Cron, Expression, Initializer } from '@reflet/cron';
-import { Issuer } from 'openid-client';
-
-export class TokenRefresh extends Initializer<typeof TokenRefresh> {
-    private issuer: Issuer | null = null;
-
-    @Cron.PreventOverlap
-    @Cron(Expression.EVERY_DAY_AT_NOON)
-    @Cron.RunOnInit
-    async getNewTokens() {
-        const {
-            remote: { refreshtoken },
-        } = getters.config();
-
-        if (!refreshtoken) {
-            mothershipLogger.debug('No JWT refresh token configured');
-            return;
-        }
-
-        if (!this.issuer) {
-            try {
-                this.issuer = await Issuer.discover(
-                    OAUTH_OPENID_CONFIGURATION_URL
-                );
-
-                mothershipLogger.trace(
-                    'Discovered Issuer %s',
-                    this.issuer.issuer
-                );
-            } catch (error: unknown) {
-                mothershipLogger.error({ error }, 'Failed to discover issuer');
-                return;
-            }
-        }
-
-        const client = new this.issuer.Client({
-            client_id: OAUTH_CLIENT_ID,
-            token_endpoint_auth_method: 'none',
-        });
-
-        const newTokens = await client.refresh(refreshtoken);
-        mothershipLogger.debug('tokens %o', newTokens);
-        if (newTokens.access_token && newTokens.id_token) {
-            store.dispatch(
-                updateAccessTokens({
-                    accesstoken: newTokens.access_token,
-                    idtoken: newTokens.id_token,
-                })
-            );
-        }
-    }
-}

api/src/store/watch/docker-watch.ts

@@ -1,13 +1,14 @@
-import { store } from '@app/store';
-import { dockerLogger } from '@app/core/log';
-import { updateDockerState } from '@app/store/modules/docker';
-import { getDockerContainers } from '@app/core/modules/index';
-import { docker } from '@app/core/utils/index';
 import DockerEE from 'docker-event-emitter';
 import { debounce } from 'lodash-es';
 
+import { dockerLogger } from '@app/core/log';
+import { docker } from '@app/core/utils/index';
+import { store } from '@app/store';
+import { updateDockerState } from '@app/store/modules/docker';
+
 const updateContainerCache = async () => {
     try {
+        const { getDockerContainers } = await import('@app/core/modules/docker');
         await getDockerContainers({ useCache: false });
     } catch (err) {
         dockerLogger.warn('Caught error getting containers %o', err);
@@ -25,37 +26,21 @@ const debouncedContainerCacheUpdate = debounce(updateContainerCache, 500);
 
 export const setupDockerWatch = async (): Promise<DockerEE> => {
     // Only watch container events equal to start/stop
-    const watchedActions = [
+    const watchedActions = ['die', 'kill', 'oom', 'pause', 'restart', 'start', 'stop', 'unpause'];
-        'die',
-        'kill',
-        'oom',
-        'pause',
-        'restart',
-        'start',
-        'stop',
-        'unpause',
-    ];
 
     // Create docker event emitter instance
     dockerLogger.debug('Creating docker event emitter instance');
 
     const dee = new DockerEE(docker);
     // On Docker event update info with { apps: { installed, started } }
-    dee.on(
+    dee.on('container', async (data: { Type: 'container'; Action: 'start' | 'stop'; from: string }) => {
-        'container',
+        // Only listen to container events
-        async (data: {
+        if (!watchedActions.includes(data.Action)) {
-            Type: 'container';
+            return;
-            Action: 'start' | 'stop';
-            from: string;
-        }) => {
-            // Only listen to container events
-            if (!watchedActions.includes(data.Action)) {
-                return;
-            }
-            dockerLogger.debug(`[${data.from}] ${data.Type}->${data.Action}`);
-            await debouncedContainerCacheUpdate();
         }
-    );
+        dockerLogger.debug(`[${data.from}] ${data.Type}->${data.Action}`);
+        await debouncedContainerCacheUpdate();
+    });
     // Get docker container count on first start
     await debouncedContainerCacheUpdate();
     await dee.start();

api/src/unraid-api/auth/api-key.service.ts

@@ -38,8 +38,10 @@ export class ApiKeyService implements OnModuleInit {
 
     async onModuleInit() {
         this.memoryApiKeys = await this.loadAllFromDisk();
-        await this.createLocalApiKeyForConnectIfNecessary();
+        if (environment.IS_MAIN_PROCESS) {
-        this.setupWatch();
+            await this.createLocalApiKeyForConnectIfNecessary();
+            this.setupWatch();
+        }
     }
 
     public findAll(): ApiKey[] {

api/src/unraid-api/auth/auth.guard.ts

@@ -4,13 +4,36 @@ import { Injectable, Logger, UnauthorizedException } from '@nestjs/common';
 import { GqlExecutionContext } from '@nestjs/graphql';
 import { AuthGuard } from '@nestjs/passport';
 
+import type { IncomingMessage } from 'http';
+import { parse as parseCookies } from 'cookie';
 import { type Observable } from 'rxjs';
 
+import type { FastifyRequest } from '@app/types/fastify';
 import { apiLogger } from '@app/core/log';
 import { ServerHeaderStrategy } from '@app/unraid-api/auth/header.strategy';
 
 import { UserCookieStrategy } from './cookie.strategy';
 
+/**
+ * Context of incoming requests.
+ * Websocket connection req's have connection params and must be treated differently from regular fastify requests.
+ */
+type GraphQLContext =
+    | {
+          connectionParams: Record<string, string>; // When connectionParams is present
+          req: {
+              headers?: Record<string, string>;
+              cookies?: Record<string, unknown>;
+              extra: {
+                  request: IncomingMessage;
+              };
+          };
+      }
+    | {
+          connectionParams?: undefined; // When connectionParams is absent
+          req: FastifyRequest;
+      };
+
 @Injectable()
 export class GraphqlAuthGuard
     extends AuthGuard([ServerHeaderStrategy.key, UserCookieStrategy.key])
@@ -54,7 +77,7 @@ export class GraphqlAuthGuard
         if (context.getType<GqlContextType>() === 'graphql') {
             // headers are either inside context.getContext().connectionParams or in the request, which is in context.getContext().req (see context.ts)
             const ctx = GqlExecutionContext.create(context);
-            const fullContext = ctx.getContext<any>();
+            const fullContext = ctx.getContext<GraphQLContext>();
             const request = fullContext.req ?? {};
             const additionalConnectionParamHeaders = fullContext.connectionParams ?? {};
             request.headers = {
@@ -62,6 +85,14 @@ export class GraphqlAuthGuard
                 ...additionalConnectionParamHeaders,
             };
 
+            // parse cookies from raw headers on initial web socket connection request
+            if (fullContext.connectionParams) {
+                const rawHeaders = fullContext.req.extra.request.rawHeaders;
+                const headerIndex = rawHeaders.findIndex((headerOrValue) => headerOrValue === 'Cookie');
+                const cookieString = rawHeaders[headerIndex + 1];
+                request.cookies = parseCookies(cookieString);
+            }
+
             return request;
         } else {
             return context.switchToHttp().getRequest();

api/src/unraid-api/auth/cookie.service.ts

@@ -2,9 +2,9 @@ import { Inject, Injectable, Logger } from '@nestjs/common';
 import { readFile } from 'fs/promises';
 import { join } from 'path';
 
-import { fileExists } from '@app/core/utils/files/file-exists';
 import { getters } from '@app/store';
 import { batchProcess } from '@app/utils';
+import { fileExists } from '@app/core/utils/files/file-exists';
 
 /** token for dependency injection of a session cookie options object */
 export const SESSION_COOKIE_CONFIG = 'SESSION_COOKIE_CONFIG';

api/src/unraid-api/graph/graph.module.ts

@@ -13,7 +13,8 @@ import {
 } from 'graphql-scalars';
 
 import { GraphQLLong } from '@app/graphql/resolvers/graphql-type-long';
-import { typeDefs } from '@app/graphql/schema/index';
+import { loadTypeDefs } from '@app/graphql/schema/loadTypesDefs';
+import { getters } from '@app/store/index';
 import { idPrefixPlugin } from '@app/unraid-api/graph/id-prefix-plugin';
 
 import { ConnectResolver } from './connect/connect.resolver';
@@ -23,38 +24,41 @@ import { ResolversModule } from './resolvers/resolvers.module';
 import { sandboxPlugin } from './sandbox-plugin';
 import { ServicesResolver } from './services/services.resolver';
 import { SharesResolver } from './shares/shares.resolver';
-import { getters } from '@app/store/index';
 
 @Module({
     imports: [
         ResolversModule,
-        GraphQLModule.forRoot<ApolloDriverConfig>({
+        GraphQLModule.forRootAsync<ApolloDriverConfig>({
             driver: ApolloDriver,
-            introspection: getters.config().local?.sandbox === 'yes' ? true : false,
+            useFactory: async () => {
-            playground: false,
+                const typeDefs = await loadTypeDefs();
-            context: ({ req, connectionParams, extra }) => ({
+                return {
-                req,
+                    introspection: getters.config()?.local?.sandbox === 'yes',
-                connectionParams,
+                    playground: false,
-                extra,
+                    context: ({ req, connectionParams, extra }) => ({
-            }),
+                        req,
-            plugins: [sandboxPlugin, idPrefixPlugin],
+                        connectionParams,
-            subscriptions: {
+                        extra,
-                'graphql-ws': {
+                    }),
+                    plugins: [sandboxPlugin, idPrefixPlugin],
+                    subscriptions: {
+                        'graphql-ws': {
+                            path: '/graphql',
+                        },
+                    },
                     path: '/graphql',
-                },
+                    typeDefs: print(typeDefs),
+                    resolvers: {
+                        JSON: JSONResolver,
+                        Long: GraphQLLong,
+                        UUID: UUIDResolver,
+                        DateTime: DateTimeResolver,
+                        Port: PortResolver,
+                        URL: URLResolver,
+                    },
+                    validationRules: [NoUnusedVariablesRule],
+                };
             },
-            path: '/graphql',
-            typeDefs: print(typeDefs),
-            resolvers: {
-                JSON: JSONResolver,
-                Long: GraphQLLong,
-                UUID: UUIDResolver,
-                DateTime: DateTimeResolver,
-                Port: PortResolver,
-                URL: URLResolver,
-            },
-            validationRules: [NoUnusedVariablesRule],
-            // schema: schema
         }),
     ],
     providers: [NetworkResolver, ServicesResolver, SharesResolver, ConnectResolver, ConnectService],

api/src/unraid-api/graph/resolvers/docker/docker.resolver.ts

@@ -2,7 +2,6 @@ import { Query, ResolveField, Resolver } from '@nestjs/graphql';
 
 import { AuthActionVerb, AuthPossession, UsePermissions } from 'nest-authz';
 
-import { getDockerContainers } from '@app/core/modules/index';
 import { Resource } from '@app/graphql/generated/api/types';
 
 @Resolver('Docker')
@@ -26,6 +25,8 @@ export class DockerResolver {
     })
     @ResolveField()
     public async containers() {
+        const { getDockerContainers } = await import('@app/core/modules/docker');
+
         return getDockerContainers({ useCache: false });
     }
 }

api/src/unraid-api/main.ts

@@ -5,8 +5,6 @@ import { FastifyAdapter } from '@nestjs/platform-fastify';
 import fastifyCookie from '@fastify/cookie';
 import Fastify from 'fastify';
 import { LoggerErrorInterceptor, Logger as PinoLogger } from 'nestjs-pino';
-
-import type { FastifyInstance } from '@app/types/fastify';
 import { apiLogger } from '@app/core/log';
 import { PORT } from '@app/environment';
 import { GraphQLExceptionsFilter } from '@app/unraid-api/exceptions/graphql-exceptions.filter';
@@ -17,17 +15,15 @@ import { configureFastifyCors } from './app/cors';
 import { CookieService } from './auth/cookie.service';
 
 export async function bootstrapNestServer(): Promise<NestFastifyApplication> {
-    const server = Fastify({
-        logger: false,
-    }) as FastifyInstance;
-
     apiLogger.debug('Creating Nest Server');
 
-    const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter(server), {
+    const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter(), {
         bufferLogs: false,
     });
 
-    app.register(fastifyCookie); // parse cookies before cors
+    const server = app.getHttpAdapter().getInstance();
+
+    await app.register(fastifyCookie); // parse cookies before cors
 
     const cookieService = app.get(CookieService);
     app.enableCors(configureFastifyCors(cookieService));

api/src/unraid-api/unraid-file-modifier/modifications/__fixtures__/Notifications.page

@@ -0,0 +1,286 @@
+Menu="UserPreferences"
+Type="xmenu"
+Title="Notification Settings"
+Icon="icon-notifications"
+Tag="phone-square"
+---
+<?PHP
+/* Copyright 2005-2023, Lime Technology
+ * Copyright 2012-2023, Bergware International.
+ * Copyright 2012, Andrew Hamer-Adams, http://www.pixeleyes.co.nz.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 2,
+ * as published by the Free Software Foundation.
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ */
+?>
+<?
+$events = explode('|', $notify['events'] ?? '');
+$disabled = $notify['system'] ? '' : 'disabled';
+?>
+<script>
+function prepareNotify(form) {
+  form.entity.value = form.normal1.checked | form.warning1.checked | form.alert1.checked;
+  form.normal.value = form.normal1.checked*1 + form.normal2.checked*2 + form.normal3.checked*4;
+  form.warning.value = form.warning1.checked*1 + form.warning2.checked*2 + form.warning3.checked*4;
+  form.alert.value = form.alert1.checked*1 + form.alert2.checked*2 + form.alert3.checked*4;
+  form.unraid.value = form.unraid1.checked*1 + form.unraid2.checked*2 + form.unraid3.checked*4;
+  form.plugin.value = form.plugin1.checked*1 + form.plugin2.checked*2 + form.plugin3.checked*4;
+  form.docker_notify.value = form.docker_notify1.checked*1 + form.docker_notify2.checked*2 + form.docker_notify3.checked*4;
+  form.language_notify.value = form.language_notify1.checked*1 + form.language_notify2.checked*2 + form.language_notify3.checked*4;
+  form.report.value = form.report1.checked*1 + form.report2.checked*2 + form.report3.checked*4;
+  form.normal1.disabled = true;
+  form.normal2.disabled = true;
+  form.normal3.disabled = true;
+  form.warning1.disabled = true;
+  form.warning2.disabled = true;
+  form.warning3.disabled = true;
+  form.alert1.disabled = true;
+  form.alert2.disabled = true;
+  form.alert3.disabled = true;
+  form.unraid1.disabled = true;
+  form.unraid2.disabled = true;
+  form.unraid3.disabled = true;
+  form.plugin1.disabled = true;
+  form.plugin2.disabled = true;
+  form.plugin3.disabled = true;
+  form.docker_notify1.disabled = true;
+  form.docker_notify2.disabled = true;
+  form.docker_notify3.disabled = true;
+  form.language_notify1.disabled = true;
+  form.language_notify2.disabled = true;
+  form.language_notify3.disabled = true;
+  form.report1.disabled = true;
+  form.report2.disabled = true;
+  form.report3.disabled = true;
+}
+function prepareSystem(index) {
+  if (index==0) $('.checkbox').attr('disabled','disabled'); else $('.checkbox').removeAttr('disabled');
+}
+function prepareTitle() {
+  var title = '_(Available notifications)_:';
+  $('#unraidTitle,#pluginTitle,#dockerTitle,#languageTitle,#reportTitle').html('&nbsp;');
+  if ($('.unraid').is(':visible')) {$('#unraidTitle').html(title); return;}
+  if ($('.plugin').is(':visible')) {$('#pluginTitle').html(title); return;}
+  if ($('.docker').is(':visible')) {$('#dockerTitle').html(title); return;}
+  if ($('.language').is(':visible')) {$('#languageTitle').html(title); return;}
+  if ($('.report').is(':visible')) {$('#reportTitle').html(title); return;}
+}
+function prepareUnraid(value) {
+  if (value=='') $('.unraid').hide(); else $('.unraid').show();
+  prepareTitle();
+}
+function preparePlugin(value) {
+  if (value=='') $('.plugin').hide(); else $('.plugin').show();
+  prepareTitle();
+}
+function prepareDocker(value) {
+  if (value=='') $('.docker').hide(); else $('.docker').show();
+  prepareTitle();
+}
+function prepareLanguage(value) {
+  if (value=='') $('.language').hide(); else $('.language').show();
+  prepareTitle();
+}
+function prepareReport(value) {
+  if (value=='') $('.report').hide(); else $('.report').show();
+  prepareTitle();
+}
+$(function(){
+  prepareUnraid(document.notify_settings.unraidos.value);
+  preparePlugin(document.notify_settings.version.value);
+  prepareDocker(document.notify_settings.docker_update.value);
+  prepareLanguage(document.notify_settings.language_update.value);
+  prepareReport(document.notify_settings.status.value);
+});
+</script>
+<form markdown="1" name="notify_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="prepareNotify(this)">
+<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
+<input type="hidden" name="#section" value="notify">
+<input type="hidden" name="#command" value="/webGui/scripts/notify">
+<input type="hidden" name="#arg[1]" value="cron-init">
+<input type="hidden" name="entity">
+<input type="hidden" name="normal">
+<input type="hidden" name="warning">
+<input type="hidden" name="alert">
+<input type="hidden" name="unraid">
+<input type="hidden" name="plugin">
+<input type="hidden" name="docker_notify">
+<input type="hidden" name="language_notify">
+<input type="hidden" name="report">
+_(Notifications display)_:
+: <select class="a" name="display">
+  <?=mk_option($notify['display'], "0", _("Detailed"))?>
+  <?=mk_option($notify['display'], "1", _("Summarized"))?>
+  </select>
+
+:notifications_display_help:
+
+_(Display position)_:
+: <select name="position" class="a">
+  <?=mk_option($notify['position'], "top-left", _("top-left"))?>
+  <?=mk_option($notify['position'], "top-right", _("top-right"))?>
+  <?=mk_option($notify['position'], "bottom-left", _("bottom-left"))?>
+  <?=mk_option($notify['position'], "bottom-right", _("bottom-right"))?>
+  <?=mk_option($notify['position'], "center", _("center"))?>
+  </select>
+
+:notifications_display_position_help:
+
+_(Auto-close)_ (_(seconds)_):
+: <input type="number" name="life" class="a" min="0" max="60" value="<?=$notify['life']?>"> _(a value of zero means no automatic closure)_
+
+:notifications_auto_close_help:
+
+_(Date format)_:
+: <select name="date" class="a">
+  <?=mk_option($notify['date'], "d-m-Y", _("DD-MM-YYYY"))?>
+  <?=mk_option($notify['date'], "m-d-Y", _("MM-DD-YYYY"))?>
+  <?=mk_option($notify['date'], "Y-m-d", _("YYYY-MM-DD"))?>
+  </select>
+
+:notifications_date_format_help:
+
+_(Time format)_:
+: <select name="time" class="a">
+  <?=mk_option($notify['time'], "h:i A", _("12 hours"))?>
+  <?=mk_option($notify['time'], "H:i", _("24 hours"))?>
+  </select>
+
+:notifications_time_format_help:
+
+_(Store notifications to flash)_:
+: <select name="path" class="a">
+  <?=mk_option($notify['path'], "/tmp/notifications", _("No"))?>
+  <?=mk_option($notify['path'], "/boot/config/plugins/dynamix/notifications", _("Yes"))?>
+  </select>
+
+:notifications_store_flash_help:
+
+_(System notifications)_:
+: <select name="system" class="a" onchange="prepareSystem(this.selectedIndex)">
+  <?=mk_option($notify['system'], "", _("Disabled"))?>
+  <?=mk_option($notify['system'], "*/1 * * * *", _("Enabled"))?>
+  </select>
+
+:notifications_system_help:
+
+_(Unraid OS update notification)_:
+: <select name="unraidos" class="a" onchange="prepareUnraid(this.value)">
+  <?=mk_option($notify['unraidos'], "", _("Never check"))?>
+  <?=mk_option($notify['unraidos'], "11 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['unraidos'], "11 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_os_update_help:
+
+_(Plugins update notification)_:
+: <select name="version" class="a" onchange="preparePlugin(this.value)">
+  <?=mk_option($notify['version'], "", _("Never check"))?>
+  <?=mk_option($notify['version'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['version'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['version'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['version'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['version'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_plugins_update_help:
+
+_(Docker update notification)_:
+: <select name="docker_update" class="a" onchange="prepareDocker(this.value)">
+  <?=mk_option($notify['docker_update'], "", _("Never check"))?>
+  <?=mk_option($notify['docker_update'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['docker_update'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_docker_update_help:
+
+_(Language update notification)_:
+: <select name="language_update" class="a" onchange="prepareLanguage(this.value)">
+  <?=mk_option($notify['language_update'], "", _("Never check"))?>
+  <?=mk_option($notify['language_update'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['language_update'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['language_update'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['language_update'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['language_update'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+_(Array status notification)_:
+: <select name="status" class="a" onchange="prepareReport(this.value)">
+  <?=mk_option($notify['status'], "", _("Never send"))?>
+  <?=mk_option($notify['status'], "20 * * * *", _("Send every hour"))?>
+  <?=mk_option($notify['status'], "20 */2 * * *", _("Send every two hours"))?>
+  <?=mk_option($notify['status'], "20 */6 * * *", _("Send four times a day"))?>
+  <?=mk_option($notify['status'], "20 */8 * * *", _("Send three times a day"))?>
+  <?=mk_option($notify['status'], "20 0,12 * * *", _("Send twice a day"))?>
+  <?=mk_option($notify['status'], "20 0 * * *", _("Send once a day"))?>
+  <?=mk_option($notify['status'], "20 0 * * 1", _("Send once a week"))?>
+  <?=mk_option($notify['status'], "20 0 1 * *", _("Send once a month"))?>
+  </select>
+
+:notifications_array_status_help:
+
+<span id="unraidTitle" class="unraid" style="display:none">&nbsp;</span>
+: <span class="unraid" style="display:none"><span class="a">_(Unraid OS update)_</span>
+  <input type="checkbox" name="unraid1"<?=($notify['unraid'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="unraid2"<?=($notify['unraid'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="unraid3"<?=($notify['unraid'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="pluginTitle" class="plugin" style="display:none">&nbsp;</span>
+: <span class="plugin" style="display:none"><span class="a">_(Plugins update)_</span>
+  <input type="checkbox" name="plugin1"<?=($notify['plugin'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="plugin2"<?=($notify['plugin'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="plugin3"<?=($notify['plugin'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="dockerTitle" class="docker" style="display:none">&nbsp;</span>
+: <span class="docker" style="display:none"><span class="a">_(Docker update)_</span>
+  <input type="checkbox" name="docker_notify1"<?=($notify['docker_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="docker_notify2"<?=($notify['docker_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="docker_notify3"<?=($notify['docker_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="languageTitle" class="language" style="display:none">&nbsp;</span>
+: <span class="language" style="display:none"><span class="a">_(Language update)_</span>
+  <input type="checkbox" name="language_notify1"<?=($notify['language_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="language_notify2"<?=($notify['language_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="language_notify3"<?=($notify['language_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="reportTitle" class="report" style="display:none">&nbsp;</span>
+: <span class="report" style="display:none"><span class="a">_(Array status)_</span>
+  <input type="checkbox" name="report1"<?=($notify['report'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="report2"<?=($notify['report'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="report3"<?=($notify['report'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+:notifications_agent_selection_help:
+
+_(Notification entity)_:
+: <span class="a">_(Notices)_</span>
+  <input type="checkbox" class="checkbox" name="normal1"<?=($notify['normal'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="normal2"<?=($notify['normal'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="normal3"<?=($notify['normal'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+&nbsp;
+: <span class="a">_(Warnings)_</span>
+  <input type="checkbox" class="checkbox" name="warning1"<?=($notify['warning'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="warning2"<?=($notify['warning'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="warning3"<?=($notify['warning'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+&nbsp;
+: <span class="a">_(Alerts)_</span>
+  <input type="checkbox" class="checkbox" name="alert1"<?=($notify['alert'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="alert2"<?=($notify['alert'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="alert3"<?=($notify['alert'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+:notifications_classification_help:
+
+<input type="submit" name="#default" value="_(Default)_">
+: <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
+</form>

api/src/unraid-api/unraid-file-modifier/modifications/__test__/Notifications.modified.page

@@ -0,0 +1,270 @@
+Menu="UserPreferences"
+Type="xmenu"
+Title="Notification Settings"
+Icon="icon-notifications"
+Tag="phone-square"
+---
+<?PHP
+/* Copyright 2005-2023, Lime Technology
+ * Copyright 2012-2023, Bergware International.
+ * Copyright 2012, Andrew Hamer-Adams, http://www.pixeleyes.co.nz.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 2,
+ * as published by the Free Software Foundation.
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ */
+?>
+<?
+$events = explode('|', $notify['events'] ?? '');
+$disabled = $notify['system'] ? '' : 'disabled';
+?>
+<script>
+function prepareNotify(form) {
+  form.entity.value = form.normal1.checked | form.warning1.checked | form.alert1.checked;
+  form.normal.value = form.normal1.checked*1 + form.normal2.checked*2 + form.normal3.checked*4;
+  form.warning.value = form.warning1.checked*1 + form.warning2.checked*2 + form.warning3.checked*4;
+  form.alert.value = form.alert1.checked*1 + form.alert2.checked*2 + form.alert3.checked*4;
+  form.unraid.value = form.unraid1.checked*1 + form.unraid2.checked*2 + form.unraid3.checked*4;
+  form.plugin.value = form.plugin1.checked*1 + form.plugin2.checked*2 + form.plugin3.checked*4;
+  form.docker_notify.value = form.docker_notify1.checked*1 + form.docker_notify2.checked*2 + form.docker_notify3.checked*4;
+  form.language_notify.value = form.language_notify1.checked*1 + form.language_notify2.checked*2 + form.language_notify3.checked*4;
+  form.report.value = form.report1.checked*1 + form.report2.checked*2 + form.report3.checked*4;
+  form.normal1.disabled = true;
+  form.normal2.disabled = true;
+  form.normal3.disabled = true;
+  form.warning1.disabled = true;
+  form.warning2.disabled = true;
+  form.warning3.disabled = true;
+  form.alert1.disabled = true;
+  form.alert2.disabled = true;
+  form.alert3.disabled = true;
+  form.unraid1.disabled = true;
+  form.unraid2.disabled = true;
+  form.unraid3.disabled = true;
+  form.plugin1.disabled = true;
+  form.plugin2.disabled = true;
+  form.plugin3.disabled = true;
+  form.docker_notify1.disabled = true;
+  form.docker_notify2.disabled = true;
+  form.docker_notify3.disabled = true;
+  form.language_notify1.disabled = true;
+  form.language_notify2.disabled = true;
+  form.language_notify3.disabled = true;
+  form.report1.disabled = true;
+  form.report2.disabled = true;
+  form.report3.disabled = true;
+}
+function prepareSystem(index) {
+  if (index==0) $('.checkbox').attr('disabled','disabled'); else $('.checkbox').removeAttr('disabled');
+}
+function prepareTitle() {
+  var title = '_(Available notifications)_:';
+  $('#unraidTitle,#pluginTitle,#dockerTitle,#languageTitle,#reportTitle').html('&nbsp;');
+  if ($('.unraid').is(':visible')) {$('#unraidTitle').html(title); return;}
+  if ($('.plugin').is(':visible')) {$('#pluginTitle').html(title); return;}
+  if ($('.docker').is(':visible')) {$('#dockerTitle').html(title); return;}
+  if ($('.language').is(':visible')) {$('#languageTitle').html(title); return;}
+  if ($('.report').is(':visible')) {$('#reportTitle').html(title); return;}
+}
+function prepareUnraid(value) {
+  if (value=='') $('.unraid').hide(); else $('.unraid').show();
+  prepareTitle();
+}
+function preparePlugin(value) {
+  if (value=='') $('.plugin').hide(); else $('.plugin').show();
+  prepareTitle();
+}
+function prepareDocker(value) {
+  if (value=='') $('.docker').hide(); else $('.docker').show();
+  prepareTitle();
+}
+function prepareLanguage(value) {
+  if (value=='') $('.language').hide(); else $('.language').show();
+  prepareTitle();
+}
+function prepareReport(value) {
+  if (value=='') $('.report').hide(); else $('.report').show();
+  prepareTitle();
+}
+$(function(){
+  prepareUnraid(document.notify_settings.unraidos.value);
+  preparePlugin(document.notify_settings.version.value);
+  prepareDocker(document.notify_settings.docker_update.value);
+  prepareLanguage(document.notify_settings.language_update.value);
+  prepareReport(document.notify_settings.status.value);
+});
+</script>
+<form markdown="1" name="notify_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="prepareNotify(this)">
+<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
+<input type="hidden" name="#section" value="notify">
+<input type="hidden" name="#command" value="/webGui/scripts/notify">
+<input type="hidden" name="#arg[1]" value="cron-init">
+<input type="hidden" name="entity">
+<input type="hidden" name="normal">
+<input type="hidden" name="warning">
+<input type="hidden" name="alert">
+<input type="hidden" name="unraid">
+<input type="hidden" name="plugin">
+<input type="hidden" name="docker_notify">
+<input type="hidden" name="language_notify">
+<input type="hidden" name="report">
+_(Notifications display)_:
+: <select class="a" name="display">
+  <?=mk_option($notify['display'], "0", _("Detailed"))?>
+  <?=mk_option($notify['display'], "1", _("Summarized"))?>
+  </select>
+
+:notifications_display_help:
+
+_(Display position)_:
+: <select name="position" class="a">
+  <?=mk_option($notify['position'], "top-left", _("top-left"))?>
+  <?=mk_option($notify['position'], "top-right", _("top-right"))?>
+  <?=mk_option($notify['position'], "bottom-left", _("bottom-left"))?>
+  <?=mk_option($notify['position'], "bottom-right", _("bottom-right"))?>
+  <?=mk_option($notify['position'], "center", _("center"))?>
+  </select>
+
+:notifications_display_position_help:
+
+_(Auto-close)_ (_(seconds)_):
+: <input type="number" name="life" class="a" min="0" max="60" value="<?=$notify['life']?>"> _(a value of zero means no automatic closure)_
+
+:notifications_auto_close_help:
+
+
+_(Store notifications to flash)_:
+: <select name="path" class="a">
+  <?=mk_option($notify['path'], "/tmp/notifications", _("No"))?>
+  <?=mk_option($notify['path'], "/boot/config/plugins/dynamix/notifications", _("Yes"))?>
+  </select>
+
+:notifications_store_flash_help:
+
+_(System notifications)_:
+: <select name="system" class="a" onchange="prepareSystem(this.selectedIndex)">
+  <?=mk_option($notify['system'], "", _("Disabled"))?>
+  <?=mk_option($notify['system'], "*/1 * * * *", _("Enabled"))?>
+  </select>
+
+:notifications_system_help:
+
+_(Unraid OS update notification)_:
+: <select name="unraidos" class="a" onchange="prepareUnraid(this.value)">
+  <?=mk_option($notify['unraidos'], "", _("Never check"))?>
+  <?=mk_option($notify['unraidos'], "11 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['unraidos'], "11 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['unraidos'], "11 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_os_update_help:
+
+_(Plugins update notification)_:
+: <select name="version" class="a" onchange="preparePlugin(this.value)">
+  <?=mk_option($notify['version'], "", _("Never check"))?>
+  <?=mk_option($notify['version'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['version'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['version'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['version'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['version'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_plugins_update_help:
+
+_(Docker update notification)_:
+: <select name="docker_update" class="a" onchange="prepareDocker(this.value)">
+  <?=mk_option($notify['docker_update'], "", _("Never check"))?>
+  <?=mk_option($notify['docker_update'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['docker_update'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['docker_update'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+:notifications_docker_update_help:
+
+_(Language update notification)_:
+: <select name="language_update" class="a" onchange="prepareLanguage(this.value)">
+  <?=mk_option($notify['language_update'], "", _("Never check"))?>
+  <?=mk_option($notify['language_update'], "10 */6 * * *", _("Check four times a day"))?>
+  <?=mk_option($notify['language_update'], "10 0,12 * * *", _("Check twice a day"))?>
+  <?=mk_option($notify['language_update'], "10 0 * * *", _("Check once a day"))?>
+  <?=mk_option($notify['language_update'], "10 0 * * 1", _("Check once a week"))?>
+  <?=mk_option($notify['language_update'], "10 0 1 * *", _("Check once a month"))?>
+  </select>
+
+_(Array status notification)_:
+: <select name="status" class="a" onchange="prepareReport(this.value)">
+  <?=mk_option($notify['status'], "", _("Never send"))?>
+  <?=mk_option($notify['status'], "20 * * * *", _("Send every hour"))?>
+  <?=mk_option($notify['status'], "20 */2 * * *", _("Send every two hours"))?>
+  <?=mk_option($notify['status'], "20 */6 * * *", _("Send four times a day"))?>
+  <?=mk_option($notify['status'], "20 */8 * * *", _("Send three times a day"))?>
+  <?=mk_option($notify['status'], "20 0,12 * * *", _("Send twice a day"))?>
+  <?=mk_option($notify['status'], "20 0 * * *", _("Send once a day"))?>
+  <?=mk_option($notify['status'], "20 0 * * 1", _("Send once a week"))?>
+  <?=mk_option($notify['status'], "20 0 1 * *", _("Send once a month"))?>
+  </select>
+
+:notifications_array_status_help:
+
+<span id="unraidTitle" class="unraid" style="display:none">&nbsp;</span>
+: <span class="unraid" style="display:none"><span class="a">_(Unraid OS update)_</span>
+  <input type="checkbox" name="unraid1"<?=($notify['unraid'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="unraid2"<?=($notify['unraid'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="unraid3"<?=($notify['unraid'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="pluginTitle" class="plugin" style="display:none">&nbsp;</span>
+: <span class="plugin" style="display:none"><span class="a">_(Plugins update)_</span>
+  <input type="checkbox" name="plugin1"<?=($notify['plugin'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="plugin2"<?=($notify['plugin'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="plugin3"<?=($notify['plugin'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="dockerTitle" class="docker" style="display:none">&nbsp;</span>
+: <span class="docker" style="display:none"><span class="a">_(Docker update)_</span>
+  <input type="checkbox" name="docker_notify1"<?=($notify['docker_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="docker_notify2"<?=($notify['docker_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="docker_notify3"<?=($notify['docker_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="languageTitle" class="language" style="display:none">&nbsp;</span>
+: <span class="language" style="display:none"><span class="a">_(Language update)_</span>
+  <input type="checkbox" name="language_notify1"<?=($notify['language_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="language_notify2"<?=($notify['language_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="language_notify3"<?=($notify['language_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+<span id="reportTitle" class="report" style="display:none">&nbsp;</span>
+: <span class="report" style="display:none"><span class="a">_(Array status)_</span>
+  <input type="checkbox" name="report1"<?=($notify['report'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
+  <input type="checkbox" name="report2"<?=($notify['report'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
+  <input type="checkbox" name="report3"<?=($notify['report'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
+
+:notifications_agent_selection_help:
+
+_(Notification entity)_:
+: <span class="a">_(Notices)_</span>
+  <input type="checkbox" class="checkbox" name="normal1"<?=($notify['normal'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="normal2"<?=($notify['normal'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="normal3"<?=($notify['normal'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+&nbsp;
+: <span class="a">_(Warnings)_</span>
+  <input type="checkbox" class="checkbox" name="warning1"<?=($notify['warning'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="warning2"<?=($notify['warning'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="warning3"<?=($notify['warning'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+&nbsp;
+: <span class="a">_(Alerts)_</span>
+  <input type="checkbox" class="checkbox" name="alert1"<?=($notify['alert'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="alert2"<?=($notify['alert'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
+  <input type="checkbox" class="checkbox" name="alert3"<?=($notify['alert'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
+
+:notifications_classification_help:
+
+<input type="submit" name="#default" value="_(Default)_">
+: <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
+</form>

api/src/unraid-api/unraid-file-modifier/modifications/__test__/default-page-layout.modification.spec.ts

@@ -0,0 +1,19 @@
+import { readFile } from 'fs/promises';
+import { resolve } from 'path';
+
+import { describe, expect, test } from 'vitest';
+
+import DefaultPageLayoutModification from '../default-page-layout.modification';
+
+describe('DefaultPageLayout.php modifier', () => {
+    test('correctly applies to fresh install', async () => {
+        const fileContent = await readFile(
+            resolve(__dirname, '../__fixtures__/DefaultPageLayout.php'),
+            'utf-8'
+        );
+        expect(fileContent.length).toBeGreaterThan(0);
+        await expect(DefaultPageLayoutModification.applyToSource(fileContent)).toMatchFileSnapshot(
+            'DefaultPageLayout.modified.php'
+        );
+    });
+});

api/src/unraid-api/unraid-file-modifier/modifications/__test__/notifications-page.modification.spec.ts

@@ -0,0 +1,19 @@
+import { readFile } from 'fs/promises';
+import { resolve } from 'path';
+
+import { describe, expect, test } from 'vitest';
+
+import NotificationsPageModification from '../notifications-page.modification';
+
+describe('Notifications.page modifier', () => {
+    test('correctly applies to fresh install', async () => {
+        const fileContent = await readFile(
+            resolve(__dirname, '../__fixtures__/Notifications.page'),
+            'utf-8'
+        );
+        expect(fileContent.length).toBeGreaterThan(0);
+        await expect(NotificationsPageModification.applyToSource(fileContent)).toMatchFileSnapshot(
+            'Notifications.modified.page'
+        );
+    });
+});

api/src/unraid-api/unraid-file-modifier/modifications/default-page-layout.modification.ts

@@ -0,0 +1,69 @@
+import type { Logger } from '@nestjs/common';
+import { readFile, writeFile } from 'node:fs/promises';
+
+import {
+    FileModification,
+    ShouldApplyWithReason,
+} from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
+import { backupFile, restoreFile } from '@app/utils';
+
+export default class DefaultPageLayoutModification implements FileModification {
+    id: string = 'DefaultPageLayout.php';
+    logger: Logger;
+    filePath: string = '/usr/local/emhttp/plugins/dynamix/include/DefaultPageLayout.php';
+    constructor(logger: Logger) {
+        this.logger = logger;
+    }
+
+    async apply(): Promise<void> {
+        await backupFile(this.filePath, true);
+        const fileContent = await readFile(this.filePath, 'utf-8');
+        await writeFile(this.filePath, DefaultPageLayoutModification.applyToSource(fileContent));
+        this.logger.log(`${this.id} replaced successfully.`);
+    }
+
+    async rollback(): Promise<void> {
+        const restored = await restoreFile(this.filePath, false);
+        if (restored) {
+            this.logger.debug(`${this.id} restored.`);
+        } else {
+            this.logger.warn(`Could not restore ${this.id}`);
+        }
+    }
+
+    async shouldApply(): Promise<ShouldApplyWithReason> {
+        return {
+            shouldApply: true,
+            reason: 'Always apply the allowed file changes to ensure compatibility.',
+        };
+    }
+
+    static applyToSource(fileContent: string): string {
+        const transformers = [
+            DefaultPageLayoutModification.removeNotificationBell,
+            DefaultPageLayoutModification.replaceToasts,
+            DefaultPageLayoutModification.addToaster,
+        ];
+        return transformers.reduce((content, fn) => fn(content), fileContent);
+    }
+
+    static addToaster(source: string): string {
+        if (source.includes('unraid-toaster')) {
+            return source;
+        }
+        const insertion = `<unraid-toaster rich-colors close-button position="<?= ($notify['position'] === 'center') ? 'top-center' : $notify['position'] ?>"></unraid-toaster>`;
+        return source.replace(/<\/body>/, `${insertion}\n</body>`);
+    }
+
+    static removeNotificationBell(source: string): string {
+        return source.replace(/^.*(id='bell'|#bell).*$/gm, '');
+    }
+
+    static replaceToasts(source: string): string {
+        // matches jgrowl calls up to the second `)};`
+        const jGrowlPattern =
+            /\$\.jGrowl\(notify\.subject\+'<br>'\+notify\.description,\s*\{(?:[\s\S]*?\}\);[\s\S]*?)}\);/g;
+
+        return source.replace(jGrowlPattern, '');
+    }
+}

api/src/unraid-api/unraid-file-modifier/modifications/log-rotate.modification.ts

@@ -3,11 +3,11 @@ import { rm, writeFile } from 'node:fs/promises';
 
 import { execa } from 'execa';
 
-import { fileExists } from '@app/core/utils/misc/parse-config';
 import {
     FileModification,
     ShouldApplyWithReason,
 } from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
+import { fileExists } from '@app/core/utils/files/file-exists';
 
 export class LogRotateModification implements FileModification {
     id: string = 'log-rotate';

api/src/unraid-api/unraid-file-modifier/modifications/notifications-page.modification.ts

@@ -0,0 +1,51 @@
+import type { Logger } from '@nestjs/common';
+import { readFile, writeFile } from 'node:fs/promises';
+
+import {
+    FileModification,
+    ShouldApplyWithReason,
+} from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
+import { backupFile, restoreFile } from '@app/utils';
+
+export default class NotificationsPageModification implements FileModification {
+    id: string = 'Notifications.page';
+    logger: Logger;
+    filePath: string = '/usr/local/emhttp/plugins/dynamix/Notifications.page';
+    constructor(logger: Logger) {
+        this.logger = logger;
+    }
+
+    async apply(): Promise<void> {
+        await backupFile(this.filePath, true);
+        const fileContent = await readFile(this.filePath, 'utf-8');
+        await writeFile(this.filePath, NotificationsPageModification.applyToSource(fileContent));
+        this.logger.log(`${this.id} replaced successfully.`);
+    }
+
+    async rollback(): Promise<void> {
+        const restored = await restoreFile(this.filePath, false);
+        if (restored) {
+            this.logger.debug(`${this.id} restored.`);
+        } else {
+            this.logger.warn(`Could not restore ${this.id}`);
+        }
+    }
+
+    async shouldApply(): Promise<ShouldApplyWithReason> {
+        return {
+            shouldApply: true,
+            reason: 'Always apply the allowed file changes to ensure compatibility.',
+        };
+    }
+
+    static applyToSource(fileContent: string): string {
+        return (
+            fileContent
+                // Remove lines between _(Date format)_: and :notifications_date_format_help:
+                .replace(/^\s*_\(Date format\)_:(?:[^\n]*\n)*?\s*:notifications_date_format_help:/gm, '')
+
+                // Remove lines between _(Time format)_: and :notifications_time_format_help:
+                .replace(/^\s*_\(Time format\)_:(?:[^\n]*\n)*?\s*:notifications_time_format_help:/gm, '')
+        );
+    }
+}

api/src/unraid-api/unraid-file-modifier/unraid-file-modifier.service.ts

@@ -1,8 +1,11 @@
 import { Injectable, Logger, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
 
 import AuthRequestModification from '@app/unraid-api/unraid-file-modifier/modifications/auth-request.modification';
-import SSOFileModification from '@app/unraid-api/unraid-file-modifier/modifications/sso.modification';
 import { LogRotateModification } from '@app/unraid-api/unraid-file-modifier/modifications/log-rotate.modification';
+import SSOFileModification from '@app/unraid-api/unraid-file-modifier/modifications/sso.modification';
+
+import DefaultPageLayoutModification from './modifications/default-page-layout.modification';
+import NotificationsPageModification from './modifications/notifications-page.modification';
 
 export interface ShouldApplyWithReason {
     shouldApply: boolean;
@@ -46,6 +49,8 @@ export class UnraidFileModificationService implements OnModuleInit, OnModuleDest
             LogRotateModification,
             AuthRequestModification,
             SSOFileModification,
+            DefaultPageLayoutModification,
+            NotificationsPageModification,
         ];
         for (const ModificationClass of modificationClasses) {
             const instance = new ModificationClass(this.logger);

api/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

api/vite.config.ts

@@ -1,14 +1,15 @@
+import type { ViteUserConfig } from 'vitest/config';
 import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import nodeExternals from 'rollup-plugin-node-externals';
 import swc from 'unplugin-swc';
 import { VitePluginNode } from 'vite-plugin-node';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
 
-export default defineConfig(({ mode }) => {
+export default defineConfig(({ mode }): ViteUserConfig => {
     return {
+        assetsInclude: ['src/**/*.graphql'],
         plugins: [
             tsconfigPaths(),
             nodeExternals(),
@@ -19,9 +20,6 @@ export default defineConfig(({ mode }) => {
             viteCommonjs({
                 include: ['@fastify/type-provider-typebox', 'node_modules/**'],
             }),
-            viteStaticCopy({
-                targets: [{ src: 'src/graphql/schema/types', dest: '' }],
-            }),
             ...(mode === 'development'
                 ? VitePluginNode({
                       adapter: 'nest',
@@ -73,7 +71,6 @@ export default defineConfig(({ mode }) => {
             include: [
                 '@nestjs/common',
                 '@nestjs/core',
-                '@nestjs/platform-express',
                 'reflect-metadata',
                 'fastify',
                 'passport',
@@ -81,7 +78,8 @@ export default defineConfig(({ mode }) => {
             ],
         },
         build: {
-            sourcemap: true,
+            ssr: true,
+            sourcemap: false,
             outDir: 'dist',
             rollupOptions: {
                 input: {

plugin/plugins/dynamix.unraid.net.plg

@@ -48,6 +48,20 @@ exit 0
   <FILE Run="/bin/bash" Method="install">
     <INLINE>
       <![CDATA[
+# Check available disk space on /usr
+echo -n "Checking disk space on /usr... "
+FREE_SPACE=$(df -m /usr | awk 'NR==2 {print $4}')
+if [ -z "$FREE_SPACE" ]; then
+  echo "⚠️ Error: Unable to determine free space on /usr"
+  exit 1
+fi
+
+if [ "$FREE_SPACE" -lt 300 ]; then
+  echo "⚠️ Error: Insufficient disk space on /usr. Need at least 300MB free, only ${FREE_SPACE}MB available"
+  exit 1
+fi
+echo "ok. (${FREE_SPACE}MB free)"
+
 version=
 # shellcheck disable=SC1091
 source /etc/unraid-version
@@ -104,7 +118,6 @@ sha256check() {
       exit 0
     </INLINE>
   </FILE>
-  <!-- download node - older OS releases -->
   <FILE Name="/boot/config/plugins/dynamix.my.servers/&NODEJS_FILENAME;">
     <URL>&NODEJS_TXZ;</URL>
     <SHA256>&NODEJS_SHA256;</SHA256>
@@ -113,47 +126,32 @@ sha256check() {
     <INLINE>
       NODE_FILE="&NODEJS_FILENAME;"
       <![CDATA[
-      if [[ -f "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" ]]; then
+        # Check if the Node.js archive exists
-        # Create temp directory with error checking
+        if [[ ! -f "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" ]]; then
-        TEMP_DIR=$(mktemp -d) || { echo "Failed to create temp directory"; exit 1; }
+          echo "Node.js archive not found at /boot/config/plugins/dynamix.my.servers/${NODE_FILE}"
-        
-        # Extract with error checking
-        if ! tar --strip-components=1 -xf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" -C "${TEMP_DIR}"; then
-          echo "Failed to extract Node.js archive"
-          rm -rf "${TEMP_DIR}"
           exit 1
         fi
 
-        # Verify extracted files exist before copying
+        # Perform a dry run to verify the archive is valid
-        for DIR in bin lib include share; do
+        if ! tar --strip-components=1 -tf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" > /dev/null; then
-          if [[ ! -d "${TEMP_DIR}/${DIR}" ]]; then
+          echo "Node.js archive is corrupt or invalid"
-            echo "Missing ${DIR} directory in Node.js archive"
+          exit 1
-            rm -rf "${TEMP_DIR}"
+        fi
-            exit 1
-          fi
-        done
 
-        # Create destination directories if they don't exist
+        # Define the target directory for Node.js
-        for DIR in bin lib include share; do
+        NODE_DIR="/usr/local/node"
-          mkdir -p "/usr/local/${DIR}"
-        done
 
-        # Copy files with individual error checking
+        # Create the target directory if it doesn't exist
-        for DIR in bin lib include share; do
+        mkdir -p "${NODE_DIR}" || { echo "Failed to create ${NODE_DIR}"; exit 1; }
-          if ! cp -rf "${TEMP_DIR}/${DIR}"/* "/usr/local/${DIR}/"; then
+
-            echo "Failed to copy ${DIR} files"
+        # Extract the archive to the target directory
-            rm -rf "${TEMP_DIR}"
+        if ! tar --strip-components=1 -xf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" -C "${NODE_DIR}"; then
-            exit 1
+          echo "Failed to extract Node.js archive"
-          fi
+          exit 1
-        done
+        fi
 
         echo "Node.js installation successful"
-        rm -rf "${TEMP_DIR}"
+        exit 0
-      else
-        echo "Node.js archive not found at /boot/config/plugins/dynamix.my.servers/${NODE_FILE}"
-        exit 1
-      fi
-      exit 0
       ]]>
     </INLINE>
   </FILE>
@@ -440,6 +438,8 @@ appendTextIfMissing() {
     echo "${TEXT}">>"${FILE}"
   fi
 }
+      source /root/.bashrc
+      echo "PATH: $PATH"
 
 version=
 # shellcheck disable=SC1091
@@ -481,7 +481,6 @@ echo
 # skip: do not perform any action if there is a manifest version difference
 preserveFilesDirs=(
   "move:/usr/local/emhttp/plugins/dynamix/Registration.page:preventDowngrade"
-  "copy:/usr/local/emhttp/plugins/dynamix/Notifications.page:preventDowngrade"
   "move:/usr/local/emhttp/plugins/dynamix/include/UpdateDNS.php:preventDowngrade"
   "move:/usr/local/emhttp/plugins/dynamix.plugin.manager/Downgrade.page:preventDowngrade"
   "move:/usr/local/emhttp/plugins/dynamix.plugin.manager/Update.page:preventDowngrade"
@@ -548,13 +547,6 @@ if [[ -n $LINENUM ]]; then
   mv -f "$FILE~" "$FILE"
 fi
 
-# Remove lines containing id='bell' or #bell and write to intermediate temporary file.
-# This effectively removes the old notification bell from the webgui (via DefaultPageLayout.php).
-TMP_FILE=$(mktemp)
-grep -Ev "id='bell'|#bell" "$FILE" > "$TMP_FILE"
-mv "$TMP_FILE" "$FILE"
-echo "Removed notification-bell-related lines from $FILE"
-
 # patch: showchanges, starting with 6.11.0-rc1
 #        ShowChanges.php, in 6.10
 # search text:       $valid = ['/var/tmp/','/tmp/plugins/'];
@@ -568,19 +560,6 @@ for FILE in "${FILES[@]}"; do
   fi
 done
 
-# patch: Notifications.page
-#
-# Remove date and time format settings from Notification Settings
-# search text:       _(Date format)_:
-# search text:       _(Time format)_:
-
-FILE=/usr/local/emhttp/plugins/dynamix/Notifications.page
-TMP_FILE=$(mktemp)
-cp "$FILE" "$TMP_FILE"
-sed -i '/_(Date format)_:/,/:notifications_date_format_help:/d' $TMP_FILE
-sed -i '/_(Time format)_:/,/:notifications_time_format_help:/d' $TMP_FILE
-mv "$TMP_FILE" "$FILE"
-
 # remove keys.limetechnology.com from hosts file
 # brings older versions of Unraid in sync with 6.12.12
 # no need to restore original file on uninstall
@@ -905,15 +884,20 @@ mkdir -p /var/log/unraid-api
 tar -C "${api_base_directory}" -xzf "${flash}/unraid-api.tgz" --strip 1
 # Copy env file
 cp "${api_base_directory}/.env.${env}" "${api_base_directory}/.env"
-npm link "${api_base_directory}" --force
+
+# Create Symlink from /usr/local/unraid-api/dist/cli.js to /usr/local/bin/unraid-api
+ln -sf "${api_base_directory}/dist/cli.js" "${unraid_binary_path}"
+
 # Create symlink to unraid-api binary (to allow usage elsewhere)
-ln -sf /usr/local/bin/unraid-api /usr/local/sbin/unraid-api
+ln -sf ${unraid_binary_path} /usr/local/sbin/unraid-api
-ln -sf /usr/local/bin/unraid-api /usr/bin/unraid-api
+ln -sf ${unraid_binary_path} /usr/bin/unraid-api
 # bail if expected file does not exist
 [[ ! -f "${api_base_directory}/package.json" ]] && echo "unraid-api install failed" && exit 1
 
 logger "Starting flash backup (if enabled)"
 echo "/etc/rc.d/rc.flash_backup start" | at -M now &>/dev/null
+. /root/.bashrc
+echo "PATH: $PATH"
 logger "Starting Unraid API"
 ${unraid_binary_path} start
 
@@ -942,4 +926,4 @@ exit 0
     </INLINE>
   </FILE>
 
-</PLUGIN>
+</PLUGIN>

plugin/source/dynamix.unraid.net/etc/profile.d/node.sh

@@ -0,0 +1,6 @@
+#! /bin/bash
+
+# Add Node.js binary path to PATH if not already present
+if [[ ":$PATH:" != *":/usr/local/node/bin:"* ]]; then
+    export PATH="/usr/local/node/bin:$PATH"
+fi

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php

@@ -1,36 +1,64 @@
 <?php
 $docroot = $docroot ?? $_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp';
 
-class WebComponentsExtractor {
+class WebComponentsExtractor
-    private const MANIFEST_FILE = '/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/manifest.json';
+{
-    private const SEARCH_TEXT = 'unraid-components.client.mjs';
     private const PREFIXED_PATH = '/plugins/dynamix.my.servers/unraid-components/';
+    private const RICH_COMPONENTS_ENTRY = 'unraid-components.client.mjs';
+    private const UI_ENTRY = 'src/register.ts';
+    private const UI_STYLES_ENTRY = 'style.css';
 
-    private string $jsFileName = '';
+    public function __construct() {}
 
-    public function __construct() {
+    public function getAssetPath(string $asset): string
-        $localManifest = json_decode(file_get_contents(self::MANIFEST_FILE), true);
+    {
+        return self::PREFIXED_PATH . $asset;
+    }
+
+    public function getManifestContents(string $pathFromComponents): array
+    {
+        $filePath = '/usr/local/emhttp' . $this->getAssetPath($pathFromComponents);
+        return json_decode(file_get_contents($filePath), true);
+    }
+
+    private function getRichComponentsFile(): string
+    {
+        $localManifest = $this->getManifestContents('manifest.json');
 
         foreach ($localManifest as $key => $value) {
-            if (strpos($key, self::SEARCH_TEXT) !== false && isset($value["file"])) {
+            if (strpos($key, self::RICH_COMPONENTS_ENTRY) !== false && isset($value["file"])) {
-                $this->jsFileName = $value["file"];
+                return $value["file"];
-                break;
             }
         }
     }
 
-    public function getJsFileName(): string {
+    private function getRichComponentsScript(): string
-        return $this->jsFileName;
+    {
-    }
+        $jsFile = $this->getRichComponentsFile();
-
+        if (empty($jsFile)) {
-    public function getJSFileRelativePath(): string {
+            return '<script>console.error("%cNo matching key containing \'' . self::RICH_COMPONENTS_ENTRY . '\' found.", "font-weight: bold; color: white; background-color: red");</script>';
-        return self::PREFIXED_PATH . $this->jsFileName;
+        }
-    }
+        return '<script src="' . $this->getAssetPath($jsFile) . '"></script>';
-
+    }
-    public function getScriptTagHtml(): string {
+
-        if (empty($this->jsFileName)) {
+    private function getUnraidUiScriptHtml(): string
-            return '<script>console.error("%cNo matching key containing \'' . self::SEARCH_TEXT . '\' found.", "font-weight: bold; color: white; background-color: red");</script>';
+    {
+        $manifest = $this->getManifestContents('ui.manifest.json');
+        $jsFile = $manifest[self::UI_ENTRY]['file'];
+        $cssFile = $manifest[self::UI_STYLES_ENTRY]['file'];
+        return '<script defer type="module">
+            import { registerAllComponents } from "' . $this->getAssetPath($jsFile) . '";
+            registerAllComponents({ pathToSharedCss: "' . $this->getAssetPath($cssFile) . '" });
+        </script>';
+    }
+
+    public function getScriptTagHtml(): string
+    {
+        try {
+            return $this->getRichComponentsScript() . $this->getUnraidUiScriptHtml();
+        } catch (\Exception $e) {
+            error_log("Error in WebComponentsExtractor::getScriptTagHtml: " . $e->getMessage());
+            return "";
         }
-        return '<script src="' . $this->getJSFileRelativePath() . '"></script>';
     }
 }

unraid-ui/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body class="p-12">
+    <div id="app"></div>
+    <unraid-badge>Hello world</unraid-badge>
+    <unraid-button>woah</unraid-button>
+    <unraid-brand-button>woah2</unraid-brand-button>
+    <div class="w-[200px]"><unraid-brand-loading></unraid-brand-loading></div>
+    <div class="w-[200px] bg-neutral-900 p-6 rounded"><unraid-brand-loading-white></unraid-brand-loading-white></div>
+    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+    <unraid-toaster close-button rich-colors></unraid-toaster>
+    <!-- <unraid-dropdown-menu-label>My Account</unraid-dropdown-menu-label>
+        <unraid-dropdown-menu-separator class="bg-black"></unraid-dropdown-menu-separator>
+      <unraid-dropdown-menu-trigger>
+        <unraid-button variant="secondary">Open Menu</unraid-button>
+      </unraid-dropdown-menu-trigger>
+    <unraid-dropdown-menu>
+      <unraid-dropdown-menu-trigger>
+        <unraid-button variant="secondary">Open Menu</unraid-button>
+      </unraid-dropdown-menu-trigger>
+      <unraid-dropdown-menu-content>
+        <unraid-dropdown-menu-label>My Account</unraid-dropdown-menu-label>
+        <unraid-dropdown-menu-separator></unraid-dropdown-menu-separator>
+        <unraid-dropdown-menu-item>Profile</unraid-dropdown-menu-item>
+        <unraid-dropdown-menu-item>Settings</unraid-dropdown-menu-item>
+        <unraid-dropdown-menu-item>Logout</unraid-dropdown-menu-item>
+      </unraid-dropdown-menu-content>
+    </unraid-dropdown-menu> -->
+
+    <script type="module">
+      import { registerAllComponents } from '/src/register.ts';
+      registerAllComponents();
+    </script>
+  </body>
+</html>

unraid-ui/justfile

@@ -10,4 +10,10 @@ setup:
 
 clean:
     npm run clean
-    rm -rf node_modules
+    rm -rf node_modules
+
+build-wc:
+    REM_PLUGIN=true npx vite build -c vite.web-component.ts --mode production
+
+deploy server_name:
+    rsync -avz -e ssh ./dist/ root@{{server_name}}:/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components

unraid-ui/package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:wc": "REM_PLUGIN=true npx vite build -c vite.web-component.ts --mode production",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
@@ -34,12 +35,15 @@
     "@vueuse/core": "^10.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "kebab-case": "^2.0.1",
     "lucide-vue-next": "^0.468.0",
     "radix-vue": "^1.9.11",
     "shadcn-vue": "^0.11.3",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^2.5.5",
+    "vue-sonner": "^1.3.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
@@ -50,6 +54,7 @@
     "@types/node": "^20.0.0",
     "@types/testing-library__vue": "^5.0.0",
     "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vitest/coverage-v8": "^1.0.0",
     "@vitest/ui": "^1.0.0",
     "@vue/test-utils": "^2.4.0",
@@ -61,11 +66,13 @@
     "happy-dom": "^12.0.0",
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.0.0",
+    "vite-plugin-vue-devtools": "^7.7.1",
     "vitest": "^1.0.0",
     "vue": "^3.3.0",
     "vue-tsc": "^1.8.0"

unraid-ui/src/components/brand/BrandLoading.ce.vue

@@ -83,7 +83,7 @@ withDefaults(defineProps<Props>(), {
   </svg>
 </template>
 
-<style lang="postcss">
+<style scoped lang="css">
 .unraid_mark_2,
 .unraid_mark_4 {
   animation: mark_2 1.5s ease infinite;

unraid-ui/src/components/brand/BrandLoadingWhite.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BrandLoading from './BrandLoading.vue';
+import BrandLoading from './BrandLoading.ce.vue';
 </script>
 
 <template>

unraid-ui/src/components/brand/index.ts

@@ -1,6 +1,6 @@
 export { default as BrandButton } from "./BrandButton.vue";
 export { brandButtonVariants } from "./brand-button.variants";
-export { default as BrandLoading } from "./BrandLoading.vue";
+export { default as BrandLoading } from "./BrandLoading.ce.vue";
 export { default as BrandLoadingWhite } from "./BrandLoadingWhite.vue";
 export { default as BrandLogo } from "./BrandLogo.vue";
 export { default as BrandLogoConnect } from "./BrandLogoConnect.vue";

unraid-ui/src/components/common/button/button.variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

unraid-ui/src/components/common/toast/Toaster.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { Toaster as Sonner, toast, type ToasterProps } from 'vue-sonner';
+
+const props = defineProps<ToasterProps>();
+
+onMounted(() => {
+  globalThis.toast = toast;
+});
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast:
+          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        error: '[&>div>svg]:fill-unraid-red-500',
+        warning: '[&>div>svg]:fill-yellow-500',
+        info: '[&>div>svg]:fill-blue-500',
+      },
+    }"
+  />
+</template>

unraid-ui/src/components/common/toast/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Toaster.vue';

unraid-ui/src/components/index.ts

@@ -0,0 +1,58 @@
+export { Badge } from '@/components/common/badge';
+export {
+  BrandButton,
+  BrandLoading,
+  BrandLoadingWhite,
+  BrandLogo,
+  BrandLogoConnect,
+} from '@/components/brand';
+export { Button } from '@/components/common/button';
+export { CardWrapper, PageContainer } from '@/components/layout';
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuRadioGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuShortcut,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '@/components/common/dropdown-menu';
+export { Bar, Error, Spinner } from '@/components/common/loading';
+export { Input } from '@/components/form/input';
+export { Label } from '@/components/form/label';
+export { Lightswitch } from '@/components/form/lightswitch';
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemText,
+  SelectLabel,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/form/select';
+export { Switch, SwitchHeadlessUI } from '@/components/form/switch';
+export { ScrollArea, ScrollBar } from '@/components/common/scroll-area';
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetClose,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from '@/components/common/sheet';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/common/tabs';
+export { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/common/tooltip';
+export { Toaster } from '@/components/common/toast';

unraid-ui/src/global.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable no-var */
+declare global {
+  /** loaded by Toaster.vue */
+  var toast: (typeof import('vue-sonner'))['toast'];
+}
+
+// an export or import statement is required to make this file a module
+export {};

unraid-ui/src/index.ts

@@ -149,3 +149,4 @@ export {
   TooltipProvider,
   useTeleport,
 };
+export { Toaster } from '@/components/common/toast';

unraid-ui/src/register.ts

@@ -0,0 +1,34 @@
+import { defineCustomElement } from 'vue';
+import './styles/index.css';
+import * as Components from '@/components';
+import kebabCase from 'kebab-case';
+
+const debugImports = process.env.NODE_ENV !== 'production';
+
+type RegisterParams = {
+  namePrefix?: string;
+  pathToSharedCss?: string;
+};
+
+export function registerAllComponents(params: RegisterParams = {}) {
+  const { namePrefix = 'unraid', pathToSharedCss = './src/styles/index.css' } = params;
+  Object.entries(Components).forEach(([name, component]) => {
+    // add our shared css to each web component
+    component.styles ??= [];
+    component.styles.unshift(`@import "${pathToSharedCss}"`);
+
+    // translate ui component names from PascalCase to kebab-case
+    let elementName = kebabCase(name);
+    if (!elementName) {
+      console.log('[register components] Could not translate component name to kebab-case:', name);
+      elementName = name;
+    }
+    elementName = namePrefix + elementName;
+
+    // register custom web components
+    if (debugImports) {
+      console.log(name, elementName, component.styles);
+    }
+    customElements.define(elementName, defineCustomElement(component));
+  });
+}

unraid-ui/src/styles/index.css

@@ -1,3 +1,4 @@
 /* global styles for unraid-ui */
 @import "./globals.css";
+@import "./sonner.css";
 

unraid-ui/src/styles/sonner.css

@@ -0,0 +1,665 @@
+/**------------------------------------------------------------------------------------------------
+ *                                           SONNER.CSS
+ *   This is a copy of Sonner's `style.css` as of commit a5b77c2df08d5c05aa923170176168102855533d
+ *   
+ *   This was necessary because I couldn't find a simple way to include Sonner's styles in vite's
+ *   css build output. They wouldn't show up even though the toaster was included, and vue-sonner
+ *   currently doesn't export its stylesheet (it appears to be inlined, but styles weren't applied
+ *   to the unraid-toaster component for some reason).
+ *------------------------------------------------------------------------------------------------**/
+:where(html[dir='ltr']),
+:where([data-sonner-toaster][dir='ltr']) {
+  --toast-icon-margin-start: -3px;
+  --toast-icon-margin-end: 4px;
+  --toast-svg-margin-start: -1px;
+  --toast-svg-margin-end: 0px;
+  --toast-button-margin-start: auto;
+  --toast-button-margin-end: 0;
+  --toast-close-button-start: 0;
+  --toast-close-button-end: unset;
+  --toast-close-button-transform: translate(-35%, -35%);
+}
+
+:where(html[dir='rtl']),
+:where([data-sonner-toaster][dir='rtl']) {
+  --toast-icon-margin-start: 4px;
+  --toast-icon-margin-end: -3px;
+  --toast-svg-margin-start: 0px;
+  --toast-svg-margin-end: -1px;
+  --toast-button-margin-start: 0;
+  --toast-button-margin-end: auto;
+  --toast-close-button-start: unset;
+  --toast-close-button-end: 0;
+  --toast-close-button-transform: translate(35%, -35%);
+}
+
+:where([data-sonner-toaster]) {
+  position: fixed;
+  width: var(--width);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --gray1: hsl(0, 0%, 99%);
+  --gray2: hsl(0, 0%, 97.3%);
+  --gray3: hsl(0, 0%, 95.1%);
+  --gray4: hsl(0, 0%, 93%);
+  --gray5: hsl(0, 0%, 90.9%);
+  --gray6: hsl(0, 0%, 88.7%);
+  --gray7: hsl(0, 0%, 85.8%);
+  --gray8: hsl(0, 0%, 78%);
+  --gray9: hsl(0, 0%, 56.1%);
+  --gray10: hsl(0, 0%, 52.3%);
+  --gray11: hsl(0, 0%, 43.5%);
+  --gray12: hsl(0, 0%, 9%);
+  --border-radius: 8px;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  outline: none;
+  z-index: 999999999;
+  transition: transform 400ms ease;
+}
+
+:where([data-sonner-toaster][data-lifted='true']) {
+  transform: translateY(-10px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  :where([data-sonner-toaster][data-lifted='true']) {
+    transform: none;
+  }
+}
+
+:where([data-sonner-toaster][data-x-position='right']) {
+  right: max(var(--offset), env(safe-area-inset-right));
+}
+
+:where([data-sonner-toaster][data-x-position='left']) {
+  left: max(var(--offset), env(safe-area-inset-left));
+}
+
+:where([data-sonner-toaster][data-x-position='center']) {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:where([data-sonner-toaster][data-y-position='top']) {
+  top: max(var(--offset), env(safe-area-inset-top));
+}
+
+:where([data-sonner-toaster][data-y-position='bottom']) {
+  bottom: max(var(--offset), env(safe-area-inset-bottom));
+}
+
+:where([data-sonner-toast]) {
+  --y: translateY(100%);
+  --lift-amount: calc(var(--lift) * var(--gap));
+  z-index: var(--z-index);
+  position: absolute;
+  opacity: 0;
+  transform: var(--y);
+  filter: blur(0);
+  /* https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not */
+  touch-action: none;
+  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
+  box-sizing: border-box;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+
+:where([data-sonner-toast][data-styled='true']) {
+  padding: 16px;
+  background: var(--normal-bg);
+  border: 1px solid var(--normal-border);
+  color: var(--normal-text);
+  border-radius: var(--border-radius);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  width: var(--width);
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:where([data-sonner-toast]:focus-visible) {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+:where([data-sonner-toast][data-y-position='top']) {
+  top: 0;
+  --y: translateY(-100%);
+  --lift: 1;
+  --lift-amount: calc(1 * var(--gap));
+}
+
+:where([data-sonner-toast][data-y-position='bottom']) {
+  bottom: 0;
+  --y: translateY(100%);
+  --lift: -1;
+  --lift-amount: calc(var(--lift) * var(--gap));
+}
+
+:where([data-sonner-toast]) :where([data-description]) {
+  font-weight: 400;
+  line-height: 1.4;
+  color: inherit;
+}
+
+:where([data-sonner-toast]) :where([data-title]) {
+  font-weight: 500;
+  line-height: 1.5;
+  color: inherit;
+}
+
+:where([data-sonner-toast]) :where([data-icon]) {
+  display: flex;
+  height: 16px;
+  width: 16px;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: var(--toast-icon-margin-start);
+  margin-right: var(--toast-icon-margin-end);
+}
+
+:where([data-sonner-toast][data-promise='true']) :where([data-icon]) > svg {
+  opacity: 0;
+  transform: scale(0.8);
+  transform-origin: center;
+  animation: sonner-fade-in 300ms ease forwards;
+}
+
+:where([data-sonner-toast]) :where([data-icon]) > * {
+  flex-shrink: 0;
+}
+
+:where([data-sonner-toast]) :where([data-icon]) svg {
+  margin-left: var(--toast-svg-margin-start);
+  margin-right: var(--toast-svg-margin-end);
+}
+
+:where([data-sonner-toast]) :where([data-content]) {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+[data-sonner-toast][data-styled='true'] [data-button] {
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 24px;
+  font-size: 12px;
+  color: var(--normal-bg);
+  background: var(--normal-text);
+  margin-left: var(--toast-button-margin-start);
+  margin-right: var(--toast-button-margin-end);
+  border: none;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: opacity 400ms, box-shadow 200ms;
+}
+
+:where([data-sonner-toast]) :where([data-button]):focus-visible {
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+
+:where([data-sonner-toast]) :where([data-button]):first-of-type {
+  margin-left: var(--toast-button-margin-start);
+  margin-right: var(--toast-button-margin-end);
+}
+
+:where([data-sonner-toast]) :where([data-cancel]) {
+  color: var(--normal-text);
+  background: rgba(0, 0, 0, 0.08);
+}
+
+:where([data-sonner-toast][data-theme='dark']) :where([data-cancel]) {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+[data-sonner-toast] [data-close-button] {
+  position: absolute;
+  left: var(--toast-close-button-start);
+  right: var(--toast-close-button-end);
+  top: 0;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  color: var(--gray12);
+  border: 1px solid var(--gray4);
+  transform: var(--toast-close-button-transform);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+  transition: opacity 100ms, background 200ms, border-color 200ms;
+}
+
+[data-sonner-toast] [data-close-button] {
+  background: var(--gray1);
+}
+
+:where([data-sonner-toast]) :where([data-close-button]):focus-visible {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+:where([data-sonner-toast]) :where([data-disabled='true']) {
+  cursor: not-allowed;
+}
+
+[data-sonner-toast]:hover [data-close-button]:hover {
+  background: var(--gray2);
+  border-color: var(--gray5);
+}
+
+/* Leave a ghost div to avoid setting hover to false when swiping out */
+:where([data-sonner-toast][data-swiping='true'])::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: -1;
+}
+
+:where([data-sonner-toast][data-y-position='top'][data-swiping='true'])::before {
+  /* y 50% needed to distribute height additional height evenly */
+  bottom: 50%;
+  transform: scaleY(3) translateY(50%);
+}
+
+:where([data-sonner-toast][data-y-position='bottom'][data-swiping='true'])::before {
+  /* y -50% needed to distribute height additional height evenly */
+  top: 50%;
+  transform: scaleY(3) translateY(-50%);
+}
+
+/* Leave a ghost div to avoid setting hover to false when transitioning out */
+:where([data-sonner-toast][data-swiping='false'][data-removed='true'])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scaleY(2);
+}
+
+/* Needed to avoid setting hover to false when inbetween toasts */
+:where([data-sonner-toast])::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  height: calc(var(--gap) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
+
+:where([data-sonner-toast][data-mounted='true']) {
+  --y: translateY(0);
+  opacity: 1;
+}
+
+:where([data-sonner-toast][data-expanded='false'][data-front='false']) {
+  --scale: var(--toasts-before) * 0.05 + 1;
+  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+  height: var(--front-toast-height);
+}
+
+:where([data-sonner-toast]) > * {
+  transition: opacity 400ms;
+}
+
+:where([data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true']) > * {
+  opacity: 0;
+}
+
+:where([data-sonner-toast][data-visible='false']) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:where([data-sonner-toast][data-mounted='true'][data-expanded='true']) {
+  --y: translateY(calc(var(--lift) * var(--offset)));
+  height: var(--initial-height);
+}
+
+:where([data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false']) {
+  --y: translateY(calc(var(--lift) * -100%));
+  opacity: 0;
+}
+
+:where([data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true']) {
+  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+  opacity: 0;
+}
+
+:where([data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false']) {
+  --y: translateY(40%);
+  opacity: 0;
+  transition: transform 500ms, opacity 200ms;
+}
+
+/* Bump up the height to make sure hover state doesn't get set to false */
+:where([data-sonner-toast][data-removed='true'][data-front='false'])::before {
+  height: calc(var(--initial-height) + 20%);
+}
+
+[data-sonner-toast][data-swiping='true'] {
+  transform: var(--y) translateY(var(--swipe-amount, 0px));
+  transition: none;
+}
+
+[data-sonner-toast][data-swiped='true'] {
+  user-select: none;
+}
+
+[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
+[data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
+  animation: swipe-out 200ms ease-out forwards;
+}
+
+@keyframes swipe-out {
+  from {
+    transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));
+    opacity: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  [data-sonner-toaster] {
+    position: fixed;
+    --mobile-offset: 16px;
+    right: var(--mobile-offset);
+    left: var(--mobile-offset);
+    width: 100%;
+  }
+
+  [data-sonner-toaster][dir='rtl'] {
+    left: calc(var(--mobile-offset) * -1);
+  }
+
+  [data-sonner-toaster] [data-sonner-toast] {
+    left: 0;
+    right: 0;
+    width: calc(100% - var(--mobile-offset) * 2);
+  }
+
+  [data-sonner-toaster][data-x-position='left'] {
+    left: var(--mobile-offset);
+  }
+
+  [data-sonner-toaster][data-y-position='bottom'] {
+    bottom: 20px;
+  }
+
+  [data-sonner-toaster][data-y-position='top'] {
+    top: 20px;
+  }
+
+  [data-sonner-toaster][data-x-position='center'] {
+    left: var(--mobile-offset);
+    right: var(--mobile-offset);
+    transform: none;
+  }
+}
+
+[data-sonner-toaster][data-theme='light'] {
+  --normal-bg: #fff;
+  --normal-border: var(--gray4);
+  --normal-text: var(--gray12);
+
+  --success-bg: hsl(143, 85%, 96%);
+  --success-border: hsl(145, 92%, 91%);
+  --success-text: hsl(140, 100%, 27%);
+
+  --info-bg: hsl(208, 100%, 97%);
+  --info-border: hsl(221, 91%, 91%);
+  --info-text: hsl(210, 92%, 45%);
+
+  --warning-bg: hsl(49, 100%, 97%);
+  --warning-border: hsl(49, 91%, 91%);
+  --warning-text: hsl(31, 92%, 45%);
+
+  --error-bg: hsl(359, 100%, 97%);
+  --error-border: hsl(359, 100%, 94%);
+  --error-text: hsl(360, 100%, 45%);
+}
+
+[data-sonner-toaster][data-theme='light'] [data-sonner-toast][data-invert='true'] {
+  --normal-bg: #000;
+  --normal-border: hsl(0, 0%, 20%);
+  --normal-text: var(--gray1);
+}
+
+[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-invert='true'] {
+  --normal-bg: #fff;
+  --normal-border: var(--gray3);
+  --normal-text: var(--gray12);
+}
+
+[data-sonner-toaster][data-theme='dark'] {
+  --normal-bg: #000;
+  --normal-border: hsl(0, 0%, 20%);
+  --normal-text: var(--gray1);
+
+  --success-bg: hsl(150, 100%, 6%);
+  --success-border: hsl(147, 100%, 12%);
+  --success-text: hsl(150, 86%, 65%);
+
+  --info-bg: hsl(215, 100%, 6%);
+  --info-border: hsl(223, 100%, 12%);
+  --info-text: hsl(216, 87%, 65%);
+
+  --warning-bg: hsl(64, 100%, 6%);
+  --warning-border: hsl(60, 100%, 12%);
+  --warning-text: hsl(46, 87%, 65%);
+
+  --error-bg: hsl(358, 76%, 10%);
+  --error-border: hsl(357, 89%, 16%);
+  --error-text: hsl(358, 100%, 81%);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='success'] {
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='info'] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='error'] {
+  background: var(--error-bg);
+  border-color: var(--error-border);
+  color: var(--error-text);
+}
+
+[data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
+  background: var(--error-bg);
+  border-color: var(--error-border);
+  color: var(--error-text);
+}
+
+.sonner-loading-wrapper {
+  --size: 16px;
+  height: var(--size);
+  width: var(--size);
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+}
+
+.sonner-loading-wrapper[data-visible='false'] {
+  transform-origin: center;
+  animation: sonner-fade-out 0.2s ease forwards;
+}
+
+.sonner-spinner {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  height: var(--size);
+  width: var(--size);
+}
+
+.sonner-loading-bar {
+  animation: sonner-spin 1.2s linear infinite;
+  background: var(--gray11);
+  border-radius: 6px;
+  height: 8%;
+  left: -10%;
+  position: absolute;
+  top: -3.9%;
+  width: 24%;
+}
+
+.sonner-loading-bar:nth-child(1) {
+  animation-delay: -1.2s;
+  transform: rotate(0.0001deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(2) {
+  animation-delay: -1.1s;
+  transform: rotate(30deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(3) {
+  animation-delay: -1s;
+  transform: rotate(60deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(4) {
+  animation-delay: -0.9s;
+  transform: rotate(90deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(5) {
+  animation-delay: -0.8s;
+  transform: rotate(120deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(6) {
+  animation-delay: -0.7s;
+  transform: rotate(150deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(7) {
+  animation-delay: -0.6s;
+  transform: rotate(180deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(8) {
+  animation-delay: -0.5s;
+  transform: rotate(210deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(9) {
+  animation-delay: -0.4s;
+  transform: rotate(240deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(10) {
+  animation-delay: -0.3s;
+  transform: rotate(270deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(11) {
+  animation-delay: -0.2s;
+  transform: rotate(300deg) translate(146%);
+}
+
+.sonner-loading-bar:nth-child(12) {
+  animation-delay: -0.1s;
+  transform: rotate(330deg) translate(146%);
+}
+
+@keyframes sonner-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes sonner-fade-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes sonner-spin {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  [data-sonner-toast],
+  [data-sonner-toast] > *,
+  .sonner-loading-bar {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+.sonner-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+  transition: opacity 200ms, transform 200ms;
+}
+
+.sonner-loader[data-visible='false'] {
+  opacity: 0;
+  transform: scale(0.8) translate(-50%, -50%);
+}

unraid-ui/stories/components/brand/BrandLoading.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import BrandLoading from "../../../src/components/brand/BrandLoading.vue";
+import BrandLoading from "../../../src/components/brand/BrandLoading.ce.vue";
 
 const meta = {
   title: "Components/Brand",

unraid-ui/tailwind.config.ts

@@ -1,31 +1,34 @@
-import type { Config } from "tailwindcss";
+import tailwindRemToRem from './src/lib/tailwind-rem-to-rem';
-import { unraidPreset } from "./src/theme/preset";
+import type { Config } from 'tailwindcss';
+import { unraidPreset } from './src/theme/preset';
 
 export default {
   presets: [unraidPreset],
   content: [
-    "./src/components/**/*.{js,vue,ts}",
+    './src/components/**/*.{js,vue,ts}',
-    "./src/composables/**/*.{js,vue,ts}",
+    './src/composables/**/*.{js,vue,ts}',
-    "./stories/**/*.stories.{js,ts,jsx,tsx,mdx}",
+    './stories/**/*.stories.{js,ts,jsx,tsx,mdx}',
+    './index.html',
   ],
   safelist: [
-    "dark",
+    'dark',
-    "DropdownWrapper_blip",
+    'DropdownWrapper_blip',
-    "unraid_mark_1",
+    'unraid_mark_1',
-    "unraid_mark_2",
+    'unraid_mark_2',
-    "unraid_mark_3",
+    'unraid_mark_3',
-    "unraid_mark_4",
+    'unraid_mark_4',
-    "unraid_mark_6",
+    'unraid_mark_6',
-    "unraid_mark_7",
+    'unraid_mark_7',
-    "unraid_mark_8",
+    'unraid_mark_8',
-    "unraid_mark_9",
+    'unraid_mark_9',
     {
       pattern: /^text-(header-text-secondary|orange-dark)$/,
-      variants: ['group-hover', 'group-focus']
+      variants: ['group-hover', 'group-focus'],
     },
     {
       pattern: /^(underline|no-underline)$/,
-      variants: ['group-hover', 'group-focus']
+      variants: ['group-hover', 'group-focus'],
     },
   ],
+  plugins: [tailwindRemToRem({ baseFontSize: 16, newFontSize: process.env.REM_PLUGIN ? 10 : 16 })],
 } satisfies Partial<Config>;

unraid-ui/vite.web-component.ts

@@ -0,0 +1,41 @@
+import { fileURLToPath, URL } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import tailwindcss from 'tailwindcss';
+import { defineConfig } from 'vite';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  css: {
+    postcss: {
+      plugins: [tailwindcss()],
+    },
+  },
+  build: {
+    manifest: 'ui.manifest.json',
+    sourcemap: true,
+    cssCodeSplit: false,
+    lib: {
+      entry: fileURLToPath(new URL('./src/register.ts', import.meta.url)),
+      name: 'unraid-web-components',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      output: {
+        entryFileNames: '[name].[hash].js',
+        chunkFileNames: '[name].[hash].js',
+        assetFileNames: '[name].[hash][extname]',
+      },
+    },
+  },
+});

web/components/Notifications/Sidebar.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { Button } from '@/components/shadcn/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
-import { useMutation, useQuery } from '@vue/apollo-composable';
+import { useMutation, useQuery, useSubscription } from '@vue/apollo-composable';
+import { useFragment } from '~/composables/gql';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
 import { Importance, NotificationType } from '~/composables/gql/graphql';
 import {
   archiveAllNotifications,
   deleteArchivedNotifications,
+  NOTIFICATION_FRAGMENT,
   notificationsOverview,
 } from './graphql/notification.query';
+import { notificationAddedSubscription } from './graphql/notification.subscription';
 
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
 const { mutate: deleteArchives, loading: loadingDeleteAll } = useMutation(deleteArchivedNotifications);
@@ -35,6 +38,25 @@ const { result } = useQuery(notificationsOverview, null, {
   pollInterval: 2_000, // 2 seconds
 });
 
+const { onResult: onNotificationAdded } = useSubscription(notificationAddedSubscription);
+onNotificationAdded(({ data }) => {
+  if (!data) return;
+  const notif = useFragment(NOTIFICATION_FRAGMENT, data.notificationAdded);
+
+  const funcMapping: Record<Importance, (typeof globalThis)['toast']['info' | 'error' | 'warning']> = {
+    [Importance.Alert]: globalThis.toast.error,
+    [Importance.Warning]: globalThis.toast.warning,
+    [Importance.Info]: globalThis.toast.info,
+  };
+  const toast = funcMapping[notif.importance];
+  const createOpener = () => ({ label: 'Open', onClick: () => location.assign(notif.link as string) });
+
+  toast(notif.title, {
+    description: notif.subject,
+    action: notif.link ? createOpener() : undefined,
+  });
+});
+
 const overview = computed(() => {
   if (!result.value) {
     return;

web/components/Notifications/graphql/notification.subscription.ts

@@ -0,0 +1,9 @@
+import { graphql } from '~/composables/gql/gql';
+
+export const notificationAddedSubscription = graphql(/* GraphQL */ `
+  subscription NotificationAddedSub {
+    notificationAdded {
+      ...NotificationFragment
+    }
+  }
+`);

web/composables/gql/gql.ts

@@ -22,6 +22,7 @@ const documents = {
     "\n  mutation DeleteNotification($id: String!, $type: NotificationType!) {\n    deleteNotification(id: $id, type: $type) {\n      archive {\n        total\n      }\n    }\n  }\n": types.DeleteNotificationDocument,
     "\n  mutation DeleteAllNotifications {\n    deleteArchivedNotifications {\n      archive {\n        total\n      }\n      unread {\n        total\n      }\n    }\n  }\n": types.DeleteAllNotificationsDocument,
     "\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n": types.OverviewDocument,
+    "\n  subscription NotificationAddedSub {\n    notificationAdded {\n      ...NotificationFragment\n    }\n  }\n": types.NotificationAddedSubDocument,
     "\n  mutation ConnectSignIn($input: ConnectSignInInput!) {\n    connectSignIn(input: $input)\n  }\n": types.ConnectSignInDocument,
     "\n  mutation SignOut {\n    connectSignOut\n  }\n": types.SignOutDocument,
     "\n  fragment PartialCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.PartialCloudFragmentDoc,
@@ -78,6 +79,10 @@ export function graphql(source: "\n  mutation DeleteAllNotifications {\n    dele
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  subscription NotificationAddedSub {\n    notificationAdded {\n      ...NotificationFragment\n    }\n  }\n"): (typeof documents)["\n  subscription NotificationAddedSub {\n    notificationAdded {\n      ...NotificationFragment\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/composables/gql/graphql.ts

@@ -351,8 +351,6 @@ export enum ContainerState {
 
 export type CreateApiKeyInput = {
   description?: InputMaybe<Scalars['String']['input']>;
-  /**  Whether to create the key in memory only (true), or on disk (false) - memory only keys will not persist through reboots of the API  */
-  memory?: InputMaybe<Scalars['Boolean']['input']>;
   name: Scalars['String']['input'];
   /**  This will replace the existing key if one already exists with the same name, otherwise returns the existing key  */
   overwrite?: InputMaybe<Scalars['Boolean']['input']>;
@@ -1792,6 +1790,14 @@ export type OverviewQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type OverviewQuery = { __typename?: 'Query', notifications: { __typename?: 'Notifications', id: string, overview: { __typename?: 'NotificationOverview', unread: { __typename?: 'NotificationCounts', info: number, warning: number, alert: number, total: number }, archive: { __typename?: 'NotificationCounts', total: number } } } };
 
+export type NotificationAddedSubSubscriptionVariables = Exact<{ [key: string]: never; }>;
+
+
+export type NotificationAddedSubSubscription = { __typename?: 'Subscription', notificationAdded: (
+    { __typename?: 'Notification' }
+    & { ' $fragmentRefs'?: { 'NotificationFragmentFragment': NotificationFragmentFragment } }
+  ) };
+
 export type ConnectSignInMutationVariables = Exact<{
   input: ConnectSignInInput;
 }>;
@@ -1847,6 +1853,7 @@ export const ArchiveAllNotificationsDocument = {"kind":"Document","definitions":
 export const DeleteNotificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteNotification"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"type"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NotificationType"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteNotification"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"type"},"value":{"kind":"Variable","name":{"kind":"Name","value":"type"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteNotificationMutation, DeleteNotificationMutationVariables>;
 export const DeleteAllNotificationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteAllNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteArchivedNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteAllNotificationsMutation, DeleteAllNotificationsMutationVariables>;
 export const OverviewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}},{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OverviewQuery, OverviewQueryVariables>;
+export const NotificationAddedSubDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"NotificationAddedSub"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notificationAdded"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"NotificationFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"NotificationFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Notification"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"importance"}},{"kind":"Field","name":{"kind":"Name","value":"link"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"timestamp"}},{"kind":"Field","name":{"kind":"Name","value":"formattedTimestamp"}}]}}]} as unknown as DocumentNode<NotificationAddedSubSubscription, NotificationAddedSubSubscriptionVariables>;
 export const ConnectSignInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ConnectSignIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ConnectSignInInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignIn"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<ConnectSignInMutation, ConnectSignInMutationVariables>;
 export const SignOutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignOut"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignOut"}}]}}]} as unknown as DocumentNode<SignOutMutation, SignOutMutationVariables>;
 export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PartialCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updateExpiration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PartialCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;

web/helpers/create-apollo-client.ts

@@ -25,9 +25,7 @@ const httpLink = createHttpLink({
 const wsLink = new GraphQLWsLink(
   createClient({
     url: wsEndpoint.toString(),
-    connectionParams: () => ({
+    connectionParams: () => headers,
-      headers,
-    }),
   })
 );
 

web/package-lock.json

@@ -83,12 +83,15 @@
         "@vueuse/core": "^10.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "kebab-case": "^2.0.1",
         "lucide-vue-next": "^0.468.0",
         "radix-vue": "^1.9.11",
         "shadcn-vue": "^0.11.3",
-        "tailwind-merge": "^2.5.5"
+        "tailwind-merge": "^2.5.5",
+        "vue-sonner": "^1.3.0"
       },
       "devDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
         "@storybook/addon-essentials": "^8.4.7",
         "@storybook/addon-interactions": "^8.4.7",
         "@storybook/addon-links": "^8.4.7",
@@ -99,6 +102,7 @@
         "@types/node": "^20.0.0",
         "@types/testing-library__vue": "^5.0.0",
         "@vitejs/plugin-vue": "^5.0.0",
+        "@vitejs/plugin-vue-jsx": "^4.1.1",
         "@vitest/coverage-v8": "^1.0.0",
         "@vitest/ui": "^1.0.0",
         "@vue/test-utils": "^2.4.0",
@@ -110,11 +114,13 @@
         "happy-dom": "^12.0.0",
         "postcss": "^8.4.49",
         "prettier": "3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.0.0",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.0.0",
         "vite": "^5.0.0",
         "vite-plugin-dts": "^3.0.0",
+        "vite-plugin-vue-devtools": "^7.7.1",
         "vitest": "^1.0.0",
         "vue": "^3.3.0",
         "vue-tsc": "^1.8.0"