@nextclaw/ui 0.12.35-beta.1 → 0.12.35-beta.2

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -0,0 +1,83 @@
+import type { MouseEvent } from 'react';
+import { AppWindow, Star } from 'lucide-react';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+
+export function PanelAppListItem({
+  entry,
+  favoritePending,
+  onOpen,
+  onToggleFavorite,
+}: {
+  entry: PanelAppEntryView;
+  favoritePending: boolean;
+  onOpen: () => void;
+  onToggleFavorite: () => void;
+}) {
+  const favoriteLabel = entry.favorite ? t('panelAppsUnfavorite') : t('panelAppsFavorite');
+  const secondary = entry.lastOpenedAt
+    ? `${t('panelAppsLastOpened')} ${formatDateTime(entry.lastOpenedAt)}`
+    : `${t('panelAppsUpdated')} ${formatDateTime(entry.updatedAt)}`;
+  const handleFavorite = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onToggleFavorite();
+  };
+
+  return (
+    <div className="group flex w-full min-w-0 items-start gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-2.5 transition-colors hover:border-amber-200 hover:bg-amber-50/50">
+      <button
+        type="button"
+        onClick={onOpen}
+        className="flex min-w-0 flex-1 items-start gap-3 text-left"
+      >
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-amber-50 text-base text-amber-700">
+          <PanelAppIcon icon={entry.icon} title={entry.title} />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm font-medium text-gray-900">{entry.title}</span>
+          {entry.description ? (
+            <span className="mt-0.5 block line-clamp-2 text-xs leading-5 text-gray-600">{entry.description}</span>
+          ) : null}
+          <span className="mt-1 block truncate text-xs text-gray-400">{secondary}</span>
+        </span>
+      </button>
+      <button
+        type="button"
+        onClick={handleFavorite}
+        disabled={favoritePending}
+        className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-amber-500 disabled:opacity-50"
+        title={favoriteLabel}
+        aria-label={favoriteLabel}
+      >
+        <Star className={entry.favorite ? 'h-4 w-4 fill-amber-400 text-amber-500' : 'h-4 w-4'} />
+      </button>
+    </div>
+  );
+}
+
+function PanelAppIcon({ icon, title }: { icon?: string; title: string }) {
+  if (!icon) {
+    return <AppWindow className="h-4 w-4" />;
+  }
+  if (isImageIcon(icon)) {
+    return (
+      <img
+        src={icon}
+        alt=""
+        aria-hidden="true"
+        className="h-5 w-5 rounded-sm object-contain"
+        title={title}
+      />
+    );
+  }
+  return <span className="max-w-6 truncate text-center leading-none">{icon}</span>;
+}
+
+function isImageIcon(icon: string): boolean {
+  return (
+    icon.startsWith('data:image/') ||
+    icon.startsWith('http://') ||
+    icon.startsWith('https://') ||
+    icon.startsWith('/')
+  );
+}

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -0,0 +1,34 @@
+import { ArrowLeft, RefreshCw } from 'lucide-react';
+import { t } from '@/shared/lib/i18n';
+
+type PanelAppToolbarProps = {
+  onOpenPanelApps: () => void;
+  onRefresh: () => void;
+};
+
+export function PanelAppToolbar({
+  onOpenPanelApps,
+  onRefresh,
+}: PanelAppToolbarProps) {
+  return (
+    <div className="flex items-center justify-between gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+      <button
+        type="button"
+        onClick={onOpenPanelApps}
+        className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        {t('panelAppsTitle')}
+      </button>
+      <button
+        type="button"
+        onClick={onRefresh}
+        className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+        title={t('panelAppsRefreshCurrent')}
+        aria-label={t('panelAppsRefreshCurrent')}
+      >
+        <RefreshCw className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -0,0 +1,109 @@
+import { useMemo, useState } from 'react';
+import { HelpCircle, RefreshCw } from 'lucide-react';
+import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
+import { usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import { getPanelAppViewEntries } from '@/features/panel-apps/utils/panel-app-view.utils';
+import type { PanelAppViewMode } from '@/features/panel-apps/utils/panel-app-view.utils';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
+import { t } from '@/shared/lib/i18n';
+
+export function PanelAppsList({
+  onOpenPanelApp,
+}: {
+  onOpenPanelApp: (entry: PanelAppEntryView) => void;
+}) {
+  const panelApps = usePanelApps();
+  const updatePreferences = useUpdatePanelAppPreferences();
+  const recordOpened = useRecordPanelAppOpened();
+  const [viewMode, setViewMode] = useState<PanelAppViewMode>('smart');
+  const entries = useMemo(
+    () => getPanelAppViewEntries(panelApps.data?.entries ?? [], viewMode),
+    [panelApps.data?.entries, viewMode],
+  );
+
+  const openPanelApp = async (entry: PanelAppEntryView) => {
+    try {
+      onOpenPanelApp(await recordOpened.mutateAsync(entry.id));
+    } catch {
+      onOpenPanelApp(entry);
+    }
+  };
+
+  const toggleFavorite = (entry: PanelAppEntryView) => {
+    updatePreferences.mutate({
+      id: entry.id,
+      preferences: { favorite: !entry.favorite },
+    });
+  };
+
+  if (panelApps.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('panelAppsLoading')}</div>
+    );
+  }
+
+  if (panelApps.isError) {
+    return (
+      <div className="p-4 text-sm text-rose-600">{panelApps.error instanceof Error ? panelApps.error.message : t('panelAppsLoadFailed')}</div>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-white">
+      <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <div className="truncate text-sm font-semibold text-gray-900">{t('panelAppsTitle')}</div>
+          {panelApps.data?.panelsPath ? (
+            <TooltipProvider delayDuration={250}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button type="button" className="rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-[320px] break-all font-mono text-xs">{panelApps.data.panelsPath}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={() => void panelApps.refetch()}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+          title={t('panelAppsRefresh')}
+          aria-label={t('panelAppsRefresh')}
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <div className="border-b border-gray-100 px-3 py-2">
+        <Tabs value={viewMode} onValueChange={(value) => setViewMode(value as PanelAppViewMode)}>
+          <TabsList className="grid h-auto w-full grid-cols-5 rounded-lg bg-gray-100/70 p-0.5">
+            <TabsTrigger value="smart" className="px-2 py-1 text-xs">{t('panelAppsSortSmart')}</TabsTrigger>
+            <TabsTrigger value="favorites" className="px-2 py-1 text-xs">{t('panelAppsFavorites')}</TabsTrigger>
+            <TabsTrigger value="recent-open" className="px-2 py-1 text-xs">{t('panelAppsSortRecentOpen')}</TabsTrigger>
+            <TabsTrigger value="updated" className="px-2 py-1 text-xs">{t('panelAppsSortUpdated')}</TabsTrigger>
+            <TabsTrigger value="name" className="px-2 py-1 text-xs">{t('panelAppsSortName')}</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+      {entries.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">{t('panelAppsEmpty')}</div>
+      ) : (
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
+          <div className="space-y-1.5">
+            {entries.map((entry) => (
+              <PanelAppListItem
+                key={entry.id}
+                entry={entry}
+                favoritePending={updatePreferences.isPending}
+                onOpen={() => void openPanelApp(entry)}
+                onToggleFavorite={() => toggleFavorite(entry)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/panel-apps/hooks/use-panel-apps.ts

@@ -0,0 +1,39 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { nextclawClient } from '@/shared/lib/api';
+import type { PanelAppPreferencesUpdateView } from '@/shared/lib/api';
+
+const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
+
+export function usePanelApps() {
+  return useQuery({
+    queryKey: PANEL_APPS_QUERY_KEY,
+    queryFn: () => nextclawClient.panelApps.listPanelApps(),
+    staleTime: 0,
+  });
+}
+
+export function useUpdatePanelAppPreferences() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      preferences,
+    }: {
+      id: string;
+      preferences: PanelAppPreferencesUpdateView;
+    }) => nextclawClient.panelApps.updatePanelAppPreferences(id, preferences),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+    },
+  });
+}
+
+export function useRecordPanelAppOpened() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => nextclawClient.panelApps.recordPanelAppOpened(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+    },
+  });
+}

package/src/features/panel-apps/index.ts

@@ -0,0 +1,4 @@
+export {
+  openPanelApps,
+  PANEL_APPS_DOC_BROWSER_RENDERERS,
+} from './utils/panel-app-doc-browser.utils';

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -0,0 +1,56 @@
+import { AppWindow } from 'lucide-react';
+import type { DocBrowserContextValue } from '@/shared/components/doc-browser/doc-browser-context';
+import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-browser/doc-browser-renderer.types';
+import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
+import { PanelAppsList } from '@/features/panel-apps/components/panel-apps-list';
+import { t } from '@/shared/lib/i18n';
+
+export const PANEL_APPS_LIST_TAB_KIND = 'panel-apps';
+export const PANEL_APP_TAB_KIND = 'panel-app';
+const PANEL_APPS_LIST_URL = 'nextclaw://panel-apps';
+const PANEL_APP_IFRAME_SANDBOX = [
+  'allow-same-origin',
+  'allow-scripts',
+  'allow-forms',
+  'allow-modals',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-downloads',
+  'allow-pointer-lock',
+  'allow-presentation',
+].join(' ');
+
+export function openPanelApps(docBrowser: Pick<DocBrowserContextValue, 'open'>): void {
+  docBrowser.open(PANEL_APPS_LIST_URL, {
+    kind: PANEL_APPS_LIST_TAB_KIND,
+    title: t('panelAppsTitle'),
+    dedupeKey: 'panel-apps:list',
+  });
+}
+
+export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
+  [PANEL_APPS_LIST_TAB_KIND]: {
+    getTitle: () => t('panelAppsTitle'),
+    renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
+    renderContent: ({ open }) => (
+      <PanelAppsList
+        onOpenPanelApp={(entry) => open(entry.contentPath, {
+          kind: PANEL_APP_TAB_KIND,
+          title: entry.title,
+          dedupeKey: `panel-app:${entry.id}`,
+        })}
+      />
+    ),
+  },
+  [PANEL_APP_TAB_KIND]: {
+    getIframeSandbox: () => PANEL_APP_IFRAME_SANDBOX,
+    getTitle: (tab) => tab.title || t('panelAppsTitle'),
+    renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
+    renderToolbar: ({ open, refreshIframe }) => (
+      <PanelAppToolbar
+        onOpenPanelApps={() => openPanelApps({ open })}
+        onRefresh={refreshIframe}
+      />
+    ),
+  },
+};

package/src/features/panel-apps/utils/panel-app-view.utils.ts

@@ -0,0 +1,43 @@
+import type { PanelAppEntryView } from '@/shared/lib/api';
+
+export type PanelAppViewMode = 'smart' | 'favorites' | 'recent-open' | 'updated' | 'name';
+
+export function getPanelAppViewEntries(entries: PanelAppEntryView[], mode: PanelAppViewMode): PanelAppEntryView[] {
+  if (mode === 'favorites') {
+    return sortPanelApps(entries.filter((entry) => entry.favorite), 'smart');
+  }
+  if (mode === 'recent-open') {
+    return sortPanelApps(entries.filter((entry) => entry.lastOpenedAt), mode);
+  }
+  return sortPanelApps(entries, mode);
+}
+
+function sortPanelApps(entries: PanelAppEntryView[], mode: Exclude<PanelAppViewMode, 'favorites'>): PanelAppEntryView[] {
+  return [...entries].sort((left, right) => comparePanelApps(left, right, mode));
+}
+
+function comparePanelApps(left: PanelAppEntryView, right: PanelAppEntryView, mode: Exclude<PanelAppViewMode, 'favorites'>): number {
+  if (mode === 'recent-open') {
+    return compareIsoDesc(left.lastOpenedAt, right.lastOpenedAt) || compareByName(left, right);
+  }
+  if (mode === 'updated') {
+    return compareIsoDesc(left.updatedAt, right.updatedAt) || compareByName(left, right);
+  }
+  if (mode === 'name') {
+    return compareByName(left, right);
+  }
+  return (
+    Number(right.favorite) - Number(left.favorite) ||
+    compareIsoDesc(left.lastOpenedAt, right.lastOpenedAt) ||
+    compareIsoDesc(left.updatedAt, right.updatedAt) ||
+    compareByName(left, right)
+  );
+}
+
+function compareByName(left: PanelAppEntryView, right: PanelAppEntryView): number {
+  return left.title.localeCompare(right.title);
+}
+
+function compareIsoDesc(left?: string, right?: string): number {
+  return new Date(right ?? 0).getTime() - new Date(left ?? 0).getTime();
+}

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -8,6 +8,7 @@ import { Sidebar } from "@/app/components/layout/sidebar";
 import { DesktopWindowChrome } from "@/platforms/desktop/components/desktop-window-chrome";
 import { isWindowsDesktopHost } from "@/platforms/desktop/utils/desktop-host.utils";
 import { MobileBottomNav } from "@/platforms/mobile";
+import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import { cn } from "@/shared/lib/utils";
 
 const DocBrowser = lazy(async () => ({
@@ -19,6 +20,7 @@ type DesktopAppShellProps = {
   isMobileLayout?: boolean;
   isDocBrowserOpen: boolean;
   docBrowserMode: "floating" | "docked";
+  docBrowserRenderers?: DocBrowserCustomTabRenderers;
   children: React.ReactNode;
 };
 
@@ -27,6 +29,7 @@ export function DesktopAppShell({
   isMobileLayout = false,
   isDocBrowserOpen,
   docBrowserMode,
+  docBrowserRenderers = {},
   children,
 }: DesktopAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
@@ -62,7 +65,7 @@ export function DesktopAppShell({
           </div>
           {isDocBrowserOpen && docBrowserMode === "docked" ? (
             <Suspense fallback={null}>
-              <DocBrowser />
+              <DocBrowser customTabRenderers={docBrowserRenderers} />
             </Suspense>
           ) : null}
         </div>
@@ -70,7 +73,7 @@ export function DesktopAppShell({
       {showMobileBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen && docBrowserMode === "floating" ? (
         <Suspense fallback={null}>
-          <DocBrowser />
+          <DocBrowser customTabRenderers={docBrowserRenderers} />
         </Suspense>
       ) : null}
     </div>

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/app/configs/app-navigation.config";
 import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav";
 import { MobileTopbar } from "@/platforms/mobile/components/mobile-topbar";
+import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 
 const DocBrowser = lazy(async () => ({
   default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
@@ -13,6 +14,7 @@ const DocBrowser = lazy(async () => ({
 type MobileAppShellProps = {
   pathname: string;
   isDocBrowserOpen: boolean;
+  docBrowserRenderers?: DocBrowserCustomTabRenderers;
   topbarLeadingInset?: string;
   children: React.ReactNode;
 };
@@ -20,6 +22,7 @@ type MobileAppShellProps = {
 export function MobileAppShell({
   pathname,
   isDocBrowserOpen,
+  docBrowserRenderers = {},
   topbarLeadingInset,
   children,
 }: MobileAppShellProps) {
@@ -42,7 +45,7 @@ export function MobileAppShell({
       {showBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen ? (
         <Suspense fallback={null}>
-          <DocBrowser displayMode="fullscreen" />
+          <DocBrowser customTabRenderers={docBrowserRenderers} displayMode="fullscreen" />
         </Suspense>
       ) : null}
     </div>

package/src/shared/components/doc-browser/doc-browser-context.tsx

@@ -14,7 +14,7 @@ export const DOCS_DEFAULT_BASE_URL = `https://${DOCS_PRIMARY_DOMAIN}`;
 const DOCS_DEFAULT_GUIDE_PATH = '/guide/getting-started';
 
 export type DocBrowserMode = 'floating' | 'docked';
-export type DocBrowserTabKind = 'docs' | 'content';
+export type DocBrowserTabKind = 'docs' | 'content' | (string & {});
 
 export type DocBrowserTab = {
   id: string;
@@ -55,7 +55,7 @@ interface DocBrowserActions {
   setActiveTab: (tabId: string) => void;
 }
 
-type DocBrowserContextValue = DocBrowserState & DocBrowserActions & {
+export type DocBrowserContextValue = DocBrowserState & DocBrowserActions & {
   currentTab?: DocBrowserTab;
 };
 
@@ -224,15 +224,15 @@ function resolveOpenTargetUrl(params: {
   kind: DocBrowserTabKind;
   activeTab?: DocBrowserTab;
 }): string {
-  if (params.url && params.url.trim().length > 0) {
-    return normalizeUrlByKind(params.url, params.kind);
+  const { activeTab, kind, url } = params;
+  if (url && url.trim().length > 0) {
+    return normalizeUrlByKind(url, kind);
   }
 
-  if (params.kind === 'docs') {
+  if (kind === 'docs') {
     return getDefaultDocsUrl();
   }
-
-  return params.activeTab?.currentUrl ?? getDefaultDocsUrl();
+  return activeTab?.currentUrl ?? getDefaultDocsUrl();
 }
 
 function openDocBrowserState(