diff --git a/src/App.svelte b/src/App.svelte index 6b8435e..37a2923 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -23,8 +23,8 @@ savePitchLockFrequency, loadExpandedCategories, saveExpandedCategories, - loadEnabledProcessorCategories, - saveEnabledProcessorCategories, + loadSelectedProcessorCategory, + saveSelectedProcessorCategory, } from "./lib/utils/settings"; import { cropAudio, @@ -68,8 +68,8 @@ let canUndo = $state(false); let sidebarOpen = $state(false); let expandedCategories = $state>(loadExpandedCategories()); - let enabledProcessorCategories = $state>( - loadEnabledProcessorCategories() as Set + let selectedProcessorCategory = $state( + loadSelectedProcessorCategory() ); const showDuration = $derived(engineType !== "sample"); @@ -111,7 +111,7 @@ }); $effect(() => { - saveEnabledProcessorCategories(enabledProcessorCategories as Set); + saveSelectedProcessorCategory(selectedProcessorCategory); }); // Group engines by category @@ -137,14 +137,8 @@ expandedCategories = newSet; } - function toggleProcessorCategory(category: ProcessorCategory) { - const newSet = new Set(enabledProcessorCategories); - if (newSet.has(category)) { - newSet.delete(category); - } else { - newSet.add(category); - } - enabledProcessorCategories = newSet; + function selectProcessorCategory(category: ProcessorCategory | 'All') { + selectedProcessorCategory = category; } onMount(() => { @@ -714,8 +708,8 @@
{/if} diff --git a/src/lib/components/ProcessorPopup.svelte b/src/lib/components/ProcessorPopup.svelte index 6997822..a0a1064 100644 --- a/src/lib/components/ProcessorPopup.svelte +++ b/src/lib/components/ProcessorPopup.svelte @@ -4,11 +4,11 @@ interface Props { onselect: (processor: AudioProcessor) => void; - enabledCategories: Set; - ontogglecategory: (category: ProcessorCategory) => void; + selectedCategory: ProcessorCategory | 'All'; + onselectcategory: (category: ProcessorCategory | 'All') => void; } - let { onselect, enabledCategories, ontogglecategory }: Props = $props(); + let { onselect, selectedCategory, onselectcategory }: Props = $props(); const allProcessors = getAllProcessors(); @@ -24,22 +24,40 @@ 'Utility' ]; + const categoryCountsMap = $derived.by(() => { + const counts = new Map(); + for (const processor of allProcessors) { + const category = processor.getCategory(); + counts.set(category, (counts.get(category) || 0) + 1); + } + return counts; + }); + const filteredProcessors = $derived( - allProcessors - .filter(p => enabledCategories.has(p.getCategory())) - .sort((a, b) => a.getName().localeCompare(b.getName())) + selectedCategory === 'All' + ? allProcessors.sort((a, b) => a.getName().localeCompare(b.getName())) + : allProcessors + .filter(p => p.getCategory() === selectedCategory) + .sort((a, b) => a.getName().localeCompare(b.getName())) );
diff --git a/src/lib/utils/settings.ts b/src/lib/utils/settings.ts index 9d06b4d..f8a7881 100644 --- a/src/lib/utils/settings.ts +++ b/src/lib/utils/settings.ts @@ -9,7 +9,7 @@ const STORAGE_KEYS = { PITCH_LOCK_ENABLED: 'pitchLockEnabled', PITCH_LOCK_FREQUENCY: 'pitchLockFrequency', EXPANDED_CATEGORIES: 'expandedCategories', - ENABLED_PROCESSOR_CATEGORIES: 'enabledProcessorCategories', + SELECTED_PROCESSOR_CATEGORY: 'selectedProcessorCategory', } as const; export function loadVolume(): number { @@ -65,19 +65,11 @@ export function saveExpandedCategories(categories: Set): void { localStorage.setItem(STORAGE_KEYS.EXPANDED_CATEGORIES, JSON.stringify(Array.from(categories))); } -export function loadEnabledProcessorCategories(): Set { - const stored = localStorage.getItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES); - if (stored) { - try { - const parsed = JSON.parse(stored); - return new Set(Array.isArray(parsed) ? parsed : []); - } catch { - return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']); - } - } - return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']); +export function loadSelectedProcessorCategory(): string { + const stored = localStorage.getItem(STORAGE_KEYS.SELECTED_PROCESSOR_CATEGORY); + return stored || 'All'; } -export function saveEnabledProcessorCategories(categories: Set): void { - localStorage.setItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES, JSON.stringify(Array.from(categories))); +export function saveSelectedProcessorCategory(category: string): void { + localStorage.setItem(STORAGE_KEYS.SELECTED_PROCESSOR_CATEGORY, category); }