From 3b80409718a58cc48d554f55073c6db01a1cddf9 Mon Sep 17 00:00:00 2001
From: Johannes <johannes@bcos.cloud>
Date: Wed, 1 Jul 2026 12:30:14 -0400
Subject: [PATCH] =?UTF-8?q?fix(guide):=20collapsible=20nav=20not=20togglin?=
 =?UTF-8?q?g=20=E2=80=94=20reference=20open/searching=20directly=20(Svelte?=
 =?UTF-8?q?=20reactivity)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

isOpen() helper hid the dependency on `open` from Svelte's tracking, so clicks
updated state but not the view. Inline (searching || open[key]) instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/GuideReader.svelte | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/GuideReader.svelte b/frontend/src/components/GuideReader.svelte
index 46bcce4..889bc69 100644
--- a/frontend/src/components/GuideReader.svelte
+++ b/frontend/src/components/GuideReader.svelte
@@ -52,7 +52,6 @@
   $: productApps = filtered.filter(a => a.app !== 'platform' && a.app !== 'technical');
   $: platformApp = filtered.find(a => a.app === 'platform') ?? null;
   $: technicalApp = filtered.find(a => a.app === 'technical') ?? null;
-  const isOpen = (key: string) => searching || !!open[key];
 
   async function loadNav() {
     loadingNav = true;
@@ -110,15 +109,15 @@
         {#if productApps.length}
           <div class="nav-sec">
             <button class="sec-head" on:click={() => toggle('modules')}>
-              <span class="chev">{isOpen('modules') ? '▾' : '▸'}</span> Modules
+              <span class="chev">{(searching || open['modules']) ? '▾' : '▸'}</span> Modules
             </button>
-            {#if isOpen('modules')}
+            {#if (searching || open['modules'])}
               {#each productApps as app (app.app)}
                 <div class="nav-app">
                   <button class="app-head" on:click={() => toggle('app:' + app.app)}>
-                    <span class="chev">{isOpen('app:' + app.app) ? '▾' : '▸'}</span> {appLabel(app.app)}
+                    <span class="chev">{(searching || open['app:' + app.app]) ? '▾' : '▸'}</span> {appLabel(app.app)}
                   </button>
-                  {#if isOpen('app:' + app.app)}
+                  {#if (searching || open['app:' + app.app])}
                     {#each app.modules as m (m.module)}
                       <button class="nav-item nested" class:active={m.module === activeModuleKey}
                         on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>
@@ -134,9 +133,9 @@
         {#if platformApp}
           <div class="nav-sec">
             <button class="sec-head" on:click={() => toggle('platform')}>
-              <span class="chev">{isOpen('platform') ? '▾' : '▸'}</span> Platform
+              <span class="chev">{(searching || open['platform']) ? '▾' : '▸'}</span> Platform
             </button>
-            {#if isOpen('platform')}
+            {#if (searching || open['platform'])}
               {#each platformApp.modules as m (m.module)}
                 <button class="nav-item" class:active={m.module === activeModuleKey}
                   on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>
@@ -149,9 +148,9 @@
         {#if technicalApp}
           <div class="nav-sec">
             <button class="sec-head" on:click={() => toggle('technical')}>
-              <span class="chev">{isOpen('technical') ? '▾' : '▸'}</span> Technical
+              <span class="chev">{(searching || open['technical']) ? '▾' : '▸'}</span> Technical
             </button>
-            {#if isOpen('technical')}
+            {#if (searching || open['technical'])}
               {#each technicalApp.modules as m (m.module)}
                 <button class="nav-item" class:active={m.module === activeModuleKey}
                   on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>