Working on update a lot of pages using the ae_loc hub section.

README_guidelines.md

@@ -0,0 +1,61 @@
+# One Sky IT's Aether App - UI and UX Guidelines and Rules
+
+
+## General
+### Events
+#### layout header
+#### layout footer
+
+### Journals
+#### buttons
+##### alert
+
+##### info
+
+##### priority, flag
+
+##### warning, hide
+```css
+variant-soft-warning hover:variant-filled-warning
+```
+##### error, delete, disable
+```css
+variant-soft-error hover:variant-filled-error
+```
+#### new root layout header
+#### submenu
+```css
+flex flex-row items-center justify-center gap-1
+```
+#### new layout footer
+
+
+## Svelte 5 and SvelteKit v2 (framework and routing)
+
+
+## Tailwind 3.x CSS (styles)
+Waiting to upgrade to 4.x when ShadCN is ready. ShadCN is still being worked on as of late March 2025.
+* https://ui.shadcn.com/docs/tailwind-v4
+
+
+## ShadCN (Tailwind Components)
+* https://github.com/shadcn-ui/ui
+
+
+## Skeleton (Design System, Tailwind Components, Functional Components)
+
+
+## Flowbite (Tailwind Components)
+
+
+## Lucide Icons (SVG Icons)
+* https://lucide.dev/icons/
+
+
+## Markdown
+Using marked for Markdown parsing.
+* https://marked.js.org/
+
+
+## Edra (TipTap based Rich Text Editor)
+* https://edra.tsuzat.com/

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ae-app-svelte5",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ae-app-svelte5",
-      "version": "0.2.4",
+      "version": "0.2.6",
       "dependencies": {
         "@floating-ui/dom": "^1.6.0",
         "@lucide/svelte": "^0.483.0",
@@ -4319,9 +4319,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "5.0.3",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.0.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "integrity": "sha512-L3LqPjnn4+m1ZNFBXo9QdXQhbfLwmcd+6IttT5hn821zDelhfaGLsVIEXJX0M5vJwc3NzA7zm1p5bFo8kDfn8A==",
       "dev": true,
       "license": "MIT"
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ae-app-svelte5",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/ae_core/ae_core_functions.ts

@@ -84,7 +84,7 @@ async function handle_load_ae_obj_id__site_domain(
 
     let params = {};
 
-	// ae_loc.hub.site_domain_id_qry_status = 'loading';
+	// ae_sess.hub.site_domain_id_qry_status = 'loading';
     ae_promises.load__site_domain_obj = api.get_ae_obj_id_crud({
         api_cfg: api_cfg,
         no_account_id: no_account_id,

src/lib/ae_stores.ts

@@ -57,6 +57,8 @@ export let ae_app_local_data_struct: key_val = {
     ver_idb: '2024-10-16_1540', // Clear if date IndexedDB version
     name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
     theme: 'light',
+    theme_mode: 'light',
+    theme_name: 'wintry', // wintry
     iframe: false,
     title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
 
@@ -112,6 +114,18 @@ export let ae_app_local_data_struct: key_val = {
         show_element__sql_qry_results: false,
     },
 
+    app_cfg: {
+        show_element__access_type: true,
+        show_element__cfg: true,
+        show_element__cfg_detail: false,
+        show_opt__debug: true,
+        show_opt__permissions: true,
+        show_opt__reset: true,
+        show_opt__sync: true,
+        show_opt__theme: true,
+        show_opt__utilities: true,
+    },
+
     files: {
         processed_file_kv: {},
         uploaded_file_kv: {},
@@ -233,6 +247,14 @@ export let ae_app_session_data_struct: key_val = {
 
     'hub': {
         'show_xyz': null,
+        'account_id_qry_status': null,
+        'event_badge_id_status_qry__search': null,
+        'event_presenter_id_qry_status': null,
+        'site_domain_id_qry_status': null,
+        'sponsorship_id_qry_status': null,
+        'sponsorship_cfg_id_qry_status': null,
+
+        'qr': {},
     },
     'mod': {
         'archives': {},

src/lib/element_access_type.svelte

@@ -122,14 +122,14 @@ function handle_check_access_type_passcode() {
 
         // WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes.
         if (!$ae_loc.iframe && $ae_loc.authenticated_access) {
-            $ae_loc.hub.show_element__access_type = true;
+            $ae_loc.app_cfg.show_element__access_type = true;
-            $ae_loc.hub.show_element__cfg = true;
+            $ae_loc.app_cfg.show_element__cfg = true;
         } else if ($ae_loc.iframe && $ae_loc.trusted_access) {
-            $ae_loc.hub.show_element__access_type = true;
+            $ae_loc.app_cfg.show_element__access_type = true;
-            $ae_loc.hub.show_element__cfg = true;
+            $ae_loc.app_cfg.show_element__cfg = true;
         } else {
-            $ae_loc.hub.show_element__access_type = true;
+            $ae_loc.app_cfg.show_element__access_type = true;
-            $ae_loc.hub.show_element__cfg = false;
+            $ae_loc.app_cfg.show_element__cfg = false;
         }
 
         // dispatch_access_type_changed();

src/lib/element_app_cfg.svelte

@@ -26,23 +26,23 @@ onMount(() => {
     }
 });
 
-// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.hub?.theme_mode) {
+// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
-//     console.log(`$ae_loc.hub.theme_mode=${$ae_loc?.hub?.theme_mode}`);
+//     console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
 //     $slct_trigger = null;
-//     if ($ae_loc.hub.theme_mode == 'light') {
+//     if ($ae_loc.app_cfg.theme_mode == 'light') {
 //         document.documentElement.classList.remove('dark');
 //         document.documentElement.classList.add('light');
-//     } else if ($ae_loc.hub.theme_mode == 'dark') {
+//     } else if ($ae_loc.app_cfg.theme_mode == 'dark') {
 //         document.documentElement.classList.remove('light');
 //         document.documentElement.classList.add('dark');
 //     }
 // }
 
-// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.hub?.theme_name) {
+// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.app_cfg?.theme_name) {
-//     console.log(`$ae_loc?.hub?.theme_name=${$ae_loc?.hub?.theme_name}`);
+//     console.log(`$ae_loc?.app_cfg?.theme_name=${$ae_loc?.app_cfg?.theme_name}`);
 //     $slct_trigger = null;
 //     // Update the body attribute named "data-theme" to the current theme name.
-//     document.body.setAttribute('data-theme', $ae_loc?.hub?.theme_name);
+//     document.body.setAttribute('data-theme', $ae_loc?.app_cfg?.theme_name);
 // }
 
 // $: if (entered_passcode && entered_passcode.length >= 5) {
@@ -95,7 +95,7 @@ function handle_clear_storage(item: null|string) {
 
 <div
     class="ae_cfg_content text-xs space-y-4 my-4"
-    class:hidden={!$ae_loc.hub.show_element__cfg_detail}
+    class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
     data-sveltekit-preload-data="false"
     >
 
@@ -149,7 +149,7 @@ function handle_clear_storage(item: null|string) {
         on:change={() => {
             $slct_trigger = 'set_theme_mode';
         }}
-        bind:group={$ae_loc.hub.theme_mode}
+        bind:group={$ae_loc.app_cfg.theme_mode}
         name="theme_light"
         value={'light'}
         >
@@ -159,7 +159,7 @@ function handle_clear_storage(item: null|string) {
         on:change={() => {
             $slct_trigger = 'set_theme_mode';
         }}
-        bind:group={$ae_loc.hub.theme_mode}
+        bind:group={$ae_loc.app_cfg.theme_mode}
         name="theme_dark"
         value={'dark'}
         >
@@ -174,7 +174,7 @@ function handle_clear_storage(item: null|string) {
     on:change={() => {
         $slct_trigger = 'set_theme_name';
     }}
-    bind:value={$ae_loc.hub.theme_name}
+    bind:value={$ae_loc.app_cfg.theme_name}
     class="select"
     title="Theme name"
     >
@@ -269,7 +269,7 @@ function handle_clear_storage(item: null|string) {
 <button
     class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
     on:click={() => {
-        $ae_loc.hub.show_element__cfg_detail = !$ae_loc.hub.show_element__cfg_detail;
+        $ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
     }}
     >
     <span class="fas fa-cog mx-1"></span>

src/routes/+layout.svelte

@@ -317,8 +317,8 @@ if (browser) {
         // document.getElementsByTagName('html')[0].classList.remove('dark');
         // document.getElementsByTagName('html')[0].classList.remove('light');
 
-        $ae_loc.hub.show_element__access_type = false;
+        $ae_loc.app_cfg.show_element__access_type = false;
-        $ae_loc.hub.show_element__cfg = false;
+        $ae_loc.app_cfg.show_element__cfg = false;
     } else if (iframe == 'false') {
         $ae_loc.iframe = false;
 
@@ -328,14 +328,14 @@ if (browser) {
     }
 
 	if (!$ae_loc.iframe && $ae_loc.trusted_access) {
-        $ae_loc.hub.show_element__access_type = true;
+        $ae_loc.app_cfg.show_element__access_type = true;
-        $ae_loc.hub.show_element__cfg = true;
+        $ae_loc.app_cfg.show_element__cfg = true;
     } else if ($ae_loc.iframe && $ae_loc.manager_access) {
-        $ae_loc.hub.show_element__access_type = true;
+        $ae_loc.app_cfg.show_element__access_type = true;
-        $ae_loc.hub.show_element__cfg = true;
+        $ae_loc.app_cfg.show_element__cfg = true;
     } else {
-        $ae_loc.hub.show_element__access_type = true;
+        $ae_loc.app_cfg.show_element__access_type = true;
-        $ae_loc.hub.show_element__cfg = false;
+        $ae_loc.app_cfg.show_element__cfg = false;
     }
 
 
@@ -422,20 +422,23 @@ $effect(() => {
 
 
 
-{#if $ae_loc.hub?.show_element__access_type}
+{#if $ae_loc.app_cfg?.show_element__access_type}
 <Element_access_type
     hidden={$ae_loc.iframe  && !$ae_loc.trusted_access}
     />
 {/if}
 
 
+<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
 <span
-    class:hidden={!$ae_loc?.hub?.show_element__cfg}
+    class:hidden={!$ae_loc?.app_cfg?.show_element__cfg}
     >
-<!-- {#if $ae_loc?.hub?.show_element__cfg} -->
+<Element_app_cfg
-<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
+    set_theme_mode={true}
-<!-- {/if} -->
+    set_theme_name={true}
+    />
 </span>
+<!-- {/if} -->
 
 
 <div

src/routes/admin/+page.svelte

@@ -139,7 +139,7 @@ onMount(() => {
     as_list={true}
     />
 {/if}
-<!-- {#if $ae_loc.admin.show_element__cfg_detail} -->
+<!-- {#if $ae_loc.app_cfg.show_element__cfg_detail} -->
 
 
 

src/routes/events_badges/review/+page.svelte

@@ -106,7 +106,7 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal
 
     let params = {};
 
-	// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
+	// $ae_sess.hub.event_badge_id_status_qry__search = 'loading';
     ae_event_badge_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'event_badge',

src/routes/events_badges/stats/+page.svelte

@@ -113,7 +113,7 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal
 
     let params = {};
 
-	// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
+	// $ae_sess.hub.event_badge_id_status_qry__search = 'loading';
     ae_event_badge_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'event_badge',

src/routes/events_speakers/+page.svelte

@@ -282,7 +282,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
 
     let params = {};
 
-    // $ae_loc.hub.event_presenter_id_qry_status = 'loading';
+    // $ae_sess.hub.event_presenter_id_qry_status = 'loading';
     ae_event_presenter_obj_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'event_presenter',

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

@@ -179,7 +179,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
 
     let params = {};
 
-	// $ae_loc.hub.event_presenter_id_qry_status = 'loading';
+	// $ae_sess.hub.event_presenter_id_qry_status = 'loading';
     ae_event_presenter_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'event_presenter',

src/routes/idaa/(idaa)/+layout.svelte

@@ -102,8 +102,8 @@ if (browser && iframe == 'true') {
     // document.getElementsByTagName('html')[0].classList.remove('dark');
     // document.getElementsByTagName('html')[0].classList.remove('light');
 
-    // $ae_loc.hub.show_element__access_type = false;
+    // $ae_loc.app_cfg.show_element__access_type = false;
-    // $ae_loc.hub.show_element__cfg = false;
+    // $ae_loc.app_cfg.show_element__cfg = false;
 } else if (browser && iframe == 'false') {
     // data_struct['iframe'] = false;
     $ae_loc.iframe = false;

src/routes/journals/+layout.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutProps} */
-let { data, children } = $props();
 
-// Imports
+// *** Import Svelte specific
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 
+// *** Import other supporting libraries
+// import * as icons from '@lucide/svelte';
+import { House } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 // import { api } from '$lib/api';
@@ -15,6 +19,13 @@ import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
 
+// *** Setup Svelte properties
+interface Props {
+    data: any;
+    children: any;
+}
+let { data, children }: Props = $props();
+
 $journals_loc.qry__enabled = 'enabled';
 $journals_loc.qry__hidden = 'not_hidden';
 $journals_loc.qry__limit = 15;
@@ -57,8 +68,14 @@ if (browser) {
 <!-- These are needed: h-full overflow-auto -->
 <div class="ae_journals">
 
-<nav class="submenu flex flex-row items-centr justify-center gap-1">
+<nav class="submenu flex flex-row items-center justify-center gap-1">
-    <a href="/" class="btn btn-sm variant-ghost-success hover:variant-filled-success">Home</a>
+    <a
+        href="/"
+        class="btn btn-sm variant-ghost-success hover:variant-filled-success"
+        >
+        <House />
+        Home
+    </a>
     <!-- <a href="/about" class="btn btn-sm">About</a> -->
     <!-- <a href="/settings" class="btn btn-sm">Settings</a> -->
     <button

src/routes/journals/[journal_id]/+layout.svelte

@@ -92,7 +92,8 @@ async function handle_update_journal() {
     class="
         ae_journals__journal
         container h-full mx-auto
-        flex flex-col gap-1
+        flex flex-col
+        gap-1
         py-1 px-2 pb-16
         items-center
         min-w-full
@@ -101,7 +102,16 @@ async function handle_update_journal() {
     >
 
 
-<div class="flex flex-row items-center justify-between w-full border-gray-200 border-y-2 py-2">
+<div
+    class="
+        flex flex-row flex-wrap
+        gap-1
+        items-center justify-between
+        border-gray-200 border-y-
+        w-full
+        py-2
+        "
+    >
     <a href="/journals"
         class="
             btn btn-sm

src/routes/journals/[journal_id]/+page.svelte

@@ -6,10 +6,9 @@ let log_lvl: number = 0;
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 
+// *** Import other supporting libraries
 // import * as icons from '@lucide/svelte';
 import { BookHeart, FilePlus } from '@lucide/svelte';
-
-// *** Import other supporting libraries
 import { Modal } from 'flowbite-svelte';
 import { liveQuery } from "dexie";
 

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -281,7 +281,7 @@ $effect(() => {
 </header>
 
     <div
-        class="flex flex-row gap-2 items-center justify-evenly w-full max-w-sm"
+        class="flex flex-row flex-wrap gap-1 items-center justify-evenly w-full max-w-sm"
         >
         <!-- Entry alert status -->
         <button
@@ -591,7 +591,7 @@ $effect(() => {
     {@html test_html}
 </div> -->
 
-<div class="ae_meta flex flex-row flex-wrap gap-2 items-center justify-between w-full">
+<div class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
 <!-- {$lq__journal_entry_obj?.priority}
 {$lq__journal_entry_obj?.sort}
 {$lq__journal_entry_obj?.group}

src/routes/sponsorships/+page.svelte

@@ -257,7 +257,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
 
     let params = {};
 
-	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+	// $ae_sess.hub.sponsorship_id_qry_status = 'loading';
     ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'sponsorship',

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

@@ -113,7 +113,7 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
 
     let params = {};
 
-	// $ae_loc.hub.sponsorship_cfg_id_qry_status = 'loading';
+	// $ae_sess.hub.sponsorship_cfg_id_qry_status = 'loading';
     ae_sponsorship_cfg_obj_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'sponsorship_cfg',
@@ -178,7 +178,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
 
     let params = {};
 
-	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+	// $ae_sess.hub.sponsorship_id_qry_status = 'loading';
     ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'sponsorship',

src/routes/testing/+page.svelte

@@ -35,7 +35,7 @@ async function handle_load_ae_account_obj_id({account_id, try_cache=false}) {
 
     let params = {};
 
-	$ae_loc.hub.account_id_qry_status = 'loading';
+	$ae_sess.hub.account_id_qry_status = 'loading';
     ae_account_obj_get_promise = api.get_ae_obj_id_crud({
         api_cfg: $ae_api,
         obj_type: 'account',