Dim locked Novi identity fields

src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte

@@ -10,6 +10,7 @@ let log_lvl: number = 0;
 
 // *** Import Svelte specific
 import { onMount, onDestroy, untrack } from 'svelte';
+import { goto } from '$app/navigation';
 
 // *** Import other supporting libraries
 import { liveQuery } from 'dexie';
@@ -90,6 +91,27 @@ let lq__post_comment_obj = $derived.by(() => {
     });
 });
 
+function clear_bb_edit_state() {
+    $idaa_sess.bb.edit__post_obj = false;
+    $idaa_loc.bb.edit__post_obj = false;
+    $idaa_sess.bb.show__inline_edit__post_obj = false;
+    $idaa_loc.bb.show__inline_edit__post_obj = false;
+    $idaa_sess.bb.show__inline_edit__post_comment_id = false;
+    $idaa_loc.bb.show__inline_edit__post_comment_id = false;
+    $idaa_sess.bb.obj_changed = false;
+}
+
+function handle_back_to_posts_list() {
+    if ($idaa_sess.bb.obj_changed) {
+        if (!confirm('You have unsaved changes. Are you sure you want to cancel?')) {
+            return;
+        }
+    }
+
+    clear_bb_edit_state();
+    void goto('/idaa/bb');
+}
+
 onMount(() => {
     console.log('Browser environment detected.');
 
@@ -186,8 +208,9 @@ onDestroy(() => {
         justify-evenly gap-2 border-b
         p-1 pb-2
         ">
-    <a
+    <button
-        href="/idaa/bb"
+        type="button"
+        onclick={handle_back_to_posts_list}
         class="
             novi_btn btn btn-secondary btn-sm
             preset-tonal-tertiary border-tertiary-500 hover:preset-filled-tertiary-500
@@ -197,7 +220,7 @@ onDestroy(() => {
         <span class="fas fa-arrow-left m-1 text-neutral-800/80"></span> Back to
         Posts List
         <!-- <span class="fas fa-times m-1"></span> View Other Meetings -->
-    </a>
+    </button>
 
     <!-- View (default)/Edit post_id toggle -->
     {#if $idaa_sess.bb.edit__post_obj}

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_comment_obj_id_edit.svelte

@@ -584,22 +584,28 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
             </fieldset>
 
             <div>
-                <label
+                <div class="form-group d-block block w-100">
-                    for="external_person_id"
+                    <span
-                    class="form-group d-block block w-100">
+                        class={$ae_loc.trusted_access
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                            ? 'text-sm text-gray-600 dark:text-gray-400'
+                            : 'text-xs font-medium opacity-80 text-gray-600 dark:text-gray-400'}>
                         <span class="fas fa-link"></span> Linked with Novi ID
                     </span>
                     {#if !$ae_loc.trusted_access}
-                        <span class="fas fa-lock" title="Field is locked"
+                        <span
-                        ></span>
+                            class="fas fa-lock text-xs opacity-70"
+                            title="Field is locked"></span>
+                        <div
+                            class="mt-1 w-96 rounded-md border border-dashed border-gray-300/70 bg-white/65 px-2.5 py-1.5 text-xs leading-snug text-gray-600 opacity-85 shadow-sm dark:border-gray-600/70 dark:bg-gray-800/45 dark:text-gray-300"
+                            style="overflow-wrap: anywhere; word-break: break-word;">
+                            <span class="fas fa-lock mr-2 opacity-60"></span>
+                            {post_comment_form.external_person_id ||
+                                '-- not set --'}
+                        </div>
                         <input
-                            type="text"
+                            type="hidden"
-                            id="external_person_id"
                             name="external_person_id"
-                            bind:value={post_comment_form.external_person_id}
+                            value={post_comment_form.external_person_id ?? ''} />
-                            readonly={true}
-                            class="input form-control w-96" />
                     {:else}
                         <div class="ae_highlight bg-yellow-100 p-2 text-sm">
                             Primary link using the Novi API UUID. This must be
@@ -617,16 +623,19 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
                             readonly={false}
                             class="input form-control w-96" />
                     {/if}
-                </label>
+                </div>
             </div>
 
             <div>
-                <label for="full_name" class="form-group d-block block w-75">
+                <div class="form-group d-block block w-75">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <span
+                        class={$ae_loc.trusted_access
+                            ? 'text-sm text-gray-600 dark:text-gray-400'
+                            : 'text-xs font-medium opacity-80 text-gray-600 dark:text-gray-400'}>
                         Name
                         {#if !$ae_loc.trusted_access}
                             <span
-                                class="fas fa-lock m-1"
+                                class="fas fa-lock m-1 text-xs opacity-70"
                                 title="Field is locked"></span>
                         {:else}
                             <span
@@ -634,14 +643,27 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
                                 title="Field is unlocked"></span>
                         {/if}
                     </span>
-                    <input
+                    {#if !$ae_loc.trusted_access}
-                        type="text"
+                        <div
-                        id="full_name"
+                            class="mt-1 w-96 rounded-md border border-dashed border-gray-300/70 bg-white/65 px-2.5 py-1.5 text-xs leading-snug text-gray-600 opacity-85 shadow-sm dark:border-gray-600/70 dark:bg-gray-800/45 dark:text-gray-300"
-                        name="full_name"
+                            style="overflow-wrap: anywhere; word-break: break-word;">
-                        bind:value={post_comment_form.full_name}
+                            <span class="fas fa-lock mr-2 opacity-60"></span>
-                        readonly={!$ae_loc.trusted_access}
+                            {post_comment_form.full_name || '-- not set --'}
-                        class="input form-control w-96" />
+                        </div>
-                </label>
+                        <input
+                            type="hidden"
+                            name="full_name"
+                            value={post_comment_form.full_name ?? ''} />
+                    {:else}
+                        <input
+                            type="text"
+                            id="full_name"
+                            name="full_name"
+                            bind:value={post_comment_form.full_name}
+                            readonly={!$ae_loc.trusted_access}
+                            class="input form-control w-96" />
+                    {/if}
+                </div>
             </div>
 
             {#if $ae_loc.trusted_access}

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte

@@ -820,24 +820,27 @@ $effect(() => {
             </fieldset>
 
             <div>
-                <label
+                <div class="form-group d-block block w-100">
-                    for="external_person_id"
+                    <span
-                    class="form-group d-block block w-100">
+                        class={$ae_loc.trusted_access
-                    <span class="text-surface-600-400 text-sm font-semibold">
+                            ? 'text-surface-600-400 text-sm font-semibold'
+                            : 'text-surface-600-400 text-xs font-medium opacity-80 dark:text-surface-400'}>
                         <span class="fas fa-link"></span> Linked with Novi ID
                     </span>
                     {#if !$ae_loc.trusted_access}
-                        <span class="fas fa-lock m-1" title="Field is locked"
+                        <span
-                        ></span>
+                            class="fas fa-lock m-1 text-xs opacity-70"
+                            title="Field is locked"></span>
+                        <div
+                            class="mt-1 w-96 rounded-md border border-dashed border-surface-300/70 bg-surface-100/60 px-2.5 py-1.5 text-xs leading-snug text-surface-600 opacity-85 shadow-sm dark:border-surface-600/70 dark:bg-surface-900/45 dark:text-surface-400"
+                            style="overflow-wrap: anywhere;">
+                            <span class="fas fa-lock mr-2 opacity-60"></span>
+                            {post_form.external_person_id || '-- not set --'}
+                        </div>
                         <input
-                            type="text"
+                            type="hidden"
-                            id="external_person_id"
                             name="external_person_id"
-                            bind:value={post_form.external_person_id}
+                            value={post_form.external_person_id ?? ''} />
-                            readonly={true}
-                            class="
-                        input preset-tonal-surface hover:preset-filled-surface-100-900 form-control w-96
-                        " />
                     {:else}
                         <div class="ae_highlight bg-yellow-100 p-2 text-sm">
                             Primary link using the Novi API UUID. This must be
@@ -855,16 +858,19 @@ $effect(() => {
                             readonly={!$ae_loc.administrator_access}
                             class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control w-96" />
                     {/if}
-                </label>
+                </div>
             </div>
 
             <div>
-                <label for="full_name" class="form-group d-block block w-75">
+                <div class="form-group d-block block w-75">
-                    <span class="text-surface-600-400 text-sm font-semibold">
+                    <span
+                        class={$ae_loc.trusted_access
+                            ? 'text-surface-600-400 text-sm font-semibold'
+                            : 'text-surface-600-400 text-xs font-medium opacity-80 dark:text-surface-400'}>
                         Name
                         {#if !$ae_loc.trusted_access}
                             <span
-                                class="fas fa-lock m-1"
+                                class="fas fa-lock m-1 text-xs opacity-70"
                                 title="Field is locked"></span>
                         {:else}
                             <span
@@ -872,14 +878,27 @@ $effect(() => {
                                 title="Field is unlocked"></span>
                         {/if}
                     </span>
-                    <input
+                    {#if !$ae_loc.trusted_access}
-                        type="text"
+                        <div
-                        id="full_name"
+                            class="mt-1 w-96 rounded-md border border-dashed border-surface-300/70 bg-surface-100/60 px-2.5 py-1.5 text-xs leading-snug text-surface-600 opacity-85 shadow-sm dark:border-surface-600/70 dark:bg-surface-900/45 dark:text-surface-400"
-                        name="full_name"
+                            style="overflow-wrap: anywhere;">
-                        bind:value={post_form.full_name}
+                            <span class="fas fa-lock mr-2 opacity-60"></span>
-                        readonly={!$ae_loc.trusted_access}
+                            {post_form.full_name || '-- not set --'}
-                        class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control w-96" />
+                        </div>
-                </label>
+                        <input
+                            type="hidden"
+                            name="full_name"
+                            value={post_form.full_name ?? ''} />
+                    {:else}
+                        <input
+                            type="text"
+                            id="full_name"
+                            name="full_name"
+                            bind:value={post_form.full_name}
+                            readonly={!$ae_loc.trusted_access}
+                            class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control w-96" />
+                    {/if}
+                </div>
             </div>
 
             {#if $ae_loc.trusted_access}