refactor(upc): dropdown progress

components/UserProfile.ce.vue

@@ -24,7 +24,7 @@ const toggleDropdown = useToggle(dropdownOpen);
 onClickOutside(dropdown, (_event) => dropdownOpen.value = false);
 
 const serverStore = useServerStore();
-const { name, description, guid, lanIp, uptime, expireTime, state } = storeToRefs(serverStore);
+const { name, description, lanIp, uptime, expireTime, state } = storeToRefs(serverStore);
 
 const uptimeOrExpiredTime = computed(() => {
   return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value && expireTime.value > 0
@@ -72,10 +72,10 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div id="UserProfile" class="UserProfile text-alpha relative z-20 flex flex-col h-full pl-80px rounded">
-    <div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end">
+  <div id="UserProfile" class="text-alpha relative z-20 flex flex-col h-full pl-80px rounded">
+    <div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end gap-x-12px">
       <upc-uptime-expire :time="uptimeOrExpiredTime" :state="state" />
-      <span class="px-12px">&bull;</span>
+      <span>&bull;</span>
       <upc-server-state />
     </div>
 
@@ -85,10 +85,13 @@ onBeforeMount(() => {
           <span>{{ description }}</span>
           <span class="text-grey-mid px-8px">&bull;</span>
         </template>
-        <button @click="copyLanIp()" :title="`LAN IP ${lanIp}`">{{ name }}</button>
-        <span v-if="copied" class="text-12px absolute right-0 bg-gradient-to-r from-red to-orange text-center block w-100px rounded">{{ 'LAN IP Copied' }}</span>
-        <span v-if="showCopyNotSupported" class="text-12px font-semibold px-4px absolute right-0 bg-gradient-to-r from-red to-orange text-center block rounded">
-          LAN IP: <span class="select-all">{{ lanIp }}</span>
+        <button @click="copyLanIp()" :title="`Click to Copy LAN IP ${lanIp}`">{{ name }}</button>
+        <span
+          v-show="copied || showCopyNotSupported"
+          class="text-white text-12px leading-none py-4px px-8px absolute right-0 bg-gradient-to-r from-red to-orange text-center block rounded"
+        >
+          <template v-if="copied">{{ 'LAN IP Copied' }}</template>
+          <template v-else>LAN IP: <span class="select-all">{{ lanIp }}</span></template>
         </span>
       </h1>
 

components/UserProfile/Dropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, CogIcon } from '@heroicons/vue/24/solid';
+import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, CogIcon, InformationCircleIcon, UserIcon } from '@heroicons/vue/24/solid';
 
 import { ACCOUNT, CONNECT_DASHBOARD, PLUGIN_SETTINGS } from '~/helpers/urls';
 import { useServerStore } from '~/store/server';
@@ -11,7 +11,7 @@ const myServersEnv = ref<string>('Staging');
 const devEnv = ref<string>('development');
 
 const serverStore = useServerStore();
-const { registered, stateData } = storeToRefs(serverStore);
+const { pluginInstalled, registered, stateData } = storeToRefs(serverStore);
 
 // Intended to hide sign in and sign out from actions v-for in UPC dropdown so we can display them separately
 const stateDataKeyActions = computed((): ServerStateDataAction[] | undefined => {
@@ -24,34 +24,60 @@ console.log('[registered]', registered.value);
 
 const links = computed(():UserProfileLink[] => {
   return [
-    {
-      emphasize: true,
-      external: true,
-      href: CONNECT_DASHBOARD,
-      icon: ArrowTopRightOnSquareIcon,
-      text: 'Go to Connect',
-      title: 'Opens Connect in new tab',
-    },
-    {
-      external: true,
-      href: ACCOUNT,
-      icon: ArrowTopRightOnSquareIcon,
-      text: 'Manage Unraid.net Account',
-      title: 'Manage Unraid.net Account in new tab',
-    },
-    {
-      href: PLUGIN_SETTINGS,
-      icon: CogIcon,
-      text: 'Settings',
-      title: 'Go to Connect plugin settings',
-    },
-    ...(registered.value
-      ? [{
-        click: () => { console.debug('signOut') },
-        icon: ArrowRightOnRectangleIcon,
-        text: 'Sign Out',
-        title: 'Sign Out to Unregister your server with Connect',
-      }]
+    ...(registered.value && pluginInstalled.value
+      ? [
+        {
+          emphasize: true,
+          external: true,
+          href: CONNECT_DASHBOARD,
+          icon: ArrowTopRightOnSquareIcon,
+          text: 'Go to Connect',
+          title: 'Opens Connect in new tab',
+        },
+        {
+          external: true,
+          href: ACCOUNT,
+          icon: ArrowTopRightOnSquareIcon,
+          text: 'Manage Unraid.net Account',
+          title: 'Manage Unraid.net Account in new tab',
+        },
+        {
+          href: PLUGIN_SETTINGS,
+          icon: CogIcon,
+          text: 'Settings',
+          title: 'Go to Connect plugin settings',
+        },
+        {
+          click: () => { console.debug('signOut') },
+          external: true,
+          icon: ArrowRightOnRectangleIcon,
+          text: 'Sign Out',
+          title: 'Sign Out to Unregister your server with Connect',
+        },
+      ]
+      : []
+    ),
+    ...(!registered.value && pluginInstalled.value
+      ? [
+        {
+          click: () => { console.debug('signIn') },
+          external: true,
+          icon: UserIcon,
+          text: 'Sign In with Unraid.net Account',
+          title: 'Sign In with Unraid.net Account',
+        },
+      ]
+      : []
+    ),
+    ...(!pluginInstalled.value
+      ? [
+        {
+          click: () => { console.debug('promo') },
+          icon: InformationCircleIcon,
+          text: 'Enhance your Unraid experience with Connect',
+          title: 'Enhance your Unraid experience with Connect',
+        },
+      ]
       : []
     ),
   ];

components/UserProfile/DropdownItem.vue

@@ -9,13 +9,13 @@ export interface Props {
 
 const props = defineProps<Props>();
 
-const showExternalIconOnHover = computed(() => props.item?.click || (props.item?.external && props.item.icon !== ArrowTopRightOnSquareIcon));
+const showExternalIconOnHover = computed(() => props.item?.external && props.item.icon !== ArrowTopRightOnSquareIcon);
 </script>
 
 <template>
   <component
     :is="item?.click ? 'button' : 'a'"
-    @click="item?.click ?? null"
+    @click="item?.click() ?? null"
     :href="item?.href ?? null"
     :title="item?.title ?? null"
     :target="item?.external ? '_blank' : null"
@@ -26,13 +26,13 @@ const showExternalIconOnHover = computed(() => props.item?.click || (props.item?
       'group': showExternalIconOnHover,
     }"
   >
-    <span class="inline-flex flex-row items-center gap-x-8px">
+    <span class="leading-snug inline-flex flex-row items-center gap-x-8px">
       <component :is="item?.icon" class="flex-shrink-0 fill-current w-16px h-16px" aria-hidden="true" />
       {{ item?.text }}
     </span>
     <ArrowTopRightOnSquareIcon
       v-if="showExternalIconOnHover"
-      class="text-white fill-current w-16px h-16px ml-8px opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out"
+      class="text-white fill-current flex-shrink-0 w-16px h-16px ml-8px opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out"
     />
   </component>
 </template>

store/server.ts

@@ -65,18 +65,21 @@ export const useServerStore = defineStore('server', () => {
     actions: [
       {
         click: () => { console.debug('signIn') },
+        external: true,
         icon: GlobeAltIcon,
         name: 'signIn',
         text: 'Sign In with Unraid.net Account',
       },
       {
         click: () => { console.debug('purchase') },
+        external: true,
         icon: KeyIcon,
         name: 'purchase',
         text: 'Purchase Key',
       },
       // {
       //   click: () => { console.debug('signOut') },
+      //   external: true,
       //   icon: ArrowRightOnRectangleIcon,
       //   name: 'signOut',
       //   text: 'signOut',