@nextclaw/ui 0.12.4 → 0.12.6

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/desktop/desktop-update.types.ts

@@ -0,0 +1,36 @@
+export type DesktopUpdateStatus =
+  | 'idle'
+  | 'checking'
+  | 'update-available'
+  | 'downloading'
+  | 'downloaded'
+  | 'up-to-date'
+  | 'failed';
+
+export type DesktopUpdatePreferences = {
+  automaticChecks: boolean;
+  autoDownload: boolean;
+};
+
+export type DesktopUpdateSnapshot = {
+  status: DesktopUpdateStatus;
+  launcherVersion: string;
+  currentVersion: string | null;
+  availableVersion: string | null;
+  downloadedVersion: string | null;
+  releaseNotesUrl: string | null;
+  lastCheckedAt: string | null;
+  errorMessage: string | null;
+  preferences: DesktopUpdatePreferences;
+};
+
+export type NextClawDesktopBridge = {
+  platform: string;
+  version: string;
+  getUpdateState: () => Promise<DesktopUpdateSnapshot>;
+  checkForUpdates: () => Promise<DesktopUpdateSnapshot>;
+  downloadUpdate: () => Promise<DesktopUpdateSnapshot>;
+  applyDownloadedUpdate: () => Promise<DesktopUpdateSnapshot>;
+  updatePreferences: (preferences: Partial<DesktopUpdatePreferences>) => Promise<DesktopUpdateSnapshot>;
+  onUpdateStateChanged: (listener: (snapshot: DesktopUpdateSnapshot) => void) => () => void;
+};

package/src/desktop/managers/desktop-update.manager.ts

@@ -0,0 +1,163 @@
+import type {
+  DesktopUpdatePreferences,
+  DesktopUpdateSnapshot,
+  NextClawDesktopBridge
+} from '@/desktop/desktop-update.types';
+import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
+
+type DesktopUpdateBusyAction = 'checking' | 'downloading' | 'applying' | 'saving-preferences';
+
+export class DesktopUpdateManager {
+  private unsubscribe: (() => void) | null = null;
+
+  start = async () => {
+    const desktopApi = this.getDesktopApi();
+    if (!desktopApi) {
+      useDesktopUpdateStore.setState({
+        supported: false,
+        initialized: true,
+        snapshot: null
+      });
+      return;
+    }
+
+    if (!this.unsubscribe) {
+      this.unsubscribe = desktopApi.onUpdateStateChanged((snapshot) => {
+        useDesktopUpdateStore.setState({
+          supported: true,
+          initialized: true,
+          snapshot
+        });
+      });
+    }
+
+    useDesktopUpdateStore.setState({
+      supported: true,
+      initialized: false
+    });
+
+    try {
+      const snapshot = await desktopApi.getUpdateState();
+      useDesktopUpdateStore.setState({
+        supported: true,
+        initialized: true,
+        snapshot
+      });
+    } catch (error) {
+      useDesktopUpdateStore.setState({
+        supported: true,
+        initialized: true
+      });
+      toast.error(`${t('desktopUpdatesLoadFailed')}: ${this.getErrorMessage(error)}`);
+    }
+  };
+
+  stop = () => {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+  };
+
+  checkForUpdates = async () => {
+    let snapshot: DesktopUpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('checking', t('desktopUpdatesCheckFailed'), async (desktopApi) => {
+        return await desktopApi.checkForUpdates();
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'up-to-date') {
+      toast.success(t('desktopUpdatesAlreadyLatest'));
+      return;
+    }
+    if (snapshot.status === 'update-available') {
+      toast.success(
+        t('desktopUpdatesAvailable').replace('{version}', snapshot.availableVersion ?? t('desktopUpdatesUnknownVersion'))
+      );
+      return;
+    }
+    if (snapshot.status === 'downloaded') {
+      toast.success(t('desktopUpdatesReadyToApply'));
+      return;
+    }
+    if (snapshot.status === 'failed' && snapshot.errorMessage) {
+      toast.error(snapshot.errorMessage);
+    }
+  };
+
+  downloadUpdate = async () => {
+    let snapshot: DesktopUpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('downloading', t('desktopUpdatesDownloadFailed'), async (desktopApi) => {
+        return await desktopApi.downloadUpdate();
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'downloaded') {
+      toast.success(t('desktopUpdatesReadyToApply'));
+    }
+  };
+
+  applyDownloadedUpdate = async () => {
+    try {
+      await this.runSnapshotCommand('applying', t('desktopUpdatesApplyFailed'), async (desktopApi) => {
+        return await desktopApi.applyDownloadedUpdate();
+      });
+    } catch {
+      return;
+    }
+  };
+
+  updatePreferences = async (preferences: Partial<DesktopUpdatePreferences>) => {
+    try {
+      await this.runSnapshotCommand(
+        'saving-preferences',
+        t('desktopUpdatesPreferencesFailed'),
+        async (desktopApi) => await desktopApi.updatePreferences(preferences)
+      );
+    } catch {
+      return;
+    }
+  };
+
+  private runSnapshotCommand = async (
+    busyAction: DesktopUpdateBusyAction,
+    fallbackMessage: string,
+    job: (desktopApi: NextClawDesktopBridge) => Promise<DesktopUpdateSnapshot>
+  ): Promise<DesktopUpdateSnapshot> => {
+    const desktopApi = this.getDesktopApi();
+    if (!desktopApi) {
+      throw new Error(t('desktopUpdatesDesktopOnlyDescription'));
+    }
+
+    useDesktopUpdateStore.setState({ busyAction });
+    try {
+      const snapshot = await job(desktopApi);
+      useDesktopUpdateStore.setState({ snapshot });
+      return snapshot;
+    } catch (error) {
+      toast.error(`${fallbackMessage}: ${this.getErrorMessage(error)}`);
+      throw error;
+    } finally {
+      useDesktopUpdateStore.setState({ busyAction: null });
+    }
+  };
+
+  private getDesktopApi = (): NextClawDesktopBridge | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    return window.nextclawDesktop ?? null;
+  };
+
+  private getErrorMessage = (error: unknown): string => {
+    return error instanceof Error ? error.message : t('error');
+  };
+}
+
+export const desktopUpdateManager = new DesktopUpdateManager();

package/src/desktop/stores/desktop-update.store.ts

@@ -0,0 +1,18 @@
+import type { DesktopUpdateSnapshot } from '@/desktop/desktop-update.types';
+import { create } from 'zustand';
+
+type DesktopUpdateBusyAction = 'checking' | 'downloading' | 'applying' | 'saving-preferences' | null;
+
+type DesktopUpdateStoreState = {
+  supported: boolean;
+  initialized: boolean;
+  busyAction: DesktopUpdateBusyAction;
+  snapshot: DesktopUpdateSnapshot | null;
+};
+
+export const useDesktopUpdateStore = create<DesktopUpdateStoreState>(() => ({
+  supported: false,
+  initialized: false,
+  busyAction: null,
+  snapshot: null
+}));

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 }) {