From 6c042cbe01211e1476d40f5cec42a353585fff92 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 18 Mar 2025 16:21:40 -0400
Subject: [PATCH] fix: stepper fixes (#1240)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Streamlined the activation steps display with improved conditional
rendering and enhanced interactive button styling.
- **New Features**
- Introduced a new welcome page featuring a dummy server switcher and
refreshed welcome modal.
- Expanded the activation interface with a new activation code section
for clearer navigation.
- **Chores**
  - Removed the welcome modal from the home page to simplify the layout.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Zack Spear <hi@zackspear.com>
---
 web/components/Activation/Modal.vue |  4 +-
 web/components/Activation/Steps.vue | 63 ++++++++++++++---------------
 web/pages/index.vue                 |  2 -
 web/pages/webComponents.vue         |  3 ++
 web/pages/welcome.vue               | 14 +++++++
 5 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 web/pages/welcome.vue

diff --git a/web/components/Activation/Modal.vue b/web/components/Activation/Modal.vue
index e998dd2a7..effc06c63 100644
--- a/web/components/Activation/Modal.vue
+++ b/web/components/Activation/Modal.vue
@@ -30,7 +30,7 @@ const description = computed<string>(() =>
 const docsButtons = computed<BrandButtonProps[]>(() => {
   return [
     {
-      btnStyle: 'underline',
+      variant: 'underline',
       external: true,
       href: 'https://docs.unraid.net/unraid-os/faq/licensing-faq/',
       iconRight: ArrowTopRightOnSquareIcon,
@@ -38,7 +38,7 @@ const docsButtons = computed<BrandButtonProps[]>(() => {
       text: props.t('More about Licensing'),
     },
     {
-      btnStyle: 'underline',
+      variant: 'underline',
       external: true,
       href: 'https://docs.unraid.net/account/',
       iconRight: ArrowTopRightOnSquareIcon,
diff --git a/web/components/Activation/Steps.vue b/web/components/Activation/Steps.vue
index 9a0a38dc3..1e9bf06b5 100644
--- a/web/components/Activation/Steps.vue
+++ b/web/components/Activation/Steps.vue
@@ -21,7 +21,7 @@ type StepState = 'inactive' | 'active' | 'completed';
 
 withDefaults(
   defineProps<{
-    activeStep: number;
+    activeStep?: number;
   }>(),
   {
     activeStep: 1,
@@ -75,44 +75,43 @@ const steps: readonly Step[] = [
 <template>
   <Stepper :default-value="activeStep" class="text-foreground flex w-full items-start gap-2 text-16px">
     <StepperItem
-      v-for="step in steps"
+      v-for="(step, index) in steps"
       :key="step.step"
       v-slot="{ state }: { state: StepState }"
-      class="relative flex w-full flex-col items-center justify-center"
+      class="relative flex w-full flex-col items-center justify-center data-[disabled]:opacity-100"
       :step="step.step"
       :disabled="true"
     >
-      <StepperSeparator
-        v-if="step.step !== steps[steps.length - 1].step"
-        class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-[1.5rem] &block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
-      />
+      <StepperTrigger>
+        <div class="flex items-center justify-center">
+          <Button
+            :variant="state === 'completed' ? 'primary' : state === 'active' ? 'primary' : 'outline'"
+            size="md"
+            :class="`z-10 rounded-full  ${
+              state !== 'inactive'
+                ? 'ring-2 ring-offset-2 ring-offset-background *:cursor-default ' +
+                  (state === 'completed' ? 'ring-success' : 'ring-primary')
+                : ''
+            }`"
+            :disabled="state === 'inactive'"
+          >
+            <component :is="step.icon[state]" class="size-4" />
+          </Button>
+        </div>
 
-      <StepperTrigger as-child>
-        <Button
-          :variant="state === 'completed' || state === 'active' ? 'primary' : 'outline'"
-          size="md"
-          :class="`z-10 rounded-full shrink-0 opacity-100 ${
-            state !== 'inactive'
-              ? 'ring-2 ring-primary ring-offset-2 ring-offset-background *:cursor-default'
-              : ''
-          }`"
-          :disabled="state === 'inactive'"
-        >
-          <component :is="step.icon[state]" class="size-4" />
-        </Button>
+        <div class="mt-2 flex flex-col items-center text-center">
+          <StepperTitle
+            :class="[state === 'active' && 'text-primary']"
+            class="text-2xs font-semibold transition"
+          >
+            {{ step.title }}
+          </StepperTitle>
+          <StepperDescription class="text-2xs font-normal">
+            {{ step.description }}
+          </StepperDescription>
+        </div>
       </StepperTrigger>
-
-      <div class="mt-2 flex flex-col items-center text-center">
-        <StepperTitle
-          :class="[state === 'active' && 'text-primary']"
-          class="text-2xs font-semibold transition"
-        >
-          {{ step.title }}
-        </StepperTitle>
-        <StepperDescription class="text-2xs font-normal">
-          {{ step.description }}
-        </StepperDescription>
-      </div>
+      <StepperSeparator v-if="index < steps.length - 1" class="w-[50px] bg-black h-[30px]" />
     </StepperItem>
   </Stepper>
 </template>
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 25481bdbf..0300ca4a7 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -146,8 +146,6 @@ const bannerImage = watch(theme, () => {
           <ModalsCe />
           <hr class="border-black dark:border-white" />
           <h3 class="text-lg font-semibold font-mono">WelcomeModalCe</h3>
-          <!-- <WelcomeModalCe :server="serverState ?? undefined" /> -->
-          Uncomment the WelcomeModalCe component to test it.
           <hr class="border-black dark:border-white" />
           <h3 class="text-lg font-semibold font-mono">Test Callback Builder</h3>
           <div class="flex flex-col justify-end gap-8px">
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index a03319fec..3ac54b4e0 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -57,6 +57,9 @@ onBeforeMount(() => {
       <hr class="border-black dark:border-white" />
       <h3 class="text-lg font-semibold font-mono">SSOSignInButtonCe</h3>
       <unraid-sso-button :ssoenabled="serverState.ssoEnabled" />
+      <hr class="border-black dark:border-white" />
+      <h3 class="text-lg font-semibold font-mono">ActivationCodeCe</h3>
+      <unraid-welcome-modal />
     </unraid-i18n-host>
     <Toaster rich-colors close-button />
   </client-only>
diff --git a/web/pages/welcome.vue b/web/pages/welcome.vue
new file mode 100644
index 000000000..003372a89
--- /dev/null
+++ b/web/pages/welcome.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useDummyServerStore } from '~/_data/serverState';
+
+import DummyServerSwitcher from '~/components/DummyServerSwitcher.vue';
+const serverStore = useDummyServerStore();
+const { serverState } = storeToRefs(serverStore);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-6">
+    <DummyServerSwitcher />
+    <WelcomeModalCe :server="serverState ?? undefined" />
+  </div>
+</template>