@design.estate/dees-wcctools 3.7.1 → 3.8.0

package/dist_bundle/bundle.js

@@ -42428,6 +42428,11 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           margin-right: 0.25rem;
         }
 
+        .item-group.group-highlight {
+          background: rgba(59, 130, 246, 0.15);
+          transition: background 0.3s ease;
+        }
+
         /* Resize handle */
         .resize-handle {
           position: absolute;
@@ -42509,13 +42514,35 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
   }
   showContextMenu(e10, sectionName, itemName) {
     const isPinned = this.isPinned(sectionName, itemName);
-    WccContextmenu.show(e10, [
+    const section = this.dashboardRef?.sections?.find((s8) => s8.name === sectionName);
+    const sectionEntries = section ? getSectionItems(section) : [];
+    const foundEntry = sectionEntries.find(([name]) => name === itemName);
+    const item = foundEntry?.[1];
+    const groups = item ? this.getElementGroups(item) : [];
+    const menuItems = [
       {
         name: isPinned ? "Unpin" : "Pin",
         iconName: isPinned ? "push_pin" : "push_pin",
         action: () => this.togglePin(sectionName, itemName)
       }
-    ]);
+    ];
+    if (groups.length > 0) {
+      menuItems.push({
+        name: "Show in Group:",
+        iconName: "folder",
+        action: () => {
+        },
+        disabled: true
+      });
+      for (const groupName of groups) {
+        menuItems.push({
+          name: groupName,
+          iconName: "label",
+          action: () => this.scrollToGroup(sectionName, groupName)
+        });
+      }
+    }
+    WccContextmenu.show(e10, menuItems);
   }
   /**
    * Render the PINNED section (only if there are pinned items)
@@ -42553,7 +42580,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
       const isSelected = this.selectedItem === item;
       const type5 = section.type === "elements" ? "element" : "page";
-      const icon = section.type === "elements" ? "featured_video" : "insert_drive_file";
+      const icon = section.type === "elements" ? this.getElementGroups(item).length > 1 ? "library_books" : "featured_video" : "insert_drive_file";
       return b2`
             <div
               class="selectOption ${isSelected ? "selected" : ""}"
@@ -42582,7 +42609,13 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     this.initCollapsedSections();
     return this.dashboardRef.sections.map((section) => {
       const entries = getSectionItems(section);
-      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+      const filteredEntries = entries.filter(([name, item]) => {
+        if (this.matchesSearch(name)) return true;
+        const rawGroups = item.demoGroups;
+        if (!rawGroups) return false;
+        const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
+        return groups.some((g3) => this.matchesSearch(g3));
+      });
       if (filteredEntries.length === 0 && this.searchQuery) {
         return null;
       }
@@ -42608,7 +42641,13 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
    */
   renderSectionItems(section) {
     const entries = getSectionItems(section);
-    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+    const filteredEntries = entries.filter(([name, item]) => {
+      if (this.matchesSearch(name)) return true;
+      const rawGroups = item.demoGroups;
+      if (!rawGroups) return false;
+      const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
+      return groups.some((g3) => this.matchesSearch(g3));
+    });
     if (section.type === "pages") {
       return filteredEntries.map(([pageName, item]) => {
         const isPinned = this.isPinned(section.name, pageName);
@@ -42630,11 +42669,14 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       const groupedItems = /* @__PURE__ */ new Map();
       for (const entry of filteredEntries) {
         const [, item] = entry;
-        const group = item.demoGroup || null;
-        if (!groupedItems.has(group)) {
-          groupedItems.set(group, []);
+        const rawGroups = item.demoGroups;
+        const groups = rawGroups ? Array.isArray(rawGroups) ? rawGroups : [rawGroups] : [null];
+        for (const group of groups) {
+          if (!groupedItems.has(group)) {
+            groupedItems.set(group, []);
+          }
+          groupedItems.get(group).push(entry);
         }
-        groupedItems.get(group).push(entry);
       }
       const renderItems = [];
       const ungrouped = groupedItems.get(null) || [];
@@ -42643,8 +42685,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       }
       for (const [groupName, items] of groupedItems) {
         if (groupName === null) continue;
-        const firstElementName = items[0]?.[0] || "";
-        renderItems.push({ type: "group", groupName, items, sortKey: firstElementName.toLowerCase() });
+        renderItems.push({ type: "group", groupName, items, sortKey: groupName.toLowerCase() });
       }
       renderItems.sort((a4, b4) => a4.sortKey.localeCompare(b4.sortKey));
       return renderItems.map((item) => {
@@ -42652,7 +42693,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           return this.renderElementItem(item.entry, section);
         } else {
           return b2`
-            <div class="item-group">
+            <div class="item-group" data-group="${item.groupName}">
               <span class="item-group-legend">${item.groupName}</span>
               ${item.items.map((entry) => this.renderElementItem(entry, section))}
             </div>
@@ -42704,6 +42745,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         ` : null}
       `;
     } else {
+      const icon = this.getElementGroups(item).length > 1 ? "library_books" : "featured_video";
       return b2`
         <div
           class="selectOption ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
@@ -42713,7 +42755,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       }}
           @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
         >
-          <i class="material-symbols-outlined">featured_video</i>
+          <i class="material-symbols-outlined">${icon}</i>
           <div class="text">${this.highlightMatch(elementName)}</div>
         </div>
       `;
@@ -42754,6 +42796,26 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());
   }
+  getElementGroups(item) {
+    const raw2 = item?.demoGroups;
+    if (!raw2) return [];
+    return Array.isArray(raw2) ? raw2 : [raw2];
+  }
+  scrollToGroup(sectionName, groupName) {
+    this.collapsedSections.delete(sectionName);
+    this.searchQuery = "";
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const groupEl = this.shadowRoot?.querySelector(
+        `.item-group[data-group="${groupName}"]`
+      );
+      if (groupEl) {
+        groupEl.scrollIntoView({ behavior: "smooth", block: "center" });
+        groupEl.classList.add("group-highlight");
+        setTimeout(() => groupEl.classList.remove("group-highlight"), 1500);
+      }
+    });
+  }
   highlightMatch(text8) {
     if (!this.searchQuery) return b2`${text8}`;
     const lowerText = text8.toLowerCase();