refactor: move username into dropdown

web/components/UserProfile/DropdownConnectStatus.vue

@@ -1,12 +1,15 @@
-<script setup lang="ts">
-import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
+ <script setup lang="ts">
+import { ExclamationTriangleIcon, CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
 import BrandLoading from '~/components/Brand/Loading.vue';
 import { useUnraidApiStore } from '~/store/unraidApi';
+import { useServerStore } from '~/store/server';
 
 const props = defineProps<{ t: any; }>();
 
+const { username } = storeToRefs(useServerStore());
+
 const unraidApiStore = useUnraidApiStore();
 const { unraidApiStatus, unraidApiRestartAction } = storeToRefs(unraidApiStore);
 
@@ -52,18 +55,13 @@ const status = computed((): StatusOutput | undefined => {
 </script>
 
 <template>
-  <li
-    v-if="status"
-    class="flex flex-row justify-start items-center gap-8px mt-8px px-8px"
-  >
-    <component
-      :is="status.icon"
-      :class="status.iconClasses"
-      aria-hidden="true"
-    />
-    <span :class="status?.textClasses">
-      {{ status.text }}
-    </span>
+  <li v-if="username" class="flex flex-row justify-start items-center gap-8px mt-8px px-8px">
+    <UserCircleIcon class="w-16px h-16px" aria-hidden="true" />
+    {{ username }}
+  </li>
+  <li v-if="status" class="flex flex-row justify-start items-center gap-8px mt-8px px-8px">
+    <component :is="status.icon" :class="status.iconClasses" aria-hidden="true" />
+    {{ status.text }}
   </li>
   <li v-if="unraidApiRestartAction" class="w-full">
     <UpcDropdownItem :item="unraidApiRestartAction" :t="t" />

web/components/UserProfile/DropdownContent.vue

@@ -78,7 +78,7 @@ const showKeyline = computed(() => showConnectStatus.value && (keyActions.value?
 <template>
   <div class="flex flex-col gap-y-8px min-w-300px max-w-350px">
     <header v-if="connectPluginInstalled" class="flex flex-row items-center justify-between mt-8px mx-8px">
-      <h2 class="text-18px leading-none flex flex-row gap-x-8px items-center justify-between">
+      <h2 class="text-18px leading-none flex flex-row gap-x-4px items-center justify-between">
         <BrandLogoConnect gradient-start="currentcolor" gradient-stop="currentcolor" class="text-beta w-[120px]" />
         <UpcBeta />
       </h2>

web/components/UserProfile/DropdownTrigger.vue

@@ -16,7 +16,6 @@ const {
   registered,
   state,
   stateData,
-  username,
 } = storeToRefs(useServerStore());
 
 const registeredAndconnectPluginInstalled = computed(() => connectPluginInstalled.value && registered.value);
@@ -24,7 +23,6 @@ const showErrorIcon = computed(() => errors.value.length || stateData.value.erro
 
 const text = computed((): string | undefined => {
   if ((stateData.value.error) && state.value !== 'EEXPIRED') { return props.t('Fix Error'); }
-  if (registeredAndconnectPluginInstalled.value) { return username.value; }
 });
 
 const title = computed((): string => {