From 67ae4dab05813e84f0c978e41adf3f74ad4b1f13 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 1 Jun 2023 20:41:50 -0700
Subject: [PATCH] feat: open in upc dropdown

---
 _data/serverState.ts                     |  2 +-
 components/UserProfile.ce.vue            |  8 +++++++-
 components/UserProfile/Dropdown.vue      | 11 +++++++++--
 components/UserProfile/DropdownPromo.vue |  8 ++++++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/_data/serverState.ts b/_data/serverState.ts
index 8297bd4ec..8e8e324b6 100644
--- a/_data/serverState.ts
+++ b/_data/serverState.ts
@@ -46,7 +46,7 @@ const serverState = {
   expireTime,
   lanIp: '192.168.0.1',
   locale: 'en',
-  pluginInstalled: true,
+  pluginInstalled: false,
   registered: true,
   site: 'http://localhost:4321',
   state,
diff --git a/components/UserProfile.ce.vue b/components/UserProfile.ce.vue
index 8658cc438..bf504432b 100644
--- a/components/UserProfile.ce.vue
+++ b/components/UserProfile.ce.vue
@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { useClipboard, useToggle, onClickOutside } from '@vueuse/core';
 
+import { usePromoStore } from '~/store/promo';
 import { useServerStore } from '~/store/server';
 import type { Server } from '~/types/server';
 import 'tailwindcss/tailwind.css';
@@ -18,10 +19,15 @@ const props = withDefaults(defineProps<Props>(), {
 /**
  * Dropdown handling
  */
+const promoStore = usePromoStore();
+const { visible } = storeToRefs(promoStore);
 const dropdown = ref(null);
 const dropdownOpen = ref(false);
 const toggleDropdown = useToggle(dropdownOpen);
-onClickOutside(dropdown, (_event) => dropdownOpen.value = false);
+onClickOutside(dropdown, (_event) => {
+  dropdownOpen.value = false;
+  if (visible.value) promoStore.hide();
+});
 
 const serverStore = useServerStore();
 const { name, description, lanIp } = storeToRefs(serverStore);
diff --git a/components/UserProfile/Dropdown.vue b/components/UserProfile/Dropdown.vue
index 01eebc583..325df129e 100644
--- a/components/UserProfile/Dropdown.vue
+++ b/components/UserProfile/Dropdown.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 
+import { usePromoStore } from '~/store/promo';
 import { useServerStore } from '~/store/server';
 
+const { visible } = storeToRefs(usePromoStore());
 const { pluginInstalled, registered } = storeToRefs(useServerStore());
 
 const showLaunchpad = computed(() => {
   return 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">
-    <UpcDropdownContent v-if="!showLaunchpad" />
+  <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" />
     <UpcDropdownLaunchpad v-else />
   </UpcDropdownWrapper>
 </template>
diff --git a/components/UserProfile/DropdownPromo.vue b/components/UserProfile/DropdownPromo.vue
index 54e266119..20dc92d3d 100644
--- a/components/UserProfile/DropdownPromo.vue
+++ b/components/UserProfile/DropdownPromo.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
+import { usePromoStore } from '~/store/promo';
+
 import type { UserProfilePromoFeature } from '~/types/userProfile';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
+const promoStore = usePromoStore();
+
 const features = ref<UserProfilePromoFeature[]>([
   {
     title: 'Dynamic Remote Access',
@@ -47,7 +51,7 @@ const installButtonClasses = 'text-white text-14px text-center w-full flex flex-
 
 <template>
   <div class="text-center relative z-10 w-full max-w-800px p-24px sm:p-32px lg:px-40px">
-    <h2 class="text-24px font-semibold my-0">
+    <h2 class="text-24px font-semibold my-0 mx-auto max-w-[550px]">
       Enhance your Unraid experience with these <span class="inline-flex flex-row items-end gap-x-4px"><br class="hidden sm:block"/>Connect <span><UpcBeta /></span></span> features
     </h2>
 
@@ -73,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="console.debug('Close Promo')"
+          @click="promoStore.hide();"
           class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
           :title="'Close Promo'"
         >