Making progress on pulling this together.

src/lib/ae_stores.ts

@@ -1,4 +1,7 @@
+import { localStorageStore } from '@skeletonlabs/skeleton'
 import { readable, writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+
 
 import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_ACCOUNT_ID } from '$env/static/public';
 console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);
@@ -29,7 +32,7 @@ type key_val = {
 
 // *** BEGIN *** Longer-term app data. This should be stored to local storage.
 export let ae_app_local_data_struct: key_val = {
-    'ver': '0.0.1',
+    'ver': '0.0.5',
     'name': 'Aether App Template',
     'theme': 'light',
     'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
@@ -50,7 +53,16 @@ export let ae_app_local_data_struct: key_val = {
     },
 }
 console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct);
-export let ae_loc = writable(ae_app_local_data_struct);
+
+// This does not work yet...
+// 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.

src/routes/sponsorships/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 
+// import { localStorageStore } from '@skeletonlabs/skeleton';
+// import type { Writable } from 'svelte/store';
+// const store_current_page: Writable<string> = localStorageStore('store_current_page', 'start');
+
 // To retrieve the store, getModalStore must be invoked at the top level of your component!
 import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
 import type {
@@ -28,6 +32,9 @@ const modal_view__sponsorship_obj: ModalSettings = {
 	component: modalComponentViewSponsorshipObj,
 };
 
+// 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;
 
 type key_val = {
     [key: string]: any;
@@ -43,6 +50,8 @@ onMount(() => {
     console.log('Sponsorships: +page.svelte');
 	let url = window.location.href;
 	console.log(url);
+
+    $ae_loc.href_url = url;
 });
 
 
@@ -245,7 +254,6 @@ $: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
     modalStore.trigger(modal_edit__sponsorship_obj);
 } else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
     console.log('Show Modal View');
-    // modalStore.trigger(modalComponentViewSponsorshipObj);
     modalStore.trigger(modal_view__sponsorship_obj);
 }
 
@@ -288,7 +296,7 @@ const drawer_settings_y: DrawerSettings = {
     <div class="space-y-10 flex flex-col">
 
         <h1 class="h1 text-center">Aether - Sponsorships (dev)</h1>
-        <section>
+        <!-- <section>
             <button
                 on:click={() => {
                     console.log('Open drawer');
@@ -315,7 +323,7 @@ const drawer_settings_y: DrawerSettings = {
                 >
                 Open Drawer Edit
             </button>
-        </section>
+        </section> -->
 
 		<section class="sponsorships_list">
         {#if $slct.sponsorship_obj_li && $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li}

src/routes/sponsorships/0_sponsorships__main.svelte

@@ -1,847 +0,0 @@
-<script lang="ts">
-type key_val = {
-    [key: string]: any;
-};
-// *** Import Svelte core
-import { onMount } from 'svelte';
-
-// *** Import Aether core variables and functions
-import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
-
-import { slct, slct_trigger, ae_app, ae_local, ae_session } from './stores';
-
-// *** Import Aether core components
-// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
-
-// *** Import Aether module variables and functions
-
-// *** Import Aether module components
-import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
-import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
-import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';
-
-// *** Export/Exposed variables and functions for component
-// export let account_id: string = $page['page_for']['account_id'];
-export let account_id: string = $ae_app.account_id;
-export let sponsorship_id: string = $ae_app.sponsorships.sponsorship_id;
-
-export let user: string = $ae_app.user;
-export let key: string = $ae_app.key;
-export let full_name: string = $ae_app.full_name;
-export let ae_admin_li: string = $ae_app.ae_admin_li;
-export let ae_trusted_li: string = $ae_app.ae_trusted_li;
-
-// *** Set initial variables
-$ae_app.user = decodeURIComponent(user);
-$ae_app.key = decodeURIComponent(key);
-// $ae_app.ae_admin_li = ae_admin_li;
-// $ae_app.ae_trusted_li = ae_trusted_li;
-
-$ae_app.current_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-if (!$ae_app.lu_country_subdivision_list) {
-    $ae_app.lu_country_subdivision_list = [];
-}
-if (!$ae_app.lu_country_list ) {
-    $ae_app.lu_country_list = [];
-}
-if (!$ae_app.lu_timezone_list) {
-    $ae_app.lu_timezone_list = [];
-}
-
-$ae_app.sponsorships.show_main__options = true; // Section for: search area, buttons for filtering sponsorships, create new sponsorship.
-$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
-$ae_app.sponsorships.fulltext_search_qry_str = '';
-$ae_app.sponsorships.qry_virtual = false;
-$ae_app.sponsorships.qry_physical = false;
-$ae_app.sponsorships.qry_type = '';
-
-// NOTE: Check if the ae_user is in the ae_admin_li list
-if ($ae_app.ae_user && $ae_app.ae_admin_li) {
-    if ($ae_app.ae_admin_li.includes($ae_app.ae_user)) {
-        $ae_app.access_type = 'administrator';
-        $ae_app.administrator_access = true;
-        $ae_app.trusted_access = true;
-    }
-}
-// NOTE: Check if the ae_user is in the ae_trusted_li list
-if ($ae_app.ae_user && $ae_app.ae_trusted_li) {
-    if ($ae_app.ae_trusted_li.includes($ae_app.ae_user)) {
-        $ae_app.access_type = 'trusted';
-        $ae_app.trusted_access = true;
-    }
-}
-
-if ($ae_app.administrator_access) {
-    $ae_app.sponsorships.enabled = 'enabled';
-    $ae_app.sponsorships.hidden = 'not_hidden';
-    $ae_app.sponsorships.limit = 150;
-} else if ($ae_app.trusted_access) {
-    $ae_app.sponsorships.enabled = 'enabled';
-    $ae_app.sponsorships.hidden = 'not_hidden';
-    $ae_app.sponsorships.limit = 75;
-} else {
-    $ae_app.sponsorships.enabled = 'enabled';
-    $ae_app.sponsorships.hidden = 'not_hidden';
-    $ae_app.sponsorships.limit = 25;
-}
-
-let ae_sponsorship_obj_li_get_promise;
-let ae_sponsorship_obj_get_promise;
-let data_store_obj_get_promise;
-let get_ds_sponsorships_info_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_info'});
-let get_ds_sponsorships_options_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_options'});
-
-if (account_id) {
-    $slct.account_id = account_id;
-    handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
-}
-
-// NOTE: This if sponsorship_id is not fully ready yet -2023-09-08
-if (sponsorship_id) {
-    console.log(`Selected Sponsorship ID: ${sponsorship_id}`);
-    $slct.sponsorship_id = sponsorship_id;
-    $slct_trigger = 'load__sponsorship_obj';
-
-    // handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
-
-    // // Auto show the selected Sponsorship ID
-    // // Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
-    // const url = new URL(location);
-    // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
-    // history.pushState({}, '', url);
-
-    // let message = {'sponsorship_id': $slct.sponsorship_id};
-    // window.parent.postMessage(message, "*");
-
-    $ae_app.sponsorships.show_main__options = true;
-    $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
-    $ae_app.sponsorships.show_view__sponsorship_obj = true;
-    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-}
-
-if (!$ae_app.client_content) {
-    $ae_app.client_content = {};
-}
-
-onMount(() => {
-    console.log('** Component Mounted: ** OSIT - AE Sponsorships: Main');
-
-    document.getElementById('meeting_fulltext_search_qry_str').focus();
-
-    $ae_session.test.sponsorships = 'Hello World!';
-    $ae_session.test.general = 'Hello world from Sponsorships!';
-    console.log('ae_session:', $ae_session);
-});
-
-
-$: if ($ae_app.iframe_height && $ae_app.iframe_height_modal_body) {
-    console.log('getting new dimensions for iframe:', $ae_app.iframe_height, $ae_app.iframe_height_modal_body);
-
-    let iframe_height = 0;
-
-    if ($ae_app.iframe_height > $ae_app.iframe_height_modal_body) {
-        iframe_height = $ae_app.iframe_height;
-    } else {
-        iframe_height = $ae_app.iframe_height_modal_body;
-
-        // console.log($ae_app.modal_dimensions);
-
-        if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.header_height) {
-            iframe_height = iframe_height + $ae_app.modal_dimensions.header_height;
-        }
-        if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.footer_height) {
-            iframe_height = iframe_height + $ae_app.modal_dimensions.footer_height;
-        }
-        // iframe_height = iframe_height + 50; // Just in case
-    }
-
-    console.log(`Suggested new iframe_height: ${iframe_height}`);
-    window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
-} else if ($ae_app.iframe_height) {
-    console.log('setting new iframe_height:', $ae_app.iframe_height);
-
-    // let iframe_height = $ae_app.iframe_height;
-
-    window.parent.postMessage({'iframe_height': $ae_app.iframe_height}, "*"); // This should be in pixels
-}
-
-
-$: if ($slct_trigger == 'load__sponsorship_obj_li' && $slct.account_id) {
-    if ($ae_app.sponsorships.qry_status == 'loading') {
-        console.log('*** $ae_app.sponsorships.qry_status == loading ***');
-
-        setTimeout(() => {
-            console.log("Delayed for X second.");
-            $slct_trigger = null;
-            handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
-        }, 250);
-    } else {
-        console.log('*** $ae_app.sponsorships.qry_status != loading ***');
-        $slct_trigger = null;
-        handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
-    }
-}
-
-async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
-    console.log('*** handle_load_ae_sponsorship_obj_li() ***');
-    console.log($ae_app.sponsorships);
-
-    let fulltext_search_qry_str = $ae_app.sponsorships.fulltext_search_qry_str;
-    let qry_virtual = $ae_app.sponsorships.qry_virtual;
-    let qry_physical = $ae_app.sponsorships.qry_physical;
-    let qry_type = $ae_app.sponsorships.qry_type;
-
-    let enabled = $ae_app.sponsorships.enabled;
-    let hidden = $ae_app.sponsorships.hidden;
-    let limit = $ae_app.sponsorships.limit;
-    let offset = $ae_app.sponsorships.offset;
-
-    let params = {};
-    // params['archived'] = 'all';
-    // params['conference'] = false;
-    // params['inc_address'] = true;
-    // params['inc_contact'] = true;
-
-    let params_json: key_val = {};
-    // if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
-    //     params_json['ft_qry'] = {
-    //         'default_qry_str': fulltext_search_qry_str,
-    //         'location_address_json': fulltext_search_qry_str,
-    //         'contact_li_json': fulltext_search_qry_str,
-    //         'address_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
-    //         'contact_1_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
-    //         };
-    // }
-
-    // if (qry_virtual || qry_physical || qry_type) {
-    //     params_json['and_qry'] = {};
-    //     if (qry_virtual) params_json['and_qry']['virtual'] = true;
-    //     if (qry_physical) params_json['and_qry']['physical'] = true;
-    //     if (qry_type) params_json['and_qry']['type'] = qry_type;
-    // }
-
-    // console.log('params_json:', params_json);
-    // console.log(params_json);
-
-    // NOTE: I am not sure if this is actually needed. It may save a little space in the URL.
-    // if (JSON.stringify(params_json) == JSON.stringify({})) {
-    //     params_json = null;
-    // }
-    $ae_app.sponsorships.qry_status = 'loading';
-    ae_sponsorship_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
-        api_cfg: $ae_app.ae_api,
-        obj_type: 'sponsorship',
-        for_obj_type: 'account',
-        for_obj_id: account_id,
-        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
-        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
-        enabled: enabled,
-        hidden: hidden,
-        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
-        // order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
-        limit: limit,
-        offset: offset,
-        params_json: params_json,
-        params: params,
-        log_lvl: 2
-        })
-
-    .then(function (sponsorship_obj_li_get_result) {
-        if (sponsorship_obj_li_get_result) {
-            $slct.sponsorship_obj_li = sponsorship_obj_li_get_result;
-            console.log(`Sponsorship list:`, $slct.sponsorship_obj_li);
-        } else {
-            $slct.sponsorship_obj_li = [];
-        }
-    })
-    .catch(function (error) {
-        console.log('No results returned or failed.', error);
-    })
-    .finally(function () {
-        $ae_app.sponsorships.qry_status = 'done';
-    });
-
-    return ae_sponsorship_obj_li_get_promise;
-}
-
-
-$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
-    $slct_trigger = null;
-
-    handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
-
-    // Auto show the selected Sponsorship ID
-    // Is this pushState needed here?
-    // Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
-    // const url = new URL(location);
-    // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
-    // history.pushState({}, '', url);
-
-    // Is this postMessage needed here?
-    // let message = {'sponsorship_id': $slct.sponsorship_id};
-    // window.parent.postMessage(message, "*");
-
-    // $ae_app.sponsorships.show_main__options = false;
-    // $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
-    // $ae_app.sponsorships.show_view__sponsorship_obj = true;
-    // $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-}
-
-async function handle_load_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
-    console.log('*** handle_load_sponsorship_id_obj() ***');
-
-    // let enabled = $ae_app.sponsorships.enabled;
-    // let hidden = $ae_app.sponsorships.hidden;
-    // let limit = $ae_app.sponsorships.limit;
-    // let offset = $ae_app.sponsorships.offset;
-
-    let params = {};
-
-    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
-        api_cfg: $ae_app.ae_api,
-        obj_type: 'event',
-        obj_id: sponsorship_id,
-        use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
-        use_alt_base: true, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
-        params: params,
-        log_lvl: 0
-        })
-    .then(function (sponsorship_obj_get_result) {
-        if (sponsorship_obj_get_result) {
-            $slct.sponsorship_obj = sponsorship_obj_get_result;
-            console.log(`Sponsorship object:`, $slct.sponsorship_obj);
-        }
-
-        // Auto show the selected Sponsorship ID
-        // Is this pushState needed here?
-        // Set the URL param "sponsorship_id" to the current Sponsorship ID.
-        const url = new URL(location);
-        url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
-        history.pushState({}, '', url);
-
-        // Is this postMessage needed here?
-        let message = {'sponsorship_id': $slct.sponsorship_id};
-        window.parent.postMessage(message, "*");
-    })
-    .catch(function (error) {
-        console.log('No results returned or failed.', error);
-    });
-
-    return ae_sponsorship_obj_get_promise;
-}
-
-function handle_created_sponsorship_obj(event) {
-    console.log('*** handle_created_sponsorship_obj() ***');
-    console.log(event.detail);
-
-    handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
-
-    const url = new URL(location);
-    url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
-    history.pushState({}, '', url);
-
-    let message = {'sponsorship_id': $slct.sponsorship_id};
-    window.parent.postMessage(message, "*");
-
-    // $slct_trigger = 'load__sponsorship_obj';
-    $slct_trigger = 'load__sponsorship_obj_li';
-
-    $ae_app.sponsorships.show_main__options = false;
-    $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
-    $ae_app.sponsorships.show_view__sponsorship_obj = true;
-    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-}
-
-function handle_updated_sponsorship_obj(event) {
-    console.log('*** handle_updated_sponsorship_obj() ***');
-    console.log(event.detail);
-
-    // $slct_trigger = 'load__sponsorship_obj';
-    $slct_trigger = 'load__sponsorship_obj_li';
-
-    $ae_app.sponsorships.show_main__options = false;
-    $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
-    $ae_app.sponsorships.show_view__sponsorship_obj = true;
-    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-}
-
-function handle_deleted_sponsorship_obj(event) {
-    console.log('*** handle_deleted_sponsorship_obj() ***');
-    console.log(event.detail);
-
-    const url = new URL(location);
-    url.searchParams.delete('sponsorship_id');
-    history.pushState({}, '', url);
-
-    let message = {'sponsorship_id': null};
-    window.parent.postMessage(message, "*");
-
-    $slct_trigger = 'load__sponsorship_obj_li';
-
-    $ae_app.sponsorships.show_main__options = true;
-    $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
-    $ae_app.sponsorships.show_view__sponsorship_obj = false;
-    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-}
-
-
-function handle_submit_form(event) {
-    console.log('*** handle_submit_form() ***');
-    console.log(event);
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    return false;
-}
-function handle_cancel_form(event) {
-    console.log('*** handle_cancel_form() ***');
-    console.log(event);
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    return false;
-}
-
-function handle_oninput_fulltext_search_qry_str(event) {
-    console.log('*** handle_oninput_fulltext_search_qry_str() ***');
-    console.log(event);
-
-    // Check if this variable is a promise. The last query may still be being processed.
-    // if (!ae_sponsorship_obj_li_get_promise.promise) {
-    //     console.log('*** handle_oninput_fulltext_search_qry_str() ***');
-    //     console.log('*** Promise is still processing. ***');
-    //     console.log(ae_sponsorship_obj_li_get_promise);
-    //     ae_sponsorship_obj_li_get_promise.promise.finally(() => { ae_sponsorship_obj_li_get_promise.promise.done = true; });
-    // } else {
-    //     $slct_trigger = 'load__sponsorship_obj_li';
-    // }
-    // if (ae_sponsorship_obj_li_get_promise && ae_sponsorship_obj_li_get_promise.then) {
-    //     console.log('*** handle_oninput_fulltext_search_qry_str() ***');
-    //     console.log('*** Promise is still processing. ***');
-    //     console.log(ae_sponsorship_obj_li_get_promise);
-    //     $slct_trigger = 'load__sponsorship_obj_li';
-    //     return;
-    // }
-
-    // fulltext_search_qry_str = event.target.value;
-
-    // if ($ae_app.sponsorships.fulltext_search_qry_str.length > 2) {
-    // } else {
-    //     $ae_app.sponsorships.fulltext_search_qry_str = '';
-    // }
-    $slct_trigger = 'load__sponsorship_obj_li';
-}
-
-async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
-    console.log('*** handle_get_data_store_obj_w_code() ***');
-
-    let get_item_result = window.localStorage.getItem(code);
-    if (get_item_result) {
-        $ae_app.sponsorships.ds[code] = get_item_result;
-    } else {
-        console.log('Get local storage item miss.');
-    }
-
-    data_store_obj_get_promise = api.get_data_store_obj_w_code({
-        api_cfg: $ae_app.ae_api,
-        data_store_code: code,
-        data_type: data_type,
-        log_lvl: 1
-        })
-    .then(function (get_data_store_result) {
-        if (get_data_store_result) {
-
-            if (data_type == 'text') {
-                // console.log(get_data_store_result.text);
-                $ae_app.sponsorships.ds[code] = get_data_store_result.text;
-            } else if (data_type == 'json') {
-                // console.log(get_data_store_result.json);
-                $ae_app.sponsorships.ds[code] = get_data_store_result.json;
-            }
-
-            // console.log(`Code: ${$ae_app.sponsorships.ds[code]}`);
-            // console.log(`Code:`, $ae_app.sponsorships.ds[code]);
-        }
-    })
-    .catch(function (error) {
-        console.log('No results returned or failed.', error);
-    });
-}
-</script>
-
-<!-- <svelte:window
-	bind:outerHeight={ae_iframe_height}
-  /> -->
-
-
-<section id="osit_ae_sponsorships" class="osit_sponsorships ae_main c_ae c_ae_sponsorships ae_main" bind:clientHeight={$ae_app.iframe_height}>
-<header>
-    <h1>Sponsorships for One Sky IT Demo</h1>
-</header>
-
-<section class="ae_section ae_meta">
-    <p>
-    ae: {($ae_app.ae_full_name ? $ae_app.ae_full_name : 'Name not set')}
-    <span class="details">
-    (
-        {($ae_app.ae_email ? $ae_app.ae_email : 'Email not set')}
-        {#if $ae_app.administrator_access}
-            <span class="access_type administrator_access">Administrator</span>
-        {:else if $ae_app.trusted_access}
-            <span class="access_type trusted_access">Trusted</span>
-        {/if}
-        <span class="ae_user">{$ae_app.ae_user ? $ae_app.ae_user : 'User not set'}</span>
-    )
-    </span>
-    </p>
-</section>
-
-<div class="ae_overview">
-<div class="ae_info ds__sponsorships_info ">
-    {@html $ae_app.sponsorships.ds.sponsorships_info}
-</div>
-</div>
-
-{#if $ae_app.sponsorships.show_main__options}
-<section class="ae_section ae_options ae_column sponsorship_obj__options">
-    <div class="ae_note ds__sponsorships_options ">
-        {@html $ae_app.sponsorships.ds.sponsorships_options}
-    </div>
-
-    <div class="filters_and_search">
-
-
-
-        <form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="search_form">
-        <div class="ae_group">
-        <input
-            type="search"
-            placeholder="Search (name, description, etc.)"
-            id="meeting_fulltext_search_qry_str"
-            name="fulltext_search_qry_str"
-            bind:value={$ae_app.sponsorships.fulltext_search_qry_str}
-            style="width: 50%;"
-            class="bs-input"
-            >
-        <button
-            on:click={handle_oninput_fulltext_search_qry_str}
-            >
-            <span class="fas fa-search"></span> Search
-        </button>
-        </div>
-
-        <fieldset>
-            <legend>Filter on?</legend>
-            <div class="ae_row ae_flex_justify_around ae_width_md">
-            <label>Paid
-                <input
-                    name="qry_paid"
-                    type="checkbox"
-                    bind:checked={$ae_app.sponsorships.qry_paid}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    >
-            </label>
-            <label>Guests
-                <input
-                    name="qry_guest_li"
-                    type="checkbox"
-                    bind:checked={$ae_app.sponsorships.qry_guest_li}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    >
-            </label>
-            </div>
-        </fieldset>
-
-        <fieldset>
-            <legend>Select level?</legend>
-            <div class="ae_row ae_flex_justify_around ae_width_100">
-            <label>All
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value=""
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Show all meeting types"
-                    >
-            </label>
-            <label>Friend ($5,000)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Friend"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Friend ($5,000)"
-                    >
-            </label>
-            <label>Supporter ($7,500)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Supporter"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Supporter ($7,500)"
-                    >
-            </label>
-            <label>Champion ($12,500)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Champion"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Champion ($12,500)"
-                    >
-            </label>
-            <label>Advocate ($20,000)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Advocate"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Advocate ($20,000)"
-                    >
-            </label>
-            <label>Presenting Partner ($30,000)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Presenting Partner"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Presenting Partner ($30,000)"
-                    >
-            </label>
-            <label>Signature Partner ($50,000)
-                <input
-                    name="qry_type"
-                    type="radio"
-                    value="Signature Partner"
-                    bind:group={$ae_app.sponsorships.qry_type}
-                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
-                    title="Signature Partner ($50,000)"
-                    >
-            </label>
-            </div>
-        </fieldset>
-
-        </form>
-
-        {#await ae_sponsorship_obj_li_get_promise}
-            <div><span class="fas fa-spinner"></span>
-            Loading sponsorships...</div>
-        {:then ae_sponsorship_obj_li_get_result}
-            <!-- <p>Sponsorship list: {ae_sponsorship_obj_li_get_result}</p> -->
-        {:catch error}
-            <div>Error: {error.message}</div>
-        {/await}
-
-        <div class="ae_group ae_row">
-
-        {#if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'not_hidden'}
-            <button
-                on:click={() => {
-                    $ae_app.sponsorships.hidden = 'all';
-                    $ae_app.sponsorships.limit = 150;
-                    $slct_trigger = 'load__sponsorship_obj_li';
-                }}
-                class="btn_show_bb_post ae_btn btn btn-info"
-                >
-                <span class="fas fa-eye"></span> Show Hidden Sponsorships
-            </button>
-        {:else if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'all'}
-            <button
-                on:click={() => {
-                    $ae_app.sponsorships.hidden = 'not_hidden';
-                    $slct_trigger = 'load__sponsorship_obj_li';
-                }}
-                class="btn_hide_bb_post ae_btn btn btn-info"
-                >
-                <span class="fas fa-eye-slash"></span> Hide Hidden Sponsorships
-            </button>
-        {/if}
-
-        {#if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'enabled'}
-            <button
-                on:click={() => {
-                    $ae_app.sponsorships.hidden = 'all';
-                    $ae_app.sponsorships.enabled = 'all';
-                    $ae_app.sponsorships.limit = 500;
-                    $slct_trigger = 'load__sponsorship_obj_li';
-                }}
-                class="btn_show_bb_post ae_btn btn btn-warning"
-                >
-                <span class="fas fa-eye"></span> Show Disabled Sponsorships
-            </button>
-        {:else if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'all'}
-            <button
-                on:click={() => {
-                    $ae_app.sponsorships.enabled = 'enabled';
-                    $slct_trigger = 'load__sponsorship_obj_li';
-                }}
-                class="btn_hide_bb_post ae_btn btn btn-warning"
-                >
-                <span class="fas fa-eye-slash"></span> Hide Disabled Sponsorships
-            </button>
-        {/if}
-
-        <button
-            on:click={() => {
-                $slct.sponsorship_id = null;
-                $slct.sponsorship_obj = {};
-
-                const url = new URL(location);
-                url.searchParams.delete('sponsorship_id');
-                history.pushState({}, '', url);
-
-                $ae_app.sponsorships.show_main__options = false;
-                $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
-                $ae_app.sponsorships.show_view__sponsorship_obj = false;
-                $ae_app.sponsorships.show_edit__sponsorship_obj = true;
-
-                $ae_session.test.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
-                $ae_session.test_xyz.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
-            }}
-            class="btn_new_recovery_meeting ae_btn btn btn-secondary"
-            >
-                <span class="fas fa-plus"></span> Create new Sponsorship
-        </button>
-        </div>
-
-    </div> <!-- END: div filters_and_search -->
-
-</section>
-{/if}
-
-
-{#if $slct.sponsorship_obj_li && $ae_app.sponsorships.show_list__sponsorship_obj_li}
-    <List_sponsorship_obj />
-{/if}
-
-
-{#if $ae_app.sponsorships.show_edit__sponsorship_obj}
-<!-- <section class="ae_edit sponsorship_obj sponsorship_id ae_sponsorship_id_edit"> -->
-<Element_modal_v3
-        show = { true }
-        modal_cover_body = { false }
-        report_client_dimensions = { true }
-        on:close={ () => {
-            $ae_app.sponsorships.show_main__options = true;
-            $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
-            $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-            $ae_app.sponsorships.show_view__sponsorship_obj = false;
-
-            const url = new URL(location);
-            url.searchParams.delete('sponsorship_id');
-            history.pushState({}, '', url);
-
-            let message = {'sponsorship_id': null};
-            window.parent.postMessage(message, "*");
-        }}
-        on:report__modal_dimensions={ (event) => {
-            console.log('*** on:report__modal_dimensions ***');
-            console.log(event.detail);
-
-            $ae_app.modal_dimensions = event.detail.modal_dimensions;
-        }}
-        >
-    <span slot="header_title">{@html ($slct.sponsorship_obj.name ? $slct.sponsorship_obj.name : 'New Sponsorship')}</span>
-
-    <span slot="body">
-
-        <Edit_sponsorship_obj
-            on:created__meeting_obj={handle_created_sponsorship_obj}
-            on:updated__meeting_obj={handle_updated_sponsorship_obj}
-            on:deleted__meeting_obj={handle_deleted_sponsorship_obj}
-            />
-
-    </span>
-</Element_modal_v3>
-<!-- </section> -->
-{/if}
-
-
-{#if $ae_app.sponsorships.show_view__sponsorship_obj && $slct.sponsorship_obj}
-<!-- <section class="ae_view sponsorship_obj sponsorship_id ae_sponsorship_id_view"> -->
-<Element_modal_v3
-    show = { true }
-    modal_cover_body = { false }
-    report_client_dimensions = { true }
-    on:close={ () => {
-        $slct.sponsorship_id = null;
-        $slct.sponsorship_obj = {};
-
-        $ae_app.sponsorships.show_main__options = true;
-        $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
-        $ae_app.sponsorships.show_view__sponsorship_obj = false;
-        $ae_app.sponsorships.show_edit__sponsorship_obj = false;
-
-        const url = new URL(location);
-        url.searchParams.delete('sponsorship_id');
-        history.pushState({}, '', url);
-
-        let message = {'sponsorship_id': null};
-        window.parent.postMessage(message, "*");
-    }}
-    on:report__modal_dimensions={ (event) => {
-        console.log('*** on:report__modal_dimensions ***');
-        console.log(event.detail);
-
-        $ae_app.modal_dimensions = event.detail.modal_dimensions;
-    }}
-    >
-    <span slot="header_title">{@html $slct.sponsorship_obj.name}</span>
-
-    <span slot="body">
-
-        <View_sponsorship_obj />
-
-    </span>
-</Element_modal_v3>
-<!-- </section> -->
-{/if}
-
-</section>
-
-
-<style>
-
-
-/* .ae_meta {
-    font-size: smaller;
-    color: hsla(0,0%,50%,1);
-} */
-
-/* .ae_edit.sponsorship_obj {
-    border: dashed thin hsla(0,0%,70%,1);
-
-    margin: .5em .25em;
-    padding: .5em .25em;
-
-    background-color: hsla(0,0%,90%,1);
-} */
-
-/* .ae_view.sponsorship_obj {
-    border: dashed thin hsla(0,0%,70%,1);
-
-    margin: .5em .25em;
-    padding: .5em .25em;
-
-    background-color: hsla(0,0%,90%,1);
-} */
-
-/* :global(.ae_edit.sponsorship_id .element_ae_modal) {
-    border: dashed thin hsla(0,0%,70%,1);
-
-    margin: .5em .25em;
-    padding: .5em .25em;
-
-    background-color: hsla(0,0%,90%,1);
-} */
-
-</style>

src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 import type { SvelteComponent } from 'svelte';
 
+
+import { localStorageStore } from '@skeletonlabs/skeleton';
+import type { Writable } from 'svelte/store';
+const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
+// console.log(`store_current_tab:`, $store_current_tab);
+
 // Stores
 import { getModalStore, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 
@@ -41,15 +47,15 @@ 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 tabSet: number = 0;
+// let tab_set: string = 'start';
+let tab_set = $store_current_tab;
 </script>
 
 <!-- @component This is the Sponsorships modal edit form. -->
 
 {#if $modalStore[0]}
 <div class="modal-example-form {cBase}">
-    <header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
+    <header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header>
-    <article>{$modalStore[0].body ?? '(body missing)'}</article>
 
     <form class="modal-form {cForm}">
     <TabGroup
@@ -61,22 +67,22 @@ let tabSet: number = 0;
         border=""
         class="bg-surface-100-800-token w-full"
         >
-        <Tab bind:group={tabSet} name="tab1" value={0}>
+        <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={tabSet} name="tab2" value={1}>
+        <Tab bind:group={$store_current_tab} name="tab_gala_guests" value={'gala_guests'}>
             <svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
             Gala Guests
         </Tab>
-        <Tab bind:group={tabSet} name="tab3" value={2}>
+        <Tab bind:group={$store_current_tab} name="tab_options" value={'options'}>
             <svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
             More
         </Tab>
 
     <!-- Tab Panels --->
 	<svelte:fragment slot="panel">
-    {#if tabSet === 0}
+    {#if $store_current_tab === 'start'}
     <section class="ae_section sponsorship__contacts border border-gray-500/20 p-4">
         <fieldset class="sponsorship__poc_person flex flex-wrap gap-4">
             <legend class="legend">Point of Contact</legend>
@@ -164,7 +170,7 @@ let tabSet: number = 0;
         </label>
     </section>
 
-    {:else if tabSet === 1}
+    {: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}
@@ -203,10 +209,10 @@ let tabSet: number = 0;
 
     </section>
 
-    {:else if tabSet === 2}
+    {:else if $store_current_tab === 'options'}
 
     <section>
-        <label for="amount">Amount
+        <label for="amount">Additional amount?
             <div class="input-group grid-cols-[auto_1fr_auto]">
             <div class="input-group-shim">
                 <span>$</span>

src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte

@@ -46,7 +46,7 @@ onMount(() => {
 // console.log(adjusted_to_local_tz_v2);
 
 // Base Classes
-const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4';
+const cBase = 'card card-hover p-4 w-modal-wide shadow-xl space-y-4';
 const cHeader = 'card-header text-2xl font-bold';
 // const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
 </script>

src/routes/sponsorships/[slug]/+page.svelte

@@ -2,6 +2,8 @@
 export let data;
 console.log(`page data:`, data);
 
+import { onMount } from 'svelte';
+
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
@@ -25,6 +27,23 @@ const modal_edit__sponsorship_obj: ModalSettings = {
     title: 'Edit Your Sponsorship',
 };
 
+
+onMount(() => {
+    console.log('Sponsorships [New/Edit]: +page.svelte');
+
+    console.log(`$ae_loc = `, $ae_loc);
+
+	let url = window.location.href;
+	console.log(url);
+
+    $ae_loc.href_url = url;
+    console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
+});
+// console.log(`$ae_loc = `, $ae_loc);
+// $ae_loc.href_url = url;
+// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
+
+
 // $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
 
 $slct.sponsorship_id = data.url.searchParams.get('ae_id');