@nextclaw/ui 0.12.11 → 0.12.13

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

@@ -0,0 +1,121 @@
+import type { MarketplaceSort } from "@/shared/lib/api";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import { t } from "@/shared/lib/i18n";
+import { PackageSearch } from "lucide-react";
+import type { Ref } from "react";
+
+export function FilterPanel({
+  scope,
+  searchText,
+  searchPlaceholder,
+  sort,
+  onSearchTextChange,
+  onSortChange,
+}: {
+  scope: "all" | "installed";
+  searchText: string;
+  searchPlaceholder: string;
+  sort: MarketplaceSort;
+  onSearchTextChange: (value: string) => void;
+  onSortChange: (value: MarketplaceSort) => void;
+}) {
+  return (
+    <div className="mb-4">
+      <div className="flex items-center gap-3">
+        <div className="relative min-w-0 flex-1">
+          <PackageSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <input
+            value={searchText}
+            onChange={(event) => onSearchTextChange(event.target.value)}
+            placeholder={searchPlaceholder}
+            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+          />
+        </div>
+
+        {scope === "all" && (
+          <Select
+            value={sort}
+            onValueChange={(value) => onSortChange(value as MarketplaceSort)}
+          >
+            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="relevance">
+                {t("marketplaceSortRelevance")}
+              </SelectItem>
+              <SelectItem value="updated">
+                {t("marketplaceSortUpdated")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function MarketplaceListSkeleton({ count }: {
+  count: number;
+}) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <article
+          key={`marketplace-skeleton-${index}`}
+          className="rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
+        >
+          <div className="flex items-start justify-between gap-3.5">
+            <div className="flex min-w-0 flex-1 gap-3">
+              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
+              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
+                <Skeleton className="h-4 w-32 max-w-[70%]" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-3 w-12" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+                <Skeleton className="h-3 w-full" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-20 shrink-0 rounded-xl" />
+          </div>
+        </article>
+      ))}
+    </>
+  );
+}
+
+export function MarketplaceInfiniteScrollStatus({
+  hasMore,
+  loading,
+  sentinelRef,
+}: {
+  hasMore: boolean;
+  loading: boolean;
+  sentinelRef: Ref<HTMLDivElement>;
+}) {
+  if (!hasMore && !loading) {
+    return null;
+  }
+
+  return (
+    <div className="py-4">
+      {hasMore && <div ref={sentinelRef} className="h-1 w-full" aria-hidden="true" />}
+      {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 → features/marketplace/components}/marketplace-page.test.tsx

@@ -1,12 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MarketplacePage } from "@/components/marketplace/marketplace-page";
+import { MarketplacePage } from "@/features/marketplace";
 import type {
   MarketplaceInstalledRecord,
   MarketplaceInstalledView,
   MarketplaceItemSummary,
   MarketplaceListView,
-} from "@/api/types";
+} from "@/shared/lib/api";
 
 type ItemsQueryState = {
   data?: MarketplaceListView;
@@ -52,26 +52,26 @@ vi.mock("react-router-dom", async () => {
   };
 });
 
-vi.mock("@/components/doc-browser", () => ({
+vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
   }),
 }));
 
-vi.mock("@/components/providers/I18nProvider", () => ({
+vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({
     language: "en",
   }),
 }));
 
-vi.mock("@/hooks/useConfirmDialog", () => ({
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
   useConfirmDialog: () => ({
     confirm: mocks.confirm,
     ConfirmDialog: () => null,
   }),
 }));
 
-vi.mock("@/hooks/useMarketplace", () => ({
+vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceInstalled: () => mocks.installedQuery,
   useInstallMarketplaceItem: () => mocks.installMutation,

package/src/{components/marketplace → features/marketplace/components}/marketplace-page.tsx

@@ -7,31 +7,29 @@ import type {
   MarketplaceSkillContentView,
   MarketplaceSort,
   MarketplaceItemType,
-} from "@/api/types";
+} from "@/shared/lib/api";
 import {
   fetchMarketplacePluginContent,
   fetchMarketplaceSkillContent,
-} from "@/api/marketplace";
-import { NoticeCard } from "@/components/ui/notice-card";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { useDocBrowser } from "@/components/doc-browser";
-import { useI18n } from "@/components/providers/I18nProvider";
-import { useConfirmDialog } from "@/hooks/useConfirmDialog";
+} from "@/shared/lib/api";
+import { useDocBrowser } from "@/shared/components/doc-browser";
+import { useI18n } from "@/app/components/i18n-provider";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import {
   useInstallMarketplaceItem,
   useManageMarketplaceItem,
   useMarketplaceInstalled,
   useMarketplaceItems,
-} from "@/hooks/useMarketplace";
+} from "@/features/marketplace/hooks/use-marketplace";
 import {
   FilterPanel,
   MarketplaceListSkeleton,
   MarketplaceInfiniteScrollStatus,
-} from "@/components/marketplace/marketplace-page-parts";
+} from "@/features/marketplace/components/marketplace-page-parts";
 import {
   buildLocaleFallbacks,
   pickLocalizedText,
-} from "@/components/marketplace/marketplace-localization";
+} from "@/features/marketplace/components/marketplace-localization";
 import {
   buildCatalogLookup,
   buildInstalledRecordLookup,
@@ -39,18 +37,19 @@ import {
   findInstalledRecordForItem,
   matchInstalledSearch,
   type InstalledRenderEntry,
-} from "@/components/marketplace/marketplace-page-data";
-import { buildGenericDetailDataUrl } from "@/components/marketplace/marketplace-detail-doc";
+} from "@/features/marketplace/components/marketplace-page-data";
+import { buildGenericDetailDataUrl } from "@/features/marketplace/components/marketplace-detail-doc";
 import {
   MarketplaceListCard,
   type InstallState,
   type ManageState,
-} from "@/components/marketplace/marketplace-list-card";
-import { t } from "@/lib/i18n";
-import { PageLayout, PageHeader } from "@/components/layout/page-layout";
-import { useEffect, useMemo, useState } from "react";
+} from "@/features/marketplace/components/marketplace-list-card";
+import { t } from "@/shared/lib/i18n";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useInfiniteScrollLoader } from "@/hooks/use-infinite-scroll-loader";
+import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-loader";
+import { Tabs } from "@/shared/components/ui/tabs-custom";
 
 const PAGE_SIZE = 12;
 const SKELETON_CARD_COUNT = PAGE_SIZE;
@@ -136,6 +135,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const [managingTargets, setManagingTargets] = useState<
     ReadonlyMap<string, MarketplaceManageAction>
   >(new Map());
+  const detailRequestRef = useRef({ byKey: new Map<string, number>(), seq: 0 });
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -227,11 +227,12 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     scope === "installed"
       ? installedEntries.length
       : (itemsQuery.data?.total ?? 0);
-  const showCatalogSkeleton =
-    scope === "all" && itemsQuery.isLoading && !itemsQuery.data;
-  const showInstalledSkeleton =
-    scope === "installed" && installedQuery.isLoading && !installedQuery.data;
-  const showListSkeleton = showCatalogSkeleton || showInstalledSkeleton;
+  const skeletonState = {
+    showCatalog: scope === "all" && itemsQuery.isLoading && !itemsQuery.data,
+    showInstalled: scope === "installed" && installedQuery.isLoading && !installedQuery.data,
+  };
+  const showListSkeleton =
+    skeletonState.showCatalog || skeletonState.showInstalled;
 
   const listSummary = useMemo(() => {
     if (scope === "installed") {
@@ -369,6 +370,11 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       record?.id ??
       record?.spec ??
       t("marketplaceUnknownItem");
+    const dedupeKey = item
+      ? `marketplace:${item.type}:${item.slug}`
+      : `marketplace:${record?.type ?? "unknown"}:${record?.id ?? record?.spec ?? title}`;
+    const openOptions = { title, kind: "content" as const, dedupeKey };
+    const updateOptions = { ...openOptions, activate: false };
 
     if (!item) {
       const url = buildGenericDetailDataUrl({
@@ -382,71 +388,71 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
         metadataRaw: JSON.stringify(record ?? {}, null, 2),
         contentRaw: "-",
       });
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
+      docBrowser.open(url, openOptions);
       return;
     }
 
+    const requestId = detailRequestRef.current.seq + 1;
+    detailRequestRef.current.seq = requestId;
+    detailRequestRef.current.byKey.set(dedupeKey, requestId);
     const summary = pickLocalizedText(
       item.summaryI18n,
       item.summary,
       localeFallbacks,
     );
-
-    if (item.type === "skill") {
-      try {
-        const content: MarketplaceSkillContentView =
-          await fetchMarketplaceSkillContent(item.slug);
-        const url = buildGenericDetailDataUrl({
-          title,
-          typeLabel: t("marketplaceTypeSkill"),
-          spec: item.install.spec,
-          summary,
-          metadataRaw: content.metadataRaw,
-          contentRaw: content.bodyRaw || content.raw,
-          sourceUrl: content.sourceUrl,
-          sourceLabel: `Source (${content.source})`,
-          tags: item.tags,
-          author: item.author,
-        });
-        docBrowser.open(url, { newTab: true, title, kind: "content" });
-      } catch (error) {
-        const url = buildGenericDetailDataUrl({
-          title,
-          typeLabel: t("marketplaceTypeSkill"),
-          spec: item.install.spec,
-          summary,
-          metadataRaw: JSON.stringify(
-            { error: error instanceof Error ? error.message : String(error) },
-            null,
-            2,
-          ),
-          contentRaw: t("marketplaceOperationFailed"),
-        });
-        docBrowser.open(url, { newTab: true, title, kind: "content" });
-      }
-      return;
-    }
-
+    const detailConfig =
+      item.type === "skill"
+        ? {
+            typeLabel: t("marketplaceTypeSkill"),
+            loadContent: () => fetchMarketplaceSkillContent(item.slug),
+            fallbackContent: t("marketplaceOperationFailed"),
+            defaultContent: undefined,
+          }
+        : {
+            typeLabel: t("marketplaceTypePlugin"),
+            loadContent: () => fetchMarketplacePluginContent(item.slug),
+            fallbackContent: "-",
+            defaultContent: item.summary,
+          };
+    docBrowser.open(
+      buildGenericDetailDataUrl({
+        title,
+        typeLabel: detailConfig.typeLabel,
+        spec: item.install.spec,
+        summary,
+        metadataRaw: t("loading"),
+        contentRaw: t("loading"),
+        tags: item.tags,
+        author: item.author,
+      }),
+      openOptions,
+    );
     try {
-      const content: MarketplacePluginContentView =
-        await fetchMarketplacePluginContent(item.slug);
+      const content: MarketplaceSkillContentView | MarketplacePluginContentView =
+        await detailConfig.loadContent();
+      if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
+        return;
+      }
       const url = buildGenericDetailDataUrl({
         title,
-        typeLabel: t("marketplaceTypePlugin"),
+        typeLabel: detailConfig.typeLabel,
         spec: item.install.spec,
         summary,
         metadataRaw: content.metadataRaw,
-        contentRaw: content.bodyRaw || content.raw || item.summary,
+        contentRaw: content.bodyRaw || content.raw || detailConfig.defaultContent,
         sourceUrl: content.sourceUrl,
         sourceLabel: `Source (${content.source})`,
         tags: item.tags,
         author: item.author,
       });
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
+      docBrowser.open(url, updateOptions);
     } catch (error) {
+      if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
+        return;
+      }
       const url = buildGenericDetailDataUrl({
         title,
-        typeLabel: t("marketplaceTypePlugin"),
+        typeLabel: detailConfig.typeLabel,
         spec: item.install.spec,
         summary,
         metadataRaw: JSON.stringify(
@@ -454,9 +460,9 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           null,
           2,
         ),
-        contentRaw: "-",
+        contentRaw: detailConfig.fallbackContent,
       });
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
+      docBrowser.open(url, updateOptions);
     }
   };
 
@@ -484,7 +490,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       />
 
       <section className="flex min-h-0 flex-1 flex-col">
-        <div className="flex items-center justify-between mb-3">
+        <div className="mb-3 flex items-center justify-between">
           <h3 className="text-[14px] font-semibold text-gray-900">
             {scope === "installed"
               ? t(copyKeys.sectionInstalled)
@@ -494,18 +500,14 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
         </div>
 
         {scope === "all" && itemsQuery.isError && (
-          <NoticeCard
-            tone="danger"
-            title={t(copyKeys.errorLoadData)}
-            description={itemsQuery.error.message}
-          />
+          <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+            {t(copyKeys.errorLoadData)}: {itemsQuery.error.message}
+          </div>
         )}
         {scope === "installed" && installedQuery.isError && (
-          <NoticeCard
-            tone="danger"
-            title={t(copyKeys.errorLoadInstalled)}
-            description={installedQuery.error.message}
-          />
+          <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+            {t(copyKeys.errorLoadInstalled)}: {installedQuery.error.message}
+          </div>
         )}
 
         <div
@@ -529,10 +531,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
                 <MarketplaceListCard
                   key={item.id}
                   item={item}
-                  record={findInstalledRecordForItem(
-                    item,
-                    installedRecordLookup,
-                  )}
+                  record={findInstalledRecordForItem(item, installedRecordLookup)}
                   language={language}
                   installState={installState}
                   manageState={manageState}
@@ -568,7 +567,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
             !showListSkeleton &&
             !itemsQuery.isError &&
             allItems.length === 0 && (
-              <div className="text-[13px] text-gray-500 py-8 text-center">
+              <div className="py-8 text-center text-[13px] text-gray-500">
                 {t(copyKeys.emptyData)}
               </div>
             )}
@@ -576,18 +575,20 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
             !showListSkeleton &&
             !installedQuery.isError &&
             installedEntries.length === 0 && (
-              <div className="text-[13px] text-gray-500 py-8 text-center">
+              <div className="py-8 text-center text-[13px] text-gray-500">
                 {t(copyKeys.emptyInstalled)}
               </div>
             )}
 
-          {scope === "all" && !showCatalogSkeleton && !itemsQuery.isError && (
-            <MarketplaceInfiniteScrollStatus
-              hasMore={Boolean(itemsQuery.hasNextPage)}
-              loading={itemsQuery.isFetchingNextPage}
-              sentinelRef={infiniteScroll.sentinelRef}
-            />
-          )}
+          {scope === "all" &&
+            !skeletonState.showCatalog &&
+            !itemsQuery.isError && (
+              <MarketplaceInfiniteScrollStatus
+                hasMore={Boolean(itemsQuery.hasNextPage)}
+                loading={itemsQuery.isFetchingNextPage}
+                sentinelRef={infiniteScroll.sentinelRef}
+              />
+            )}
         </div>
       </section>
       <ConfirmDialog />

package/src/{components/marketplace → features/marketplace/components}/mcp/mcp-marketplace-card.tsx

@@ -1,10 +1,10 @@
 import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
-} from "@/api/types";
-import { Button } from "@/components/ui/button";
-import { TagChip } from "@/components/ui/tag-chip";
-import { t } from "@/lib/i18n";
+} from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import { TagChip } from "@/shared/components/ui/tag-chip";
+import { t } from "@/shared/lib/i18n";
 import { readSummary, readTransportLabel } from "./mcp-marketplace-doc";
 
 export function McpMarketplaceCard(props: {

package/src/{components/marketplace → features/marketplace/components}/mcp/mcp-marketplace-dialogs.tsx

@@ -3,8 +3,8 @@ import type {
   MarketplaceItemSummary,
   MarketplaceMcpDoctorResult,
   MarketplaceMcpInstallSpec,
-} from "@/api/types";
-import { Button } from "@/components/ui/button";
+} from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,11 +12,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { NoticeCard } from "@/components/ui/notice-card";
-import { Switch } from "@/components/ui/switch";
-import { t } from "@/lib/i18n";
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { Switch } from "@/shared/components/ui/switch";
+import { t } from "@/shared/lib/i18n";
 
 export function InstallDialog(props: {
   item: MarketplaceItemSummary | null;

package/src/{components/marketplace → features/marketplace/components}/mcp/mcp-marketplace-doc.ts

@@ -2,12 +2,12 @@ import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
   MarketplaceMcpInstallSpec,
-} from "@/api/types";
+} from "@/shared/lib/api";
 import {
   pickInstalledRecordDescription,
   pickLocalizedText,
-} from "@/components/marketplace/marketplace-localization";
-import { t } from "@/lib/i18n";
+} from "@/features/marketplace/components/marketplace-localization";
+import { t } from "@/shared/lib/i18n";
 
 function normalizeMarketplaceKey(value: string | undefined): string {
   return (value ?? "").trim().toLowerCase();

package/src/{components/marketplace → features/marketplace/components}/mcp/mcp-marketplace-page.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from "@testing-library/react";
 import { describe, beforeEach, expect, it, vi } from "vitest";
-import { McpMarketplacePage } from "@/components/marketplace/mcp/mcp-marketplace-page";
+import { McpMarketplacePage } from "@/features/marketplace";
 import type {
   MarketplaceInstalledView,
   MarketplaceListView,
-} from "@/api/types";
+} from "@/shared/lib/api";
 
 type ItemsQueryState = {
   data?: MarketplaceListView;
@@ -41,11 +41,15 @@ const mocks = vi.hoisted(() => ({
   docOpen: vi.fn(),
 }));
 
-vi.mock("@tanstack/react-query", () => ({
-  useMutation: () => mocks.doctorMutation,
-}));
+vi.mock("@tanstack/react-query", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-query")>();
+  return {
+    ...actual,
+    useMutation: () => mocks.doctorMutation,
+  };
+});
 
-vi.mock("@/components/providers/I18nProvider", () => ({
+vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({
     language: "zh",
     setLanguage: vi.fn(),
@@ -54,20 +58,20 @@ vi.mock("@/components/providers/I18nProvider", () => ({
   }),
 }));
 
-vi.mock("@/components/doc-browser", () => ({
+vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
   }),
 }));
 
-vi.mock("@/hooks/useConfirmDialog", () => ({
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
   useConfirmDialog: () => ({
     confirm: mocks.confirm,
     ConfirmDialog: () => null,
   }),
 }));
 
-vi.mock("@/hooks/useMcpMarketplace", () => ({
+vi.mock("@/features/marketplace/hooks/use-mcp-marketplace", () => ({
   useMcpMarketplaceItems: () => mocks.itemsQuery,
   useMcpMarketplaceInstalled: () => mocks.installedQuery,
   useInstallMcpMarketplaceItem: () => mocks.installMutation,