refactor: modals form_history creation

Author: moonlitgrace

frontend/src/lib/components/modals/create_community/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import AuthModal from './auth/index.svelte';
-  import CreateCommunityModal from './create_community/index.svelte';
+  import ModalAuth from './modal_auth/index.svelte';
+  import ModalCreateCommunity from './modal_create_community/index.svelte';
 </script>
 
-<AuthModal />
-<CreateCommunityModal />
+<ModalAuth />
+<ModalCreateCommunity />

frontend/src/lib/components/modals/index.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { createModalsStore } from '$lib/stores/modals.svelte';
+  import type { Nullable } from '$lib/types/shared';
+  import type { FormsState, FormSubmitData, Forms } from '../types';
+  import { create_form_history } from '../utils/history.svelte';
+  import forms from './forms';
+
+  type AuthForms = Forms<typeof forms>;
+  type AuthFormsState = FormsState<typeof forms>;
+
+  const form_history = create_form_history<typeof forms>('join');
+  let current_form = $derived(forms[form_history.history.at(-1) ?? 'join']);
+
+  const initial_forms_state = Object.fromEntries(
+    Object.keys(forms).map((key) => [key, {}])
+  ) as AuthFormsState;
+
+  let forms_state = $state<AuthFormsState>(initial_forms_state);
+
+  function update_forms_state(form: AuthForms, data: FormSubmitData) {
+    forms_state[form] = { ...forms_state[form], ...data };
+  }
+
+  function goto_form(form: AuthForms) {
+    form_history.go_to_form(form);
+  }
+
+  function handle_go_back() {
+    form_history.go_back();
+  }
+
+  let dialog_element = $state<Nullable<HTMLDialogElement>>(null);
+
+  const modalsStore = createModalsStore();
+
+  $effect(() => {
+    if (modalsStore.state.get('auth')) {
+      dialog_element?.showModal();
+    } else {
+      dialog_element?.close();
+    }
+  });
+</script>
+
+<dialog
+  class="modal modal-bottom sm:modal-middle"
+  bind:this={dialog_element}
+  onclose={() => modalsStore.close('auth')}
+>
+  <div class="modal-box !w-[25rem]">
+    {#await current_form then Form}
+      <Form.default {forms_state} {update_forms_state} {goto_form} />
+    {/await}
+    {#if form_history.history.length > 1}
+      <div
+        class="tooltip tooltip-right absolute left-2.5 top-2.5 flex before:capitalize"
+        data-tip={form_history.history.at(-2)?.replace('_', ' ')}
+      >
+        <button
+          class="btn btn-square btn-circle btn-ghost btn-sm"
+          aria-label="Close modal"
+          onclick={handle_go_back}
+        >
+          <coreicons-shape-arrow class="size-5" variant="left"></coreicons-shape-arrow>
+        </button>
+      </div>
+    {/if}
+    <button
+      class="btn btn-square btn-circle btn-ghost btn-sm absolute right-2.5 top-2.5"
+      aria-label="Close modal"
+      onclick={() => dialog_element?.close()}
+    >
+      <coreicons-shape-x class="size-5" variant="no-border"></coreicons-shape-x>
+    </button>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>

frontend/src/lib/components/modals/auth/forms/index.ts renamed to frontend/src/lib/components/modals/modal_auth/forms/index.ts

@@ -1,3 +1,10 @@
+<script lang="ts">
+  import type { FormProps } from '../../types';
+  import forms from '../forms';
+
+  let {}: FormProps<typeof forms> = $props();
+</script>
+
 <div>
   <div>
     <h3>Introduce Your Community</h3>

frontend/src/lib/components/modals/auth/forms/join.svelte renamed to frontend/src/lib/components/modals/modal_auth/forms/join.svelte

@@ -4,25 +4,25 @@
   import type { FormsState, FormSubmitData, Forms } from '../types';
   import forms from './forms';
 
-  type AuthForms = Forms<typeof forms>;
-  type AuthFormsState = FormsState<typeof forms>;
+  type CForms = Forms<typeof forms>;
+  type CFormsState = FormsState<typeof forms>;
 
-  let _form = $state<AuthForms>('join');
-  let prev_form_history = $state<AuthForms[]>(['join']);
+  let _form = $state<CForms>('introduction');
+  let prev_form_history = $state<CForms[]>(['introduction']);
 
   let current_form = $derived(forms[_form]);
 
   const initial_forms_state = Object.fromEntries(
     Object.keys(forms).map((key) => [key, {}])
-  ) as AuthFormsState;
+  ) as CFormsState;
 
-  let forms_state = $state<AuthFormsState>(initial_forms_state);
+  let forms_state = $state<CFormsState>(initial_forms_state);
 
-  function update_forms_state(form: AuthForms, data: FormSubmitData) {
+  function update_forms_state(form: CForms, data: FormSubmitData) {
     forms_state[form] = { ...forms_state[form], ...data };
   }
 
-  function goto_form(form: AuthForms) {
+  function goto_form(form: CForms) {
     // if navigating to a form thats already in the history stack,
     // truncate the stack upto the most recent occurance of that form
     // (avoiding duplicate entiries)
@@ -53,7 +53,7 @@
   const modalsStore = createModalsStore();
 
   $effect(() => {
-    if (modalsStore.state.get('auth')) {
+    if (modalsStore.state.get('create_community')) {
       dialog_element?.showModal();
     } else {
       dialog_element?.close();
@@ -64,26 +64,12 @@
 <dialog
   class="modal modal-bottom sm:modal-middle"
   bind:this={dialog_element}
-  onclose={() => modalsStore.close('auth')}
+  onclose={() => modalsStore.close('create_community')}
 >
-  <div class="modal-box !w-[25rem]">
+  <div class="modal-box">
     {#await current_form then Form}
       <Form.default {forms_state} {update_forms_state} {goto_form} />
     {/await}
-    {#if prev_form_history.length > 1}
-      <div
-        class="tooltip tooltip-right absolute left-2.5 top-2.5 flex before:capitalize"
-        data-tip={prev_form_history.at(-2)?.replace('_', ' ')}
-      >
-        <button
-          class="btn btn-square btn-circle btn-ghost btn-sm"
-          aria-label="Close modal"
-          onclick={handle_go_back}
-        >
-          <coreicons-shape-arrow class="size-5" variant="left"></coreicons-shape-arrow>
-        </button>
-      </div>
-    {/if}
     <button
       class="btn btn-square btn-circle btn-ghost btn-sm absolute right-2.5 top-2.5"
       aria-label="Close modal"

frontend/src/lib/components/modals/auth/forms/profile_create.svelte renamed to frontend/src/lib/components/modals/modal_auth/forms/profile_create.svelte

@@ -0,0 +1,36 @@
+import type { FormConfig } from '../types';
+
+export function create_form_history<T extends FormConfig>(initial_form: keyof T) {
+  let history = $state([initial_form]);
+
+  function go_to_form(form: keyof T) {
+    // if navigating to a form thats already in the history stack,
+    // truncate the stack upto the most recent occurance of that form
+    // (avoiding duplicate entiries)
+    const form_index = history.findIndex((entry) => entry === form);
+    if (form_index > -1) {
+      // if exists
+      history = history.slice(0, form_index + 1);
+    } else {
+      // otherwise, push current form to prev_form_history
+      history.push(form);
+    }
+    return history.at(-1);
+  }
+
+  function go_back() {
+    if (history.length > 1) {
+      // remove current form from history stack
+      history.pop();
+    }
+    return history.at(-1);
+  }
+
+  return {
+    get history() {
+      return history;
+    },
+    go_to_form,
+    go_back
+  };
+}

frontend/src/lib/components/modals/auth/forms/profile_select.svelte renamed to frontend/src/lib/components/modals/modal_auth/forms/profile_select.svelte

@@ -78,11 +78,13 @@
 }
 
 [data-smiz-modal-overlay='hidden'] {
-  background-color: oklch(var(--b3) / 0);
+  /* background-color: oklch(var(--b3) / 0); */
+  background-color: #0000;
 }
 
 [data-smiz-modal-overlay='visible'] {
-  background-color: oklch(var(--b3) / 0.55);
+  /* background-color: oklch(var(--b3) / 0.55); */
+  background-color: #0006;
 }
 
 [data-smiz-modal-content] {