From a87d83de0481d482349fc21d9720e51cfc286e6c Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 2 Nov 2023 15:20:29 -0700
Subject: [PATCH] refactor(web): dropdown post connect install

---
 web/_data/serverState.ts                      | 14 ++++----
 web/components/UserProfile/Dropdown.vue       | 14 ++++----
 .../UserProfile/DropdownContent.vue           | 36 ++++++++++++++-----
 .../UserProfile/DropdownLaunchpad.vue         | 26 ++++----------
 4 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index 8beff26c1..e73f08182 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -20,7 +20,7 @@ const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 const twoDaysAgo = Date.now() - 2 * 24 * 60 * 60 * 1000; // 2 days ago
 // const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000; // 1 day ago
 const oneHourFromNow = Date.now() + 60 * 60 * 1000; // 1 hour from now
-const oneDayFromNow = Date.now() + 24 * 60 * 60 * 1000; // 1 day from now
+// const oneDayFromNow = Date.now() + 24 * 60 * 60 * 1000; // 1 day from now
 let expireTime = 0;
 let regExp: number | undefined;
 
@@ -65,14 +65,14 @@ switch (state) {
   case 'STARTER':
     regDev = 4;
     // regExp = oneHourFromNow;
-    regExp = oneDayFromNow;
-    // regExp = oneDayAgo;
+    // regExp = oneDayFromNow;
+    regExp = twoDaysAgo;
     // regExp = uptime;
     // regExp = 1696363920000; // nori.local's expiration
   // @ts-ignore
   case 'UNLEASHED':
     // regExp = oneHourFromNow;
-    regExp = oneDayFromNow;
+    // regExp = oneDayFromNow;
     // regExp = oneDayAgo;
     // regExp = uptime;
     // regExp = 1696363920000; // nori.local's expiration
@@ -83,8 +83,8 @@ switch (state) {
     break;
 }
 
-// const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
-const connectPluginInstalled = '';
+const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
+// const connectPluginInstalled = '';
 
 export const serverState: Server = {
   apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
@@ -111,7 +111,7 @@ export const serverState: Server = {
   name: 'dev-static',
   osVersion: '6.12.4',
   // registered: connectPluginInstalled ? true : false,
-  registered: !connectPluginInstalled,
+  registered: false,
   regGen: 0,
   regTm: twoDaysAgo,
   regTo: 'Zack Spear',
diff --git a/web/components/UserProfile/Dropdown.vue b/web/components/UserProfile/Dropdown.vue
index cf163c8c8..2c715d6b8 100644
--- a/web/components/UserProfile/Dropdown.vue
+++ b/web/components/UserProfile/Dropdown.vue
@@ -3,18 +3,16 @@ import { TransitionRoot } from '@headlessui/vue';
 import { storeToRefs } from 'pinia';
 
 import { useDropdownStore } from '~/store/dropdown';
-import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
 defineProps<{ t: any; }>();
 
 const dropdownStore = useDropdownStore();
-const { dropdownVisible } = storeToRefs(dropdownStore);
-const { errors } = storeToRefs(useErrorsStore());
-const { connectPluginInstalled, registered, state, stateDataError } = storeToRefs(useServerStore());
 
-const showDefaultContent = computed(() => !showLaunchpad.value);
-const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || ((connectPluginInstalled.value && !registered.value) && !errors.value.length && !stateDataError.value));
+const { dropdownVisible } = storeToRefs(dropdownStore);
+const { state } = storeToRefs(useServerStore());
+
+const showLaunchpad = computed(() => state.value === 'ENOKEYFILE');
 </script>
 
 <template>
@@ -29,8 +27,8 @@ const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || ((connectPl
     leave-to="opacity-0 translate-y-[16px]"
   >
     <UpcDropdownWrapper class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
-      <UpcDropdownContent v-if="showDefaultContent" :t="t" />
-      <UpcDropdownLaunchpad v-else-if="showLaunchpad" :t="t" />
+      <UpcDropdownLaunchpad v-if="showLaunchpad" :t="t" />
+      <UpcDropdownContent v-else :t="t" />
     </UpcDropdownWrapper>
   </TransitionRoot>
 </template>
diff --git a/web/components/UserProfile/DropdownContent.vue b/web/components/UserProfile/DropdownContent.vue
index 399cd6c36..adefc7835 100644
--- a/web/components/UserProfile/DropdownContent.vue
+++ b/web/components/UserProfile/DropdownContent.vue
@@ -29,6 +29,7 @@ const {
   registered,
   regUpdatesExpired,
   stateData,
+  stateDataError,
 } = storeToRefs(useServerStore());
 const { available: osUpdateAvailable } = storeToRefs(useUpdateOsStore());
 
@@ -80,27 +81,42 @@ const links = computed(():UserProfileLink[] => {
         ]
       : []
     ),
-    ...(!registered.value && connectPluginInstalled.value
-      ? [
-          ...(signInAction.value),
-        ]
-      : []
-    ),
   ];
 });
 
 const showErrors = computed(() => errors.value.length);
 const showConnectStatus = computed(() => !showErrors.value && !stateData.value.error && registered.value && connectPluginInstalled.value);
-const showKeyline = computed(() => showConnectStatus.value && (keyActions.value?.length || links.value.length));
+const showKeyline = computed(() =>
+  (showConnectStatus.value && (keyActions.value?.length || links.value.length)) ||
+  unraidConnectWelcome.value
+);
+
+const unraidConnectWelcome = computed(() => {
+  if (connectPluginInstalled.value && !registered.value && !errors.value.length && !stateDataError.value) {
+    return {
+      heading: props.t('Thank you for installing Connect!'),
+      message: props.t('Sign In to your Unraid.net account to get started'),
+    };
+  }
+  return undefined;
+});
 </script>
 
 <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">
+    <header v-if="connectPluginInstalled" class="flex flex-col items-start justify-between mt-8px mx-8px">
       <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>
+      <template v-if="unraidConnectWelcome">
+        <h3 class="text-16px font-semibold mt-2">
+          {{ unraidConnectWelcome.heading }}
+        </h3>
+        <p class="text-14px">
+          {{ unraidConnectWelcome.message }}
+        </p>
+      </template>
     </header>
     <ul class="list-reset flex flex-col gap-y-4px p-0">
       <UpcDropdownConnectStatus v-if="showConnectStatus" :t="t" />
@@ -110,6 +126,10 @@ const showKeyline = computed(() => showConnectStatus.value && (keyActions.value?
         <UpcKeyline />
       </li>
 
+      <li v-if="!registered && connectPluginInstalled">
+        <UpcDropdownItem :item="signInAction[0]" :t="t" />
+      </li>
+
       <template v-if="filteredKeyActions">
         <li v-for="action in filteredKeyActions" :key="action.name">
           <UpcDropdownItem :item="action" :t="t" />
diff --git a/web/components/UserProfile/DropdownLaunchpad.vue b/web/components/UserProfile/DropdownLaunchpad.vue
index 9b9bed48c..826ae7ac3 100644
--- a/web/components/UserProfile/DropdownLaunchpad.vue
+++ b/web/components/UserProfile/DropdownLaunchpad.vue
@@ -8,33 +8,19 @@ import '~/assets/main.css';
 
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 
-const props = defineProps<{ t: any; }>();
+defineProps<{ t: any; }>();
 
-const { expireTime, connectPluginInstalled, registered, state, stateData } = storeToRefs(useServerStore());
+const { expireTime, connectPluginInstalled, state, stateData } = storeToRefs(useServerStore());
 const { unraidApiStatus, unraidApiRestartAction } = storeToRefs(useUnraidApiStore());
 
-const showConnectCopy = computed(() => (connectPluginInstalled.value && !registered.value && !stateData.value?.error));
-
-const heading = computed(() => {
-  if (showConnectCopy.value) { return props.t('Thank you for installing Connect!'); }
-  return props.t(stateData.value.heading);
-});
-
-const subheading = computed(() => {
-  if (showConnectCopy.value) { return props.t('Sign In to your Unraid.net account to get started'); }
-  return props.t(stateData.value.message);
-});
-
-const showExpireTime = computed(() => {
-  return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value > 0;
-});
+const showExpireTime = computed(() => (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value > 0);
 </script>
 
 <template>
   <div class="flex flex-col gap-y-24px w-full min-w-300px md:min-w-[500px] max-w-xl p-16px">
-    <header :class="{ 'text-center': showConnectCopy }">
-      <h2 class="text-24px text-center font-semibold" v-html="heading" />
-      <div class="flex flex-col gap-y-8px" v-html="subheading" />
+    <header>
+      <h2 class="text-24px text-center font-semibold" v-html="t(stateData.heading)" />
+      <div class="flex flex-col gap-y-8px" v-html="t(stateData.message)" />
       <UpcUptimeExpire
         v-if="showExpireTime"
         class="text-center opacity-75 mt-12px"