Sponsorships and Speakers are working and looking pretty well. Other general clean up.

src/routes/sponsorships/+page.svelte

@@ -7,6 +7,7 @@ console.log(`Svelte Sponsorships page data:`, data);
 // import type { Writable } from 'svelte/store';
 // const store_current_page: Writable<string> = localStorageStore('store_current_page', 'start');
 
+// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
 // To retrieve the store, getModalStore must be invoked at the top level of your component!
 import { getDrawerStore, getModalStore, ProgressRadial } from '@skeletonlabs/skeleton';
 import type {
@@ -19,34 +20,45 @@ const modalStore = getModalStore();
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
-
+import type { key_val } from '$lib/ae_stores';
 
 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';
 
-type key_val = {
-    [key: string]: any;
-};
 
 // Editing
-const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
+const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
 
 const modal_edit__sponsorship_obj: ModalSettings = {
 	type: 'component',
 	component: modalComponentEditSponsorshipObj,
     title: 'Edit Sponsorship',
     position: '', // default is "items-center"
+
+    // Provide arbitrary classes to the backdrop and modal elements:
+	// backdropClasses: '!bg-green-500',
+    // modalClasses: 'w-modal-wide',
+
+    // Provide arbitrary metadata to your modal instance:
+    // meta: { fn: do_something_function }
 };
 
 // Viewing
-const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
+const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
 
 const modal_view__sponsorship_obj: ModalSettings = {
 	type: 'component',
 	component: modalComponentViewSponsorshipObj,
     title: 'Viewing Sponsorship',
     position: '', // default is "items-center"
+
+    // Provide arbitrary classes to the backdrop and modal elements:
+	// backdropClasses: '!bg-green-500',
+    // modalClasses: 'w-modal-wide',
+
+    // Provide arbitrary metadata to your modal instance:
+    // meta: { fn: do_something_function }
 };
 
 // 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.
@@ -59,13 +71,27 @@ $ae_loc.site_domain = data.url.origin;
 $: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
     console.log('Show Modal Edit');
     $slct_trigger = null;
+
+    let location = window.location.href;
+    const url = new URL(location);
+    url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
+    history.pushState({}, '', url);
+
     // $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
+    // modalStore.clear();
     modalStore.trigger(modal_edit__sponsorship_obj);
 }
 $: if ($slct_trigger == 'show_view__sponsorship_obj' && $ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
     console.log('Show Modal View');
     $slct_trigger = null;
+
+    let location = window.location.href;
+    const url = new URL(location);
+    url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
+    history.pushState({}, '', url);
+
     // $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
+    // modalStore.clear();
     modalStore.trigger(modal_view__sponsorship_obj);
 }
 

src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte

@@ -29,6 +29,8 @@ import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeleton
 // Props
 /** Exposes parent props to this component. */
 export let parent: SvelteComponent;
+export let container_class_li = '';
+export let container_header_class_li = '';
 
 const modalStore = getModalStore();
 
@@ -36,10 +38,7 @@ const modalStore = getModalStore();
 import { ae_util } from '$lib/ae_utils';
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
-
-type key_val = {
-    [key: string]: any;
-};
+import type { key_val } from '$lib/ae_stores';
 
 
 onMount(() => {
@@ -460,8 +459,8 @@ async function handle_update__sponsorship({
 <!-- @component This is the Sponsorships modal edit form. -->
 
 {#if $modalStore[0]}
-<div class="modal-example-form {cBase}">
-    <header class={cHeader}>
+<div class="svelte_component ae_edit_modal ae_obj__sponsorship {container_class_li}">
+    <header class={container_header_class_li}>
         {$modalStore[0].title ?? '-- No Title --'}
 
         {#await ae_promises.update__sponsorship_obj}

src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte

@@ -11,7 +11,9 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 // Props
 /** Exposes parent props to this component. */
 export let parent: SvelteComponent;
-
+console.log(`Parent:`, parent);
+export let container_class_li = '';
+export let container_header_class_li = '';
 
 // const dispatch = createEventDispatcher();
 
@@ -26,32 +28,13 @@ onMount(() => {
     console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
 });
 
-
-// dayjs.extend(window.dayjs_plugin_utc)
-// dayjs.extend(window.dayjs_plugin_timezone);
-// console.log(`UTC offset: ${dayjs().utcOffset()}`);
-// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
-// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
-// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
-// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
-// console.log(test_time.format('YYYY-MM-DD HH:mm'));
-// let adjusted_to_local_tz = test_time.tz('America/New_York');
-// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
-
-// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
-// console.log(adjusted_to_local_tz_v2);
-
-// Base Classes
-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>
 
 <!-- @component This is the Sponsorships modal view form. -->
 
-<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {cBase}">
+<section class="svelte_component ae_view_modal ae_obj__sponsorship_obj {container_class_li}">
 
-<header class={cHeader}>{@html $slct.sponsorship_obj.name}</header>
+<header class={container_header_class_li}>{@html $slct.sponsorship_obj.name}</header>
 
 <div class="sponsorship__content">
     <div
@@ -158,9 +141,10 @@ const cHeader = 'card-header text-2xl font-bold';
                     // $ae_loc.mod.sponsorships.show_main__options = true;
                     // $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
                     // $slct_trigger = 'load__sponsorship_obj';
-
                     $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                     $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+                    parent.onClose();
+                    $slct_trigger = 'show_edit__sponsorship_obj';
                 }}
                 class="btn variant-filled"
                 title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
@@ -169,7 +153,20 @@ const cHeader = 'card-header text-2xl font-bold';
             </button>
         </div>
     {/if}
-    <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
+    <button
+        class="btn {parent.buttonNeutral}"
+        on:click={() => {
+
+            let location = window.location.href;
+            const url = new URL(location);
+            url.searchParams.delete('sponsorship_id');
+            history.pushState({}, '', url);
+
+            parent.onClose();
+        }}
+        >
+        {parent.buttonTextCancel}
+    </button>
 </footer>
 
 </section>

src/routes/sponsorships/[slug]/+layout.ts

@@ -0,0 +1,107 @@
+/** @type {import('./$types').LayoutLoad} */
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import { get } from 'svelte/store';
+
+type key_val = {
+    [key: string]: any; // variable key
+    // name: string;
+};
+
+
+async function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
+    console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
+
+    if (!code) {
+        console.log('No code provided.');
+        return;
+    }
+
+    let data_store_obj_get_promise = api.get_data_store_obj_w_code({
+        api_cfg: get(ae_api),
+        data_store_code: code,
+        data_type: data_type,
+        log_lvl: 0
+        })
+    .then(function (get_data_store_result) {
+        let return_this = null;
+        if (get_data_store_result) {
+
+            if (data_type == 'text') {
+                // console.log(get_data_store_result.text);
+                return_this = get_data_store_result.text;
+            } else if (data_type == 'json') {
+                // console.log(get_data_store_result.json);
+                return_this = get_data_store_result.json;
+            }
+
+        } else {
+            console.log('No results returned.');
+            return_this = null;
+        }
+        return return_this;
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return data_store_obj_get_promise;
+}
+
+
+export async function load({ params, url }) { // route
+    // console.log(`Svelte Sponsorships layout.ts data = params:`, params);
+    // console.log(`Svelte Sponsorships layout.ts data = route:`, route);
+    // console.log(`Svelte Sponsorships layout.ts data = url:`, url);
+
+    let ae_loc_tmp = get(ae_loc);
+    console.log(`ae_loc = `, ae_loc_tmp);
+
+    let ds_code_li: null|key_val = ae_loc_tmp.ds;
+    console.log(`ae_ ds_code_li = `, ds_code_li);
+    let ds_code: null|string = null;
+
+
+    let data_struct = {
+        ae_init: ae_loc_tmp,
+        params: params,
+        sections: [
+			{ slug: 'new', title: 'New Sponsorship' },
+			{ slug: 'manage', title: 'Manage' },
+            { slug: 'test', title: 'Test' },
+		],
+        url: url,
+
+    };
+
+    let loading_results = null;
+
+    ds_code = 'hub__page__sponsorships__create_info';
+    loading_results = await handle_get_data_store_obj_w_code({ code: ds_code })
+    .then( function (ds_hub_page_sponsorships_create_info_results) {
+        if (ds_hub_page_sponsorships_create_info_results) {
+            console.log(`ae_ hub__page__sponsorships__create_info = `, ds_hub_page_sponsorships_create_info_results);
+            // let ae_loc_tmp = get(ae_loc);
+
+            ds_code_li[ds_code] = ds_hub_page_sponsorships_create_info_results;
+
+            // ae_loc.set(ae_loc_tmp);
+            // console.log(`ae_loc = `, get(ae_loc));
+        }
+    })
+    .finally(function () {
+        console.log(`ae_ ds_code_li = `, ds_code_li);
+        ae_loc_tmp = {
+            ...ae_loc_tmp,
+            'ds': ds_code_li,
+        }
+        console.log(`ae_loc_tmp = `, ae_loc_tmp);
+
+        ae_loc.set(ae_loc_tmp);
+        console.log(`ae_loc = `, get(ae_loc));
+    });
+
+
+    return data_struct;
+}

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

@@ -175,11 +175,21 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
     class="container h-full mx-auto"
     >
 
+{#if $ae_loc.ds.hub__page__sponsorships__create_info}
+{@html $ae_loc.ds.hub__page__sponsorships__create_info}
+{:else}
+
 <header>
     <h1 class="h1">Information Goes Here</h1>
 </header>
 
-<section>More information goes here.</section>
+<section>
+        <div class="alert alert-info">
+            More information goes here.
+        </div>
+</section>
+
+{/if}
 
 <!-- <section class="btn btn-group"> -->
     <button