I need to stop for the night.

src/lib/ae_stores.ts

@@ -58,16 +58,17 @@ export let ae_app_local_data_struct: key_val = {
 }
 console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct);
 
-// This does not work yet...
+// This works, but does not uses local storage:
+export let ae_loc = writable(ae_app_local_data_struct);
+
+// This works and uses local storage:
+// export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
+
+
+// This does not work yet...? Don't use.
 // const ae_loc_store: Writable<string> = localStorageStore('ae_loc', ae_app_local_data_struct);
 // console.log(`store - $ae_loc:`, ae_loc_store);
 
-// Testing:
-export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
-
-// This works:
-// export let ae_loc = writable(ae_loc_store);
-
 
 // *** BEGIN *** Temporary app data. This should be stored to session storage.
 export let ae_app_session_data_struct: key_val = {

src/routes/sponsorships/+page.svelte

@@ -17,11 +17,13 @@ const modalStore = getModalStore();
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
+
 // import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
 import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
 import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
 import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
 
+// Viewing
 const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
 
 const modal_view__sponsorship_obj: ModalSettings = {
@@ -31,6 +33,26 @@ const modal_view__sponsorship_obj: ModalSettings = {
     position: '', // default is "items-center"
 };
 
+
+// Editing
+const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
+
+const modal_edit__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentEditSponsorshipObj,
+    title: 'Edit Sponsorship',
+    position: '', // default is "items-center"
+};
+
+$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
+    console.log('Show Modal Edit');
+    modalStore.trigger(modal_edit__sponsorship_obj);
+} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
+    console.log('Show Modal View');
+    modalStore.trigger(modal_view__sponsorship_obj);
+}
+
+
 // We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show the view modal.
 $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
 $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
@@ -288,12 +310,6 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
     return ae_sponsorship_obj_get_promise;
 }
 
-const modal_edit__sponsorship_obj: ModalSettings = {
-	type: 'component',
-	component: 'modalComponentEditSponsorshipObj',
-    title: 'Edit Sponsorship',
-    position: '', // default is "items-center"
-};
 
 // const modal_view__sponsorship_obj: ModalSettings = {
 // 	type: 'component',
@@ -307,13 +323,7 @@ const modal_edit__sponsorship_obj: ModalSettings = {
 //     $slct_trigger = null;
 // }
 
-$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
+
-    console.log('Show Modal Edit');
-    modalStore.trigger(modal_edit__sponsorship_obj);
-} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
-    console.log('Show Modal View');
-    modalStore.trigger(modal_view__sponsorship_obj);
-}
 
 // const modal: ModalSettings = {
 // 	type: 'alert',

src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte

@@ -2,11 +2,12 @@
 import type { SvelteComponent } from 'svelte';
 import { createEventDispatcher } from 'svelte';
 
-const dispatch = createEventDispatcher();
+// const dispatch = createEventDispatcher();
 
 import { localStorageStore } from '@skeletonlabs/skeleton';
 import type { Writable } from 'svelte/store';
-const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
+// const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
+let store_current_tab: string = 'start';
 // console.log(`store_current_tab:`, $store_current_tab);
 
 // Stores
@@ -28,20 +29,20 @@ type key_val = {
 };
 
 
-// Form Data
+// // Form Data
-const formData = {
+// const formData = {
-    name: 'Jane Doe',
+//     name: 'Jane Doe',
-    tel: '214-555-1234',
+//     tel: '214-555-1234',
-    email: 'jdoe@email.com'
+//     email: 'jdoe@email.com'
-};
+// };
 
 // const form_data = $slct.sponsorship_obj;
 
 // We've created a custom submit function to pass the response and close the modal.
-function onFormSubmit(): void {
+// function onFormSubmit(): void {
-    if ($modalStore[0].response) $modalStore[0].response(formData);
+//     if ($modalStore[0].response) $modalStore[0].response(formData);
-    modalStore.close();
+//     modalStore.close();
-}
+// }
 
 // Base Classes
 const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
@@ -52,8 +53,9 @@ const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
 const cHeader = 'text-2xl font-bold';
 const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
 
-// let tab_set: string = 'start';
+
-let tab_set = $store_current_tab;
+// let tab_set = $store_current_tab;
+let tab_set = store_current_tab;
 
 $ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
 let placeholder_li: key_val = {
@@ -61,6 +63,7 @@ let placeholder_li: key_val = {
     file_logo_secondary: '-- No File Selected --',
     file_media_promo_video: '-- No File Selected --',
 };
+let ae_promises_init: key_val = {};
 let ae_promises: key_val = {};
 // let ae_promises.api_create__sponsorship_obj: Promise<any>;
 
@@ -334,7 +337,7 @@ async function handle_update__sponsorship({
     }) {
     console.log('*** handle_update__sponsorship() ***');
 
-    api_ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({
+    ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({
             api_cfg: $ae_api,
             obj_type: obj_type,
             obj_id: obj_id,
@@ -374,26 +377,26 @@ async function handle_update__sponsorship({
         border=""
         class="bg-surface-100-800-token w-full"
         >
-        <Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
+        <Tab bind:group={store_current_tab} name="tab_start" value={'start'}>
             <svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
             <span>Start</span>
         </Tab>
-        <Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
+        <Tab bind:group={store_current_tab} name="tab_files" value={'files'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
             <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
             Files
         </Tab>
-        <Tab bind:group={$store_current_tab} name="tab_gala_guests" value={'gala_guests'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
+        <Tab bind:group={store_current_tab} name="tab_gala_guests" value={'gala_guests'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
             <svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
             Gala Guests
         </Tab>
-        <Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
+        <Tab bind:group={store_current_tab} name="tab_options" value={'options'} disabled={!$slct.sponsorship_obj.sponsorship_id_random}>
             <svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
             More
         </Tab>
 
     <!-- Tab Panels --->
 	<svelte:fragment slot="panel">
-    {#if $store_current_tab === 'start'}
+    {#if store_current_tab === 'start'}
     <form
         class="modal-form {cForm}"
         on:submit|preventDefault={handle_submit_form}
@@ -521,7 +524,7 @@ async function handle_update__sponsorship({
 
     </form>
 
-    {:else if $store_current_tab === 'files'}
+    {:else if store_current_tab === 'files'}
     <form
         class="modal-form {cForm}"
         on:submit|preventDefault={handle_submit_form_files}
@@ -627,20 +630,23 @@ async function handle_update__sponsorship({
 
     </form>
 
-    {:else if $store_current_tab === 'gala_guests'}
+    {:else if store_current_tab === 'gala_guests'}
     <section>
 
     {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
 
     {#each $slct.sponsorship_obj.guest_li_json as guest, index}
     <fieldset class="border border-gray-500/20 p-4">
-        <legend class="legend">Guest {index} - {guest.given_name} {guest.family_name}</legend>
+        <legend class="legend">
+            Guest {index} -
+            {guest.full_name ?? `${guest.given_name} {guest.family_name}`}
+        </legend>
         <div class="flex flex-wrap gap-4">
         <label for="guest_{index}_given_name" class="label max-w-64">Given name
-            <input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="Full name" value={guest.given_name ?? ''} autocomplete="name">
+            <input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="First name" value={guest.given_name ?? ''} autocomplete="name">
         </label>
         <label for="guest_{index}_family_name" class="label max-w-64">Family name
-            <input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Full name" value={guest.family_name ?? ''} autocomplete="name">
+            <input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Last name" value={guest.family_name ?? ''} autocomplete="name">
         </label>
         <label for="guest_{index}_email" class="label max-w-64">Email
             <input type="email" class="input" id="guest_{index}_email" name="guest_{index}_email" placeholder="Email" value={guest.email ?? ''} autocomplete="email">
@@ -666,7 +672,7 @@ async function handle_update__sponsorship({
 
     </section>
 
-    {:else if $store_current_tab === 'options'}
+    {:else if store_current_tab === 'options'}
     <form
         class="modal-form {cForm}"
         on:submit|preventDefault={handle_submit_form}
@@ -795,5 +801,6 @@ async function handle_update__sponsorship({
 </div>
 {/if}
 
+
 <style>
 </style>

src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte

@@ -2,7 +2,7 @@
 import type { SvelteComponent } from 'svelte';
 
 // Stores
-import { getModalStore } from '@skeletonlabs/skeleton';
+// import { getModalStore } from '@skeletonlabs/skeleton';
 
 // Props
 /** Exposes parent props to this component. */