@nextclaw/ui 0.15.26 → 0.15.28

package/src/features/apps/components/app-marketplace-dialog.tsx

@@ -1,83 +1,133 @@
-import { useMemo, useState } from 'react';
-import type { AppPackageView } from '@nextclaw/client-sdk';
-import { AppWindow, Check, ExternalLink, Search, ShieldCheck } from 'lucide-react';
-import { useAppMarketplace } from '@/features/apps/hooks/use-app-marketplace';
+import { useEffect, useMemo, useState } from 'react';
+import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import { ArrowLeft, ShieldCheck } from 'lucide-react';
 import {
-  buildLocaleFallbacks,
-  pickLocalizedText,
-} from '@/features/marketplace';
-import { Button } from '@/shared/components/ui/button';
+  AppMarketplaceCatalog,
+  type MarketplaceFilter,
+} from '@/features/apps/components/app-marketplace-catalog';
+import { MarketplaceDetail } from '@/features/apps/components/app-marketplace-detail';
+import { findLatestAppPackageOperation } from '@/features/apps/components/app-marketplace-operation';
+import {
+  useAppMarketplace,
+  useAppMarketplaceDetail,
+} from '@/features/apps/hooks/use-app-marketplace';
+import { buildLocaleFallbacks } from '@/features/marketplace';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
 } from '@/shared/components/ui/dialog';
-import { Input } from '@/shared/components/ui/input';
-import { Skeleton } from '@/shared/components/ui/skeleton';
 import { getLanguage, t } from '@/shared/lib/i18n';
 
+const HIDDEN_ENGINEERING_APPS = new Set([
+  'nextclaw.starter-card',
+  'nextclaw.validation-task-board',
+]);
+
 export function AppMarketplaceDialog({
   error,
   installedPackages,
-  installingSource,
-  isPending,
+  isStarting,
   onInstall,
   onOpenChange,
+  onUpdate,
   open,
+  operations,
+  startingSource,
 }: {
   error: Error | null;
   installedPackages: AppPackageView[];
-  installingSource?: string;
-  isPending: boolean;
+  isStarting: boolean;
   onInstall: (source: string, registryUrl: string) => void;
   onOpenChange: (open: boolean) => void;
+  onUpdate: (appId: string) => void;
   open: boolean;
+  operations: AppPackageOperationView[];
+  startingSource?: string;
 }) {
+  const [filter, setFilter] = useState<MarketplaceFilter>('all');
   const [search, setSearch] = useState('');
-  const marketplace = useAppMarketplace(open);
-  const installedAppIds = useMemo(
-    () => new Set(installedPackages.map((entry) => entry.id)),
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 250);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+  const marketplaceParams = useMemo(() => ({
+    q: debouncedSearch || undefined,
+    featured: filter === 'featured' ? true : undefined,
+    tags: filter === 'personal'
+      ? ['personal', 'productivity', 'notes', 'calendar']
+      : undefined,
+    tag: filter === 'local'
+        ? 'local'
+        : undefined,
+    sort: debouncedSearch ? 'relevance' as const : 'featured' as const,
+  }), [debouncedSearch, filter]);
+  const marketplace = useAppMarketplace(marketplaceParams, open);
+  const detail = useAppMarketplaceDetail(selectedSlug, open);
+  const installedById = useMemo(
+    () => new Map(installedPackages.map((entry) => [entry.id, entry])),
     [installedPackages],
   );
   const localeFallbacks = buildLocaleFallbacks(getLanguage() === 'zh' ? 'zh-CN' : 'en-US');
-  const items = useMemo(() => {
-    const query = search.trim().toLocaleLowerCase();
-    const availableItems = marketplace.data?.items ?? [];
-    if (!query) return availableItems;
-    return availableItems.filter((item) => [
-      item.name,
-      item.appId,
-      item.summary,
-      pickLocalizedText(item.summaryI18n, item.summary, localeFallbacks),
-      ...item.tags,
-    ].some((value) => value.toLocaleLowerCase().includes(query)));
-  }, [localeFallbacks, marketplace.data?.items, search]);
+  const items = useMemo(
+    () => (marketplace.data?.items ?? []).filter(
+      (item) => !HIDDEN_ENGINEERING_APPS.has(item.appId),
+    ),
+    [marketplace.data?.items],
+  );
+
+  const closeDialog = (nextOpen: boolean) => {
+    if (!nextOpen) setSelectedSlug(null);
+    onOpenChange(nextOpen);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-h-[720px] sm:max-w-2xl">
-        <MarketplaceHeader search={search} onSearchChange={setSearch} />
-        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-muted/15 px-3 py-3 sm:px-4">
-          {error ? (
-            <div role="alert" className="mb-3 rounded-xl bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive ring-1 ring-destructive/15">
-              {error.message || t('appPackagesActionFailed')}
+    <Dialog open={open} onOpenChange={closeDialog}>
+      <DialogContent className="flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background/95 p-0 shadow-[0_32px_100px_rgba(0,0,0,0.24)] backdrop-blur-xl [&>button.absolute]:top-[max(1rem,env(safe-area-inset-top))] sm:h-[min(680px,calc(100dvh-4rem))] sm:w-[min(920px,calc(100vw-3rem))] sm:max-w-none sm:rounded-2xl sm:border sm:border-border/55">
+        {selectedSlug ? (
+          <>
+            <MarketplaceDetailHeader onBack={() => setSelectedSlug(null)} />
+            <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-background">
+              <MarketplaceDetail
+                detail={detail.data}
+                error={detail.error instanceof Error ? detail.error : null}
+                installedPackage={detail.data ? installedById.get(detail.data.appId) : undefined}
+                isLoading={detail.isLoading}
+                isStarting={isStarting && detail.data?.install.spec === startingSource}
+                localeFallbacks={localeFallbacks}
+                onInstall={onInstall}
+                onUpdate={onUpdate}
+                operation={detail.data
+                  ? findLatestAppPackageOperation(operations, detail.data.appId, detail.data.install.spec)
+                  : undefined}
+              />
             </div>
-          ) : null}
-          <MarketplaceContent
-            installedAppIds={installedAppIds}
-            installedPackages={installedPackages}
-            installingSource={installingSource}
+          </>
+        ) : (
+          <AppMarketplaceCatalog
+            error={error}
+            filter={filter}
+            installedById={installedById}
             isError={marketplace.isError}
+            isFetchingNextPage={marketplace.isFetchingNextPage}
             isLoading={marketplace.isLoading}
-            isPending={isPending}
+            isStarting={isStarting}
             items={items}
             localeFallbacks={localeFallbacks}
+            onFilterChange={setFilter}
             onInstall={onInstall}
+            onLoadMore={() => void marketplace.fetchNextPage()}
+            onSearchChange={setSearch}
+            onSelect={setSelectedSlug}
+            onUpdate={onUpdate}
+            operations={operations}
+            hasNextPage={marketplace.hasNextPage}
+            search={search}
+            startingSource={startingSource}
           />
-        </div>
-        <div className="flex items-start gap-2 border-t border-border/70 bg-card px-5 py-3 text-[11px] leading-4 text-muted-foreground sm:px-6">
+        )}
+        <div className="flex items-start gap-2 border-t border-border/60 bg-muted/25 px-5 pb-[max(.75rem,env(safe-area-inset-bottom))] pt-3 text-[11px] leading-4 text-muted-foreground sm:px-6 sm:pb-3">
           <ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" />
           <span>{t('appPackagesMarketplaceTrustHint')}</span>
         </div>
@@ -86,177 +136,17 @@ export function AppMarketplaceDialog({
   );
 }
 
-function MarketplaceHeader({
-  onSearchChange,
-  search,
-}: {
-  onSearchChange: (value: string) => void;
-  search: string;
-}) {
-  return (
-    <div className="border-b border-border/70 px-5 pb-4 pt-5 sm:px-6">
-      <DialogHeader className="pr-8">
-        <DialogTitle>{t('appPackagesMarketplaceTitle')}</DialogTitle>
-        <DialogDescription>{t('appPackagesMarketplaceDescription')}</DialogDescription>
-      </DialogHeader>
-      <div className="relative mt-4">
-        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          autoFocus
-          className="pl-9"
-          value={search}
-          onChange={(event) => onSearchChange(event.target.value)}
-          placeholder={t('appPackagesMarketplaceSearch')}
-          aria-label={t('appPackagesMarketplaceSearch')}
-        />
-      </div>
-    </div>
-  );
-}
-
-function MarketplaceContent({
-  installedAppIds,
-  installedPackages,
-  installingSource,
-  isError,
-  isLoading,
-  isPending,
-  items,
-  localeFallbacks,
-  onInstall,
-}: {
-  installedAppIds: Set<string>;
-  installedPackages: AppPackageView[];
-  installingSource?: string;
-  isError: boolean;
-  isLoading: boolean;
-  isPending: boolean;
-  items: ReturnType<typeof useAppMarketplace>['data'] extends infer Data
-    ? Data extends { items: infer Items } ? Items : never
-    : never;
-  localeFallbacks: string[];
-  onInstall: (source: string, registryUrl: string) => void;
-}) {
-  if (isLoading) {
-    return (
-      <div className="space-y-2.5" aria-label={t('appPackagesMarketplaceLoading')}>
-        <Skeleton className="h-32 w-full rounded-2xl" />
-        <Skeleton className="h-32 w-full rounded-2xl" />
-      </div>
-    );
-  }
-  if (isError) {
-    return (
-      <div role="alert" className="rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-4 text-sm text-destructive">
-        {t('appPackagesMarketplaceFailed')}
-      </div>
-    );
-  }
-  if (items.length === 0) {
-    return (
-      <div className="flex flex-col items-center px-6 py-12 text-center">
-        <Search className="h-6 w-6 text-muted-foreground" />
-        <p className="mt-3 text-sm font-medium text-foreground">{t('appPackagesMarketplaceEmpty')}</p>
-      </div>
-    );
-  }
-
+function MarketplaceDetailHeader({ onBack }: { onBack: () => void }) {
   return (
-    <div className="space-y-2.5">
-      {items.map((item) => (
-        <MarketplaceItemCard
-          key={item.id}
-          installed={installedAppIds.has(item.appId)}
-          installedPackage={installedPackages.find((entry) => entry.id === item.appId)}
-          isInstalling={isPending && installingSource === item.install.spec}
-          isPending={isPending}
-          item={item}
-          localeFallbacks={localeFallbacks}
-          onInstall={onInstall}
-        />
-      ))}
+    <div className="border-b border-border/60 bg-card px-4 pb-3 pt-[max(.75rem,env(safe-area-inset-top))] sm:px-5 sm:pt-3">
+      <button
+        type="button"
+        onClick={onBack}
+        className="inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        {t('appPackagesBackToMarketplace')}
+      </button>
     </div>
   );
 }
-
-function MarketplaceItemCard({
-  installed,
-  installedPackage,
-  isInstalling,
-  isPending,
-  item,
-  localeFallbacks,
-  onInstall,
-}: {
-  installed: boolean;
-  installedPackage?: AppPackageView;
-  isInstalling: boolean;
-  isPending: boolean;
-  item: NonNullable<ReturnType<typeof useAppMarketplace>['data']>['items'][number];
-  localeFallbacks: string[];
-  onInstall: (source: string, registryUrl: string) => void;
-}) {
-  const displayName = installedPackage
-    ? readLocalizedText(installedPackage.name, installedPackage.nameI18n)
-    : item.name;
-  const summary = pickLocalizedText(item.summaryI18n, item.summary, localeFallbacks);
-  return (
-    <article className="rounded-2xl border border-border/70 bg-card p-3.5 shadow-sm">
-      <div className="flex items-start gap-3">
-        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <AppWindow className="h-[18px] w-[18px]" />
-        </span>
-        <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-            <h3 className="truncate text-sm font-semibold text-foreground">{displayName}</h3>
-            {item.featured ? (
-              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
-                {t('appPackagesMarketplaceFeatured')}
-              </span>
-            ) : null}
-          </div>
-          <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">{summary}</p>
-          <div className="mt-2 flex flex-wrap items-center gap-1.5">
-            <span className="text-[11px] text-muted-foreground/75">
-              {item.publisher.name} · v{item.latestVersion}
-            </span>
-            {item.tags.slice(0, 3).map((tag) => (
-              <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
-                {tag}
-              </span>
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="mt-3 flex items-center justify-end gap-2 border-t border-border/60 pt-3">
-        <a
-          href={item.webUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex h-8 items-center justify-center rounded-full border border-border bg-card px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-        >
-          {t('appPackagesMarketplaceDetails')}
-          <ExternalLink className="ml-1.5 h-3 w-3" />
-        </a>
-        <Button
-          type="button"
-          size="sm"
-          disabled={installed || isPending}
-          onClick={() => onInstall(item.install.spec, item.install.registry)}
-        >
-          {installed ? (
-            <><Check className="mr-1.5 h-3.5 w-3.5" />{t('appPackagesMarketplaceInstalled')}</>
-          ) : isInstalling ? t('appPackagesInstalling') : t('appPackagesInstall')}
-        </Button>
-      </div>
-    </article>
-  );
-}
-
-function readLocalizedText(
-  fallback: string | undefined,
-  localized: Record<string, string> | undefined,
-): string {
-  const languageTag = getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
-  return localized?.[languageTag] ?? fallback ?? '';
-}

package/src/features/apps/components/app-marketplace-operation.tsx

@@ -0,0 +1,84 @@
+import type { AppPackageOperationView } from '@nextclaw/client-sdk';
+import { Check, LoaderCircle } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+export function MarketplaceInstallButton({
+  active,
+  canUpdate,
+  failed,
+  installed,
+  isStarting,
+  onAction,
+  operation,
+}: {
+  active: boolean;
+  canUpdate: boolean;
+  failed: boolean;
+  installed: boolean;
+  isStarting: boolean;
+  onAction: () => void;
+  operation?: AppPackageOperationView;
+}) {
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant={installed && !canUpdate || active ? 'secondary' : 'default'}
+      disabled={installed && !canUpdate || active || isStarting}
+      onClick={onAction}
+      className="shrink-0 rounded-full px-4"
+    >
+      {installed && !canUpdate ? (
+        <><Check className="mr-1.5 h-3.5 w-3.5" />{t('appPackagesMarketplaceInstalled')}</>
+      ) : active || isStarting ? (
+        <><LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" />{operation ? operationStatusLabel(operation) : t('appPackagesPreparing')}</>
+      ) : canUpdate ? t('appPackagesUpdate') : failed ? t('appPackagesRetry') : t('appPackagesInstall')}
+    </Button>
+  );
+}
+
+export function OperationProgress({ operation }: { operation: AppPackageOperationView }) {
+  const progress = Math.max(4, Math.round((operation.completedSteps / operation.totalSteps) * 100));
+  const failed = operation.status === 'failed' || operation.status === 'interrupted';
+  return (
+    <div className="mt-2" role={failed ? 'alert' : 'status'} aria-live="polite">
+      <div className="h-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn('h-full rounded-full transition-[width] duration-300', failed ? 'bg-destructive' : 'bg-primary')}
+          style={{ width: failed ? '100%' : `${progress}%` }}
+        />
+      </div>
+      <p className={cn('mt-1.5 truncate text-[11px]', failed ? 'text-destructive' : 'text-muted-foreground')}>
+        {failed ? operation.error ?? t('appPackagesActionFailed') : operationStatusLabel(operation)}
+      </p>
+    </div>
+  );
+}
+
+export function findLatestAppPackageOperation(
+  operations: AppPackageOperationView[],
+  appId: string,
+  source: string,
+): AppPackageOperationView | undefined {
+  return operations.find((entry) => entry.appId === appId || entry.source === source);
+}
+
+function operationStatusLabel(operation: AppPackageOperationView): string {
+  switch (operation.status) {
+    case 'queued': return t('appPackagesPreparing');
+    case 'resolving': return t('appPackagesResolving');
+    case 'downloading': return t('appPackagesDownloading');
+    case 'verifying': return t('appPackagesVerifying');
+    case 'installing': return operation.action === 'rollback'
+      ? t('appPackagesSwitchingVersion')
+      : operation.action === 'uninstall'
+        ? t('appPackagesUninstalling')
+        : t('appPackagesInstalling');
+    case 'finalizing': return t('appPackagesFinalizing');
+    case 'succeeded': return t('appPackagesCompleted');
+    case 'failed':
+    case 'interrupted': return t('appPackagesActionFailed');
+  }
+}