feat: upgrade nuxt-custom-elements (#1461)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added new modal dialogs and UI components, including activation steps,
OS update feedback, and expanded notification management.
* Introduced a plugin to configure internationalization, state
management, and Apollo client support in web components.
* Added a new Log Viewer page with a streamlined interface for viewing
logs.

* **Improvements**
* Centralized Pinia state management by consolidating all stores to use
a shared global Pinia instance.
* Simplified component templates by removing redundant
internationalization host wrappers.
* Enhanced ESLint configuration with stricter rules and global variable
declarations.
* Refined custom element build process to prevent jQuery conflicts and
optimize minification.
* Updated component imports and templates for consistent structure and
maintainability.
* Streamlined log viewer dropdowns using simplified select components
with improved formatting.
* Improved notification sidebar with filtering by importance and modular
components.
* Replaced legacy notification popups with new UI components and added
automatic root session creation for localhost requests.
* Updated OS version display and user profile UI with refined styling
and component usage.

* **Bug Fixes**
* Fixed component tag capitalization and improved type annotations
across components.

* **Chores**
* Updated development dependencies including ESLint plugins and build
tools.
* Removed deprecated log viewer patch class and cleaned up related test
fixtures.
  * Removed unused imports and simplified Apollo client setup.
* Cleaned up test mocks and removed obsolete i18n host component tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210730229632804

---------

Co-authored-by: Pujit Mehrotra <pujit@lime-technology.com>
Co-authored-by: Zack Spear <zackspear@users.noreply.github.com>

web/store/account.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watchEffect } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 import { useMutation } from '@vue/apollo-composable';
 import { logErrorMessages } from '@vue/apollo-util';
 
@@ -15,11 +15,11 @@ import { useUnraidApiStore } from '~/store/unraidApi';
 import { CONNECT_SIGN_IN, CONNECT_SIGN_OUT } from './account.fragment';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export interface ConnectSignInMutationPayload {
   apiKey: string;

web/store/apiKey.ts

@@ -1,9 +1,9 @@
 import { ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import type { ApiKeyFragment, ApiKeyWithKeyFragment } from '~/composables/gql/graphql';
 
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useApiKeyStore = defineStore('apiKey', () => {
   const modalVisible = ref(false);

web/store/callbackActions.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watch, watchEffect } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import { useCallback } from '@unraid/shared-callbacks';
 
@@ -19,9 +19,9 @@ import { useServerStore } from '~/store/server';
 import { useUpdateOsStore } from '~/store/updateOs';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
 
-type CallbackStatus = 'closing' | 'error' | 'loading' | 'ready' | 'success';
+import '~/store/globalPinia';
 
-setActivePinia(createPinia());
+type CallbackStatus = 'closing' | 'error' | 'loading' | 'ready' | 'success';
 
 export const useCallbackActionsStore = defineStore('callbackActions', () => {
   const { send, watcher: providedWatcher } = useCallback({

web/store/dropdown.ts

@@ -1,12 +1,13 @@
 import { ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 import { useToggle } from '@vueuse/core';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useDropdownStore = defineStore('dropdown', () => {
   const dropdownVisible = ref<boolean>(false);

web/store/errors.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import { OBJ_TO_STR } from '~/helpers/functions';
 
@@ -7,10 +7,11 @@ import type { BrandButtonProps } from '@unraid/ui';
 import type { Server } from '~/types/server';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export type ErrorType =
   | 'account'

web/store/globalPinia.ts

@@ -0,0 +1,7 @@
+import { createPinia, setActivePinia } from 'pinia';
+
+// Create a single shared Pinia instance for all web components
+export const globalPinia = createPinia();
+
+// Set it as the active pinia instance
+setActivePinia(globalPinia); 

web/store/installKey.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import type { ExternalKeyActions } from '@unraid/shared-callbacks';
 
@@ -7,10 +7,11 @@ import { WebguiInstallKey } from '~/composables/services/webgui';
 import { useErrorsStore } from '~/store/errors';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useInstallKeyStore = defineStore('installKey', () => {
   const errorsStore = useErrorsStore();

web/store/modal.ts

@@ -1,11 +1,12 @@
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 import { useToggle } from '@vueuse/core';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useModalStore = defineStore('modal', () => {
   const [modalVisible, modalToggle] = useToggle(true);

web/store/notifications.ts

@@ -1,9 +1,9 @@
 import { computed, ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import type { NotificationFragmentFragment } from '~/composables/gql/graphql';
 
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useNotificationsStore = defineStore('notifications', () => {
   const notifications = ref<NotificationFragmentFragment[]>([]);

web/store/purchase.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { createPinia, defineStore, setActivePinia, storeToRefs } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 
 import { PURCHASE_CALLBACK } from '~/helpers/urls';
 
@@ -8,10 +8,11 @@ import { useCallbackActionsStore } from '~/store/callbackActions';
 import { useServerStore } from '~/store/server';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const usePurchaseStore = defineStore('purchase', () => {
   const callbackStore = useCallbackActionsStore();

web/store/replaceRenew.ts

@@ -5,7 +5,7 @@
  * Cron to run hourly, check on how many days are left until regExp…within X days then allow request to be done
  */
 import { computed, h, ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import {
   CheckCircleIcon,
@@ -23,10 +23,11 @@ import { validateGuid } from '~/composables/services/keyServer';
 import { useServerStore } from '~/store/server';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export interface BadgePropsExtended extends BadgeProps {
   text?: string;

web/store/server.ts

@@ -2,7 +2,7 @@
  * @todo Check OS and Connect Plugin versions against latest via API every session
  */
 import { computed, ref, toRefs, watch, watchEffect } from 'vue';
-import { createPinia, defineStore, setActivePinia, storeToRefs } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import { useLazyQuery } from '@vue/apollo-composable';
 
 import {
@@ -53,10 +53,11 @@ import { useUnraidApiStore } from '~/store/unraidApi';
 import { CLOUD_STATE_QUERY, SERVER_CLOUD_FRAGMENT, SERVER_STATE_QUERY } from './server.fragment';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useServerStore = defineStore('server', () => {
   const accountStore = useAccountStore();

web/store/theme.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watch } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 import { useLazyQuery } from '@vue/apollo-composable';
 
 import { defaultColors } from '~/themes/default';
@@ -10,10 +10,11 @@ import type { Theme, ThemeVariables } from '~/themes/types';
 import { graphql } from '~/composables/gql/gql';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 // used to swap the UPC text color when using the azure or gray theme
 export const DARK_THEMES = ['black', 'gray'] as const;

web/store/trial.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watch } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import type { ExternalPayload, TrialExtend, TrialStart } from '@unraid/shared-callbacks';
 import type { StartTrialResponse } from '~/composables/services/keyServer';
@@ -11,10 +11,11 @@ import { useDropdownStore } from '~/store/dropdown';
 import { useServerStore } from '~/store/server';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useTrialStore = defineStore('trial', () => {
   const callbackActionsStore = useCallbackActionsStore();

web/store/unraidApi.ts

@@ -1,6 +1,6 @@
 import { computed, ref, watch } from 'vue';
 // import { logErrorMessages } from '@vue/apollo-util';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import { ArrowPathIcon } from '@heroicons/vue/24/solid';
 import { client } from '~/helpers/create-apollo-client';
@@ -13,10 +13,11 @@ import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export const useUnraidApiStore = defineStore('unraidApi', () => {
   const errorsStore = useErrorsStore();

web/store/updateOs.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import dayjs, { extend } from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -13,10 +13,11 @@ import prerelease from 'semver/functions/prerelease';
 import { useCallbackActionsStore } from '~/store/callbackActions';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 // dayjs plugins
 extend(customParseFormat);

web/store/updateOsActions.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watchEffect } from 'vue';
-import { createPinia, defineStore, setActivePinia } from 'pinia';
+import { defineStore } from 'pinia';
 
 import { ArrowPathIcon, BellAlertIcon } from '@heroicons/vue/24/solid';
 import { WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
@@ -16,10 +16,11 @@ import { useServerStore } from '~/store/server';
 import { useUpdateOsStore } from '~/store/updateOs';
 
 /**
+ * Uses the shared global Pinia instance from ~/store/globalPinia.ts
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
-setActivePinia(createPinia());
+import '~/store/globalPinia';
 
 export interface Release {
   version: string; // "6.12.4"