@nextclaw/ui 0.15.25 → 0.15.26

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

@@ -0,0 +1,262 @@
+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 {
+  buildLocaleFallbacks,
+  pickLocalizedText,
+} from '@/features/marketplace';
+import { Button } from '@/shared/components/ui/button';
+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';
+
+export function AppMarketplaceDialog({
+  error,
+  installedPackages,
+  installingSource,
+  isPending,
+  onInstall,
+  onOpenChange,
+  open,
+}: {
+  error: Error | null;
+  installedPackages: AppPackageView[];
+  installingSource?: string;
+  isPending: boolean;
+  onInstall: (source: string, registryUrl: string) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}) {
+  const [search, setSearch] = useState('');
+  const marketplace = useAppMarketplace(open);
+  const installedAppIds = useMemo(
+    () => new Set(installedPackages.map((entry) => entry.id)),
+    [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]);
+
+  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')}
+            </div>
+          ) : null}
+          <MarketplaceContent
+            installedAppIds={installedAppIds}
+            installedPackages={installedPackages}
+            installingSource={installingSource}
+            isError={marketplace.isError}
+            isLoading={marketplace.isLoading}
+            isPending={isPending}
+            items={items}
+            localeFallbacks={localeFallbacks}
+            onInstall={onInstall}
+          />
+        </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">
+          <ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>{t('appPackagesMarketplaceTrustHint')}</span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+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>
+    );
+  }
+
+  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>
+  );
+}
+
+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-package-card.tsx

@@ -0,0 +1,268 @@
+import { useState } from 'react';
+import type { AppPackageView } from '@nextclaw/client-sdk';
+import {
+  AppWindow,
+  Bookmark,
+  CalendarDays,
+  CheckSquare2,
+  ChevronRight,
+  MoreHorizontal,
+  NotebookText,
+  RefreshCw,
+  RotateCcw,
+  Server,
+  Trash2,
+  type LucideIcon,
+} from 'lucide-react';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { Button } from '@/shared/components/ui/button';
+import { Card } from '@/shared/components/ui/card';
+import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { getLanguage, t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+export function AppPackageCard({
+  appPackage,
+  isPending,
+  onDisable,
+  onEnable,
+  onOpenPanelApp,
+  onRollback,
+  onUninstall,
+  onUpdate,
+  panelApps,
+}: {
+  appPackage: AppPackageView;
+  isPending: boolean;
+  onDisable: () => void;
+  onEnable: () => void;
+  onOpenPanelApp: (entry: PanelAppEntryView) => void;
+  onRollback: (version: string) => void;
+  onUninstall: () => void;
+  onUpdate: () => void;
+  panelApps: PanelAppEntryView[];
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [uninstallOpen, setUninstallOpen] = useState(false);
+  const panelComponents = appPackage.components.filter((component) => component.kind === 'panel');
+  const serviceCount = appPackage.components.length - panelComponents.length;
+  const rollbackVersions = appPackage.installedVersions.filter(
+    (version) => version !== appPackage.activeVersion,
+  );
+  const displayName = readLocalizedText(appPackage.name, appPackage.nameI18n);
+  const displayDescription = readLocalizedText(
+    appPackage.description,
+    appPackage.descriptionI18n,
+  );
+
+  return (
+    <Card surface="flat" hover={false} className="overflow-hidden">
+      <div className="flex items-start gap-3 px-3.5 pb-3 pt-3.5">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <AppWindow className="h-5 w-5" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <h2 className="truncate text-sm font-semibold text-foreground">{displayName}</h2>
+            <span className={cn(
+              'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
+              appPackage.enabled
+                ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+                : 'bg-muted text-muted-foreground',
+            )}>
+              {appPackage.enabled ? t('appPackagesEnabled') : t('appPackagesAvailable')}
+            </span>
+          </div>
+          {displayDescription ? (
+            <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
+              {displayDescription}
+            </p>
+          ) : null}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground/75">
+            <span>v{appPackage.activeVersion}</span>
+            {appPackage.builtIn ? <span>{t('appPackagesBuiltIn')}</span> : null}
+            {serviceCount > 0 ? (
+              <span className="inline-flex items-center gap-1">
+                <Server className="h-3 w-3" />
+                {t('appPackagesLocalService')}
+              </span>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button
+            type="button"
+            size="sm"
+            variant={appPackage.enabled ? 'outline' : 'default'}
+            disabled={isPending}
+            onClick={appPackage.enabled ? onDisable : onEnable}
+          >
+            {isPending
+              ? t('appPackagesWorking')
+              : appPackage.enabled
+                ? t('appPackagesDisable')
+                : t('appPackagesEnable')}
+          </Button>
+          {(!appPackage.builtIn || rollbackVersions.length > 0) ? (
+            <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={t('appPackagesMoreActions')}
+                  title={t('appPackagesMoreActions')}
+                  disabled={isPending}
+                  className="rounded-full p-2 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 disabled:opacity-50"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-52 rounded-xl p-1.5">
+                {!appPackage.builtIn ? (
+                  <AppPackageMenuItem
+                    icon={RefreshCw}
+                    label={t('appPackagesCheckUpdate')}
+                    onClick={() => {
+                      setMenuOpen(false);
+                      onUpdate();
+                    }}
+                  />
+                ) : null}
+                {rollbackVersions.map((version) => (
+                  <AppPackageMenuItem
+                    key={version}
+                    icon={RotateCcw}
+                    label={`${t('appPackagesRollback')} v${version}`}
+                    onClick={() => {
+                      setMenuOpen(false);
+                      onRollback(version);
+                    }}
+                  />
+                ))}
+                {!appPackage.builtIn ? (
+                  <AppPackageMenuItem
+                    destructive
+                    icon={Trash2}
+                    label={t('appPackagesUninstall')}
+                    onClick={() => {
+                      setMenuOpen(false);
+                      setUninstallOpen(true);
+                    }}
+                  />
+                ) : null}
+              </PopoverContent>
+            </Popover>
+          ) : null}
+        </div>
+      </div>
+
+      {panelComponents.length > 0 ? (
+        <div className="border-t border-border/60 bg-muted/20 p-2">
+          <div className="grid grid-cols-2 gap-1.5">
+            {panelComponents.map((component) => {
+              const panelApp = panelApps.find((entry) => entry.appId === component.id);
+              const Icon = resolveComponentIcon(component.id);
+              const componentTitle = readLocalizedText(component.title, component.titleI18n)
+                ?? component.id;
+              return (
+                <button
+                  key={component.id}
+                  type="button"
+                  disabled={!appPackage.enabled || !panelApp || isPending}
+                  onClick={() => panelApp && onOpenPanelApp({
+                    ...panelApp,
+                    title: componentTitle,
+                    description: readLocalizedText(
+                      component.description,
+                      component.descriptionI18n,
+                    ),
+                  })}
+                  className="group flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-default disabled:opacity-55"
+                  title={!appPackage.enabled ? t('appPackagesEnableToOpen') : componentTitle}
+                >
+                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-sm ring-1 ring-border/60">
+                    <ComponentIcon icon={component.icon} fallback={Icon} />
+                  </span>
+                  <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                    {componentTitle}
+                  </span>
+                  {appPackage.enabled ? (
+                    <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" />
+                  ) : null}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={uninstallOpen}
+        onOpenChange={setUninstallOpen}
+        title={t('appPackagesUninstallTitle')}
+        description={t('appPackagesUninstallDescription')}
+        confirmLabel={t('appPackagesUninstall')}
+        variant="destructive"
+        onConfirm={onUninstall}
+        onCancel={() => undefined}
+      />
+    </Card>
+  );
+}
+
+function AppPackageMenuItem({
+  destructive = false,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  destructive?: boolean;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors',
+        destructive
+          ? 'text-destructive hover:bg-destructive/10'
+          : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function ComponentIcon({
+  fallback: Fallback,
+  icon,
+}: {
+  fallback: LucideIcon;
+  icon?: string;
+}) {
+  if (icon && !icon.startsWith('/') && !icon.includes('://')) {
+    return <span className="text-sm leading-none">{icon}</span>;
+  }
+  return <Fallback className="h-3.5 w-3.5" />;
+}
+
+function resolveComponentIcon(componentId: string): LucideIcon {
+  if (componentId.endsWith('-todos')) return CheckSquare2;
+  if (componentId.endsWith('-notes')) return NotebookText;
+  if (componentId.endsWith('-favorites')) return Bookmark;
+  if (componentId.endsWith('-calendar')) return CalendarDays;
+  return AppWindow;
+}
+
+function readLocalizedText(
+  fallback: string | undefined,
+  localized: Record<string, string> | undefined,
+): string | undefined {
+  const languageTag = getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
+  return localized?.[languageTag] ?? fallback;
+}