feat: add ability to search

apps/frontend/src/app/components/shows/shows-list.component.ts

@@ -358,6 +358,51 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
         </form>
       }
 
+      <div class="search-section">
+        <input
+          type="text"
+          [value]="searchQuery()"
+          (input)="searchQuery.set($any($event.target).value); currentPage.set(1)"
+          name="search"
+          placeholder="Search by title, type, or notes..."
+          class="search-input"
+        >
+        <button (click)="toggleFilters()" class="btn btn-secondary btn-sm">
+          {{ showFilters() ? 'Hide' : 'Show' }} Advanced Filters
+          @if (selectedTags().length > 0) {
+            ({{ selectedTags().length }})
+          }
+        </button>
+        @if (searchQuery() || selectedTags().length > 0) {
+          <button (click)="clearFilters()" class="btn btn-secondary btn-sm">
+            Clear All Filters
+          </button>
+        }
+      </div>
+
+      @if (showFilters()) {
+        <div class="advanced-filters">
+          <div class="filter-group">
+            <h4>Filter by Tags</h4>
+            <div class="tags-filter">
+              @for (tag of allTags(); track tag) {
+                <label class="tag-checkbox">
+                  <input
+                    type="checkbox"
+                    [checked]="selectedTags().includes(tag)"
+                    (change)="toggleTag(tag)"
+                  >
+                  <span>{{ tag }}</span>
+                </label>
+              }
+              @empty {
+                <p class="no-tags">No tags available</p>
+              }
+            </div>
+          </div>
+        </div>
+      }
+
       <div class="filters">
         <button
           (click)="setFilter('all')"
@@ -615,6 +660,82 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
       margin-top: 1rem;
     }
 
+    .search-section {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      margin-bottom: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .search-input {
+      flex: 1;
+      min-width: 250px;
+      padding: 0.5rem 1rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: #e84393;
+    }
+
+    .advanced-filters {
+      background: #f8f9fa;
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+    }
+
+    .filter-group h4 {
+      margin: 0 0 0.75rem 0;
+      color: #374151;
+      font-size: 0.95rem;
+      font-weight: 600;
+    }
+
+    .tags-filter {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+
+    .tag-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+      padding: 0.25rem 0.75rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 20px;
+      background: white;
+      transition: all 0.2s;
+    }
+
+    .tag-checkbox:hover {
+      border-color: #e84393;
+      background: #fff5f9;
+    }
+
+    .tag-checkbox input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+
+    .tag-checkbox span {
+      font-size: 0.875rem;
+      color: #374151;
+    }
+
+    .no-tags {
+      color: #6b7280;
+      font-style: italic;
+      font-size: 0.875rem;
+    }
+
     .filters {
       display: flex;
       gap: 1rem;
@@ -1050,6 +1171,11 @@ export class ShowsListComponent implements OnInit {
   currentPage = signal(1);
   pageSize = signal(25);
 
+  // Search and filter state
+  searchQuery = signal('');
+  selectedTags = signal<string[]>([]);
+  showFilters = signal(false);
+
   comments = signal<Record<string, Comment[]>>({});
   commentsLoading = signal<Record<string, boolean>>({});
   expandedComments = signal<Record<string, boolean>>({});
@@ -1079,12 +1205,42 @@ export class ShowsListComponent implements OnInit {
   completedCount = computed(() => this.shows().filter(show => show.status === ShowStatus.completed).length);
   wantToWatchCount = computed(() => this.shows().filter(show => show.status === ShowStatus.wantToWatch).length);
 
+  allTags = computed(() => {
+    const tagsSet = new Set<string>();
+    this.shows().forEach(show => {
+      show.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  });
+
   filteredShows = computed(() => {
-    const filter = this.statusFilter();
-    if (filter === 'all') {
-      return this.shows();
+    let shows = this.shows();
+
+    // Apply status filter
+    const statusFilter = this.statusFilter();
+    if (statusFilter !== 'all') {
+      shows = shows.filter(show => show.status === statusFilter);
     }
-    return this.shows().filter(show => show.status === filter);
+
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      shows = shows.filter(show =>
+        show.title.toLowerCase().includes(searchQuery) ||
+        show.notes?.toLowerCase().includes(searchQuery) ||
+        this.getTypeLabel(show.type).toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      shows = shows.filter(show =>
+        selectedTags.every(tag => show.tags?.includes(tag))
+      );
+    }
+
+    return shows;
   });
 
   paginatedShows = computed(() => {
@@ -1138,6 +1294,27 @@ export class ShowsListComponent implements OnInit {
     this.currentPage.set(1); // Reset to first page when filter changes
   }
 
+  toggleTag(tag: string) {
+    const current = this.selectedTags();
+    if (current.includes(tag)) {
+      this.selectedTags.set(current.filter(t => t !== tag));
+    } else {
+      this.selectedTags.set([...current, tag]);
+    }
+    this.currentPage.set(1); // Reset to first page when tags change
+  }
+
+  clearFilters() {
+    this.searchQuery.set('');
+    this.selectedTags.set([]);
+    this.statusFilter.set('all');
+    this.currentPage.set(1);
+  }
+
+  toggleFilters() {
+    this.showFilters.update(v => !v);
+  }
+
   onPageChange(page: number) {
     this.currentPage.set(page);
   }