refactor: dropdown and promo store

components/UserProfile/Dropdown.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 
+import { useDropdownStore } from '~/store/dropdown';
 import { usePromoStore } from '~/store/promo';
 import { useServerStore } from '~/store/server';
 
-const { visible } = storeToRefs(usePromoStore());
+const { dropdownVisible } = storeToRefs(useDropdownStore());
+const { promoVisible } = storeToRefs(usePromoStore());
 const { pluginInstalled, registered } = storeToRefs(useServerStore());
 
-const showLaunchpad = computed(() => {
-  return pluginInstalled.value && !registered.value;
-});
-
+const showDefaultContent = computed(() => !showLaunchpad.value && !promoVisible.value);
+const showLaunchpad = computed(() => pluginInstalled.value && !registered.value);
 /**
  * @todo use gsap to animate width between the three dropdown variants
  */
 </script>
 
 <template>
-  <UpcDropdownWrapper class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
-    <UpcDropdownContent v-if="!showLaunchpad && !visible" />
-    <UpcDropdownPromo v-else-if="visible" />
+  <UpcDropdownWrapper v-if="dropdownVisible" class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
+    <UpcDropdownContent v-if="showDefaultContent" />
+    <UpcDropdownPromo v-else-if="promoVisible" />
     <UpcDropdownLaunchpad v-else />
   </UpcDropdownWrapper>
 </template>

components/UserProfile/DropdownContent.vue

@@ -63,7 +63,7 @@ const links = computed(():UserProfileLink[] => {
     ...(!pluginInstalled.value
       ? [
         {
-          click: () => { promoStore.show() },
+          click: () => { promoStore.promoShow() },
           icon: InformationCircleIcon,
           text: 'Enhance your Unraid experience with Connect',
           title: 'Enhance your Unraid experience with Connect',

components/UserProfile/DropdownItem.vue

@@ -15,7 +15,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
 <template>
   <component
     :is="item?.click ? 'button' : 'a'"
-    @click="item?.click() ?? null"
+    @click.stop="item?.click() ?? null"
     :href="item?.href ?? null"
     :title="item?.title ?? null"
     :target="item?.external ? '_blank' : null"

components/UserProfile/DropdownPromo.vue

@@ -77,7 +77,7 @@ const installButtonClasses = 'text-white text-14px text-center w-full flex flex-
           :title="'Checkout the Connect Documentation'"
         >{{ 'Learn More' }}</a>
         <button
-          @click="promoStore.hide();"
+          @click="promoStore.promoHide();"
           class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
           :title="'Close Promo'"
         >

components/UserProfile/DropdownTrigger.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ChevronDownIcon, InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
+import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
+import { useDropdownStore } from '~/store/dropdown';
 import { useServerStore } from '~/store/server';
 
-export interface Props {
-  open?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  open: false,
-});
-
 defineEmits(['click']);
 
+const dropdownStore = useDropdownStore();
+const { dropdownVisible } = storeToRefs(dropdownStore);
 const {
   pluginInstalled,
   pluginOutdated,
@@ -40,14 +35,14 @@ const title = computed((): string => {
   // if (myServersError.value && registeredAndPluginInstalled.value return 'Unraid API Error';
   // if (errorTooManyDisks.value) return 'Too many devices';
   // if (isLaunchpadOpen.value) return 'Close and continue to webGUI';
-  return props.open ? 'Close Dropdown' : 'Open Dropdown';
+  return dropdownVisible.value ? 'Close Dropdown' : 'Open Dropdown';
 });
 </script>
 
 <template>
   <div class="relative flex items-center justify-end h-full">
     <button
-      @click="$emit('click')"
+      @click="dropdownStore.dropdownToggle()"
       class="group text-18px hover:text-alpha focus:text-alpha border border-transparent flex flex-row justify-end items-center h-full gap-x-8px outline-none focus:outline-none"
       :title="title"
     >
@@ -56,7 +51,7 @@ const title = computed((): string => {
 
       <span class="flex flex-row items-center gap-x-8px">
         <span class="leading-none">{{ text }}</span>
-        <UpcTriangleDown :open="open" />
+        <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
       </span>
 
       <BrandAvatar />