feat: Search and Sort Artists on Homepage

app/main.py

···
             item_path = os.path.join(base, item)
             if os.path.isdir(item_path):
                 file_count, total_size = _count_artist_mp3_stats(item_path)
+                try:
+                    modified_at = os.path.getmtime(item_path)
+                except OSError:
+                    modified_at = 0
                 artists.append({
                     'id': item,
                     'name': item,
                     'path': item,
                     'file_count': file_count,
-                    'total_size': total_size
+                    'total_size': total_size,
+                    'modified_at': modified_at
                 })
         artists.sort(key=lambda x: x['name'].lower())
         return web.json_response(artists)

ui/src/app/components/home.component.ts

···
 import { Component, OnInit, inject, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faUserCircle, faMusic, faSpinner } from '@fortawesome/free-solid-svg-icons'; // faUserCircle for empty state only
+import { faUserCircle, faMusic, faSpinner, faSearch, faSort } from '@fortawesome/free-solid-svg-icons';
 import { MusicService, Artist } from '../services/music.service';
+
+export type ArtistSortOption = 'name_asc' | 'name_desc' | 'recently_added' | 'last_updated' | 'most_tracks' | 'most_storage';
 
 @Component({
   selector: 'app-home',
···
         <p class="home-subtitle text-muted">Click an artist to open their page</p>
       </div>
 
+      @if (!loading && artists.length > 0) {
+        <div class="home-toolbar">
+          <div class="search-wrap">
+            <fa-icon [icon]="faSearch" class="search-icon" />
+            <input
+              type="text"
+              class="form-control search-input"
+              placeholder="Search artists..."
+              [value]="searchQuery"
+              (input)="onSearchInput($event)"
+              autocomplete="off" />
+          </div>
+          <div class="sort-wrap">
+            <fa-icon [icon]="faSort" class="sort-icon" />
+            <select class="form-select sort-select" (change)="onSortChange($event)">
+              <option value="name_asc">Alphabetical (A–Z)</option>
+              <option value="name_desc">Alphabetical (Z–A)</option>
+              <option value="recently_added">Recently added</option>
+              <option value="last_updated">Last updated</option>
+              <option value="most_tracks">Most tracks</option>
+              <option value="most_storage">Most storage</option>
+            </select>
+          </div>
+        </div>
+      }
+
       @if (loading) {
         <div class="text-center p-5">
           <fa-icon [icon]="faSpinner" size="2x" class="text-muted fa-spin" />
···
           <h4>No artists yet</h4>
           <p class="text-muted">Add an artist from the sidebar to get started.</p>
         </div>
+      } @else if (filteredArtists.length === 0) {
+        <div class="empty-state">
+          <fa-icon [icon]="faSearch" size="4x" class="text-muted mb-3" />
+          <h4>No artists match your search</h4>
+          <p class="text-muted">Try a different search term.</p>
+        </div>
       } @else {
         <div class="artists-grid">
-          @for (artist of artists; track artist.id) {
+          @for (artist of filteredArtists; track artist.id) {
             <button
               type="button"
               class="artist-card"
···
       font-size: 0.95rem;
     }
 
+    .home-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      margin-bottom: 1.5rem;
+    }
+
+    .search-wrap {
+      position: relative;
+      flex: 1;
+      min-width: 200px;
+      max-width: 320px;
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--bs-secondary);
+      pointer-events: none;
+    }
+
+    .search-input {
+      padding-left: 2.25rem;
+    }
+
+    .sort-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-width: 180px;
+    }
+
+    .sort-icon {
+      color: var(--bs-secondary);
+      margin-right: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    .sort-select {
+      flex: 1;
+    }
+
     .empty-state {
       display: flex;
       flex-direction: column;
···
 
   artists: Artist[] = [];
   loading = false;
+  searchQuery = '';
+  sortBy: ArtistSortOption = 'name_asc';
 
   faUserCircle = faUserCircle;
   faMusic = faMusic;
   faSpinner = faSpinner;
+  faSearch = faSearch;
+  faSort = faSort;
+
+  get filteredArtists(): Artist[] {
+    const q = this.searchQuery.trim().toLowerCase();
+    let list = q
+      ? this.artists.filter(a => a.name.toLowerCase().includes(q))
+      : [...this.artists];
+    const opt = this.sortBy;
+    if (opt === 'name_asc') list.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+    else if (opt === 'name_desc') list.sort((a, b) => b.name.localeCompare(a.name, undefined, { sensitivity: 'base' }));
+    else if (opt === 'recently_added' || opt === 'last_updated') list.sort((a, b) => (b.modified_at ?? 0) - (a.modified_at ?? 0));
+    else if (opt === 'most_tracks') list.sort((a, b) => (b.file_count ?? 0) - (a.file_count ?? 0));
+    else if (opt === 'most_storage') list.sort((a, b) => (b.total_size ?? 0) - (a.total_size ?? 0));
+    return list;
+  }
 
   ngOnInit() {
     this.loadArtists();
+  }
+
+  onSearchInput(e: Event) {
+    this.searchQuery = (e.target as HTMLInputElement).value;
+  }
+
+  onSortChange(e: Event) {
+    this.sortBy = (e.target as HTMLSelectElement).value as ArtistSortOption;
   }
 
   loadArtists() {

ui/src/app/services/music.service.ts

···
   path?: string;
   file_count?: number;
   total_size?: number;
+  modified_at?: number;
   albums?: Album[];
   singles?: Single[];
 }