feat: api offline restart button

components/UserProfile/DropdownConnectStatus.vue

@@ -2,26 +2,36 @@
 import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
-import { useServerStore } from '~/store/server';
+// import { useServerStore } from '~/store/server';
+import { useUnraidApiStore } from '~/store/unraidApi';
 
-const serverStore = useServerStore();
-const { cloud } = storeToRefs(serverStore);
+// const serverStore = useServerStore();
+// const { cloud } = storeToRefs(serverStore);
+const unraidApiStore = useUnraidApiStore();
+const { unraidApiStatus, unraidApiRestartAction } = storeToRefs(unraidApiStore);
 </script>
 
 <template>
   <li class="px-8px flex flex-col items-center">
-    <template v-if="!cloud">
+    <template v-if="unraidApiStatus === 'connecting' || unraidApiStatus === 'restarting'">
       <BrandLoading class="w-36px mx-auto" />
-      <span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
+      <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"
-      :title="!cloud.error ? 'Connect is connected to Unraid cloud services' : cloud.error"
     >
-      <CheckCircleIcon v-if="!cloud.error" class="text-green-500 w-16px h-16px" />
-      <ExclamationTriangleIcon v-else class="text-red-500 w-16px h-16px" />
-      <span>{{ !cloud.error ? 'Connected' : 'Not connected' }}</span>
+      <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>
     </span>
+    <div v-if="unraidApiRestartAction" class="w-full -mx-32px">
+      <UpcDropdownItem :item="unraidApiRestartAction" />
+    </div>
   </li>
 </template>

components/UserProfile/DropdownItem.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 import type { ServerStateDataAction } from '~/types/server';
@@ -19,7 +18,6 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
 <template>
   <component
     :is="item?.click ? 'button' : 'a'"
-    @click.stop="item?.click ? item?.click() : null"
     :href="item?.href ?? null"
     :title="item?.title ?? null"
     :target="item?.external ? '_blank' : null"
@@ -31,6 +29,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
       'group': showExternalIconOnHover,
       'rounded-md': rounded,
     }"
+    @click.stop="item?.click ? item?.click() : null"
   >
     <span class="leading-snug inline-flex flex-row items-center gap-x-8px">
       <component :is="item?.icon" class="flex-shrink-0 text-current w-16px h-16px" aria-hidden="true" />