From 474e95c4f2b5fca3347e73c135747d88019cf435 Mon Sep 17 00:00:00 2001
From: Muppetteer <Muppetteer@users.noreply.github.com>
Date: Sat, 6 Dec 2025 03:45:10 +1100
Subject: [PATCH] Hide empty filters from sidebar (#1759)

---
 .../book-filter/book-filter.component.html    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.html b/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.html
index d21894d3b..7d12ec30a 100644
--- a/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.html
+++ b/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.html
@@ -15,6 +15,8 @@
   <div class="filter-content">
     <p-accordion [value]="expandedPanels" [multiple]="true">
       @for (filterType of filterTypes; track trackByFilterType(i, filterType); let i = $index) {
+        @if (filterStreams[filterType] | async; as filters) {
+          @if (filters.length > 0) {
         <p-accordion-panel [value]="i">
           <p-accordion-header>
             <span class="filter-type-label">
@@ -28,28 +30,28 @@
           </p-accordion-header>
 
           <p-accordion-content>
-            @if (filterStreams[filterType] | async; as filters) {
-              <div class="filter-list">
-                @for (filter of filters; track trackByFilter(j, filter); let j = $index) {
-                  <div
-                    class="filter-row"
-                    [ngClass]="{
-                      'active': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
-                    }"
-                    (click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
-                    {{ filter.value.name || filter.value }}
-                    <p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
-                  </div>
-                }
-                @if (truncatedFilters[filterType]) {
-                  <div class="truncation-notice">
-                    Showing first 250 items
-                  </div>
-                }
-              </div>
-            }
+            <div class="filter-list">
+              @for (filter of filters; track trackByFilter(j, filter); let j = $index) {
+                <div
+                  class="filter-row"
+                  [ngClass]="{
+                    'active': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
+                  }"
+                  (click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
+                  {{ filter.value.name || filter.value }}
+                  <p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
+                </div>
+              }
+              @if (truncatedFilters[filterType]) {
+                <div class="truncation-notice">
+                  Showing first 500 items
+                </div>
+              }
+            </div>
           </p-accordion-content>
         </p-accordion-panel>
+          }
+        }
       }
     </p-accordion>