From 613e43114cae5e2dbb5fa994f2e6afa7ae582776 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 25 Mar 2026 11:39:24 -0400
Subject: [PATCH] fix(idaa): correct reactive loop fix + hide clutter in iframe
 sys bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Replace incorrect untrack() with idempotent write guard in the
   sys_menu trusted-access effect. untrack() prevents new dep reads but
   ae_loc was already tracked from the outer condition reads, so the write
   still re-notified the effect every run. The guard (only write if value
   != false) breaks the cycle: run 2 finds value already false, skips the
   write, effect stops. Max 2 runs vs the previous infinite loop.

2. Hide auth shield, font-size cycler, and dark/light toggle in the sys
   bar when in iframe mode — host page owns those concerns. Edit mode
   toggle and the main expand button remain visible for staff.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/app_components/e_app_sys_bar.svelte | 132 ++++++++++----------
 src/routes/idaa/+layout.svelte              |  14 ++-
 2 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index 2e27455c..4b960b21 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -593,73 +593,79 @@ const theme_options = [
                 dark:border-gray-700/60 dark:bg-gray-900/30
             "
             class:border-primary-400={expand}>
-            <!-- AUTH STATUS SHIELD ───────────────────────────────────────── -->
-            <button
-                type="button"
-                class="
-                    btn btn-sm group/shield transition-all duration-200
-                    {$ae_loc?.access_type &&
-                $ae_loc?.access_type !== 'anonymous'
-                    ? $ae_loc?.user_access_type &&
-                      $ae_loc?.access_type === $ae_loc?.user_access_type
-                        ? 'variant-outline-surface hover:variant-ghost-warning'
-                        : 'variant-outline-warning hover:variant-ghost-warning'
-                    : 'variant-outline-surface hover:variant-ghost-success'}
-                "
-                onclick={handle_shield_click}
-                title={$ae_loc?.access_type &&
-                $ae_loc?.access_type !== 'anonymous'
-                    ? $ae_loc?.user_access_type &&
-                      $ae_loc?.access_type === $ae_loc?.user_access_type
-                        ? `Access: ${$ae_loc?.access_type}. Click to use a passcode.`
-                        : `Elevated access: ${$ae_loc?.access_type}. Click to clear.`
-                    : 'Anonymous. Click to sign in or enter a passcode.'}>
-                {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
-                    {#if $ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type}
-                        <ShieldEllipsis size="1.1em" class="shrink-0" />
+            <!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context -->
+            {#if !$ae_loc?.iframe}
+                <button
+                    type="button"
+                    class="
+                        btn btn-sm group/shield transition-all duration-200
+                        {$ae_loc?.access_type &&
+                    $ae_loc?.access_type !== 'anonymous'
+                        ? $ae_loc?.user_access_type &&
+                          $ae_loc?.access_type === $ae_loc?.user_access_type
+                            ? 'variant-outline-surface hover:variant-ghost-warning'
+                            : 'variant-outline-warning hover:variant-ghost-warning'
+                        : 'variant-outline-surface hover:variant-ghost-success'}
+                    "
+                    onclick={handle_shield_click}
+                    title={$ae_loc?.access_type &&
+                    $ae_loc?.access_type !== 'anonymous'
+                        ? $ae_loc?.user_access_type &&
+                          $ae_loc?.access_type === $ae_loc?.user_access_type
+                            ? `Access: ${$ae_loc?.access_type}. Click to use a passcode.`
+                            : `Elevated access: ${$ae_loc?.access_type}. Click to clear.`
+                        : 'Anonymous. Click to sign in or enter a passcode.'}>
+                    {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
+                        {#if $ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type}
+                            <ShieldEllipsis size="1.1em" class="shrink-0" />
+                        {:else}
+                            <ShieldMinus size="1.1em" class="shrink-0" />
+                        {/if}
                     {:else}
-                        <ShieldMinus size="1.1em" class="shrink-0" />
+                        <ShieldUser size="1.1em" class="shrink-0" />
                     {/if}
-                {:else}
-                    <ShieldUser size="1.1em" class="shrink-0" />
-                {/if}
-                <span
-                    class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
-                    {access_label ?? 'Auth?'}
-                </span>
-            </button>
-
-            <!-- FONT SIZE CYCLER ─────────────────────────────────────────── -->
-            <button
-                type="button"
-                class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-200"
-                onclick={cycle_font_size}
-                title={font_title}>
-                <span class="text-sm leading-none font-bold">{font_label}</span>
-                <span
-                    class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100"
-                    >Font</span>
-            </button>
-
-            <!-- DARK / LIGHT TOGGLE ──────────────────────────────────────── -->
-            <button
-                type="button"
-                class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-200"
-                onclick={toggle_theme_mode}
-                title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
-                    'unknown'})">
-                {#if $ae_loc?.theme_mode === 'dark'}
-                    <Moon size="1.1em" class="shrink-0" />
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
-                        >Dark</span>
-                {:else}
-                    <Sun size="1.1em" class="shrink-0" />
+                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
+                        {access_label ?? 'Auth?'}
+                    </span>
+                </button>
+            {/if}
+
+            <!-- FONT SIZE CYCLER — hidden in iframe; font choice belongs to the host page -->
+            {#if !$ae_loc?.iframe}
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-200"
+                    onclick={cycle_font_size}
+                    title={font_title}>
+                    <span class="text-sm leading-none font-bold">{font_label}</span>
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
-                        >Light</span>
-                {/if}
-            </button>
+                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100"
+                        >Font</span>
+                </button>
+            {/if}
+
+            <!-- DARK / LIGHT TOGGLE — hidden in iframe; theme is set by the host page -->
+            {#if !$ae_loc?.iframe}
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-200"
+                    onclick={toggle_theme_mode}
+                    title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
+                        'unknown'})">
+                    {#if $ae_loc?.theme_mode === 'dark'}
+                        <Moon size="1.1em" class="shrink-0" />
+                        <span
+                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
+                            >Dark</span>
+                    {:else}
+                        <Sun size="1.1em" class="shrink-0" />
+                        <span
+                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
+                            >Light</span>
+                    {/if}
+                </button>
+            {/if}
 
             <!-- EDIT MODE TOGGLE (authenticated+ only) ───────────────────── -->
             {#if $ae_loc?.authenticated_access}
diff --git a/src/routes/idaa/+layout.svelte b/src/routes/idaa/+layout.svelte
index 7157a037..a370383e 100644
--- a/src/routes/idaa/+layout.svelte
+++ b/src/routes/idaa/+layout.svelte
@@ -218,13 +218,15 @@ $effect(() => {
 // the iframe src to pass show_menu=true, so we watch for trusted_access and unhide it.
 $effect(() => {
     if (browser && $ae_loc.iframe && $ae_loc.trusted_access) {
-        // WHY untrack: writing to $ae_loc inside an effect that reads $ae_loc causes
-        // an infinite reactive loop (effect_update_depth_exceeded). The conditions we
-        // want to react to ($ae_loc.iframe / trusted_access) are tracked above; the
-        // write is a side-effect that must not re-trigger this effect.
-        untrack(() => {
+        // WHY the guard: ae_loc is a tracked dep here (reads above). Writing
+        // $ae_loc.sys_menu.hide re-notifies this effect every run — infinite loop.
+        // untrack() does NOT help: it prevents new dep reads but the store still
+        // notifies already-subscribed effects after the write.
+        // The idempotent write guard breaks the cycle: run 2 finds the value
+        // already false, skips the write, no further re-queue.
+        if ($ae_loc.sys_menu.hide !== false) {
             $ae_loc.sys_menu.hide = false;
-        });
+        }
     }
 });