Audio Effects Preset List (EffectsTab/EffectsList.tsx)

React list pane that loads effect presets through React Query and shows them as selectable cards. Includes creation and selection state via a Zustand store. Reuse it for preset browsers in audio or voice apps.

// Source: https://github.com/mperkins0155/voicebox | License: MIT | Copyright 2026 Voicebox Contributors
// Provided via justclaw.it.com; keep this notice with the code.
import { useQuery } from '@tanstack/react-query';
import { Loader2, Plus, Sparkles, Wand2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
  ListPane,
  ListPaneActions,
  ListPaneHeader,
  ListPaneScroll,
  ListPaneTitle,
  ListPaneTitleRow,
} from '@/components/ListPane';
import { Button } from '@/components/ui/button';
import { apiClient } from '@/lib/api/client';
import type { EffectPresetResponse } from '@/lib/api/types';
import { cn } from '@/lib/utils/cn';
import { useEffectsStore } from '@/stores/effectsStore';

export function EffectsList() {
  const { t } = useTranslation();
  cons

... (truncated -- full source via MCP)