Replaced "Hide Bug Fixes" with a filter dropdown

Author: JohnSoellnerDev

src/paths/index/components/changes/ReleaseNotesItem.js

@@ -148,7 +148,11 @@ export default class ReleaseNotesItem extends LitElement {
         this._copiableUnifiedText = "";
         this._copiableGroupedText = "";
         this._copyStatus = "idle";
-        this._hideBugs = false;
+
+        // Available label filters
+        this._availableLabels = ['bug', 'enhancement', 'documentation'];
+        this._selectedLabels = [];
+        this._dropdownOpen = false;
     }
 
     _onViewModeClicked(type) {
@@ -188,8 +192,24 @@ export default class ReleaseNotesItem extends LitElement {
           });
     }
 
-    _onBugChange(e) {
-        this._hideBugs = e.target.checked;
+    _toggleDropdown() {
+        this._dropdownOpen = !this._dropdownOpen;
+        this.requestUpdate();
+    }
+
+    _toggleLabel(labelName) {
+        if (this._selectedLabels.includes(labelName)) {
+            this._selectedLabels = this._selectedLabels.filter(label => label !== labelName);
+        } else {
+            this._selectedLabels = [...this._selectedLabels, labelName];
+        }
+
+        this._updateNotes();
+        this.requestUpdate();
+    }
+
+    _clearLabelFilters() {
+        this._selectedLabels = [];
         this._updateNotes();
         this.requestUpdate();
     }
@@ -200,11 +220,16 @@ export default class ReleaseNotesItem extends LitElement {
         this._copiableUnifiedText = "";
         this._copiableGroupedText = "";
 
-        // Filter pulls based on bug label and hide bugs checkbox
-        const filteredPulls = this.pulls.filter((pull) => {
-            const hasBugLabel = pull.labels && pull.labels.some(label => label.name === 'bug');
-            return this._hideBugs ? !hasBugLabel : true;
-        });
+        // Filter pulls based on selected labels (if any)
+        const filteredPulls = this._selectedLabels.length === 0
+            ? this.pulls
+            : this.pulls.filter((pull) => {
+                if (!pull.labels) return false;
+
+                return pull.labels.some(label =>
+                    this._selectedLabels.includes(label.name)
+                );
+            });
 
         let groupedNotes = {};
         filteredPulls.forEach((pull) => {
@@ -319,21 +344,43 @@ export default class ReleaseNotesItem extends LitElement {
             <div class="item-container">
                 <div class="item-changes">
                     <div class="item-changes-types">
-                        <span
-                            class="item-changes-type"
-                            @click="${() => {
-                                this._hideBugs = !this._hideBugs;
-                                this._updateNotes();
-                                this.requestUpdate();
-                            }}"
-                        >
-                            <input
-                                type="checkbox"
-                                .checked="${this._hideBugs}"
-                                @change="${this._onBugChange}"
+                        <div class="item-changes-filter" style="position: relative; display: inline-block;">
+                            <span
+                                class="item-changes-type"
+                                @click="${this._toggleDropdown}"
+                                style="cursor: pointer;"
                             >
-                            Hide Bug Fixes
-                        </span>
+                                ${this._selectedLabels.length ?
+                                    `Filtered (${this._selectedLabels.length})` :
+                                    'Filter Labels'} ▼
+                            </span>
+                            ${this._dropdownOpen ? html`
+                                <div class="dropdown-menu" style="position: absolute; top: 100%; left: 0;
+                                         z-index: 100; background: #1f2430; border: 1px solid #383d4c;
+                                         border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+                                         min-width: 180px; margin-top: 5px; padding: 8px 0; color: #c6d0e0;">
+                                    <div style="padding: 5px 15px; font-size: 12px; color: #8992a4; border-bottom: 1px solid #383d4c;">
+                                        Select labels to show:
+                                    </div>
+                                    ${this._availableLabels.map(label => html`
+                                        <div style="padding: 8px 15px; cursor: pointer; display: flex; align-items: center;
+                                                  ${this._selectedLabels.includes(label) ? 'background: #2c3241;' : ''}
+                                                  &:hover { background: #2c3241; }"
+                                             @click="${(e) => this._toggleLabel(label, e)}">
+                                            <input type="checkbox" .checked="${this._selectedLabels.includes(label)}"
+                                                   style="margin-right: 8px;">
+                                            ${label}
+                                        </div>
+                                    `)}
+                                    ${this._selectedLabels.length ? html`
+                                        <div style="padding: 8px 15px; cursor: pointer; border-top: 1px solid #383d4c; color: #3f8cff;"
+                                             @click="${this._clearLabelFilters}">
+                                            Clear all filters
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            ` : ''}
+                        </div>
                         |
                         <span
                             class="item-changes-type ${(this._viewMode === "pretty" ? "item-changes--active" : "")}"