@nextclaw/ui 0.15.10 → 0.15.12

package/src/features/settings/pages/providers-config-page.tsx

@@ -1,8 +1,14 @@
 import { useMemo, useState } from 'react';
 import { KeyRound, MoreHorizontal, Plus, Search, Trash2 } from 'lucide-react';
-import { useCreateProvider, useDeleteProvider, useProviders, useProviderTemplates, useUpdateProvider } from '@/shared/hooks/use-config';
+import {
+  useCreateProvider,
+  useDeleteProvider,
+  useProviders,
+  useProviderTemplates,
+  useUpdateProvider
+} from '@/shared/hooks/use-config';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Switch } from '@/shared/components/ui/switch';
@@ -18,7 +24,7 @@ import {
   ConfigSplitPage,
   ConfigSplitPaneBody,
   ConfigSplitPaneHeader,
-  ConfigSplitSidebar,
+  ConfigSplitSidebar
 } from '@/shared/components/config-split-page';
 
 function formatBasePreview(base?: string | null) {
@@ -35,7 +41,7 @@ function formatBasePreview(base?: string | null) {
 
 function sortProvidersForDisplay<T extends { providerId: string; providerType: string | null }>(
   providers: T[],
-  pinnedProviderIds: string[] = [],
+  pinnedProviderIds: string[] = []
 ) {
   const pinnedOrder = new Map(pinnedProviderIds.map((providerId, index) => [providerId, index]));
   return providers
@@ -84,88 +90,110 @@ export function ProvidersConfigPage() {
   const [query, setQuery] = useState('');
   const providers = useMemo(
     () => sortProvidersForDisplay(Object.values(providersView?.providers ?? {}), recentProviderIds),
-    [providersView?.providers, recentProviderIds],
+    [providersView?.providers, recentProviderIds]
   );
   const templates = useMemo(() => templatesView?.providerTemplates ?? [], [templatesView?.providerTemplates]);
   const pickerTemplates = useMemo(() => sortTemplatesForPicker(templates), [templates]);
-  const templateByType = useMemo(() => new Map(templates.map((template) => [template.providerType, template])), [templates]);
+  const templateByType = useMemo(
+    () => new Map(templates.map((template) => [template.providerType, template])),
+    [templates]
+  );
 
   const filteredProviders = useMemo(() => {
     const keyword = query.trim().toLowerCase();
-    return providers
-      .filter((provider) => {
-        if (!keyword) {
-          return true;
-        }
-        const template = provider.providerType ? templateByType.get(provider.providerType) : null;
-        const display = provider.displayName?.trim() || template?.displayName || provider.providerId;
-        return display.toLowerCase().includes(keyword) || provider.providerId.toLowerCase().includes(keyword);
-      });
+    return providers.filter((provider) => {
+      if (!keyword) {
+        return true;
+      }
+      const template = provider.providerType ? templateByType.get(provider.providerType) : null;
+      const display = provider.displayName?.trim() || template?.displayName || provider.providerId;
+      return display.toLowerCase().includes(keyword) || provider.providerId.toLowerCase().includes(keyword);
+    });
   }, [providers, query, templateByType]);
 
   const resolvedSelectedProvider = useMemo(() => {
     if (selectedProvider && filteredProviders.some((provider) => provider.providerId === selectedProvider)) {
       return selectedProvider;
     }
-    return isMobile ? null : filteredProviders[0]?.providerId ?? null;
+    return isMobile ? null : (filteredProviders[0]?.providerId ?? null);
   }, [filteredProviders, isMobile, selectedProvider]);
 
   if (!providersView || !templatesView) {
-    return <div className="p-8">{t('providersLoading')}</div>;
+    return (
+      <SettingsPage title={t('providersPageTitle')} description={t('providersPageDescription')} layout='split'>
+        <div className='text-sm text-muted-foreground'>{t('providersLoading')}</div>
+      </SettingsPage>
+    );
   }
 
   return (
-    <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t('providersPageTitle')} description={t('providersPageDescription')} />
+    <SettingsPage title={t('providersPageTitle')} description={t('providersPageDescription')} layout='split'>
       <ConfigSplitPage
-        className="xl:min-h-0"
-        mobileView={isMobile ? (resolvedSelectedProvider ? 'detail' : 'list') : undefined}
+        className='md:min-h-0'
+        compactView={selectedProvider ? 'detail' : 'list'}
         onMobileBack={() => setSelectedProvider(null)}
         mobileListLabel={t('providersPageTitle')}
       >
         <ConfigSplitSidebar>
-          <ConfigSplitPaneHeader className="space-y-3 px-4 pb-3 pt-4">
+          <ConfigSplitPaneHeader className='space-y-3 px-4 pb-3 pt-4'>
             <Popover open={providerPickerOpen} onOpenChange={setProviderPickerOpen}>
               <PopoverTrigger asChild>
-                <Button type="button" variant="outline" className="w-full justify-center" disabled={createProvider.isPending}>
-                  <Plus className="mr-2 h-4 w-4" />
+                <Button
+                  type='button'
+                  variant='outline'
+                  className='w-full justify-center'
+                  disabled={createProvider.isPending}
+                >
+                  <Plus className='mr-2 h-4 w-4' />
                   {createProvider.isPending ? t('saving') : t('providerAdd')}
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-[42rem] max-w-[calc(100vw-2rem)] p-3" align="start">
-                <div className="mb-2 px-1 text-xs font-semibold text-muted-foreground">{t('providerTemplatePickerTitle')}</div>
-                <div className="grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
+              <PopoverContent className='w-[42rem] max-w-[calc(100vw-2rem)] p-3' align='start'>
+                <div className='mb-2 px-1 text-xs font-semibold text-muted-foreground'>
+                  {t('providerTemplatePickerTitle')}
+                </div>
+                <div className='grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3'>
                   <button
-                    type="button"
-                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45"
+                    type='button'
+                    className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45'
                     onClick={async () => {
                       try {
-                        const result = await createProvider.mutateAsync({ data: { providerType: null } });
+                        const result = await createProvider.mutateAsync({
+                          data: { providerType: null }
+                        });
                         setQuery('');
                         setSelectedProvider(result.providerId);
-                        setRecentProviderIds((current) => [result.providerId, ...current.filter((providerId) => providerId !== result.providerId)]);
+                        setRecentProviderIds((current) => [
+                          result.providerId,
+                          ...current.filter((providerId) => providerId !== result.providerId)
+                        ]);
                         setProviderPickerOpen(false);
                       } catch {
                         // toast handled in hook
                       }
                     }}
                   >
-                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border/60 bg-muted/50" />
-                    <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
+                    <LogoBadge name='custom' className='h-8 w-8 rounded-lg border border-border/60 bg-muted/50' />
+                    <span className='line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground'>
                       {t('providerAddCustom')}
                     </span>
                   </button>
                   {pickerTemplates.map((template) => (
                     <button
                       key={template.providerType}
-                      type="button"
-                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40"
+                      type='button'
+                      className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40'
                       onClick={async () => {
                         try {
-                          const result = await createProvider.mutateAsync({ data: { providerType: template.providerType } });
+                          const result = await createProvider.mutateAsync({
+                            data: { providerType: template.providerType }
+                          });
                           setQuery('');
                           setSelectedProvider(result.providerId);
-                          setRecentProviderIds((current) => [result.providerId, ...current.filter((providerId) => providerId !== result.providerId)]);
+                          setRecentProviderIds((current) => [
+                            result.providerId,
+                            ...current.filter((providerId) => providerId !== result.providerId)
+                          ]);
                           setProviderPickerOpen(false);
                         } catch {
                           // toast handled in hook
@@ -175,10 +203,10 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={template.providerType}
                         src={template.logo ? `/logos/${template.logo}` : null}
-                        className="h-8 w-8 rounded-lg border border-border/55 bg-background"
-                        imgClassName="h-4 w-4 object-contain"
+                        className='h-8 w-8 rounded-lg border border-border/55 bg-background'
+                        imgClassName='h-4 w-4 object-contain'
                       />
-                      <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
+                      <span className='line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground'>
                         {template.displayName || template.providerType}
                       </span>
                     </button>
@@ -188,25 +216,27 @@ export function ProvidersConfigPage() {
             </Popover>
           </ConfigSplitPaneHeader>
 
-          <div className="border-b border-border/70 px-4 py-3">
-            <div className="relative">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
+          <div className='border-b border-border/70 px-4 py-3'>
+            <div className='relative'>
+              <Search className='pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70' />
               <Input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t('providersFilterPlaceholder')}
-                className="h-10 rounded-xl pl-9"
+                className='h-10 rounded-xl pl-9'
               />
             </div>
           </div>
 
-          <ConfigSplitPaneBody className="space-y-2 p-3">
+          <ConfigSplitPaneBody className='space-y-2 p-3'>
             {filteredProviders.map((provider) => {
               const template = provider.providerType ? templateByType.get(provider.providerType) : null;
               const isEnabled = provider.enabled !== false;
               const isReady = Boolean(isEnabled && provider.apiKeySet);
               const providerLabel = provider.displayName?.trim() || template?.displayName || provider.providerId;
-              const description = formatBasePreview(provider.apiBase || template?.defaultApiBase || '') || t('providersDefaultDescription');
+              const description =
+                formatBasePreview(provider.apiBase || template?.defaultApiBase || '') ||
+                t('providersDefaultDescription');
 
               return (
                 <div
@@ -218,45 +248,49 @@ export function ProvidersConfigPage() {
                       setSelectedProvider(provider.providerId);
                     }
                   }}
-                  role="button"
+                  role='button'
                   tabIndex={0}
                   className={cn(
-                    'group w-full rounded-xl border p-2.5 text-left transition-colors',
+                    'group w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'border-border/70 bg-muted/65 text-foreground'
-                      : 'border-transparent bg-transparent text-muted-foreground hover:border-border/50 hover:bg-muted/40 hover:text-foreground',
+                      ? 'bg-background/95 text-foreground shadow-sm'
+                      : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground'
                   )}
                 >
-                  <div className="relative min-h-10">
-                    <div className="flex min-w-0 items-center gap-3 pr-20">
+                  <div className='relative min-h-10'>
+                    <div className='flex min-w-0 items-center gap-3 pr-20'>
                       <LogoBadge
                         name={provider.providerType ?? provider.providerId}
                         src={template?.logo ? `/logos/${template.logo}` : null}
-                        className="h-10 w-10 rounded-lg border border-border/55 bg-muted/40"
-                        imgClassName="h-5 w-5 object-contain"
-                        fallback={<span className="text-sm font-semibold uppercase text-muted-foreground">{provider.providerId[0]}</span>}
+                        className='h-10 w-10 rounded-lg bg-background/80'
+                        imgClassName='h-5 w-5 object-contain'
+                        fallback={
+                          <span className='text-sm font-semibold uppercase text-muted-foreground'>
+                            {provider.providerId[0]}
+                          </span>
+                        }
                       />
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-foreground">{providerLabel}</p>
-                        <p className="truncate font-mono text-[10px] text-muted-foreground/65">{provider.providerId}</p>
-                        <p className="line-clamp-1 text-[11px] text-muted-foreground">
+                      <div className='min-w-0'>
+                        <p className='truncate text-sm font-semibold text-foreground'>{providerLabel}</p>
+                        <p className='truncate font-mono text-[10px] text-muted-foreground/65'>{provider.providerId}</p>
+                        <p className='line-clamp-1 text-[11px] text-muted-foreground'>
                           {description} · {provider.models?.length ?? 0}
                         </p>
                       </div>
                     </div>
-                    <div className="absolute right-0 top-0 flex items-center gap-1.5 opacity-70 transition-opacity group-hover:opacity-100">
+                    <div className='absolute right-0 top-0 flex items-center gap-1.5 opacity-70 transition-opacity group-hover:opacity-100'>
                       <div onClick={(event) => event.stopPropagation()}>
                         <Switch
                           checked={isEnabled}
                           disabled={updateProvider.isPending}
                           title={isEnabled ? t('disabled') : t('enabled')}
-                          className="h-[18px] w-8"
-                          thumbClassName="h-4 w-4 data-[state=checked]:translate-x-4"
+                          className='h-[18px] w-8'
+                          thumbClassName='h-4 w-4 data-[state=checked]:translate-x-4'
                           onCheckedChange={(enabled) => {
                             void updateProvider.mutateAsync({
                               provider: provider.providerId,
                               data: { enabled },
-                              silentSuccess: true,
+                              silentSuccess: true
                             });
                           }}
                         />
@@ -264,21 +298,21 @@ export function ProvidersConfigPage() {
                       <Popover>
                         <PopoverTrigger asChild>
                           <button
-                            type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground"
+                            type='button'
+                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground'
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >
-                            <MoreHorizontal className="h-4 w-4" />
+                            <MoreHorizontal className='h-4 w-4' />
                           </button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-40 p-1" align="end" onClick={(event) => event.stopPropagation()}>
+                        <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>
                           <button
-                            type="button"
-                            className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-red-50"
+                            type='button'
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-red-50'
                             onClick={() => setProviderToDelete(provider.providerId)}
                           >
-                            <Trash2 className="h-4 w-4" />
+                            <Trash2 className='h-4 w-4' />
                             {t('providerDelete')}
                           </button>
                         </PopoverContent>
@@ -287,7 +321,7 @@ export function ProvidersConfigPage() {
                     <StatusDot
                       status={isEnabled ? (isReady ? 'ready' : 'setup') : 'inactive'}
                       label={isEnabled ? (isReady ? t('statusReady') : t('statusSetup')) : t('disabled')}
-                      className="absolute bottom-0 right-0 justify-end"
+                      className='absolute bottom-0 right-0 justify-end'
                     />
                   </div>
                 </div>
@@ -318,7 +352,7 @@ export function ProvidersConfigPage() {
         title={t('providerDelete')}
         description={providerToDelete ?? undefined}
         confirmLabel={t('delete')}
-        variant="destructive"
+        variant='destructive'
         onCancel={() => setProviderToDelete(null)}
         onConfirm={() => {
           if (!providerToDelete) return;
@@ -331,6 +365,6 @@ export function ProvidersConfigPage() {
           });
         }}
       />
-    </PageLayout>
+    </SettingsPage>
   );
 }