@nextclaw/ui 0.12.4 → 0.12.5

package/src/components/layout/sidebar.layout.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { Sidebar } from '@/components/layout/Sidebar';
@@ -85,6 +85,37 @@ describe('Sidebar', () => {
     expect(backLink.className).toContain('hover:bg-gray-200/60');
   });
 
+  it('keeps the settings navigation in the expected product order', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const nav = container.querySelector('nav');
+    if (!(nav instanceof HTMLElement)) {
+      throw new Error('settings nav not found');
+    }
+
+    const linkTexts = within(nav)
+      .getAllByRole('link')
+      .map((link) => link.textContent?.trim() || '');
+
+    expect(linkTexts).toEqual([
+      'Model',
+      'Providers',
+      'Channels',
+      'Search Channels',
+      'Plugins',
+      'MCP',
+      'Routing & Runtime',
+      'Remote Access',
+      'Security',
+      'Sessions',
+      'Secrets'
+    ]);
+  });
+
   it('keeps the footer utilities compact without changing the top header structure', () => {
     render(
       <MemoryRouter initialEntries={['/model']}>

package/src/components/marketplace/MarketplacePage.tsx

@@ -23,7 +23,7 @@ import {
 import {
   FilterPanel,
   MarketplaceListSkeleton,
-  PaginationBar
+  MarketplaceInfiniteScrollStatus
 } from '@/components/marketplace/marketplace-page-parts';
 import { buildLocaleFallbacks, pickLocalizedText } from '@/components/marketplace/marketplace-localization';
 import { t } from '@/lib/i18n';
@@ -31,6 +31,7 @@ import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { cn } from '@/lib/utils';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useInfiniteScrollLoader } from '@/hooks/use-infinite-scroll-loader';
 
 const PAGE_SIZE = 12;
 const SKELETON_CARD_COUNT = PAGE_SIZE;
@@ -452,32 +453,38 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const [query, setQuery] = useState('');
   const [scope, setScope] = useState<ScopeType>('all');
   const [sort, setSort] = useState<MarketplaceSort>('relevance');
-  const [page, setPage] = useState(1);
   const [installingSpecs, setInstallingSpecs] = useState<ReadonlySet<string>>(new Set());
   const [managingTargets, setManagingTargets] = useState<ReadonlyMap<string, MarketplaceManageAction>>(new Map());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setPage(1);
       setQuery(searchText.trim());
     }, 250);
     return () => clearTimeout(timer);
   }, [searchText]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [typeFilter]);
-
   const installedQuery = useMarketplaceInstalled(typeFilter);
 
   const itemsQuery = useMarketplaceItems({
     q: query || undefined,
     type: typeFilter,
     sort,
-    page,
     pageSize: PAGE_SIZE
   });
 
+  const infiniteScroll = useInfiniteScrollLoader({
+    disabled: scope !== 'all' || itemsQuery.isError || !itemsQuery.hasNextPage || itemsQuery.isFetchingNextPage,
+    onLoadMore: () => itemsQuery.fetchNextPage(),
+    watchValue: `${typeFilter}:${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`
+  });
+
+  useEffect(() => {
+    const container = infiniteScroll.containerRef.current;
+    if (container && typeof container.scrollTo === 'function') {
+      container.scrollTo({ top: 0 });
+    }
+  }, [infiniteScroll.containerRef, query, scope, sort, typeFilter]);
+
   const installMutation = useInstallMarketplaceItem();
   const manageMutation = useManageMarketplaceItem();
   const { confirm, ConfirmDialog } = useConfirmDialog();
@@ -529,7 +536,6 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   }, [installedRecords, typeFilter, catalogLookup, query, localeFallbacks]);
 
   const total = scope === 'installed' ? installedEntries.length : (itemsQuery.data?.total ?? 0);
-  const totalPages = scope === 'installed' ? 1 : (itemsQuery.data?.totalPages ?? 0);
   const showCatalogSkeleton = scope === 'all' && itemsQuery.isLoading && !itemsQuery.data;
   const showInstalledSkeleton = scope === 'installed' && installedQuery.isLoading && !installedQuery.data;
   const showListSkeleton = showCatalogSkeleton || showInstalledSkeleton;
@@ -727,10 +733,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       <Tabs
         tabs={scopeTabs}
         activeTab={scope}
-        onChange={(value) => {
-          setScope(value as ScopeType);
-          setPage(1);
-        }}
+        onChange={(value) => setScope(value as ScopeType)}
         className="mb-4"
       />
 
@@ -740,10 +743,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
         searchPlaceholder={t(copyKeys.searchPlaceholder)}
         sort={sort}
         onSearchTextChange={setSearchText}
-        onSortChange={(value) => {
-          setPage(1);
-          setSort(value);
-        }}
+        onSortChange={setSort}
       />
 
       <section className="flex min-h-0 flex-1 flex-col">
@@ -765,7 +765,11 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           </div>
         )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1" aria-busy={showListSkeleton}>
+        <div
+          ref={infiniteScroll.containerRef}
+          className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1"
+          aria-busy={showListSkeleton || itemsQuery.isFetchingNextPage}
+        >
           <div
             data-testid={showListSkeleton ? 'marketplace-list-skeleton' : undefined}
             className="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3"
@@ -807,20 +811,16 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           {scope === 'installed' && !showListSkeleton && !installedQuery.isError && installedEntries.length === 0 && (
             <div className="text-[13px] text-gray-500 py-8 text-center">{t(copyKeys.emptyInstalled)}</div>
           )}
-        </div>
-      </section>
 
-      {scope === 'all' && !showCatalogSkeleton && (
-        <div className="shrink-0">
-          <PaginationBar
-            page={page}
-            totalPages={totalPages}
-            busy={itemsQuery.isFetching}
-            onPrev={() => setPage((current) => Math.max(1, current - 1))}
-            onNext={() => setPage((current) => (totalPages > 0 ? Math.min(totalPages, current + 1) : current + 1))}
-          />
+          {scope === 'all' && !showCatalogSkeleton && !itemsQuery.isError && (
+            <MarketplaceInfiniteScrollStatus
+              hasMore={Boolean(itemsQuery.hasNextPage)}
+              loading={itemsQuery.isFetchingNextPage}
+              sentinelRef={infiniteScroll.sentinelRef}
+            />
+          )}
         </div>
-      )}
+      </section>
       <ConfirmDialog />
     </PageLayout>
   );

package/src/components/marketplace/marketplace-page-parts.tsx

@@ -3,6 +3,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Skeleton } from '@/components/ui/skeleton';
 import { t } from '@/lib/i18n';
 import { PackageSearch } from 'lucide-react';
+import type { Ref } from 'react';
 
 export function FilterPanel(props: {
   scope: 'all' | 'installed';
@@ -71,32 +72,23 @@ export function MarketplaceListSkeleton(props: {
   );
 }
 
-export function PaginationBar(props: {
-  page: number;
-  totalPages: number;
-  busy: boolean;
-  onPrev: () => void;
-  onNext: () => void;
+export function MarketplaceInfiniteScrollStatus(props: {
+  hasMore: boolean;
+  loading: boolean;
+  sentinelRef: Ref<HTMLDivElement>;
 }) {
+  if (!props.hasMore && !props.loading) {
+    return null;
+  }
+
   return (
-    <div className="mt-4 flex items-center justify-end gap-2">
-      <button
-        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
-        onClick={props.onPrev}
-        disabled={props.page <= 1 || props.busy}
-      >
-        {t('prev')}
-      </button>
-      <div className="text-sm text-gray-600 min-w-20 text-center">
-        {props.totalPages === 0 ? '0 / 0' : `${props.page} / ${props.totalPages}`}
-      </div>
-      <button
-        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
-        onClick={props.onNext}
-        disabled={props.totalPages === 0 || props.page >= props.totalPages || props.busy}
-      >
-        {t('next')}
-      </button>
+    <div className="py-4">
+      {props.hasMore && <div ref={props.sentinelRef} className="h-1 w-full" aria-hidden="true" />}
+      {props.loading && (
+        <div data-testid="marketplace-loading-more" className="pt-3 text-center text-xs text-gray-500">
+          {t('loading')}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/marketplace/mcp/McpMarketplacePage.tsx

@@ -36,6 +36,8 @@ import {
 } from '@/components/marketplace/marketplace-localization';
 import { t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
+import { MarketplaceInfiniteScrollStatus } from '@/components/marketplace/marketplace-page-parts';
+import { useInfiniteScrollLoader } from '@/hooks/use-infinite-scroll-loader';
 
 type ScopeType = 'catalog' | 'installed';
 
@@ -256,7 +258,6 @@ export function McpMarketplacePage() {
   const [searchText, setSearchText] = useState('');
   const [query, setQuery] = useState('');
   const [sort, setSort] = useState<MarketplaceSort>('relevance');
-  const [page, setPage] = useState(1);
   const [installingItem, setInstallingItem] = useState<MarketplaceItemSummary | null>(null);
   const [doctorTarget, setDoctorTarget] = useState<string | null>(null);
   const [doctorResult, setDoctorResult] = useState<MarketplaceMcpDoctorResult | null>(null);
@@ -267,7 +268,6 @@ export function McpMarketplacePage() {
 
   useEffect(() => {
     const timer = window.setTimeout(() => {
-      setPage(1);
       setQuery(searchText.trim());
     }, 250);
     return () => window.clearTimeout(timer);
@@ -276,11 +276,23 @@ export function McpMarketplacePage() {
   const itemsQuery = useMcpMarketplaceItems({
     q: query || undefined,
     sort,
-    page,
     pageSize: PAGE_SIZE
   });
   const installedQuery = useMcpMarketplaceInstalled();
 
+  const infiniteScroll = useInfiniteScrollLoader({
+    disabled: scope !== 'catalog' || itemsQuery.isError || !itemsQuery.hasNextPage || itemsQuery.isFetchingNextPage,
+    onLoadMore: () => itemsQuery.fetchNextPage(),
+    watchValue: `${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`
+  });
+
+  useEffect(() => {
+    const container = infiniteScroll.containerRef.current;
+    if (container && typeof container.scrollTo === 'function') {
+      container.scrollTo({ top: 0 });
+    }
+  }, [infiniteScroll.containerRef, query, scope, sort]);
+
   const installMutation = useInstallMcpMarketplaceItem();
   const manageMutation = useManageMcpMarketplaceItem();
   const doctorMutation = useMutation({
@@ -502,7 +514,11 @@ export function McpMarketplacePage() {
           </span>
         </div>
 
-        <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+        <div
+          ref={infiniteScroll.containerRef}
+          className="min-h-0 flex-1 overflow-y-auto pr-1"
+          aria-busy={itemsQuery.isLoading || itemsQuery.isFetchingNextPage}
+        >
           <div className={cn('grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3')}>
             {scope === 'catalog' && itemsQuery.isLoading && Array.from({ length: 6 }, (_, index) => (
               <div key={index} className="rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm">
@@ -533,30 +549,16 @@ export function McpMarketplacePage() {
           {scope === 'installed' && installedRecords.length === 0 && (
             <div className="py-8 text-center text-sm text-gray-500">{t('marketplaceNoInstalledMcp')}</div>
           )}
-        </div>
-      </section>
 
-      {scope === 'catalog' && (
-        <div className="mt-4 flex items-center justify-end gap-2">
-          <button
-            className="h-8 rounded-xl border border-gray-200/80 px-3 text-sm text-gray-600 disabled:opacity-40"
-            onClick={() => setPage((current) => Math.max(1, current - 1))}
-            disabled={page <= 1 || itemsQuery.isFetching}
-          >
-            {t('prev')}
-          </button>
-          <div className="min-w-20 text-center text-sm text-gray-600">
-            {itemsQuery.data?.totalPages ? `${page} / ${itemsQuery.data.totalPages}` : '0 / 0'}
-          </div>
-          <button
-            className="h-8 rounded-xl border border-gray-200/80 px-3 text-sm text-gray-600 disabled:opacity-40"
-            onClick={() => setPage((current) => current + 1)}
-            disabled={!itemsQuery.data?.totalPages || page >= itemsQuery.data.totalPages || itemsQuery.isFetching}
-          >
-            {t('next')}
-          </button>
+          {scope === 'catalog' && !itemsQuery.isError && (
+            <MarketplaceInfiniteScrollStatus
+              hasMore={Boolean(itemsQuery.hasNextPage)}
+              loading={itemsQuery.isFetchingNextPage}
+              sentinelRef={infiniteScroll.sentinelRef}
+            />
+          )}
         </div>
-      )}
+      </section>
 
       <InstallDialog
         item={installingItem}

package/src/hooks/marketplace-list-pages.ts

@@ -0,0 +1,27 @@
+import type { InfiniteData } from '@tanstack/react-query';
+import type { MarketplaceListView } from '@/api/types';
+
+export type InfiniteMarketplaceListView = MarketplaceListView & {
+  pages: MarketplaceListView[];
+  loadedItems: number;
+  loadedPages: number;
+};
+
+export function collapseMarketplaceListPages(
+  data: InfiniteData<MarketplaceListView> | undefined
+): InfiniteMarketplaceListView | undefined {
+  if (!data || data.pages.length === 0) {
+    return undefined;
+  }
+
+  const items = data.pages.flatMap((page) => page.items);
+  const lastPage = data.pages[data.pages.length - 1];
+
+  return {
+    ...lastPage,
+    items,
+    pages: data.pages,
+    loadedItems: items.length,
+    loadedPages: data.pages.length
+  };
+}

package/src/hooks/use-infinite-scroll-loader.ts

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from 'react';
+
+const DEFAULT_THRESHOLD_PX = 160;
+
+type UseInfiniteScrollLoaderParams = {
+  disabled: boolean;
+  onLoadMore: () => Promise<unknown> | unknown;
+  thresholdPx?: number;
+  watchValue?: string | number;
+};
+
+export function useInfiniteScrollLoader(params: UseInfiniteScrollLoaderParams) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const onLoadMoreRef = useRef(params.onLoadMore);
+  const loadingRef = useRef(false);
+
+  useEffect(() => {
+    onLoadMoreRef.current = params.onLoadMore;
+  }, [params.onLoadMore]);
+
+  useEffect(() => {
+    if (params.disabled) {
+      loadingRef.current = false;
+    }
+  }, [params.disabled]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const sentinel = sentinelRef.current;
+    const thresholdPx = params.thresholdPx ?? DEFAULT_THRESHOLD_PX;
+
+    if (params.disabled || !container || !sentinel) {
+      return;
+    }
+
+    const triggerLoadMore = () => {
+      if (loadingRef.current || params.disabled) {
+        return;
+      }
+
+      loadingRef.current = true;
+      Promise.resolve(onLoadMoreRef.current()).finally(() => {
+        loadingRef.current = false;
+      });
+    };
+
+    const maybeLoadMore = () => {
+      const remainingDistance = sentinel.getBoundingClientRect().top - container.getBoundingClientRect().bottom;
+      if (remainingDistance <= thresholdPx) {
+        triggerLoadMore();
+      }
+    };
+
+    if (typeof IntersectionObserver === 'function') {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) {
+            triggerLoadMore();
+          }
+        },
+        {
+          root: container,
+          rootMargin: `0px 0px ${thresholdPx}px 0px`
+        }
+      );
+
+      observer.observe(sentinel);
+      maybeLoadMore();
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    container.addEventListener('scroll', maybeLoadMore, { passive: true });
+    maybeLoadMore();
+
+    return () => {
+      container.removeEventListener('scroll', maybeLoadMore);
+    };
+  }, [params.disabled, params.thresholdPx, params.watchValue]);
+
+  return {
+    containerRef,
+    sentinelRef
+  };
+}

package/src/hooks/useMarketplace.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 import {
@@ -20,11 +20,15 @@ import type {
   MarketplaceItemType,
   MarketplaceManageRequest
 } from '@/api/types';
+import { collapseMarketplaceListPages } from '@/hooks/marketplace-list-pages';
+import { useMemo } from 'react';
 
 export function useMarketplaceItems(params: MarketplaceListParams) {
-  return useQuery({
+  const query = useInfiniteQuery({
     queryKey: ['marketplace-items', params],
-    queryFn: () => fetchMarketplaceItems(params),
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) => fetchMarketplaceItems({ ...params, page: pageParam }),
+    getNextPageParam: (lastPage) => (lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined),
     placeholderData: (previousData, previousQuery) => {
       const previousParams = previousQuery?.queryKey?.[1];
       if (!previousParams || typeof previousParams !== 'object' || previousParams === null) {
@@ -36,6 +40,13 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
     },
     staleTime: 15_000
   });
+
+  const data = useMemo(() => collapseMarketplaceListPages(query.data), [query.data]);
+
+  return {
+    ...query,
+    data
+  };
 }
 
 export function useMarketplaceRecommendations(type: MarketplaceItemType, params: { scene?: string; limit?: number }) {

package/src/hooks/useMcpMarketplace.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import {
   doctorMcpMarketplaceItem,
@@ -12,13 +12,24 @@ import {
   type McpMarketplaceListParams
 } from '@/api/mcp-marketplace';
 import { t } from '@/lib/i18n';
+import { collapseMarketplaceListPages } from '@/hooks/marketplace-list-pages';
+import { useMemo } from 'react';
 
 export function useMcpMarketplaceItems(params: McpMarketplaceListParams) {
-  return useQuery({
+  const query = useInfiniteQuery({
     queryKey: ['marketplace-mcp-items', params],
-    queryFn: () => fetchMcpMarketplaceItems(params),
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) => fetchMcpMarketplaceItems({ ...params, page: pageParam }),
+    getNextPageParam: (lastPage) => (lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined),
     staleTime: 15_000
   });
+
+  const data = useMemo(() => collapseMarketplaceListPages(query.data), [query.data]);
+
+  return {
+    ...query,
+    data
+  };
 }
 
 export function useMcpMarketplaceInstalled() {

package/src/lib/i18n.remote.ts

@@ -168,6 +168,21 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     en: 'Authorize this device in your browser and connect it to the NextClaw platform.'
   },
   remoteAccountEmail: { zh: '邮箱', en: 'Email' },
+  remoteAccountUsername: { zh: '用户名', en: 'Username' },
+  remoteAccountUsernameRequiredTitle: { zh: '发布 skill 前需要先设置用户名', en: 'Set a username before publishing skills' },
+  remoteAccountUsernameRequiredDescription: {
+    zh: '平台账号已经登录，但还没有正式用户名。设置后，你的个人 skill 会使用 `@username/skill-name` 作为发布标识。',
+    en: 'Your platform account is already signed in, but it does not have a username yet. Once set, your personal skills will publish as `@username/skill-name`.'
+  },
+  remoteAccountUsernamePlaceholder: { zh: '例如：alice-dev', en: 'For example: alice-dev' },
+  remoteAccountUsernameSave: { zh: '保存用户名', en: 'Save Username' },
+  remoteAccountUsernameSaving: { zh: '保存中...', en: 'Saving...' },
+  remoteAccountUsernameSetSuccess: { zh: '用户名已保存', en: 'Username saved' },
+  remoteAccountUsernameSetFailed: { zh: '用户名保存失败', en: 'Failed to save username' },
+  remoteAccountUsernameLockedHelp: {
+    zh: '当前版本先支持首次设置用户名；设置后暂不支持改名。',
+    en: 'This version supports initial username setup only. Renaming is not available yet.'
+  },
   remoteAccountRole: { zh: '角色', en: 'Role' },
   remoteApiBase: { zh: 'API Base', en: 'API Base' },
   remoteBrowserAuthTitle: { zh: '浏览器授权登录', en: 'Browser Authorization' },