From 6bcff77dc24a8c9ef8e31f6de77236a85c25fc1f Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 16 Aug 2023 13:39:56 -0700
Subject: [PATCH] refactor: move username into dropdown

---
 web/_data/serverState.ts                      |  4 +--
 .../UserProfile/DropdownConnectStatus.vue     | 26 +++++++++----------
 .../UserProfile/DropdownContent.vue           |  2 +-
 .../UserProfile/DropdownTrigger.vue           |  2 --
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index f9b1663fb..dd5a1442e 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -56,8 +56,8 @@ export const serverState: Server = {
   license: '',
   locale: 'en_US', // en_US, ja
   name: 'fuji',
-  // connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
-  connectPluginInstalled: '',
+  connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
+  // connectPluginInstalled: '',
   registered: true,
   regGen: 0,
   // "regGuid": "0781-5583-8355-81071A2B0211",
diff --git a/web/components/UserProfile/DropdownConnectStatus.vue b/web/components/UserProfile/DropdownConnectStatus.vue
index 1a1e0d361..b82b41e74 100644
--- a/web/components/UserProfile/DropdownConnectStatus.vue
+++ b/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" />
diff --git a/web/components/UserProfile/DropdownContent.vue b/web/components/UserProfile/DropdownContent.vue
index d5eaff3eb..66ec4d073 100644
--- a/web/components/UserProfile/DropdownContent.vue
+++ b/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>
diff --git a/web/components/UserProfile/DropdownTrigger.vue b/web/components/UserProfile/DropdownTrigger.vue
index 8d580a32a..4ee545fb1 100644
--- a/web/components/UserProfile/DropdownTrigger.vue
+++ b/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 => {