refactor(frontend): create ContextMenuIconText and update conversatio…

…n card context menu
All-Hands-AI · amanape · Jul 30, 2025 · Jul 25, 2025 · Jul 26, 2025 · Jul 29, 2025
commit 0b5872a5ab4b297ee8319c739e0f87f9889a9a7e
@@ -0,0 +1,22 @@
+import { cn } from "#/utils/utils";
+
+interface ContextMenuIconTextProps {
+  icon: React.ComponentType<{ className?: string }>;
+  text: string;
+  className?: string;
+  iconClassName?: string;
+}
+
+export function ContextMenuIconText({
+  icon: Icon,
+  text,
+  className,
+  iconClassName,
+}: ContextMenuIconTextProps) {
+  return (
+    <div className={cn("flex items-center gap-3 px-1", className)}>
+      <Icon className={cn("w-4 h-4 shrink-0", iconClassName)} />
+      {text}
+    </div>
+  );
+}
@@ -19,7 +19,7 @@ export function ContextMenuListItem({
       onClick={onClick}
       disabled={isDisabled}
       className={cn(
-        "text-sm px-4 h-10 w-full text-start hover:bg-white/10",
+        "text-sm px-4 h-10 w-full text-start hover:bg-white/10 cursor-pointer",
         "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent text-nowrap",
       )}
     >

@@ -14,6 +14,7 @@ import { ContextMenu } from "../context-menu/context-menu";
 import { ContextMenuListItem } from "../context-menu/context-menu-list-item";
 import { ContextMenuSeparator } from "../context-menu/context-menu-separator";
 import { I18nKey } from "#/i18n/declaration";
+import { ContextMenuIconText } from "../context-menu/context-menu-icon-text";
 
 interface ConversationCardContextMenuProps {
   onClose: () => void;
@@ -59,10 +60,10 @@ export function ConversationCardContextMenu({
     >
       {onEdit && (
         <ContextMenuListItem testId="edit-button" onClick={onEdit}>
-          <div className="flex items-center gap-3 px-1">
-            <Pencil className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$EDIT_TITLE)}
-          </div>
+          <ContextMenuIconText
+            icon={Pencil}
+            text={t(I18nKey.BUTTON$EDIT_TITLE)}
+          />
         </ContextMenuListItem>
       )}
 
@@ -75,10 +76,10 @@ export function ConversationCardContextMenu({
           testId="download-vscode-button"
           onClick={onDownloadViaVSCode}
         >
-          <div className="flex items-center gap-3 px-1">
-            <Download className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$DOWNLOAD_VIA_VSCODE)}
-          </div>
+          <ContextMenuIconText
+            icon={Download}
+            text={t(I18nKey.BUTTON$DOWNLOAD_VIA_VSCODE)}
+          />
         </ContextMenuListItem>
       )}
 
@@ -91,10 +92,10 @@ export function ConversationCardContextMenu({
           testId="show-agent-tools-button"
           onClick={onShowAgentTools}
         >
-          <div className="flex items-center gap-3 px-1">
-            <Wrench className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}
-          </div>
+          <ContextMenuIconText
+            icon={Wrench}
+            text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}
+          />
         </ContextMenuListItem>
       )}
 
@@ -103,10 +104,10 @@ export function ConversationCardContextMenu({
           testId="show-microagents-button"
           onClick={onShowMicroagents}
         >
-          <div className="flex items-center gap-3 px-1">
-            <Bot className="w-4 h-4 shrink-0" />
-            {t(I18nKey.CONVERSATION$SHOW_MICROAGENTS)}
-          </div>
+          <ContextMenuIconText
+            icon={Bot}
+            text={t(I18nKey.CONVERSATION$SHOW_MICROAGENTS)}
+          />
         </ContextMenuListItem>
       )}
 
@@ -117,30 +118,24 @@ export function ConversationCardContextMenu({
           testId="display-cost-button"
           onClick={onDisplayCost}
         >
-          <div className="flex items-center gap-3 px-1">
-            <Wallet className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$DISPLAY_COST)}
-          </div>
+          <ContextMenuIconText
+            icon={Wallet}
+            text={t(I18nKey.BUTTON$DISPLAY_COST)}
+          />
         </ContextMenuListItem>
       )}
 
       {hasInfo && hasControl && <ContextMenuSeparator />}
 
       {onStop && (
         <ContextMenuListItem testId="stop-button" onClick={onStop}>
-          <div className="flex items-center gap-3 px-1">
-            <Power className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$STOP)}
-          </div>
+          <ContextMenuIconText icon={Power} text={t(I18nKey.BUTTON$STOP)} />
         </ContextMenuListItem>
       )}
 
       {onDelete && (
         <ContextMenuListItem testId="delete-button" onClick={onDelete}>
-          <div className="flex items-center gap-3 px-1">
-            <Trash className="w-4 h-4 shrink-0" />
-            {t(I18nKey.BUTTON$DELETE)}
-          </div>
+          <ContextMenuIconText icon={Trash} text={t(I18nKey.BUTTON$DELETE)} />
         </ContextMenuListItem>
       )}
     </ContextMenu>