feat: WIP error store progress with server data

components/Brand/Button.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { XCircleIcon } from '@heroicons/vue/24/solid';
-export interface Props {
+export interface ButtonProps {
   btnStyle?: 'fill' | 'outline' | 'underline';
   btnType?: 'button' | 'submit' | 'reset';
   download?: boolean;
@@ -9,7 +9,7 @@ export interface Props {
   icon?: typeof XCircleIcon;
   text?: string;
 }
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ButtonProps>(), {
   btnStyle: 'fill',
   btnType: 'button',
 });

components/UserProfile/CallbackFeedback.vue

@@ -120,7 +120,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
     <template #main>
       <div
         v-if="keyInstallStatus !== 'ready' || accountActionStatus !== 'ready'"
-        class="text-center relative w-full min-h-[15vh] flex flex-col justify-center gap-y-16px py-16px"
+        class="text-center relative w-full flex flex-col justify-center gap-y-16px py-24px sm:py-32px"
       >
         <UpcCallbackFeedbackStatus
           v-if="keyInstallStatus !== 'ready'"

components/UserProfile/DropdownContent.vue

@@ -81,8 +81,8 @@ const links = computed(():UserProfileLink[] => {
       </span>
     </header>
     <ul class="list-reset flex flex-col gap-y-4px p-0">
-      <UpcDropdownError v-if="stateData.error" />
-      <UpcDropdownConnectStatus v-else-if="!stateData.error && registered && pluginInstalled" class="mt-8px" />
+      <UpcDropdownError />
+      <UpcDropdownConnectStatus v-if="!stateData.error && registered && pluginInstalled" class="mt-8px" />
 
       <li class="m-8px">
         <UpcKeyline />

components/UserProfile/DropdownError.vue

@@ -1,37 +1,44 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { InformationCircleIcon } from '@heroicons/vue/24/solid';
-import { useAccountStore } from '~/store/account';
-import { useServerStore } from '~/store/server';
-import { CONNECT_FORUMS } from '~/helpers/urls';
-import type { UserProfileLink } from '~/types/userProfile';
+// import {
+//   ExclamationCircleIcon,
+//   ExclamationTriangleIcon,
+//   ShieldExclamationIcon,
+// } from '@heroicons/vue/24/solid';
 
-const accountStore = useAccountStore();
+import { useErrorsStore, type Error } from '~/store/errors';
+import { useServerStore } from '~/store/server';
+
+const errorsStore = useErrorsStore();
+const { errors } = storeToRefs(errorsStore);
 const { stateData } = storeToRefs(useServerStore());
-const links = ref<UserProfileLink[]>([
-  // {
-  //   click: () => accountStore.troubleshoot(),
-  //   external: true,
-  //   icon: InformationCircleIcon,
-  //   text: 'Placeholder Button',
-  // },
-  // {
-  //   external: true,
-  //   href: CONNECT_FORUMS,
-  //   icon: InformationCircleIcon,
-  //   text: 'Connect Support Forum',
-  // },
-]);
+
+const computedErrors = computed(() => {
+  if (stateData.value?.error) {
+    return [
+      {
+        heading: stateData.value.heading,
+        level: 'error',
+        message: stateData.value.message,
+      },
+    ];
+  };
+  return errors.value;
+});
 </script>
 
 <template>
-  <ul v-if="stateData.error" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-4px mb-4px py-12px px-16px rounded">
-    <h3 class="text-18px">{{ stateData.heading }}</h3>
-    <p class="text-14px">{{ stateData.message }}</p>
-    <template v-if="links">
-      <li v-for="(link, index) in links" :key="`link_${index}`" class="-mx-8px">
-        <UpcDropdownItem :item="link" class="text-white" />
-      </li>
-    </template>
+  <ul v-if="computedErrors" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-8px mb-4px py-12px px-16px rounded">
+    <li v-for="(error, index) in computedErrors" :key="index" class="flex flex-col gap-8px">
+      <h3 class="text-18px">
+        <span>{{ error.heading }}</span>
+      </h3>
+      <div v-html="error.message" class="text-14px"></div>
+      <nav v-if="error.actions">
+        <li v-for="(link, index) in error.actions" :key="`link_${index}`" class="-mx-8px">
+          <UpcDropdownItem :item="link" class="text-white" />
+        </li>
+      </nav>
+    </li>
   </ul>
 </template>

components/UserProfile/DropdownTrigger.vue

@@ -2,10 +2,12 @@
 import { storeToRefs } from 'pinia';
 import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 import { useDropdownStore } from '~/store/dropdown';
+import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
 const dropdownStore = useDropdownStore();
 const { dropdownVisible } = storeToRefs(dropdownStore);
+const { errors } = storeToRefs(useErrorsStore());
 const {
   pluginInstalled,
   pluginOutdated,
@@ -16,7 +18,7 @@ const {
 } = storeToRefs(useServerStore());
 
 const registeredAndPluginInstalled = computed(() => pluginInstalled.value && registered.value);
-const showErrorIcon = computed(() => stateData.value.error);
+const showErrorIcon = computed(() => errors.value.length || stateData.value.error);
 
 const text = computed((): string | undefined => {
   if ((stateData.value.error) && state.value !== 'EEXPIRED') return 'Fix Error';
@@ -27,11 +29,7 @@ const text = computed((): string | undefined => {
 const title = computed((): string => {
   if (state.value === 'ENOKEYFILE') return 'Get Started';
   if (state.value === 'EEXPIRED') return 'Trial Expired, see options below';
-  if (stateData.value.error) return 'Learn More';
-  // if (cloud.value && cloud.value.error) return 'Unraid API Error';
-  // if (myServersError.value && registeredAndPluginInstalled.value return 'Unraid API Error';
-  // if (errorTooManyDisks.value) return 'Too many devices';
-  // if (isLaunchpadOpen.value) return 'Close and continue to webGUI';
+  if (showErrorIcon.value) return 'Learn more about the error';
   return dropdownVisible.value ? 'Close Dropdown' : 'Open Dropdown';
 });
 </script>