From 9608b363ac897e81b929ec6a153937bf9483d316 Mon Sep 17 00:00:00 2001 From: Johannes Date: Wed, 1 Jul 2026 12:27:21 -0400 Subject: [PATCH] =?UTF-8?q?feat(guide):=20collapsible=20nav=20=E2=80=94=20?= =?UTF-8?q?Modules=20(per-app)=20/=20Platform=20/=20Technical=20sections?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restructure reader sidebar into 3 collapsible top-level sections: Modules at top (each product app collapsible with its module list), then Platform and Technical. Auto-expands the section/app of the active module; search expands all. Co-Authored-By: Claude Opus 4.8 --- frontend/src/components/GuideReader.svelte | 110 +++++++++++++++++---- 1 file changed, 89 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/GuideReader.svelte b/frontend/src/components/GuideReader.svelte index 4f51e7e..46bcce4 100644 --- a/frontend/src/components/GuideReader.svelte +++ b/frontend/src/components/GuideReader.svelte @@ -14,6 +14,15 @@ let activeModuleKey = ''; let activeTab = 0; let search = ''; + // collapse state: 'modules' | 'platform' | 'technical' | 'app:' + let open: Record = { modules: true }; + function toggle(key: string) { open = { ...open, [key]: !open[key] }; } + function expandFor(key: string) { + const app = key.split('.')[0]; + if (app === 'platform') open = { ...open, platform: true }; + else if (app === 'technical') open = { ...open, technical: true }; + else open = { ...open, modules: true, ['app:' + app]: true }; + } marked.setOptions({ gfm: true, breaks: false }); const render = (md: string): string => marked.parse(md, { async: false }) as string; @@ -38,13 +47,21 @@ })) .filter(a => a.modules.length > 0); + // group nav: product-app "Modules" section (all except platform/technical) + platform + technical + $: searching = !!search.trim(); + $: 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; try { nav = await fetchNav(); - // auto-select the first module - const first = nav.find(a => a.modules.length)?.modules[0]; - if (first) selectModule(first.module); + // auto-select the first product module (or first available) + const first = (nav.find(a => a.app !== 'platform' && a.app !== 'technical' && a.modules.length) + ?? nav.find(a => a.modules.length))?.modules[0]; + if (first) { expandFor(first.module); selectModule(first.module); } } catch (e: any) { addToast('error', 'Failed to load guides', e?.response?.data?.message ?? e?.message ?? ''); } finally { @@ -54,6 +71,7 @@ async function selectModule(key: string) { if (key === activeModuleKey && module) return; + expandFor(key); activeModuleKey = key; loadingModule = true; module = null; @@ -88,21 +106,59 @@ {:else if filtered.length === 0}
No guides found.
{:else} - {#each filtered as app (app.app)} -
-
{appLabel(app.app)}
- {#each app.modules as m (m.module)} - - {/each} + + {#if productApps.length} +
+ + {#if isOpen('modules')} + {#each productApps as app (app.app)} +
+ + {#if isOpen('app:' + app.app)} + {#each app.modules as m (m.module)} + + {/each} + {/if} +
+ {/each} + {/if}
- {/each} + {/if} + + + {#if platformApp} +
+ + {#if isOpen('platform')} + {#each platformApp.modules as m (m.module)} + + {/each} + {/if} +
+ {/if} + + + {#if technicalApp} +
+ + {#if isOpen('technical')} + {#each technicalApp.modules as m (m.module)} + + {/each} + {/if} +
+ {/if} {/if} @@ -177,17 +233,29 @@ .side-nav { flex: 1; overflow-y: auto; padding: 0.25rem 0 1rem; } .side-msg { color: rgba(255,255,255,0.7); font-size: 0.85rem; padding: 0.75rem 1.25rem; } - .nav-group { margin-bottom: 0.5rem; } - .nav-group-label { - color: rgba(255,255,255,0.55); font-size: 0.7rem; font-weight: 700; - text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 1.25rem 0.25rem; + .nav-sec { margin-bottom: 0.1rem; } + .sec-head { + display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; + background: none; border: none; cursor: pointer; + color: rgba(255,255,255,0.9); font-size: 0.78rem; font-weight: 700; + text-transform: uppercase; letter-spacing: 0.05em; padding: 0.6rem 1.1rem; } + .sec-head:hover { background: rgba(255,255,255,0.06); } + .app-head { + display: flex; align-items: center; gap: 0.35rem; width: 100%; text-align: left; + background: none; border: none; cursor: pointer; + color: rgba(255,255,255,0.72); font-size: 0.82rem; font-weight: 600; + padding: 0.35rem 1.1rem 0.35rem 1.5rem; + } + .app-head:hover { background: rgba(255,255,255,0.06); color: white; } + .chev { font-size: 0.58rem; width: 9px; display: inline-block; color: rgba(255,255,255,0.55); flex-shrink: 0; } .nav-item { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 3px solid transparent; color: rgba(255,255,255,0.82); font-size: 0.85rem; padding: 0.4rem 1.25rem 0.4rem 1.5rem; cursor: pointer; } + .nav-item.nested { padding-left: 2.5rem; } .nav-item:hover { background: rgba(255,255,255,0.08); color: white; } .nav-item.active { background: rgba(255,255,255,0.14); color: white; border-left-color: white; font-weight: 600; }