From a84c7b189e242aa957b1ff724ca4b200d94c77b3 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 10:16:30 -0400
Subject: [PATCH] fix(nav): remember open accordion group, Tutorial Navigator
 first, fix palette+channels double-encode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- header.html nav-data: pipe | safeJS so the ⌘K palette receives a real JSON
  object (was double-encoded to a string → parsed.groups undefined → EXPLORE
  group empty). Fixes all-nav-options-missing-from-palette regression.
- channels/list.html channel-collections-data: same | safeJS fix; the
  channels-directory island was crashing on the double-encoded "[]" string
  (visibleCollections("[]").filter is not a function) → only the submit row showed.
- navigation.yaml: move Tutorial Navigator to first entry in the Learn group.
- header.html accordion: persist the last-open group to localStorage and restore
  it on load (single-open behavior preserved), so navigation continues where it
  left off.
---
 hugo/data/navigation.yaml         | 10 +++++-----
 hugo/layouts/channels/list.html   |  2 +-
 hugo/layouts/partials/header.html | 33 ++++++++++++++++++++++---------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/hugo/data/navigation.yaml b/hugo/data/navigation.yaml
index c235aed0c..19fadbc90 100644
--- a/hugo/data/navigation.yaml
+++ b/hugo/data/navigation.yaml
@@ -29,6 +29,11 @@ groups:
   - id: learn
     label: Learn
     items:
+      - id: nav-tutorial-navigator
+        label: Tutorial Navigator
+        href: /tutorial-navigator/
+        icon: course-book
+        keywords: [tutorial, navigator, catalog, browse tutorials, learn]
       - id: explore-learn
         label: Learn
         href: /learn/
@@ -74,11 +79,6 @@ groups:
         paletteLabel: Connect — events, advocates, community
         paletteIcon: group
         keywords: [connect, community, events, advocates, codejam, devtoberfest, verb]
-      - id: nav-tutorial-navigator
-        label: Tutorial Navigator
-        href: /tutorial-navigator/
-        icon: course-book
-        keywords: [tutorial, navigator, catalog, browse tutorials, learn]
   - id: explore
     label: Explore
     items:
diff --git a/hugo/layouts/channels/list.html b/hugo/layouts/channels/list.html
index 7597ce95d..dc54a1d30 100644
--- a/hugo/layouts/channels/list.html
+++ b/hugo/layouts/channels/list.html
@@ -6,7 +6,7 @@ <h1>{{ .Title }}</h1>
     <p>{{ .Description }}</p>
   </header>
   <script id="channel-collections-data" type="application/json">
-      {{ with .Site.Data.channel_collections }}{{ .collections | jsonify }}{{ else }}[]{{ end }}
+      {{ with .Site.Data.channel_collections }}{{ .collections | jsonify | safeJS }}{{ else }}[]{{ end }}
     </script>
     <script id="channels-data" type="application/json">{{ $channels | jsonify | safeJS }}</script>
   <div data-island="channels-directory"></div>
diff --git a/hugo/layouts/partials/header.html b/hugo/layouts/partials/header.html
index 0b0e9a533..d90f63674 100644
--- a/hugo/layouts/partials/header.html
+++ b/hugo/layouts/partials/header.html
@@ -57,7 +57,7 @@
     </ui5-list>
   </div>
 </ui5-popover>
-<script id="nav-data" type="application/json">{{ site.Data.navigation | jsonify }}</script>
+<script id="nav-data" type="application/json">{{ site.Data.navigation | jsonify | safeJS }}</script>
 
 <ui5-popover id="sb-share-popover" placement="Bottom" horizontal-align="End" hide-arrow header-text="Share & feedback">
   <div class="share-popover__body">
@@ -245,17 +245,32 @@
   // Two-level accordion: clicking a group header opens its list and closes the
   // others (single-open keeps the menu compact on mobile). The first group ships
   // expanded (aria-expanded="true" in the template) so the verb spine stays
-  // visible at a glance on desktop.
+  // visible at a glance on desktop. The last-open group is remembered in
+  // localStorage and restored on the next load so navigation can continue where
+  // it left off (empty string = user collapsed everything).
+  const NAV_OPEN_KEY = 'sb-nav-open-group';
+  const setOpenGroup = (groupId) => {
+    navPopover.querySelectorAll('.nav-group__header').forEach(b => b.setAttribute('aria-expanded', 'false'));
+    navPopover.querySelectorAll('.nav-group__items').forEach(l => l.setAttribute('hidden', ''));
+    if (!groupId) return;
+    const header = navPopover.querySelector('.nav-group__header[data-nav-group="' + groupId + '"]');
+    const list = navPopover.querySelector('.nav-group__items[data-nav-items="' + groupId + '"]');
+    if (header && list) {
+      header.setAttribute('aria-expanded', 'true');
+      list.removeAttribute('hidden');
+    }
+  };
+  // Restore the remembered group (null = untouched, keep the template default).
+  try {
+    const stored = localStorage.getItem(NAV_OPEN_KEY);
+    if (stored !== null) setOpenGroup(stored);
+  } catch (e) { /* storage blocked; keep template default */ }
   document.querySelectorAll('#sb-nav-popover .nav-group__header').forEach(btn => {
     btn.addEventListener('click', () => {
       const wasOpen = btn.getAttribute('aria-expanded') === 'true';
-      navPopover.querySelectorAll('.nav-group__header').forEach(b => b.setAttribute('aria-expanded', 'false'));
-      navPopover.querySelectorAll('.nav-group__items').forEach(l => l.setAttribute('hidden', ''));
-      if (!wasOpen) {
-        btn.setAttribute('aria-expanded', 'true');
-        const list = navPopover.querySelector('.nav-group__items[data-nav-items="' + btn.getAttribute('data-nav-group') + '"]');
-        if (list) list.removeAttribute('hidden');
-      }
+      const groupId = wasOpen ? '' : btn.getAttribute('data-nav-group');
+      setOpenGroup(groupId);
+      try { localStorage.setItem(NAV_OPEN_KEY, groupId); } catch (e) { /* storage blocked */ }
     });
   });