feat: add ability to search

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);
+  }
 }