Trying to improve the sign in and passcode logic. Also related bug fixes with focus. Made Journal Entries marked as public visible to others.

src/lib/ae_stores.ts

@@ -346,6 +346,8 @@ let ae_app_session_data_defaults: key_val = {
     disable_sys_footer: false,
 
     sys_menu: {
+        expand: false,
+        focus_passcode_input: false,
     },
 
     debug_menu: {

src/lib/e_app_access_type.svelte

@@ -25,6 +25,7 @@ import { events_loc } from '$lib/ae_events_stores';
 interface Props {
     log_lvl?: number;
     hide?: null|boolean;
+    focus_input: boolean;
     expand?: boolean;
     show_passcode_input: boolean;
     trigger_clear_access: null|boolean;
@@ -33,6 +34,7 @@ interface Props {
 let {
     log_lvl = $bindable(0),
     hide = $bindable(false),
+    focus_input = $bindable(false),
     expand = $bindable(false),
     show_passcode_input = $bindable(false),
     trigger_clear_access = $bindable(null),
@@ -54,15 +56,16 @@ let trigger: null|string|boolean = $state(null);
 
 // WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time.
 onMount(() => {
+    log_lvl = 2;
     if (log_lvl > 1) {
         console.log('** Element Mounted: ** Element Access Type');
     }
     entered_passcode = '';
     trigger = null;
 
-    /** @type {HTMLElement | null} */
+    // /** @type {HTMLElement | null} */
-	const to_focus = document.getElementById('access_passcode_input');
+	// const to_focus = document.getElementById('access_passcode_input');
-	to_focus?.focus();
+	// to_focus?.focus();
 });
 
 onDestroy(() => {
@@ -122,11 +125,15 @@ $effect(() => {
 });
 
 // This does not seem to work. I feel like it should though...?
-$effect(async () => {
+$effect(() => {
-    if (show_passcode_input) {
+    if (!hide && focus_input) {
+        focus_input = false;
+        log_lvl = 2;
         // await tick();
         // document.getElementById('access_passcode_input')?.focus();
-        console.log('Effect: Setting focus on the passcode input field');
+        if (log_lvl > 1) {
+            console.log('Effect: Setting focus on the passcode input field');
+        }
         /** @type {HTMLElement | null} */
         const to_focus = document.getElementById('access_passcode_input');
         to_focus?.focus();

src/lib/e_app_sign_in_out.svelte

@@ -30,9 +30,9 @@ interface Props {
 }
 
 let {
-    log_lvl = 0,
+    log_lvl = $bindable(0),
     data = null,
-    hidden = true,
+    hidden = $bindable(true),
     }: Props = $props();
 
 

src/lib/e_app_sys_menu.svelte

@@ -249,7 +249,7 @@ max-w-max -->
 
                         if (!expand) {
                             expand = true;
-                            $ae_loc.sys_menu.expand = true;
+                            $ae_sess.sys_menu.expand = true;
                             $ae_loc.sys_menu.hide_access_type = false;
                             $ae_loc.sys_menu.expand_access_type = true;
                             // $ae_loc.sys_menu.expand_btn = false;
@@ -281,7 +281,7 @@ max-w-max -->
 
                         if (expand) {
                             $ae_loc.sys_menu.hide_access_type = false;
-                            $ae_loc.sys_menu.expand_access_type = false;
+                            // $ae_loc.sys_menu.expand_access_type = false;
                             expand = false;
 
                             // $ae_loc.sys_menu.expand = true;
@@ -322,14 +322,18 @@ max-w-max -->
                     onclick={async () => {
 
                         expand = true;
+                        $ae_sess.sys_menu.expand = true;
                         $ae_loc.sys_menu.hide_access_type = false;
                         $ae_loc.sys_menu.expand_access_type = true;
 
+                        $ae_sess.app_cfg.show_element__passcode_input = true;
+                        $ae_sess.sys_menu.focus_passcode_input = true;
+
                         // $ae_loc.sys_menu.expand = true;
                         // $ae_loc.sys_menu.expand_btn = false;
                         // $ae_loc.app_cfg.show_element__access_type = true;
                         // $ae_loc.app_cfg.show_element__passcode_input = true;
-                        await tick();
+                        // await tick();
                         console.log('Layout button click: Focus on passcode input!');
                         /** @type {HTMLElement | null} */
                         const to_focus = document.getElementById('access_passcode_input');
@@ -426,25 +430,29 @@ max-w-max -->
         onclick={async () => {
             if (!expand) {
                 expand = true;
+                $ae_sess.sys_menu.expand = true;
+
                 // $ae_loc.sys_menu.expand = true;
                 // $ae_loc.sys_menu.expand_btn = false;
                 $ae_loc.app_cfg.show_element__access_type = true;
 
                 if ($ae_loc?.access_type == 'anonymous') {
-                    $ae_sess.app_cfg.show_element__passcode_input = true;
+                    $ae_sess.sys_menu.focus_passcode_input = true;
+                    // $ae_sess.app_cfg.show_element__passcode_input = true;
                 } else {
-                    $ae_sess.app_cfg.show_element__passcode_input = false;
+                    // $ae_sess.app_cfg.show_element__passcode_input = false;
                     $ae_loc.sys_menu.expand_user = false; // Not in use yet
                     $ae_sess.show__sign_in_out__fields = false;
                 }
                 // $ae_loc.app_cfg.show_element__passcode_input = true;
-                await tick();
+                // await tick();
-                console.log('Layout button click: Focus on passcode input!');
+                // console.log('Layout button click: Focus on passcode input!');
-                /** @type {HTMLElement | null} */
+                // /** @type {HTMLElement | null} */
-                const to_focus = document.getElementById('access_passcode_input');
+                // const to_focus = document.getElementById('access_passcode_input');
-                to_focus?.focus();
+                // to_focus?.focus();
             } else {
                 expand = false;
+                $ae_sess.sys_menu.expand = false;
                 // $ae_loc.sys_menu.expand = false;
                 // $ae_loc.sys_menu.expand_btn = true;
                 // $ae_loc.app_cfg.show_element__passcode_input = false;
@@ -522,11 +530,14 @@ max-w-max -->
         onclick={() => {
             if (!expand) {
                     expand = true;
-                    $ae_loc.sys_menu.expand = true;
+                    $ae_sess.sys_menu.expand = true;
                     // $ae_loc.sys_menu.expand_btn = false;
                     // $ae_loc.sys_menu.expand_access_type = true;
+
+                    // $ae_sess.app_cfg.show_element__passcode_input = true;
+                    $ae_sess.sys_menu.focus_passcode_input = true;
                 } else {
-                    $ae_loc.sys_menu.expand = false;
+                    $ae_sess.sys_menu.expand = false;
                     $ae_loc.sys_menu.expand_user = false; // Not in use yet
                     $ae_sess.show__sign_in_out__fields = false;
                     // $ae_loc.sys_menu.expand_btn = true;
@@ -570,9 +581,9 @@ max-w-max -->
     <!-- {/if} -->
 
     {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
+    <!-- hide={$ae_loc.sys_menu.hide_user} -->
+    <!-- expand={$ae_loc.sys_menu.expand_user} -->
     <Element_sign_in_out
-        hide={$ae_loc.sys_menu.hide_user}
-        expand={$ae_loc.sys_menu.expand_user}
         data={data}
         hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
         />
@@ -582,6 +593,7 @@ max-w-max -->
     <!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
     <Element_access_type
         bind:hide={$ae_loc.sys_menu.hide_access_type}
+        bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
         bind:expand={$ae_loc.sys_menu.expand_access_type}
         bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
         bind:trigger_clear_access={trigger_clear_access}

src/routes/+layout.svelte

@@ -114,7 +114,7 @@ let flag_denied: boolean = $state(false); // Access Denied
 if (!$ae_loc?.sys_menu) {
     $ae_loc.sys_menu = {
         hide: false,
-        expand: false,
+        // expand: false,
         hide_access_type: false,
         expand_access_type: false,
         hide_edit_mode: false,
@@ -1136,7 +1136,7 @@ email = ${$ae_loc?.email}
         <E_app_sys_menu
             data={data}
             bind:hide={$ae_loc.sys_menu.hide}
-            bind:expand={$ae_loc.sys_menu.expand}
+            bind:expand={$ae_sess.sys_menu.expand}
             />
 
         <!-- The app debug menu -->

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

@@ -298,7 +298,7 @@ async function handle_update_journal() {
             <FilePlus />
             <!-- <span class="fas fa-plus m-1"></span> -->
             <span class="hidden sm:inline">
-                New Journal Entry
+                New Entry
             </span>
         </button>
 
@@ -383,7 +383,7 @@ async function handle_update_journal() {
 
         <!-- Give list of categories to base the new entry on -->
         <span class="flex flex-row items-center gap-2">
-            <span class="text-sm text-gray-500 hidden sm:inline">
+            <span class="text-sm text-gray-500 hidden md:inline">
                 Category:
             </span>
             <select

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

@@ -141,7 +141,7 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
 </svelte:head> -->
 
 
-{#if $ae_loc.person_id == $lq__journal_obj?.person_id}
+{#if $ae_loc.person_id == $lq__journal_obj?.person_id || $lq__journal_entry_obj?.public}
 <section
     class="
         ae_journals__journal_entry