fix: include nuxt ui configuration files in web-components-plugins

Author: mdatelle

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/DetailTest.page

@@ -3,4 +3,4 @@ Title="Detail Layout"
 Icon="icon-u-globe"
 Tag="globe"
 ---
-<unraid-detail-test></unraid-detail-test>
+<unraid-detail-test />

web/components/Wrapper/web-component-plugins.ts

@@ -5,6 +5,9 @@ import { DefaultApolloClient } from '@vue/apollo-composable';
 // Import Tailwind CSS for web components shadow DOM injection
 import tailwindStyles from '~/assets/main.css?inline';
 
+// Import UI configurations from .nuxt generated files
+import * as uiConfig from '~/.nuxt/ui';
+
 import en_US from '~/locales/en_US.json';
 import { createHtmlEntityDecoder } from '~/helpers/i18n-utils';
 import { globalPinia } from '~/store/globalPinia';
@@ -23,7 +26,7 @@ export default function (Vue: App) {
     if (windowLocaleData) {
       try {
         parsedMessages = JSON.parse(decodeURIComponent(windowLocaleData));
-        parsedLocale = Object.keys(parsedMessages)[0];
+        parsedLocale = Object.keys(parsedMessages)[0] || '';
         nonDefaultLocale = parsedLocale !== defaultLocale;
       } catch (error) {
         console.error('[WebComponentPlugins] error parsing messages', error);
@@ -50,6 +53,10 @@ export default function (Vue: App) {
   // Provide Apollo client for all web components
   Vue.provide(DefaultApolloClient, client);
 
+  // Provide UI config for components
+  Vue.provide('ui.config', uiConfig);
+
+
   // Inject Tailwind CSS into the shadow DOM
   Vue.mixin({
     mounted() {

web/layouts/unraid-next.vue

@@ -10,16 +10,19 @@ const themeStore = useThemeStore();
 // Initialize theme on mount
 onMounted(() => {
   // Set a default theme similar to ColorSwitcherCe
-  const defaultTheme = {
-    banner: false,
-    bannerGradient: false,
-    descriptionShow: true,
-    textColor: defaultColors.white['--header-text-primary']!,
-    metaColor: defaultColors.white['--header-text-secondary']!,
-    bgColor: defaultColors.white['--header-background-color']!,
-    name: 'white',
-  };
-  themeStore.setTheme(defaultTheme);
+  const whiteTheme = defaultColors.white;
+  if (whiteTheme) {
+    const defaultTheme = {
+      banner: false,
+      bannerGradient: false,
+      descriptionShow: true,
+      textColor: whiteTheme['--header-text-primary'],
+      metaColor: whiteTheme['--header-text-secondary'],
+      bgColor: whiteTheme['--header-background-color'],
+      name: 'white',
+    };
+    themeStore.setTheme(defaultTheme);
+  }
 });
 </script>