refactor: reorder content in upc dropdown

_data/serverState.ts

@@ -29,7 +29,7 @@ const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
 // EBLACKLISTED1
 // EBLACKLISTED2
 // ENOCONN
-const state: string = 'ENOCONN';
+const state: string = 'BASIC';
 
 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
@@ -53,7 +53,7 @@ const serverState = {
   "name": "fuji",
   // "pluginInstalled": "dynamix.unraid.net.staging.plg",
   "pluginInstalled": true,
-  "registered": false,
+  "registered": true,
   "regGen": 0,
   // "regGuid": "0781-5583-8355-81071A2B0211",
   "site": "http://localhost:4321",

components/UserProfile/DropdownConnectStatus.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
+import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
 // import { storeToRefs } from 'pinia';
 // import { useServerStore } from '~/store/server';
 // const { stateData } = storeToRefs(useServerStore());
@@ -10,14 +10,19 @@ const apiLoading = ref(false);
 </script>
 
 <template>
-  <li class="mb-8px px-8px flex flex-col items-center">
+  <li class="px-8px flex flex-col items-center">
     <template v-if="apiLoading">
       <BrandLoading class="w-36px mx-auto" :height="21" />
       <span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
     </template>
-    <span v-else class="w-full flex flex-row justify-start items-center gap-x-8px">
-      <ExclamationTriangleIcon v-if="onlineStatus !== 'online'" class="text-unraid-red w-16px h-16px" />
-      <span v-else class="block w-12px h-12px bg-green-600 rounded-full"></span>
+    <span
+      v-else
+      class="w-full flex flex-row justify-start items-center gap-x-8px"
+      :title="onlineStatus !== 'online' ? 'Connect is not connected to Unraid cloud services' : 'Connect is connected to Unraid cloud services'"
+    >
+      <!-- <span class="block w-12px h-12px bg-green-600 rounded-full"></span> -->
+      <CheckCircleIcon v-if="onlineStatus === 'online'" class="text-green-500 w-16px h-16px" />
+      <ExclamationTriangleIcon v-else class="text-red-500 w-16px h-16px" />
       <span>{{ onlineStatus !== 'online' ? 'Disconnected' : 'Connected' }}</span>
     </span>
   </li>

components/UserProfile/DropdownContent.vue

@@ -82,6 +82,11 @@ const links = computed(():UserProfileLink[] => {
     </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" />
+
+      <li class="m-8px">
+        <UpcKeyline />
+      </li>
 
       <template v-if="keyActions">
         <li v-for="action in keyActions" :key="action.name">
@@ -89,12 +94,6 @@ const links = computed(():UserProfileLink[] => {
         </li>
       </template>
 
-      <li class="m-8px">
-        <UpcKeyline />
-      </li>
-
-      <UpcDropdownConnectStatus v-if="!stateData.error && registered && pluginInstalled" />
-
       <template v-if="links">
         <li v-for="(link, index) in links" :key="`link_${index}`">
           <UpcDropdownItem :item="link" />