feat: add ability to search

apps/frontend/project.json

@@ -33,8 +33,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "4kb",
+              "maximumWarning": "8kb",
-              "maximumError": "8kb"
+              "maximumError": "12kb"
             }
           ],
           "outputHashing": "all",

apps/frontend/src/app/components/art/art-gallery.component.ts

@@ -331,11 +331,56 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
         </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, artist, or description..."
+          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>
+      }
+
       @if (loading()) {
         <div class="loading">Loading gallery...</div>
-      } @else if (artPieces().length === 0) {
+      } @else if (filteredArtPieces().length === 0) {
         <div class="empty-state">
-          <p>No artwork in the gallery yet.</p>
+          <p>No artwork found with these filters.</p>
         </div>
       } @else {
         <app-pagination
@@ -523,6 +568,82 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
       font-style: italic;
     }
 
+    .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: var(--witch-rose);
+    }
+
+    .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: var(--witch-rose);
+      background: #fff5f8;
+    }
+
+    .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;
+    }
+
     .disclaimer {
       background: linear-gradient(135deg, var(--witch-lavender) 0%, var(--witch-mauve) 100%);
       border: 2px solid var(--witch-plum);
@@ -1068,6 +1189,11 @@ export class ArtGalleryComponent implements OnInit {
   currentPage = signal(1);
   pageSize = signal(25);
 
+  // Search and filter state
+  searchQuery = signal('');
+  selectedTags = signal<string[]>([]);
+  showFilters = signal(false);
+
   // Comments state
   comments = signal<Record<string, Comment[]>>({});
   commentsLoading = signal<Record<string, boolean>>({});
@@ -1104,15 +1230,47 @@ export class ArtGalleryComponent implements OnInit {
   editLinkTitle = '';
   editLinkUrl = '';
 
-  // Computed properties for pagination
+  // Computed properties
+  allTags = computed(() => {
+    const tagsSet = new Set<string>();
+    this.artPieces().forEach(art => {
+      art.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  });
+
+  filteredArtPieces = computed(() => {
+    let artPieces = this.artPieces();
+
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      artPieces = artPieces.filter(art =>
+        art.title.toLowerCase().includes(searchQuery) ||
+        art.artist.toLowerCase().includes(searchQuery) ||
+        art.description?.toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      artPieces = artPieces.filter(art =>
+        selectedTags.every(tag => art.tags?.includes(tag))
+      );
+    }
+
+    return artPieces;
+  });
+
   paginatedArtPieces = computed(() => {
-    const artPieces = this.artPieces();
+    const artPieces = this.filteredArtPieces();
     const start = (this.currentPage() - 1) * this.pageSize();
     const end = start + this.pageSize();
     return artPieces.slice(start, end);
   });
 
-  totalArtPieces = computed(() => this.artPieces().length);
+  totalArtPieces = computed(() => this.filteredArtPieces().length);
 
   ngOnInit() {
     this.loadArt();
@@ -1431,4 +1589,24 @@ export class ArtGalleryComponent implements OnInit {
     const newPage = Math.floor(firstItemIndex / pageSize) + 1;
     this.currentPage.set(newPage);
   }
+
+  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.currentPage.set(1);
+  }
+
+  toggleFilters() {
+    this.showFilters.update(v => !v);
+  }
 }

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

@@ -397,6 +397,54 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
         </form>
       }
 
+      <div class="search-section">
+        <input
+          type="text"
+          [(ngModel)]="searchQuery"
+          (ngModelChange)="onSearchChange()"
+          placeholder="Search by title, author, ISBN, or notes..."
+          class="search-input"
+        >
+        <button
+          (click)="toggleFilters()"
+          class="btn btn-secondary"
+          [class.active]="showFilters()"
+        >
+          <span>🔧 Advanced Filters</span>
+          @if (selectedTags().length > 0) {
+            <span class="filter-badge">{{ selectedTags().length }}</span>
+          }
+        </button>
+      </div>
+
+      @if (showFilters()) {
+        <div class="advanced-filters">
+          <div class="filter-group">
+            <label>Filter by Tags:</label>
+            <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 class="tag-label">{{ tag }}</span>
+                </label>
+              }
+              @empty {
+                <p class="no-tags">No tags available</p>
+              }
+            </div>
+            @if (selectedTags().length > 0) {
+              <button (click)="clearTags()" class="btn btn-sm btn-secondary clear-tags">
+                Clear All Tags
+              </button>
+            }
+          </div>
+        </div>
+      }
+
       <div class="filters">
         <button
           (click)="setFilter('all')"
@@ -680,10 +728,125 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       margin-top: 1rem;
     }
 
+    .search-section {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+      align-items: center;
+    }
+
+    .search-input {
+      flex: 1;
+      padding: 0.75rem 1rem;
+      border: 2px solid var(--witch-lavender);
+      border-radius: 4px;
+      font-size: 1rem;
+      background-color: var(--witch-moon);
+      color: var(--witch-purple);
+      transition: border-color 0.3s;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--witch-rose);
+      box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2);
+    }
+
+    .search-input::placeholder {
+      color: var(--witch-mauve);
+    }
+
+    .advanced-filters {
+      background: rgba(255, 255, 255, 0.95);
+      border: 2px solid var(--witch-lavender);
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      backdrop-filter: blur(10px);
+    }
+
+    .filter-group {
+      margin-bottom: 1rem;
+    }
+
+    .filter-group:last-child {
+      margin-bottom: 0;
+    }
+
+    .filter-group label {
+      display: block;
+      margin-bottom: 0.75rem;
+      font-weight: 600;
+      color: var(--witch-purple);
+    }
+
+    .tags-filter {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
+    }
+
+    .tag-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      border: 2px solid var(--witch-lavender);
+      border-radius: 4px;
+      transition: all 0.2s;
+      font-weight: 500;
+    }
+
+    .tag-checkbox:hover {
+      background: var(--witch-lavender);
+      transform: translateY(-1px);
+    }
+
+    .tag-checkbox input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    .tag-checkbox input[type="checkbox"]:checked + .tag-label {
+      color: #8b6f47;
+    }
+
+    .tag-checkbox:has(input:checked) {
+      background: var(--witch-lavender);
+      border-color: #8b6f47;
+    }
+
+    .tag-label {
+      font-size: 0.9rem;
+      color: var(--witch-plum);
+    }
+
+    .no-tags {
+      color: var(--witch-mauve);
+      font-style: italic;
+      margin: 0;
+    }
+
+    .clear-tags {
+      margin-top: 0.5rem;
+    }
+
+    .filter-badge {
+      background: var(--witch-rose);
+      color: var(--witch-moon);
+      padding: 0.1rem 0.4rem;
+      border-radius: 10px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-left: 0.25rem;
+    }
+
     .filters {
       display: flex;
       gap: 1rem;
       margin-bottom: 2rem;
+      flex-wrap: wrap;
     }
 
     .filter-btn {
@@ -1175,6 +1338,25 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       background: rgba(139, 111, 71, 0.2);
       text-decoration: underline;
     }
+
+    @media (max-width: 768px) {
+      .search-section {
+        flex-direction: column;
+      }
+
+      .search-input {
+        width: 100%;
+      }
+
+      .filters {
+        justify-content: center;
+      }
+
+      .filter-btn {
+        font-size: 0.85rem;
+        padding: 0.4rem 0.8rem;
+      }
+    }
   `]
 })
 export class BooksListComponent implements OnInit {
@@ -1189,6 +1371,9 @@ export class BooksListComponent implements OnInit {
   showAddForm = signal(false);
   editingBook = signal<Book | null>(null);
   statusFilter = signal<'all' | BookStatus>('all');
+  searchQuery = signal('');
+  selectedTags = signal<string[]>([]);
+  showFilters = signal(false);
 
   // Pagination state
   currentPage = signal(1);
@@ -1227,11 +1412,43 @@ export class BooksListComponent implements OnInit {
   finishedCount = computed(() => this.books().filter(book => book.status === BookStatus.finished).length);
   toReadCount = computed(() => this.books().filter(book => book.status === BookStatus.toRead).length);
 
+  // Get all unique tags from all books
+  allTags = computed(() => {
+    const tags = new Set<string>();
+    this.books().forEach(book => {
+      book.tags?.forEach(tag => tags.add(tag));
+    });
+    return Array.from(tags).sort();
+  });
+
   filteredBooks = computed(() => {
-    const filter = this.statusFilter();
+    let books = this.books();
-    const books = filter === 'all'
+
-      ? this.books()
+    // Apply status filter
-      : this.books().filter(book => book.status === filter);
+    const statusFilter = this.statusFilter();
+    if (statusFilter !== 'all') {
+      books = books.filter(book => book.status === statusFilter);
+    }
+
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      books = books.filter(book =>
+        book.title.toLowerCase().includes(searchQuery) ||
+        book.author.toLowerCase().includes(searchQuery) ||
+        book.isbn?.toLowerCase().includes(searchQuery) ||
+        book.notes?.toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      books = books.filter(book =>
+        selectedTags.every(tag => book.tags?.includes(tag))
+      );
+    }
+
     return books;
   });
 
@@ -1287,6 +1504,31 @@ export class BooksListComponent implements OnInit {
     this.currentPage.set(1); // Reset to first page when filter changes
   }
 
+  onSearchChange() {
+    this.currentPage.set(1); // Reset to first page when search changes
+  }
+
+  toggleFilters() {
+    this.showFilters.update(show => !show);
+  }
+
+  toggleTag(tag: string) {
+    this.selectedTags.update(tags => {
+      const index = tags.indexOf(tag);
+      if (index === -1) {
+        return [...tags, tag];
+      } else {
+        return tags.filter(t => t !== tag);
+      }
+    });
+    this.currentPage.set(1); // Reset to first page when tags change
+  }
+
+  clearTags() {
+    this.selectedTags.set([]);
+    this.currentPage.set(1); // Reset to first page when tags are cleared
+  }
+
   onPageChange(page: number) {
     this.currentPage.set(page);
   }

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

@@ -361,6 +361,51 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
         </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, platform, 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')"
@@ -620,6 +665,82 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       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: #ff6b6b;
+    }
+
+    .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: #ff6b6b;
+      background: #fef2f2;
+    }
+
+    .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 GamesListComponent implements OnInit {
   currentPage = signal(1);
   pageSize = signal(25);
 
+  // Search and filter state
+  searchQuery = signal('');
+  selectedTags = signal<string[]>([]);
+  showFilters = signal(false);
+
   // Comments state
   comments = signal<Record<string, Comment[]>>({});
   commentsLoading = signal<Record<string, boolean>>({});
@@ -1082,12 +1208,42 @@ export class GamesListComponent implements OnInit {
   completedCount = computed(() => this.games().filter(game => game.status === GameStatus.completed).length);
   backlogCount = computed(() => this.games().filter(game => game.status === GameStatus.backlog).length);
 
+  allTags = computed(() => {
+    const tagsSet = new Set<string>();
+    this.games().forEach(game => {
+      game.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  });
+
   filteredGames = computed(() => {
-    const filter = this.statusFilter();
+    let games = this.games();
-    if (filter === 'all') {
+
-      return this.games();
+    // Apply status filter
+    const statusFilter = this.statusFilter();
+    if (statusFilter !== 'all') {
+      games = games.filter(game => game.status === statusFilter);
     }
-    return this.games().filter(game => game.status === filter);
+
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      games = games.filter(game =>
+        game.title.toLowerCase().includes(searchQuery) ||
+        game.platform?.toLowerCase().includes(searchQuery) ||
+        game.notes?.toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      games = games.filter(game =>
+        selectedTags.every(tag => game.tags?.includes(tag))
+      );
+    }
+
+    return games;
   });
 
   paginatedGames = computed(() => {
@@ -1141,6 +1297,27 @@ export class GamesListComponent 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);
   }

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

@@ -364,6 +364,51 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
         </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, author, 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')"
@@ -621,6 +666,82 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
       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: #00b894;
+    }
+
+    .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: #00b894;
+      background: #f5fffc;
+    }
+
+    .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;
@@ -1057,6 +1178,11 @@ export class MangaListComponent 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>>({});
@@ -1085,12 +1211,42 @@ export class MangaListComponent implements OnInit {
   completedCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.completed).length);
   wantToReadCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.wantToRead).length);
 
+  allTags = computed(() => {
+    const tagsSet = new Set<string>();
+    this.mangaList().forEach(manga => {
+      manga.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  });
+
   filteredManga = computed(() => {
-    const filter = this.statusFilter();
+    let manga = this.mangaList();
-    if (filter === 'all') {
+
-      return this.mangaList();
+    // Apply status filter
+    const statusFilter = this.statusFilter();
+    if (statusFilter !== 'all') {
+      manga = manga.filter(m => m.status === statusFilter);
     }
-    return this.mangaList().filter(m => m.status === filter);
+
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      manga = manga.filter(m =>
+        m.title.toLowerCase().includes(searchQuery) ||
+        m.author.toLowerCase().includes(searchQuery) ||
+        m.notes?.toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      manga = manga.filter(m =>
+        selectedTags.every(tag => m.tags?.includes(tag))
+      );
+    }
+
+    return manga;
   });
 
   paginatedManga = computed(() => {
@@ -1144,6 +1300,27 @@ export class MangaListComponent 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);
   }

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

@@ -391,6 +391,51 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
         </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, artist, 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">
         <div class="filter-group">
           <strong>Type:</strong>
@@ -716,6 +761,82 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
       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: #8b5cf6;
+    }
+
+    .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: #8b5cf6;
+      background: #f3e8ff;
+    }
+
+    .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;
       flex-direction: column;
@@ -1265,6 +1386,11 @@ export class MusicListComponent implements OnInit {
   currentPage = signal(1);
   pageSize = signal(25);
 
+  // Search and filter state
+  searchQuery = signal('');
+  selectedTags = signal<string[]>([]);
+  showFilters = signal(false);
+
   // Comments state
   comments = signal<Record<string, Comment[]>>({});
   commentsLoading = signal<Record<string, boolean>>({});
@@ -1304,6 +1430,14 @@ export class MusicListComponent implements OnInit {
   completedCount = computed(() => this.music().filter(m => m.status === MusicStatus.completed).length);
   wantToListenCount = computed(() => this.music().filter(m => m.status === MusicStatus.wantToListen).length);
 
+  allTags = computed(() => {
+    const tagsSet = new Set<string>();
+    this.music().forEach(music => {
+      music.tags?.forEach(tag => tagsSet.add(tag));
+    });
+    return Array.from(tagsSet).sort();
+  });
+
   filteredMusic = computed(() => {
     let filtered = this.music();
 
@@ -1317,6 +1451,25 @@ export class MusicListComponent implements OnInit {
       filtered = filtered.filter(music => music.status === statusFilter);
     }
 
+    // Apply search filter
+    const searchQuery = this.searchQuery().toLowerCase().trim();
+    if (searchQuery) {
+      filtered = filtered.filter(music =>
+        music.title.toLowerCase().includes(searchQuery) ||
+        music.artist.toLowerCase().includes(searchQuery) ||
+        music.notes?.toLowerCase().includes(searchQuery) ||
+        this.getTypeLabel(music.type).toLowerCase().includes(searchQuery)
+      );
+    }
+
+    // Apply tag filter
+    const selectedTags = this.selectedTags();
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter(music =>
+        selectedTags.every(tag => music.tags?.includes(tag))
+      );
+    }
+
     return filtered;
   });
 
@@ -1377,6 +1530,28 @@ export class MusicListComponent 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.typeFilter.set('all');
+    this.statusFilter.set('all');
+    this.currentPage.set(1);
+  }
+
+  toggleFilters() {
+    this.showFilters.update(v => !v);
+  }
+
   onPageChange(page: number) {
     this.currentPage.set(page);
   }

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();
+    let shows = this.shows();
-    if (filter === 'all') {
+
-      return 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);
   }