@nextclaw/ui 0.12.10 → 0.12.12

package/src/{components → shared/components}/config/providers-list.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ProvidersList } from '@/components/config/ProvidersList';
+import { ProvidersList } from '@/shared/components/config/providers-list';
 
 const mocks = vi.hoisted(() => ({
   createProviderMutateAsync: vi.fn(),
@@ -9,41 +9,41 @@ const mocks = vi.hoisted(() => ({
       providers: {
         openai: { enabled: true, apiKeySet: true },
         anthropic: { enabled: true, apiKeySet: true },
-        nextclaw: { enabled: true, apiKeySet: true }
-      }
+        nextclaw: { enabled: true, apiKeySet: true },
+      },
     },
-    isLoading: false
+    isLoading: false,
   },
   metaQuery: {
     data: {
       providers: [
         { name: 'nextclaw', displayName: 'NextClaw Builtin', defaultApiBase: 'https://ai-gateway-api.nextclaw.io/v1' },
         { name: 'openai', displayName: 'OpenAI', defaultApiBase: 'https://api.openai.com/v1' },
-        { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' }
-      ]
-    }
+        { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' },
+      ],
+    },
   },
   schemaQuery: {
     data: {
-      uiHints: {}
-    }
-  }
+      uiHints: {},
+    },
+  },
 }));
 
-vi.mock('@/hooks/useConfig', () => ({
+vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
   useConfigSchema: () => mocks.schemaQuery,
   useCreateProvider: () => ({
     mutateAsync: mocks.createProviderMutateAsync,
-    isPending: false
-  })
+    isPending: false,
+  }),
 }));
 
-vi.mock('@/components/config/ProviderForm', () => ({
+vi.mock('@/shared/components/config/provider-form', () => ({
   ProviderForm: ({ providerName }: { providerName?: string }) => (
     <div data-testid="provider-form">{providerName ?? 'none'}</div>
-  )
+  ),
 }));
 
 describe('ProvidersList', () => {
@@ -55,14 +55,14 @@ describe('ProvidersList', () => {
       throw new Error('provider sidebar not found');
     }
 
-    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) => (
-      ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label))
-    ));
+    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) =>
+      ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label)),
+    );
 
     expect(providerButtons.map((button) => button.textContent)).toEqual([
       expect.stringContaining('OpenAI'),
       expect.stringContaining('Anthropic'),
-      expect.stringContaining('NextClaw Builtin')
+      expect.stringContaining('NextClaw Builtin'),
     ]);
   });
 });

package/src/{components/config/ProvidersList.tsx → shared/components/config/providers-list.tsx}

@@ -1,16 +1,17 @@
-import { useEffect, useMemo, useState } from "react";
-import { KeyRound, Plus, Search } from "lucide-react";
-import { useConfig, useConfigMeta, useConfigSchema, useCreateProvider } from "@/hooks/useConfig";
-import { LogoBadge } from "@/components/common/LogoBadge";
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { StatusDot } from "@/components/ui/status-dot";
-import { hintForPath } from "@/lib/config-hints";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
-import { ProviderForm } from "./ProviderForm";
+import { useMemo, useState } from 'react';
+import { KeyRound, Plus, Search } from 'lucide-react';
+import { useConfig, useConfigMeta, useConfigSchema, useCreateProvider } from '@/shared/hooks/use-config';
+import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Tabs } from '@/shared/components/ui/tabs-custom';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import { ProviderForm } from '@/shared/components/config/provider-form';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
   ConfigSelectionCard,
   ConfigSplitEmptyState,
@@ -18,7 +19,7 @@ import {
   ConfigSplitPaneBody,
   ConfigSplitPaneHeader,
   ConfigSplitSidebar,
-} from "./config-split-page";
+} from '@/shared/components/config-split-page';
 
 function formatBasePreview(base?: string | null) {
   if (!base) {
@@ -26,9 +27,9 @@ function formatBasePreview(base?: string | null) {
   }
   try {
     const parsed = new URL(base);
-    return `${parsed.host}${parsed.pathname && parsed.pathname !== "/" ? parsed.pathname : ""}`;
+    return `${parsed.host}${parsed.pathname && parsed.pathname !== '/' ? parsed.pathname : ''}`;
   } catch {
-    return base.replace(/^https?:\/\//, "");
+    return base.replace(/^https?:\/\//, '');
   }
 }
 
@@ -36,21 +37,22 @@ function sortProvidersForDisplay<T extends { name: string }>(providers: T[]) {
   return providers
     .map((provider, index) => ({ provider, index }))
     .sort((left, right) => {
-      const leftPriority = left.provider.name === "nextclaw" ? 1 : 0;
-      const rightPriority = right.provider.name === "nextclaw" ? 1 : 0;
+      const leftPriority = left.provider.name === 'nextclaw' ? 1 : 0;
+      const rightPriority = right.provider.name === 'nextclaw' ? 1 : 0;
       return leftPriority !== rightPriority ? leftPriority - rightPriority : left.index - right.index;
     })
     .map(({ provider }) => provider);
 }
 
 export function ProvidersList() {
+  const { isMobile } = useViewportLayout();
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const createProvider = useCreateProvider();
-  const [activeTab, setActiveTab] = useState("installed");
-  const [selectedProvider, setSelectedProvider] = useState<string>();
-  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState('installed');
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
   const providers = useMemo(() => sortProvidersForDisplay(meta?.providers ?? []), [meta?.providers]);
   const providersConfig = config?.providers ?? {};
 
@@ -58,7 +60,7 @@ export function ProvidersList() {
     const keyword = query.trim().toLowerCase();
     return providers
       .filter((provider) =>
-        activeTab !== "installed" || Boolean(providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet),
+        activeTab !== 'installed' || Boolean(providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet),
       )
       .filter((provider) => {
         if (!keyword) {
@@ -70,32 +72,36 @@ export function ProvidersList() {
       });
   }, [activeTab, providers, providersConfig, query]);
 
-  useEffect(() => {
-    setSelectedProvider(
-      filteredProviders.some((provider) => provider.name === selectedProvider)
-        ? selectedProvider
-        : filteredProviders[0]?.name,
-    );
-  }, [filteredProviders, selectedProvider]);
+  const resolvedSelectedProvider = useMemo(() => {
+    if (selectedProvider && filteredProviders.some((provider) => provider.name === selectedProvider)) {
+      return selectedProvider;
+    }
+    return isMobile ? null : filteredProviders[0]?.name ?? null;
+  }, [filteredProviders, isMobile, selectedProvider]);
 
   if (!config || !meta) {
-    return <div className="p-8">{t("providersLoading")}</div>;
+    return <div className="p-8">{t('providersLoading')}</div>;
   }
 
   return (
     <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t("providersPageTitle")} description={t("providersPageDescription")} />
-      <ConfigSplitPage className="xl:min-h-0">
+      <PageHeader title={t('providersPageTitle')} description={t('providersPageDescription')} />
+      <ConfigSplitPage
+        className="xl:min-h-0"
+        mobileView={isMobile ? (resolvedSelectedProvider ? 'detail' : 'list') : undefined}
+        onMobileBack={() => setSelectedProvider(null)}
+        mobileListLabel={t('providersPageTitle')}
+      >
         <ConfigSplitSidebar>
           <ConfigSplitPaneHeader className="space-y-3 px-4 pb-3 pt-4">
             <Tabs
               tabs={[
                 {
-                  id: "installed",
-                  label: t("providersTabConfigured"),
+                  id: 'installed',
+                  label: t('providersTabConfigured'),
                   count: providers.filter((provider) => providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet).length,
                 },
-                { id: "all", label: t("providersTabAll"), count: providers.length },
+                { id: 'all', label: t('providersTabAll'), count: providers.length },
               ]}
               activeTab={activeTab}
               onChange={setActiveTab}
@@ -108,8 +114,8 @@ export function ProvidersList() {
               onClick={async () => {
                 try {
                   const result = await createProvider.mutateAsync({ data: {} });
-                  setActiveTab("all");
-                  setQuery("");
+                  setActiveTab('all');
+                  setQuery('');
                   setSelectedProvider(result.name);
                 } catch {
                   // toast handled in hook
@@ -118,7 +124,7 @@ export function ProvidersList() {
               disabled={createProvider.isPending}
             >
               <Plus className="mr-2 h-4 w-4" />
-              {createProvider.isPending ? t("saving") : t("providerAddCustom")}
+              {createProvider.isPending ? t('saving') : t('providerAddCustom')}
             </Button>
           </ConfigSplitPaneHeader>
 
@@ -128,7 +134,7 @@ export function ProvidersList() {
               <Input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
-                placeholder={t("providersFilterPlaceholder")}
+                placeholder={t('providersFilterPlaceholder')}
                 className="h-10 rounded-xl pl-9"
               />
             </div>
@@ -139,18 +145,14 @@ export function ProvidersList() {
               const providerConfig = providersConfig[provider.name];
               const isEnabled = providerConfig?.enabled !== false;
               const isReady = Boolean(isEnabled && providerConfig?.apiKeySet);
-              const providerLabel =
-                providerConfig?.displayName?.trim() || provider.displayName || provider.name;
-              const description =
-                formatBasePreview(providerConfig?.apiBase || provider.defaultApiBase || "") ||
-                hintForPath(`providers.${provider.name}`, schema?.uiHints)?.help ||
-                t("providersDefaultDescription");
+              const providerLabel = providerConfig?.displayName?.trim() || provider.displayName || provider.name;
+              const description = formatBasePreview(providerConfig?.apiBase || provider.defaultApiBase || '') || hintForPath(`providers.${provider.name}`, schema?.uiHints)?.help || t('providersDefaultDescription');
 
               return (
                 <ConfigSelectionCard
                   key={provider.name}
                   onClick={() => setSelectedProvider(provider.name)}
-                  active={selectedProvider === provider.name}
+                  active={resolvedSelectedProvider === provider.name}
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-3">
@@ -158,8 +160,8 @@ export function ProvidersList() {
                         name={provider.name}
                         src={provider.logo ? `/logos/${provider.logo}` : null}
                         className={cn(
-                          "h-10 w-10 rounded-lg border",
-                          isReady ? "border-primary/30 bg-white" : "border-gray-200/70 bg-white",
+                          'h-10 w-10 rounded-lg border',
+                          isReady ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white',
                         )}
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-gray-500">{provider.name[0]}</span>}
@@ -170,8 +172,8 @@ export function ProvidersList() {
                       </div>
                     </div>
                     <StatusDot
-                      status={isEnabled ? (isReady ? "ready" : "setup") : "inactive"}
-                      label={isEnabled ? (isReady ? t("statusReady") : t("statusSetup")) : t("disabled")}
+                      status={isEnabled ? (isReady ? 'ready' : 'setup') : 'inactive'}
+                      label={isEnabled ? (isReady ? t('statusReady') : t('statusSetup')) : t('disabled')}
                       className="min-w-[56px] justify-center"
                     />
                   </div>
@@ -180,16 +182,16 @@ export function ProvidersList() {
             })}
 
             {filteredProviders.length === 0 ? (
-              <ConfigSplitEmptyState icon={KeyRound} title={t("providersNoMatch")} />
+              <ConfigSplitEmptyState icon={KeyRound} title={t('providersNoMatch')} />
             ) : null}
           </ConfigSplitPaneBody>
         </ConfigSplitSidebar>
 
         <ProviderForm
-          providerName={selectedProvider}
+          providerName={resolvedSelectedProvider ?? undefined}
           onProviderDeleted={(deletedProvider) => {
-            if (deletedProvider === selectedProvider) {
-              setSelectedProvider(undefined);
+            if (deletedProvider === resolvedSelectedProvider) {
+              setSelectedProvider(null);
             }
           }}
         />