feat(blacklist): add Blacklist Manager View

- Create BlacklistManagerView component with list of blocked artists
- Add enable/disable toggle, search filter, and clear all function
- Integrate navigation to blacklist manager from Settings
- Add Content Filtering section in Settings with artist count
- Add i18n translations for English and Spanish
- Wire up view routing in +page.svelte

src/lib/components/views/BlacklistManagerView.svelte

@@ -0,0 +1,649 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { ArrowLeft, Search, X, Trash2, Ban, ToggleLeft, ToggleRight, AlertCircle } from 'lucide-svelte';
+  import ViewTransition from '../ViewTransition.svelte';
+  import {
+    subscribe,
+    loadBlacklist,
+    removeFromBlacklist,
+    clearBlacklist,
+    setEnabled,
+    isEnabled,
+    getCachedBlacklist,
+    getCount,
+    type BlacklistedArtist
+  } from '$lib/stores/artistBlacklistStore';
+
+  interface Props {
+    onBack?: () => void;
+    onArtistSelect?: (artistId: number) => void;
+  }
+
+  let { onBack, onArtistSelect }: Props = $props();
+
+  let artists = $state<BlacklistedArtist[]>([]);
+  let enabled = $state(true);
+  let loading = $state(true);
+  let searchQuery = $state('');
+  let confirmClearOpen = $state(false);
+
+  // Filtered artists based on search
+  const filteredArtists = $derived.by(() => {
+    if (!searchQuery.trim()) return artists;
+    const query = searchQuery.trim().toLowerCase();
+    return artists.filter(a => a.artist_name.toLowerCase().includes(query));
+  });
+
+  onMount(() => {
+    loadData();
+
+    const unsubscribe = subscribe(() => {
+      artists = getCachedBlacklist();
+      enabled = isEnabled();
+    });
+
+    return unsubscribe;
+  });
+
+  async function loadData() {
+    loading = true;
+    try {
+      await loadBlacklist();
+      artists = getCachedBlacklist();
+      enabled = isEnabled();
+    } catch (err) {
+      console.error('Failed to load blacklist:', err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleRemove(artistId: number) {
+    try {
+      await removeFromBlacklist(artistId);
+    } catch (err) {
+      console.error('Failed to remove artist from blacklist:', err);
+    }
+  }
+
+  async function handleToggleEnabled() {
+    try {
+      await setEnabled(!enabled);
+    } catch (err) {
+      console.error('Failed to toggle blacklist:', err);
+    }
+  }
+
+  async function handleClearAll() {
+    try {
+      await clearBlacklist();
+      confirmClearOpen = false;
+    } catch (err) {
+      console.error('Failed to clear blacklist:', err);
+    }
+  }
+
+  function formatDate(timestamp: number): string {
+    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  }
+</script>
+
+<ViewTransition duration={200} distance={12} direction="down">
+<div class="blacklist-manager">
+  <!-- Header -->
+  <div class="header">
+    <button class="back-btn" onclick={onBack}>
+      <ArrowLeft size={16} />
+      <span>Back</span>
+    </button>
+    <div class="title-section">
+      <Ban size={24} class="title-icon" />
+      <h1>Artist Blacklist</h1>
+    </div>
+  </div>
+
+  <!-- Description -->
+  <p class="description">
+    Blacklisted artists are hidden from search results, radio, suggestions, and similar artists.
+  </p>
+
+  <!-- Controls -->
+  <div class="controls">
+    <!-- Enable/Disable Toggle -->
+    <button
+      class="toggle-btn"
+      class:enabled={enabled}
+      onclick={handleToggleEnabled}
+    >
+      {#if enabled}
+        <ToggleRight size={20} />
+        <span>Enabled</span>
+      {:else}
+        <ToggleLeft size={20} />
+        <span>Disabled</span>
+      {/if}
+    </button>
+
+    <!-- Search bar -->
+    <div class="search-container">
+      <Search size={16} class="search-icon" />
+      <input
+        type="text"
+        placeholder="Search blacklisted artists..."
+        bind:value={searchQuery}
+        class="search-input"
+      />
+      {#if searchQuery}
+        <button class="clear-search" onclick={() => searchQuery = ''}>
+          <X size={14} />
+        </button>
+      {/if}
+    </div>
+
+    <!-- Clear All Button -->
+    {#if artists.length > 0}
+      <button
+        class="clear-all-btn"
+        onclick={() => confirmClearOpen = true}
+      >
+        <Trash2 size={16} />
+        <span>Clear All</span>
+      </button>
+    {/if}
+
+    <span class="count">{getCount()} artists</span>
+  </div>
+
+  <!-- Disabled Warning -->
+  {#if !enabled}
+    <div class="warning-banner">
+      <AlertCircle size={16} />
+      <span>Blacklist is currently disabled. Artists below will appear in results.</span>
+    </div>
+  {/if}
+
+  <!-- Content -->
+  {#if loading}
+    <div class="loading">
+      <div class="spinner"></div>
+      <p>Loading blacklist...</p>
+    </div>
+  {:else if artists.length === 0}
+    <div class="empty">
+      <Ban size={48} class="empty-icon" />
+      <p>No blacklisted artists</p>
+      <span class="empty-hint">To blacklist an artist, go to their page and click the ban icon.</span>
+    </div>
+  {:else if filteredArtists.length === 0}
+    <div class="empty">
+      <Search size={48} class="empty-icon" />
+      <p>No results for "{searchQuery}"</p>
+    </div>
+  {:else}
+    <div class="list">
+      {#each filteredArtists as artist (artist.artist_id)}
+        <div class="list-item">
+          <div
+            class="artist-info"
+            role="button"
+            tabindex="0"
+            onclick={() => onArtistSelect?.(artist.artist_id)}
+            onkeydown={(e) => e.key === 'Enter' && onArtistSelect?.(artist.artist_id)}
+          >
+            <div class="artist-avatar">
+              <Ban size={20} />
+            </div>
+            <div class="artist-details">
+              <span class="artist-name">{artist.artist_name}</span>
+              <span class="artist-meta">Added {formatDate(artist.added_at)}</span>
+              {#if artist.notes}
+                <span class="artist-notes">{artist.notes}</span>
+              {/if}
+            </div>
+          </div>
+          <button
+            class="remove-btn"
+            onclick={() => handleRemove(artist.artist_id)}
+            title="Remove from blacklist"
+          >
+            <X size={18} />
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+</ViewTransition>
+
+<!-- Confirm Clear Modal -->
+{#if confirmClearOpen}
+  <div
+    class="modal-overlay"
+    role="button"
+    tabindex="0"
+    onclick={() => confirmClearOpen = false}
+    onkeydown={(e) => e.key === 'Escape' && (confirmClearOpen = false)}
+  >
+    <div
+      class="modal-content"
+      role="dialog"
+      aria-modal="true"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <h2 class="modal-title">Clear Blacklist?</h2>
+      <p class="modal-text">
+        This will remove all {artists.length} artists from your blacklist. This action cannot be undone.
+      </p>
+      <div class="modal-actions">
+        <button class="modal-btn cancel" onclick={() => confirmClearOpen = false}>
+          Cancel
+        </button>
+        <button class="modal-btn danger" onclick={handleClearAll}>
+          Clear All
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .blacklist-manager {
+    padding: 24px;
+    padding-left: 18px;
+    padding-right: 8px;
+    padding-bottom: 100px;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* Custom scrollbar */
+  .blacklist-manager::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .blacklist-manager::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .blacklist-manager::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+  }
+
+  .blacklist-manager::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+
+  .title-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .title-section :global(.title-icon) {
+    color: var(--text-muted);
+  }
+
+  .header h1 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .back-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    transition: color 150ms ease;
+  }
+
+  .back-btn:hover {
+    color: var(--text-primary);
+  }
+
+  .description {
+    color: var(--text-muted);
+    font-size: 14px;
+    margin: 0 0 20px 0;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+
+  .toggle-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background: var(--bg-tertiary);
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .toggle-btn:hover {
+    background: var(--bg-hover);
+  }
+
+  .toggle-btn.enabled {
+    color: var(--accent-primary);
+  }
+
+  .search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    max-width: 280px;
+  }
+
+  .search-container :global(.search-icon) {
+    position: absolute;
+    left: 10px;
+    color: var(--text-muted);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 8px 32px 8px 34px;
+    background: var(--bg-tertiary);
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 13px;
+    outline: none;
+    transition: border-color 150ms ease;
+  }
+
+  .search-input:focus {
+    border-color: var(--accent-primary);
+  }
+
+  .search-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .clear-search {
+    position: absolute;
+    right: 6px;
+    padding: 4px;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 150ms ease;
+  }
+
+  .clear-search:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .clear-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background: var(--bg-tertiary);
+    border: none;
+    border-radius: 6px;
+    color: #ef4444;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .clear-all-btn:hover {
+    background: rgba(239, 68, 68, 0.15);
+  }
+
+  .count {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-left: auto;
+  }
+
+  .warning-banner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: rgba(251, 191, 36, 0.1);
+    border: 1px solid rgba(251, 191, 36, 0.3);
+    border-radius: 8px;
+    color: #fbbf24;
+    font-size: 13px;
+    margin-bottom: 16px;
+  }
+
+  .loading,
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px;
+    color: var(--text-muted);
+  }
+
+  .empty :global(.empty-icon) {
+    opacity: 0.3;
+    margin-bottom: 16px;
+  }
+
+  .empty p {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+  }
+
+  .empty-hint {
+    font-size: 13px;
+    opacity: 0.7;
+    text-align: center;
+  }
+
+  .spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--bg-tertiary);
+    border-top-color: var(--accent-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    transition: background-color 150ms ease;
+  }
+
+  .list-item:hover {
+    background: var(--bg-tertiary);
+  }
+
+  .artist-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  .artist-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .artist-details {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .artist-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .artist-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .artist-notes {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-style: italic;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .remove-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .remove-btn:hover {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+  }
+
+  /* Modal */
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+  }
+
+  .modal-content {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 24px;
+    min-width: 320px;
+    max-width: 400px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 12px 0;
+  }
+
+  .modal-text {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0 0 20px 0;
+    line-height: 1.5;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  .modal-btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .modal-btn.cancel {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .modal-btn.cancel:hover {
+    background: var(--bg-hover);
+  }
+
+  .modal-btn.danger {
+    background: #ef4444;
+    color: white;
+  }
+
+  .modal-btn.danger:hover {
+    background: #dc2626;
+  }
+</style>

src/lib/components/views/SettingsView.svelte

@@ -4,7 +4,7 @@
   import ViewTransition from '../ViewTransition.svelte';
   import { getCurrentWebview } from '@tauri-apps/api/webview';
   import { writeText as copyToClipboard } from '@tauri-apps/plugin-clipboard-manager';
-  import { ArrowLeft, ChevronRight, ChevronDown, ChevronUp, Loader2, Sun, Moon, SunMoon, HelpCircle } from 'lucide-svelte';
+  import { ArrowLeft, ChevronRight, ChevronDown, ChevronUp, Loader2, Sun, Moon, SunMoon, HelpCircle, Ban } from 'lucide-svelte';
   import Toggle from '../Toggle.svelte';
   import Dropdown from '../Dropdown.svelte';
   import DeviceDropdown from '../DeviceDropdown.svelte';
@@ -75,6 +75,12 @@
     type UpdatePreferences
   } from '$lib/stores/updatesStore';
   import { openReleasePageAndAcknowledge } from '$lib/services/updatesService';
+  import { navigateTo } from '$lib/stores/navigationStore';
+  import {
+    getCount as getBlacklistCount,
+    isEnabled as isBlacklistEnabled,
+    subscribe as subscribeBlacklist
+  } from '$lib/stores/artistBlacklistStore';
 
   interface Props {
     onBack?: () => void;
@@ -164,6 +170,10 @@
   let isSettingsWhatsNewOpen = $state(false);
   let settingsWhatsNewRelease = $state<ReleaseInfo | null>(null);
 
+  // Blacklist state
+  let blacklistCount = $state(getBlacklistCount());
+  let blacklistEnabled = $state(isBlacklistEnabled());
+
   // Section navigation
   let settingsViewEl: HTMLDivElement;
   let audioSection: HTMLElement;
@@ -172,6 +182,7 @@
   let appearanceSection: HTMLElement;
   let downloadsSection: HTMLElement;
   let librarySection: HTMLElement;
+  let contentFilteringSection: HTMLElement;
   let integrationsSection: HTMLElement;
   let updatesSection: HTMLElement;
   let storageSection: HTMLElement;
@@ -190,6 +201,7 @@
     { id: 'appearance', labelKey: 'settings.appearance.title' },
     { id: 'downloads', labelKey: 'settings.offlineLibrary.title' },
     { id: 'library', labelKey: 'settings.library.title' },
+    { id: 'content-filtering', labelKey: 'settings.contentFiltering.title' },
     { id: 'integrations', labelKey: 'settings.integrations.title' },
     { id: 'updates', labelKey: 'nav.updates' },
     { id: 'storage', labelKey: 'settings.storage.title' },
@@ -212,6 +224,7 @@
       case 'appearance': return appearanceSection;
       case 'downloads': return downloadsSection;
       case 'library': return librarySection;
+      case 'content-filtering': return contentFilteringSection;
       case 'integrations': return integrationsSection;
       case 'updates': return updatesSection;
       case 'storage': return storageSection;
@@ -703,6 +716,12 @@
       hideTitleBar = getHideTitleBar();
     });
 
+    // Subscribe to blacklist state changes
+    const unsubscribeBlacklist = subscribeBlacklist(() => {
+      blacklistCount = getBlacklistCount();
+      blacklistEnabled = isBlacklistEnabled();
+    });
+
     // Scroll tracking for navigation
     const handleScroll = () => {
       if (!settingsViewEl) return;
@@ -732,6 +751,7 @@
       unsubscribeZoom();
       unsubscribeTitleBar();
       unsubscribeUpdates();
+      unsubscribeBlacklist();
       settingsViewEl?.removeEventListener('scroll', handleScroll);
     };
   });
@@ -2384,6 +2404,31 @@
     </div>
   </section>
 
+  <!-- Content Filtering Section -->
+  <section class="section" bind:this={contentFilteringSection}>
+    <h3 class="section-title">{$t('settings.contentFiltering.title')}</h3>
+    <div class="setting-row last">
+      <div class="setting-info">
+        <div class="setting-with-icon">
+          <Ban size={18} class="setting-icon" />
+          <div class="setting-with-description">
+            <span class="setting-label">{$t('settings.contentFiltering.artistBlacklist')}</span>
+            <span class="setting-description">
+              {blacklistCount} {blacklistCount === 1 ? 'artist' : 'artists'} blocked
+              {#if !blacklistEnabled}
+                <span class="status-disabled">({$t('settings.contentFiltering.disabled')})</span>
+              {/if}
+            </span>
+          </div>
+        </div>
+      </div>
+      <button class="link-btn" onclick={() => navigateTo('blacklist-manager')}>
+        {$t('settings.contentFiltering.manage')}
+        <ChevronRight size={16} />
+      </button>
+    </div>
+  </section>
+
   <!-- Integrations Section -->
   <section class="section" bind:this={integrationsSection}>
     <h3 class="section-title">{$t('settings.integrations.title')}</h3>
@@ -3753,6 +3798,43 @@ flatpak override --user --filesystem=/home/USUARIO/Música com.blitzfc.qbz</pre>
     color: var(--text-primary);
   }
 
+  /* Content Filtering Section */
+  .setting-with-icon {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .setting-with-icon :global(.setting-icon) {
+    color: var(--text-muted);
+    margin-top: 2px;
+    flex-shrink: 0;
+  }
+
+  .link-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 12px;
+    background: var(--bg-tertiary);
+    border: none;
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .link-btn:hover {
+    background: var(--bg-hover);
+  }
+
+  .status-disabled {
+    color: #fbbf24;
+    font-size: 12px;
+  }
+
 </style>
 
 <MigrationModal

src/lib/i18n/locales/en.json

@@ -437,6 +437,12 @@
       "fetchArtistImages": "Fetch Qobuz™ Artist Images",
       "fetchArtistImagesDesc": "Show artist photos from Qobuz™ in local library"
     },
+    "contentFiltering": {
+      "title": "Content Filtering",
+      "artistBlacklist": "Artist Blacklist",
+      "manage": "Manage",
+      "disabled": "disabled"
+    },
     "integrations": {
       "title": "Integrations",
       "lastfm": "Last.fm",

src/lib/i18n/locales/es.json

@@ -437,6 +437,12 @@
       "fetchArtistImages": "Obtener imágenes de artistas de Qobuz™",
       "fetchArtistImagesDesc": "Mostrar fotos de artistas de Qobuz™ en la biblioteca local"
     },
+    "contentFiltering": {
+      "title": "Filtrado de Contenido",
+      "artistBlacklist": "Lista negra de artistas",
+      "manage": "Administrar",
+      "disabled": "deshabilitado"
+    },
     "integrations": {
       "title": "Integraciones",
       "lastfm": "Last.fm",

src/lib/stores/navigationStore.ts

@@ -18,6 +18,7 @@ export type ViewType =
   | 'label'
   | 'playlist'
   | 'playlist-manager'
+  | 'blacklist-manager'
   | 'favorites-tracks'
   | 'favorites-albums'
   | 'favorites-artists'

src/routes/+page.svelte

@@ -290,6 +290,7 @@
   import FavoritesView from '$lib/components/views/FavoritesView.svelte';
   import LocalLibraryView from '$lib/components/views/LocalLibraryView.svelte';
   import PlaylistManagerView from '$lib/components/views/PlaylistManagerView.svelte';
+  import BlacklistManagerView from '$lib/components/views/BlacklistManagerView.svelte';
 
   // Overlays
   import QueuePanel from '$lib/components/QueuePanel.svelte';
@@ -3167,6 +3168,11 @@
             sidebarRef?.refreshLocalTrackCounts();
           }}
         />
+      {:else if activeView === 'blacklist-manager'}
+        <BlacklistManagerView
+          onBack={navGoBack}
+          onArtistSelect={selectArtist}
+        />
       {/if}
     </main>