From e625fe9ba6fdb4bfb8128765963ea7c85779b7a2 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sun, 4 Jan 2026 16:51:52 +0000
Subject: [PATCH] fix(wcc-sidebar): sort sidebar items alphabetically and unify
 grouped and ungrouped items for consistent ordering

---
 changelog.md                   |  8 +++++++
 ts_web/00_commitinfo_data.ts   |  2 +-
 ts_web/elements/wcc-sidebar.ts | 40 ++++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/changelog.md b/changelog.md
index 83c74b3..dc839c9 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-04 - 3.6.1 - fix(wcc-sidebar)
+sort sidebar items alphabetically and unify grouped and ungrouped items for consistent ordering
+
+- Unifies ungrouped elements and groups into a single render list using a RenderItem type with a sortKey.
+- Sorts all top-level items alphabetically by element name (case-insensitive via toLowerCase) so sidebar order is deterministic.
+- Groups are ordered by the first element's name; individual items inside a group preserve their original order.
+- Replaces previous separate rendering paths with a single sorted render pass that returns TemplateResult array.
+
 ## 2026-01-04 - 3.6.0 - feat(sidebar)
 restructure sidebar layout, add search clear button, and improve scrolling behavior
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 0286a8e..6e32a07 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.6.0',
+  version: '3.6.1',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }
diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts
index e74b226..616c402 100644
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@@ -647,27 +647,43 @@ export class WccSidebar extends DeesElement {
         groupedItems.get(group)!.push(entry);
       }
 
-      const result: TemplateResult[] = [];
+      // Build a unified list of render items (ungrouped elements and groups)
+      // Each item has a sortKey (element name or first element name of group)
+      type RenderItem =
+        | { type: 'element'; entry: [string, any]; sortKey: string }
+        | { type: 'group'; groupName: string; items: Array<[string, any]>; sortKey: string };
 
-      // Render ungrouped items first
+      const renderItems: RenderItem[] = [];
+
+      // Add ungrouped items
       const ungrouped = groupedItems.get(null) || [];
       for (const entry of ungrouped) {
-        result.push(this.renderElementItem(entry, section));
+        renderItems.push({ type: 'element', entry, sortKey: entry[0].toLowerCase() });
       }
 
-      // Render grouped items
+      // Add groups (sorted by their first element's name)
       for (const [groupName, items] of groupedItems) {
         if (groupName === null) continue;
-
-        result.push(html`
-          <div class="item-group">
-            <span class="item-group-legend">${groupName}</span>
-            ${items.map((entry) => this.renderElementItem(entry, section))}
-          </div>
-        `);
+        const firstElementName = items[0]?.[0] || '';
+        renderItems.push({ type: 'group', groupName, items, sortKey: firstElementName.toLowerCase() });
       }
 
-      return result;
+      // Sort all items alphabetically by sortKey
+      renderItems.sort((a, b) => a.sortKey.localeCompare(b.sortKey));
+
+      // Render in sorted order
+      return renderItems.map((item) => {
+        if (item.type === 'element') {
+          return this.renderElementItem(item.entry, section);
+        } else {
+          return html`
+            <div class="item-group">
+              <span class="item-group-legend">${item.groupName}</span>
+              ${item.items.map((entry) => this.renderElementItem(entry, section))}
+            </div>
+          `;
+        }
+      });
     }
   }