feat(dashboard): show all provider presets by default in Create API Profile modal

Remove collapsible "More Presets" toggle. All alternative providers are
now always visible in a labeled section below Featured Providers,
improving discoverability for users like Minimax, GLM, DeepSeek.

Closes #892
This commit is contained in:
Tam Nhu Tran committed 2026-04-02 12:52:17 -04:00
1 parent 0ae6f54787
commit f61cc87aa2
1 file changed
+15 -51
@@ -31,17 +31,7 @@ import { Badge } from '@/components/ui/badge';
import { ProviderLogo } from '@/components/cliproxy/provider-logo'; import { ProviderLogo } from '@/components/cliproxy/provider-logo';
import { useCreateProfile } from '@/hooks/use-profiles'; import { useCreateProfile } from '@/hooks/use-profiles';
import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models'; import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models';
import { import { Loader2, Plus, AlertTriangle, Info, Eye, EyeOff, Settings2, Sparkles } from 'lucide-react';
Loader2,
Plus,
AlertTriangle,
Info,
Eye,
EyeOff,
Settings2,
Sparkles,
ChevronDown,
} from 'lucide-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -113,9 +103,6 @@ const RECOMMENDED_PRESETS = getPresetsByCategory('recommended');
const QUICK_TEMPLATE_PRESETS = PROVIDER_PRESETS.filter( const QUICK_TEMPLATE_PRESETS = PROVIDER_PRESETS.filter(
(preset) => preset.category !== 'recommended' (preset) => preset.category !== 'recommended'
); );
const QUICK_TEMPLATE_PRESET_IDS = new Set<string>(
QUICK_TEMPLATE_PRESETS.map((preset) => preset.id)
);
export function ProfileCreateDialog({ export function ProfileCreateDialog({
open, open,
@@ -129,7 +116,6 @@ export function ProfileCreateDialog({
const [urlWarning, setUrlWarning] = useState<string | null>(null); const [urlWarning, setUrlWarning] = useState<string | null>(null);
const [showApiKey, setShowApiKey] = useState(false); const [showApiKey, setShowApiKey] = useState(false);
const [selectedPreset, setSelectedPreset] = useState<PresetSelection>(DEFAULT_PRESET_ID); const [selectedPreset, setSelectedPreset] = useState<PresetSelection>(DEFAULT_PRESET_ID);
const [showMorePresets, setShowMorePresets] = useState(false);
const [modelSearch, setModelSearch] = useState(''); const [modelSearch, setModelSearch] = useState('');
// OpenRouter models for model picker // OpenRouter models for model picker
@@ -192,7 +178,6 @@ export function ProfileCreateDialog({
setActiveTab('basic'); setActiveTab('basic');
setUrlWarning(null); setUrlWarning(null);
setShowApiKey(false); setShowApiKey(false);
setShowMorePresets(false);
setModelSearch(''); setModelSearch('');
// Set initial preset based on initialMode // Set initial preset based on initialMode
@@ -221,13 +206,11 @@ export function ProfileCreateDialog({
if (preset) { if (preset) {
setSelectedPreset(preset.id); setSelectedPreset(preset.id);
setShowMorePresets(QUICK_TEMPLATE_PRESET_IDS.has(preset.id));
applyPresetToForm(preset); applyPresetToForm(preset);
return; return;
} }
setSelectedPreset(CUSTOM_PRESET_ID); setSelectedPreset(CUSTOM_PRESET_ID);
setShowMorePresets(false);
applyPresetToForm(null); applyPresetToForm(null);
}; };
@@ -290,10 +273,7 @@ export function ProfileCreateDialog({
!!errors.model || !!errors.opusModel || !!errors.sonnetModel || !!errors.haikuModel; !!errors.model || !!errors.opusModel || !!errors.sonnetModel || !!errors.haikuModel;
const isCreating = createMutation.isPending; const isCreating = createMutation.isPending;
const isQuickTemplateSelected =
selectedPreset !== CUSTOM_PRESET_ID && QUICK_TEMPLATE_PRESET_IDS.has(selectedPreset);
const isOpenRouter = currentPreset?.id === DEFAULT_PRESET_ID; const isOpenRouter = currentPreset?.id === DEFAULT_PRESET_ID;
const showQuickTemplates = showMorePresets || isQuickTemplateSelected;
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
@@ -353,38 +333,22 @@ export function ProfileCreateDialog({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Button <Label className="text-xs font-medium uppercase tracking-[0.12em] text-foreground/70">
type="button"
variant="ghost"
size="sm"
onClick={() => setShowMorePresets((current) => !current)}
aria-expanded={showQuickTemplates}
className="h-8 px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
>
<ChevronDown
className={cn(
'mr-1 h-3.5 w-3.5 transition-transform',
showQuickTemplates ? 'rotate-0' : '-rotate-90'
)}
/>
{t('profileEditor.morePresets')} {t('profileEditor.morePresets')}
</Button> </Label>
<div className="-mx-1 overflow-x-auto pb-1">
{showQuickTemplates && ( <div className="flex min-w-max items-stretch gap-2 px-1">
<div className="-mx-1 overflow-x-auto pb-1"> {QUICK_TEMPLATE_PRESETS.map((preset) => (
<div className="flex min-w-max items-stretch gap-2 px-1"> <CompactPresetCard
{QUICK_TEMPLATE_PRESETS.map((preset) => ( key={preset.id}
<CompactPresetCard preset={preset}
key={preset.id} isSelected={selectedPreset === preset.id}
preset={preset} onClick={() => handlePresetSelect(preset.id)}
isSelected={selectedPreset === preset.id} density="compact"
onClick={() => handlePresetSelect(preset.id)} />
density="compact" ))}
/>
))}
</div>
</div> </div>
)} </div>
</div> </div>
</div> </div>
</div> </div>