@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/assets/app/components/layout/Sidebar.tsx

@@ -7,9 +7,11 @@ import {
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useActionQuery } from "@agent-native/core/client/hooks";
-import { useT } from "@agent-native/core/client/i18n";
+import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -21,6 +23,7 @@ import {
   IconLayoutSidebarLeftExpand,
   IconLayoutGrid,
   IconPhotoPlus,
+  IconSearch,
   IconSettings,
   IconShare3,
 } from "@tabler/icons-react";
@@ -118,7 +121,7 @@ function chatThreadPath(threadId: string) {
   return `/chat/${encodeURIComponent(threadId)}`;
 }
 
-function AssetsChatsSection() {
+function AssetsChatsSection({ open }: { open: boolean }) {
   const navigate = useNavigate();
   const location = useLocation();
   const t = useT();
@@ -242,51 +245,57 @@ function AssetsChatsSection() {
   }
 
   return (
-    <div className="mt-2 ms-4">
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={displayedActiveThreadId}
-        onSelect={openThread}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("chat.chats"),
-          showLess: t("chat.chats"),
-        }}
-        previewCount={5}
-        expandedCount={15}
-        onTogglePin={(threadId) => {
-          const thread = visibleThreads.find((item) => item.id === threadId);
-          if (thread) void pinThread(threadId, !thread.pinnedAt);
-        }}
-        onRename={handleRenameThread}
-        renameMaxLength={160}
-        onDelete={(threadId) => void handleArchiveThread(threadId)}
-        renderAdditionalRowActions={(item, closeMenu) => (
-          <button
-            type="button"
-            role="menuitem"
-            className="an-chat-history-row__menu-item"
-            onClick={() => {
-              closeMenu();
-              void handleCopyShareLink(item.id);
-            }}
-          >
-            <IconShare3 size={13} strokeWidth={1.8} />
-            <span>{t("chat.copyShareLink")}</span>
-          </button>
-        )}
-        labels={{
-          options: (item) =>
-            t("chat.optionsFor", { title: item.titleText ?? "" }),
-          renameInput: (item) => `Rename ${item.titleText ?? ""}`,
-          rename: t("chat.renameChat"),
-          pin: t("chat.pinChat"),
-          unpin: t("chat.unpinChat"),
-          delete: t("chat.archiveChat"),
-        }}
-        className="min-w-0 [&_.an-chat-history-rail__new-chat]:justify-start"
-      />
+    <div
+      className="an-chat-history-rail__collapse"
+      data-state={open ? "open" : "closed"}
+      aria-hidden={!open}
+    >
+      <div className="ms-4">
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          onSelect={openThread}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("chat.chats"),
+            showLess: t("chat.chats"),
+          }}
+          previewCount={5}
+          expandedCount={15}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          renameMaxLength={160}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          renderAdditionalRowActions={(item, closeMenu) => (
+            <button
+              type="button"
+              role="menuitem"
+              className="an-chat-history-row__menu-item"
+              onClick={() => {
+                closeMenu();
+                void handleCopyShareLink(item.id);
+              }}
+            >
+              <IconShare3 size={13} strokeWidth={1.8} />
+              <span>{t("chat.copyShareLink")}</span>
+            </button>
+          )}
+          labels={{
+            options: (item) =>
+              t("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) => `Rename ${item.titleText ?? ""}`,
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          className="min-w-0 [&_.an-chat-history-rail__new-chat]:justify-start"
+        />
+      </div>
     </div>
   );
 }
@@ -321,6 +330,59 @@ export function Sidebar() {
     }
   }, [collapsed]);
 
+  const collapseButton = (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setCollapsed((value) => !value)}
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+          aria-label={
+            collapsed
+              ? t("navigation.expandSidebar")
+              : t("navigation.collapseSidebar")
+          }
+        >
+          {collapsed ? (
+            <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+          ) : (
+            <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed
+          ? t("navigation.expandSidebar")
+          : t("navigation.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const searchButton = (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+          aria-label={t("root.commandSearch")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={collapsed ? "icon" : "sidebar"}
+      side="right"
+      className={collapsed ? "h-8 w-8" : "min-w-0"}
+    />
+  );
+
   return (
     <aside
       className={cn(
@@ -353,30 +415,6 @@ export function Sidebar() {
             </span>
           </div>
         )}
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <button
-              onClick={() => setCollapsed((c) => !c)}
-              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              aria-label={
-                collapsed
-                  ? t("navigation.expandSidebar")
-                  : t("navigation.collapseSidebar")
-              }
-            >
-              {collapsed ? (
-                <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-              ) : (
-                <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-              )}
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">
-            {collapsed
-              ? t("navigation.expandSidebar")
-              : t("navigation.collapseSidebar")}
-          </TooltipContent>
-        </Tooltip>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
@@ -443,7 +481,7 @@ export function Sidebar() {
               <div key={item.href}>
                 {link}
                 {item.href === "/" && isCreateRoute ? (
-                  <AssetsChatsSection />
+                  <AssetsChatsSection open />
                 ) : null}
               </div>
             );
@@ -496,13 +534,19 @@ export function Sidebar() {
           )}
 
           {!collapsed && (
-            <div className="px-3 py-2 empty:hidden">
+            <div className="px-3 py-2">
               <DevDatabaseLink />
-              <FeedbackButton />
             </div>
           )}
         </div>
       </div>
+      <SidebarFooterActions
+        collapsed={collapsed}
+        feedback={feedbackButton}
+        translate={translateButton}
+        search={searchButton}
+        collapse={collapseButton}
+      />
     </aside>
   );
 }

package/corpus/templates/assets/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 0 0% 45%;
   --accent: 0 0% 95%;
   --accent-foreground: 0 0% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;

package/corpus/templates/assets/app/i18n-data.ts

@@ -749,6 +749,7 @@ const enUS = {
     makeVariations: "Make variations",
     handoff: "Handoff",
     download: "Download",
+    downloadFailed: "Could not download asset.",
     copyUrl: "Copy URL",
     delete: "Delete",
     deleteTitle: "Delete asset?",
@@ -3229,6 +3230,7 @@ const assetDetailDeDE = {
   copiedUrl: "URL kopiert",
   copyFailed: "Konnte nicht in die Zwischenablage kopieren.",
   previewUnavailable: "Vorschau nicht verfügbar",
+  downloadFailed: "Asset konnte nicht heruntergeladen werden.",
 } satisfies Partial<Messages["assetDetail"]>;
 
 const assetPickerDeDE = {
@@ -3339,6 +3341,7 @@ const assetDetailJaJP = {
   copiedUrl: "URL をコピーしました",
   copyFailed: "クリップボードにコピーできませんでした。",
   previewUnavailable: "プレビューを利用できません",
+  downloadFailed: "アセットをダウンロードできませんでした。",
 } satisfies Partial<Messages["assetDetail"]>;
 
 const assetPickerJaJP = {
@@ -3444,6 +3447,7 @@ const assetDetailKoKR = {
   copiedUrl: "URL이 복사되었습니다",
   copyFailed: "클립보드에 복사할 수 없습니다.",
   previewUnavailable: "미리보기를 사용할 수 없습니다",
+  downloadFailed: "자산을 다운로드할 수 없습니다.",
 } satisfies Partial<Messages["assetDetail"]>;
 
 const assetPickerKoKR = {
@@ -3548,6 +3552,7 @@ const assetDetailHiIN = {
   copiedUrl: "URL कॉपी हुआ",
   copyFailed: "Clipboard पर कॉपी नहीं कर सके।",
   previewUnavailable: "Preview उपलब्ध नहीं है",
+  downloadFailed: "एसेट डाउनलोड नहीं किया जा सका।",
 } satisfies Partial<Messages["assetDetail"]>;
 
 const assetPickerHiIN = {
@@ -4041,6 +4046,7 @@ export const messagesByLocale = {
       deleteDescription:
         "这会从库中删除该资源。已使用此 URL 的现有导出可能会停止渲染。",
       deleteTitle: "删除资产？",
+      downloadFailed: "无法下载资产。",
       loading: "正在加载资源...",
       makeVariations: "做出变化",
       makeVideoVariation: "制作视频变体",
@@ -4911,6 +4917,7 @@ export const messagesByLocale = {
       deleteDescription:
         "Esto elimina el activo de la biblioteca. Las exportaciones existentes que ya utilizan este URL pueden dejar de procesarse.",
       deleteTitle: "¿Eliminar activo?",
+      downloadFailed: "No se pudo descargar el activo.",
       loading: "Cargando activo...",
       makeVariations: "hacer variaciones",
       makeVideoVariation: "Hacer variación de video",
@@ -5359,6 +5366,7 @@ export const messagesByLocale = {
       deleteDescription:
         "Cela supprime l'actif de la bibliothèque. Les exportations existantes qui utilisent déjà ce URL peuvent arrêter le rendu.",
       deleteTitle: "Supprimer l'élément ?",
+      downloadFailed: "Impossible de télécharger l'élément.",
       loading: "Chargement de l'élément...",
       makeVariations: "Faire des variantes",
       makeVideoVariation: "Faire une variation vidéo",
@@ -6853,6 +6861,7 @@ export const messagesByLocale = {
       deleteDescription:
         "Isso remove o ativo da biblioteca. As exportações existentes que já usam este URL podem parar de renderizar.",
       deleteTitle: "Excluir recurso?",
+      downloadFailed: "Não foi possível baixar o recurso.",
       loading: "Carregando recurso...",
       makeVariations: "Faça variações",
       makeVideoVariation: "Faça variação de vídeo",
@@ -7646,6 +7655,7 @@ export const messagesByLocale = {
       deleteDescription:
         "يؤدي هذا إلى إزالة الأصل من المكتبة. قد تتوقف عمليات التصدير الحالية التي تستخدم URL بالفعل عن العرض.",
       deleteTitle: "هل تريد حذف مادة العرض؟",
+      downloadFailed: "تعذّر تنزيل الأصل.",
       loading: "جارٍ تحميل الأصل...",
       makeVariations: "قم بإجراء الاختلافات",
       makeVideoVariation: "جعل الاختلاف في الفيديو",

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -62,6 +62,10 @@ import {
 } from "react-router";
 import { toast } from "sonner";
 
+import {
+  AssetPreviewDialog,
+  type PreviewAsset,
+} from "@/components/asset/AssetPreviewDialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -1508,6 +1512,7 @@ type LaneGalleryItem = {
   asset?: any;
   mediaType?: "image" | "video";
   href?: string;
+  onOpen?: () => void;
   selected?: boolean;
   busy?: boolean;
   showBusyOverlay?: boolean;
@@ -2105,6 +2110,7 @@ function AssetSwimlaneBoard({
 }) {
   const t = useT();
   const [bulkContextOpen, setBulkContextOpen] = useState(false);
+  const [previewAsset, setPreviewAsset] = useState<any | null>(null);
   const deleteAsset = useActionMutation("delete-asset");
   const deleteAssets = useActionMutation("delete-assets");
   const updateAsset = useActionMutation("update-asset");
@@ -2367,6 +2373,7 @@ function AssetSwimlaneBoard({
       status: isReference ? t("library.reference") : t("library.saved"),
       mediaType: asset.mediaType === "video" ? "video" : "image",
       href: `/asset/${asset.id}`,
+      onOpen: () => setPreviewAsset(asset),
       selected: selectedIds.has(asset.id),
       deleting: deletingIds.has(asset.id),
       busy,
@@ -2382,6 +2389,7 @@ function AssetSwimlaneBoard({
           onDelete={() => confirmDelete([asset.id])}
           onMoveToReferences={onMoveToReferences}
           onRemoveFromReferences={onRemoveFromReferences}
+          onOpenPreview={() => setPreviewAsset(asset)}
         />
       ),
       primaryActions:
@@ -2753,6 +2761,12 @@ function AssetSwimlaneBoard({
           }
         />
       )}
+
+      <AssetPreviewDialog
+        asset={previewAsset}
+        assets={boardAssets as PreviewAsset[]}
+        onAssetChange={setPreviewAsset}
+      />
     </>
   );
 }
@@ -2933,7 +2947,15 @@ function AssetCardsView({ items }: { items: LaneGalleryItem[] }) {
             aria-busy={item.busy}
           >
             <div className="relative aspect-4/3 bg-muted/30">
-              {item.href ? (
+              {item.onOpen ? (
+                <button
+                  type="button"
+                  onClick={item.onOpen}
+                  className="block h-full w-full text-left"
+                >
+                  {item.thumbnail}
+                </button>
+              ) : item.href ? (
                 <Link to={item.href} className="block h-full w-full">
                   {item.thumbnail}
                 </Link>
@@ -3075,7 +3097,15 @@ function SwimLane({
                   aria-busy={activeItem?.busy}
                 >
                   <div className="aspect-16/10 bg-muted/30">
-                    {activeItem?.href ? (
+                    {activeItem?.onOpen ? (
+                      <button
+                        type="button"
+                        onClick={activeItem.onOpen}
+                        className="block h-full w-full text-left"
+                      >
+                        {activeItem.preview}
+                      </button>
+                    ) : activeItem?.href ? (
                       <Link
                         to={activeItem.href}
                         className="block h-full w-full"
@@ -3198,7 +3228,16 @@ function SwimLane({
             ) : null}
           </div>
           <div className="flex shrink-0 items-center gap-2">
-            {activeItem?.href ? (
+            {activeItem?.onOpen ? (
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex-1"
+                onClick={activeItem.onOpen}
+              >
+                {t("brandKitDetail.open")}
+              </Button>
+            ) : activeItem?.href ? (
               <Button asChild variant="outline" size="sm" className="flex-1">
                 <Link to={activeItem.href}>{t("brandKitDetail.open")}</Link>
               </Button>
@@ -3303,6 +3342,7 @@ function AssetActionsMenu({
   onDelete,
   onMoveToReferences,
   onRemoveFromReferences,
+  onOpenPreview,
 }: {
   asset: any;
   folders: any[];
@@ -3311,6 +3351,7 @@ function AssetActionsMenu({
   onDelete: () => void;
   onMoveToReferences?: () => void;
   onRemoveFromReferences?: () => void;
+  onOpenPreview?: () => void;
 }) {
   const t = useT();
   const [contextOpen, setContextOpen] = useState(false);
@@ -3330,12 +3371,24 @@ function AssetActionsMenu({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          <DropdownMenuItem asChild>
-            <Link to={`/asset/${asset.id}`}>
+          {onOpenPreview ? (
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                onOpenPreview();
+              }}
+            >
               <IconArrowUpRight className="mr-2 h-4 w-4 shrink-0" />
               {t("library.viewDetails")}
-            </Link>
-          </DropdownMenuItem>
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem asChild>
+              <Link to={`/asset/${asset.id}`}>
+                <IconArrowUpRight className="mr-2 h-4 w-4 shrink-0" />
+                {t("library.viewDetails")}
+              </Link>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem
             onSelect={(event) => {
               event.preventDefault();
@@ -3925,6 +3978,7 @@ export function LiveCandidatesStage({
       status: "draft",
       mediaType: asset.mediaType === "video" ? "video" : "image",
       href: `/asset/${asset.id}`,
+      onOpen: () => setPreviewAsset(asset),
       busy,
       preview: <AssetPreview asset={asset} fit="contain" />, // i18n-ignore structural preview slot name
       thumbnail: <AssetPreview asset={asset} />,
@@ -3946,6 +4000,7 @@ export function LiveCandidatesStage({
     };
   }
 
+  const [previewAsset, setPreviewAsset] = useState(null as any);
   const items = [...slots.map(slotItem), ...draftAssets.map(draftItem)];
   const itemIds = items.map((item) => item.id).join("\n");
   const activeItem =
@@ -4032,7 +4087,15 @@ export function LiveCandidatesStage({
               aria-busy={activeItem?.busy}
             >
               <div className="h-36 bg-muted/30 sm:h-44 lg:h-56 2xl:h-64">
-                {activeItem?.href ? (
+                {activeItem?.onOpen ? (
+                  <button
+                    type="button"
+                    onClick={activeItem.onOpen}
+                    className="block h-full w-full text-left"
+                  >
+                    {activeItem.preview}
+                  </button>
+                ) : activeItem?.href ? (
                   <Link to={activeItem.href} className="block h-full w-full">
                     {activeItem.preview}
                   </Link>
@@ -4045,7 +4108,17 @@ export function LiveCandidatesStage({
                   <Spinner className="h-5 w-5" />
                 </div>
               ) : null}
-              {activeItem?.href ? (
+              {activeItem?.onOpen ? (
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="absolute right-2 top-2 h-8 gap-1.5 bg-background/85 px-2.5 text-xs opacity-0 shadow-sm backdrop-blur transition group-hover:opacity-100 focus-within:opacity-100"
+                  onClick={activeItem.onOpen}
+                >
+                  <IconArrowUpRight className="h-3.5 w-3.5" />
+                  {t("library.details")}
+                </Button>
+              ) : activeItem?.href ? (
                 <Button
                   asChild
                   variant="secondary"
@@ -4119,7 +4192,17 @@ export function LiveCandidatesStage({
                 <div>{activeItem.primaryActions}</div>
               ) : null}
             </div>
-            {activeItem?.href ? (
+            {activeItem?.onOpen ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="gap-1.5"
+                onClick={activeItem.onOpen}
+              >
+                <IconArrowUpRight className="h-3.5 w-3.5" />
+                {t("library.openDetails")}
+              </Button>
+            ) : activeItem?.href ? (
               <Button asChild variant="ghost" size="sm" className="gap-1.5">
                 <Link to={activeItem.href}>
                   <IconArrowUpRight className="h-3.5 w-3.5" />
@@ -4130,6 +4213,12 @@ export function LiveCandidatesStage({
           </aside>
         </div>
       </section>
+
+      <AssetPreviewDialog
+        asset={previewAsset}
+        assets={draftAssets as PreviewAsset[]}
+        onAssetChange={setPreviewAsset}
+      />
     </>
   );
 }