refactor: connect status component

components/UserProfile/DropdownConnectStatus.vue

@@ -1,37 +1,69 @@
 <script setup lang="ts">
 import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
+import BrandLoading from '~/components/Brand/Loading.vue';
 
-// import { useServerStore } from '~/store/server';
 import { useUnraidApiStore } from '~/store/unraidApi';
 
-// const serverStore = useServerStore();
-// const { cloud } = storeToRefs(serverStore);
 const unraidApiStore = useUnraidApiStore();
 const { unraidApiStatus, unraidApiRestartAction } = storeToRefs(unraidApiStore);
+
+interface StatusOutput {
+  icon: typeof BrandLoading | typeof ExclamationTriangleIcon | typeof CheckCircleIcon;
+  iconClasses?: string;
+  text: string;
+  textClasses?: string;
+}
+const status = computed((): StatusOutput | undefined => {
+  if (unraidApiStatus.value === 'connecting') {
+    return {
+      icon: BrandLoading,
+      iconClasses: 'w-16px',
+      text: 'Loading…',
+      textClasses: 'italic',
+    };
+  }
+  if (unraidApiStatus.value === 'restarting') {
+    return {
+      icon: BrandLoading,
+      iconClasses: 'w-16px',
+      text: 'Restarting unraid-api…',
+      textClasses: 'italic',
+    };
+  }
+  if (unraidApiStatus.value === 'offline') {
+    return {
+      icon: ExclamationTriangleIcon,
+      iconClasses: 'text-red-500 w-16px h-16px',
+      text: 'unraid-api is offline',
+    };
+  }
+  if (unraidApiStatus.value === 'online') {
+    return {
+      icon: CheckCircleIcon,
+      iconClasses: 'text-red-500 w-16px h-16px',
+      text: 'Connected',
+    };
+  }
+  return undefined;
+});
 </script>
 
 <template>
-  <li class="px-8px flex flex-col items-center">
-    <template v-if="unraidApiStatus === 'connecting' || unraidApiStatus === 'restarting'">
-      <BrandLoading class="w-36px mx-auto" />
-      <span class="text-12px italic opacity-80">{{ unraidApiStatus === 'connecting' ? 'Loading Connect…' : 'Restarting unraid-api…' }}</span>
-    </template>
-    <span
-      v-else
-      class="w-full flex flex-row justify-start items-center gap-x-8px"
-    >
-      <template v-if="unraidApiStatus === 'offline'">
-        <ExclamationTriangleIcon class="text-red-500 w-16px h-16px" />
-        {{ 'Not connected' }}
-      </template>
-      <template v-if="unraidApiStatus === 'online'">
-        <CheckCircleIcon class="text-green-500 w-16px h-16px" />
-        {{ 'Connected' }}
-      </template>
+  <li
+    v-if="status"
+    class="flex flex-row justify-start items-center gap-8px px-8px"
+  >
+    <component
+      :is="status.icon"
+      :class="status.iconClasses"
+      aria-hidden="true"
+    />
+    <span :class="status?.textClasses">
+      {{ status.text }}
     </span>
-    <div v-if="unraidApiRestartAction" class="w-full -mx-32px">
-      <UpcDropdownItem :item="unraidApiRestartAction" />
-    </div>
+  </li>
+  <li v-if="unraidApiRestartAction" class="w-full">
+    <UpcDropdownItem :item="unraidApiRestartAction" />
   </li>
 </template>