From 32c1501e9cee375b7a057846014b66c5172d52d5 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Thu, 23 Apr 2026 15:35:59 +0000
Subject: [PATCH] feat: add progress bar to signup flow (#234)

Co-authored-by: deveshanim3 <deveshsingh6986@gmail.com>
Co-committed-by: deveshanim3 <deveshsingh6986@gmail.com>
---
 src/app/components/KeyDownload.svelte        |  8 +++-
 src/app/components/ProfileEditForm.svelte    |  6 ++-
 src/app/components/ProgressBar.svelte        |  9 +++++
 src/app/components/SignUp.svelte             | 14 ++++---
 src/app/components/SignUpComplete.svelte     |  8 +++-
 src/app/components/SignUpEmail.svelte        | 10 ++++-
 src/app/components/SignUpEmailConfirm.svelte |  8 +++-
 src/app/components/SignUpKey.svelte          |  6 ++-
 src/app/components/SignUpProfile.svelte      | 40 ++++++++++----------
 9 files changed, 76 insertions(+), 33 deletions(-)
 create mode 100644 src/app/components/ProgressBar.svelte

diff --git a/src/app/components/KeyDownload.svelte b/src/app/components/KeyDownload.svelte
index b00900a0..87ce677f 100644
--- a/src/app/components/KeyDownload.svelte
+++ b/src/app/components/KeyDownload.svelte
@@ -15,6 +15,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
 
@@ -22,9 +23,11 @@
     secret: string
     next: () => unknown
     submitText?: string
+    step?: number
+    totalSteps?: number
   }
 
-  const {secret, next, submitText = "Continue"}: Props = $props()
+  const {secret, next, submitText = "Continue", step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -150,6 +153,9 @@
       </Button>
     </div>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/ProfileEditForm.svelte b/src/app/components/ProfileEditForm.svelte
index 7e37ee51..16d88183 100644
--- a/src/app/components/ProfileEditForm.svelte
+++ b/src/app/components/ProfileEditForm.svelte
@@ -23,9 +23,10 @@
     onsubmit: (values: Values) => void
     isSignup?: boolean
     footer: Snippet
+    progressBar?: Snippet
   }
 
-  const {initialValues, isSignup, onsubmit, footer}: Props = $props()
+  const {initialValues, isSignup, onsubmit, footer, progressBar}: Props = $props()
 
   const values = $state(initialValues)
 
@@ -103,6 +104,9 @@
       </Field>
     {/if}
   </ModalBody>
+  {#if progressBar}
+    {@render progressBar()}
+  {/if}
   <ModalFooter>
     {@render footer()}
   </ModalFooter>
diff --git a/src/app/components/ProgressBar.svelte b/src/app/components/ProgressBar.svelte
new file mode 100644
index 00000000..efccba42
--- /dev/null
+++ b/src/app/components/ProgressBar.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  const {current, total}: {current: number; total: number} = $props()
+</script>
+
+<div class="flex w-full">
+  {#each Array(total) as _, i}
+    <div class="h-1 flex-1 transition-colors {i < current ? 'bg-primary' : 'bg-base-300'}"></div>
+  {/each}
+</div>
diff --git a/src/app/components/SignUp.svelte b/src/app/components/SignUp.svelte
index f6a395b4..5edf81e0 100644
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -62,9 +62,10 @@
 
   const flows = {
     email: {
-      start: () => pushModal(SignUpEmail, {next: flows.email.profile}),
-      profile: () => pushModal(SignUpProfile, {next: flows.email.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
+      start: () => pushModal(SignUpEmail, {next: flows.email.profile, step: 1, totalSteps: 3}),
+      profile: () => pushModal(SignUpProfile, {next: flows.email.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.email.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
@@ -74,9 +75,10 @@
       },
     },
     nostr: {
-      start: () => pushModal(SignUpProfile, {next: flows.nostr.key}),
-      key: () => pushModal(SignUpKey, {next: flows.nostr.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.nostr.finalize}),
+      start: () => pushModal(SignUpProfile, {next: flows.nostr.key, step: 1, totalSteps: 3}),
+      key: () => pushModal(SignUpKey, {next: flows.nostr.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.nostr.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const secret = getKey<string>("signup.secret")!
 
diff --git a/src/app/components/SignUpComplete.svelte b/src/app/components/SignUpComplete.svelte
index cd600113..75eca93e 100644
--- a/src/app/components/SignUpComplete.svelte
+++ b/src/app/components/SignUpComplete.svelte
@@ -9,12 +9,15 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 </script>
@@ -33,6 +36,9 @@
       on groups you've already joined. Click below to get started!
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpEmail.svelte b/src/app/components/SignUpEmail.svelte
index 824ae7bf..62961820 100644
--- a/src/app/components/SignUpEmail.svelte
+++ b/src/app/components/SignUpEmail.svelte
@@ -18,14 +18,17 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -81,7 +84,7 @@
       setKey("signup.clientOptions", clientOptions)
 
       popToast(toastId)
-      pushModal(SignUpEmailConfirm, {next})
+      pushModal(SignUpEmailConfirm, {next, step, totalSteps})
     } catch (e) {
       console.error(e)
 
@@ -139,6 +142,9 @@
       {/snippet}
     </FieldInline>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpEmailConfirm.svelte b/src/app/components/SignUpEmailConfirm.svelte
index b3279179..71951f3c 100644
--- a/src/app/components/SignUpEmailConfirm.svelte
+++ b/src/app/components/SignUpEmailConfirm.svelte
@@ -15,12 +15,15 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const email = getKey<string>("signup.email")
 
@@ -61,6 +64,9 @@
       above.
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpKey.svelte b/src/app/components/SignUpKey.svelte
index 177bef2c..f94302bf 100644
--- a/src/app/components/SignUpKey.svelte
+++ b/src/app/components/SignUpKey.svelte
@@ -4,11 +4,13 @@
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const secret = getKey<string>("signup.secret")!
 </script>
 
-<KeyDownload {secret} {next} />
+<KeyDownload {secret} {next} {step} {totalSteps} />
diff --git a/src/app/components/SignUpProfile.svelte b/src/app/components/SignUpProfile.svelte
index 04a3d122..281c3910 100644
--- a/src/app/components/SignUpProfile.svelte
+++ b/src/app/components/SignUpProfile.svelte
@@ -5,15 +5,16 @@
   import {getKey, setKey} from "@lib/implicit"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const profile = getKey<Profile>("signup.profile")!
 
@@ -27,19 +28,20 @@
   }
 </script>
 
-<Modal>
-  <ModalBody>
-    <ProfileEditForm isSignup {initialValues} {onsubmit}>
-      {#snippet footer()}
-        <Button class="btn btn-link" onclick={back}>
-          <Icon icon={AltArrowLeft} />
-          Go back
-        </Button>
-        <Button class="btn btn-primary" type="submit">
-          Create Account
-          <Icon icon={AltArrowRight} />
-        </Button>
-      {/snippet}
-    </ProfileEditForm>
-  </ModalBody>
-</Modal>
+<ProfileEditForm isSignup {initialValues} {onsubmit}>
+  {#snippet footer()}
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Create Account
+      <Icon icon={AltArrowRight} />
+    </Button>
+  {/snippet}
+  {#snippet progressBar()}
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
+  {/snippet}
+</ProfileEditForm>