From 0968f10f8605dbcf383dcd3d020b053b264eddda Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Fri, 10 Jul 2026 22:35:08 +0800
Subject: [PATCH] refactor(ui): simplify composer settings chip and animate
 chevron

Condense the settings-chip summary to quality, ratio, and image count
(dropping resolution and pixel size), wrap the label in an ellipsized
span, and swap the up/down chevron for a single rotating ChevronDown
across the canvas agent and image generator composers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/CanvasAgentComposer/index.css  | 22 +++++++++++++++-
 .../components/CanvasAgentComposer/index.tsx  |  7 +++---
 .../ImageGeneratorFloatingComposer/index.css  | 25 +++++++++++++++++--
 .../ImageGeneratorFloatingComposer/index.tsx  |  9 +++----
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ui/components/CanvasAgentComposer/index.css b/frontend/src/ui/components/CanvasAgentComposer/index.css
index f7783da..10e45ad 100644
--- a/frontend/src/ui/components/CanvasAgentComposer/index.css
+++ b/frontend/src/ui/components/CanvasAgentComposer/index.css
@@ -242,11 +242,31 @@
 
 .composer-settings-chip {
   max-width: 150px;
-  padding: 0 8px;
+  gap: 2px;
+  padding: 0 4px 0 12px;
   overflow: hidden;
+  background: transparent;
   white-space: nowrap;
 }
 
+.composer-settings-chip span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+}
+
+.composer-settings-chip svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  transition: transform 150ms ease;
+}
+
+.composer-settings-chip svg.open {
+  transform: rotate(180deg);
+}
+
 .composer-icon-button,
 .composer-model-button {
   width: 32px;
diff --git a/frontend/src/ui/components/CanvasAgentComposer/index.tsx b/frontend/src/ui/components/CanvasAgentComposer/index.tsx
index 38263e0..6f09352 100644
--- a/frontend/src/ui/components/CanvasAgentComposer/index.tsx
+++ b/frontend/src/ui/components/CanvasAgentComposer/index.tsx
@@ -213,8 +213,7 @@ export function composerImageSize(settings: ComposerImageSettings) {
 
 export function composerSettingsSummary(settings: ComposerImageSettings) {
   const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  const sizeLabel = composerImageSize(settings).replace("x", "×");
-  return `${qualityLabel(settings.quality)} · ${settings.resolution} · ${ratioLabel} · ${sizeLabel} · ${settings.count} img`;
+  return `${qualityLabel(settings.quality)} · ${ratioLabel} · ${settings.count} img`;
 }
 
 function qualityLabel(quality: ComposerImageQuality) {
@@ -377,8 +376,8 @@ export const CanvasAgentComposer = forwardRef<PromptComposerHandle, CanvasAgentC
           <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
             <PopoverTrigger asChild>
               <button className="composer-settings-chip" type="button" aria-label={t("imageSettings")}>
-                {composerSettingsSummary(settings)}
-                {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                <span>{composerSettingsSummary(settings)}</span>
+                <ChevronDown className={settingsOpen ? "open" : ""} size={18} />
               </button>
             </PopoverTrigger>
             <PopoverContent className="composer-settings-popover" align="end" sideOffset={12}>
diff --git a/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.css b/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.css
index ab31724..4c3137b 100644
--- a/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.css
+++ b/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.css
@@ -146,12 +146,33 @@
 
 .image-generator-settings-chip {
   height: 32px;
-  max-width: 220px;
-  padding: 0 8px 0 10px;
+  max-width: 150px;
+  gap: 2px;
+  padding: 0 4px 0 12px;
   overflow: hidden;
+  color: #2f3746;
+  background: transparent;
   white-space: nowrap;
 }
 
+.image-generator-settings-chip span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+}
+
+.image-generator-settings-chip svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  transition: transform 150ms ease;
+}
+
+.image-generator-settings-chip svg.open {
+  transform: rotate(180deg);
+}
+
 .image-generator-settings-chip:hover,
 .image-generator-model-button:hover {
   background: #f3f4f6;
diff --git a/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.tsx b/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.tsx
index d0a577c..0517e9f 100644
--- a/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.tsx
+++ b/frontend/src/ui/components/ImageGeneratorFloatingComposer/index.tsx
@@ -10,7 +10,6 @@ import { useI18n } from "@/i18n/i18n";
 import {
   ComposerSettingsPanel,
   composerImageDimensionsFor,
-  composerImageSize,
   composerRatioOptions,
   type CanvasComposerModel,
   type ComposerImageRatio,
@@ -87,9 +86,7 @@ function composerStyle(bounds: NodeScreenBounds, stageWidth: number, stageHeight
 
 function imageSettingsSummary(settings: ComposerImageSettings, t: (key: string) => string) {
   const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  const sizeLabel = composerImageSize(settings).replace("x", "×");
-  const countLabel = t("imageCountUnit").replace("{count}", String(settings.count));
-  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${settings.resolution} · ${ratioLabel} · ${sizeLabel} · ${countLabel}`;
+  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${ratioLabel} · ${settings.count} img`;
 }
 
 export function ImageGeneratorFloatingComposer({
@@ -238,8 +235,8 @@ export function ImageGeneratorFloatingComposer({
         <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
           <PopoverTrigger asChild>
             <button className="image-generator-settings-chip" type="button" aria-label={t("imageSettings")} disabled={generating}>
-              {imageSettingsSummary(settings, t)}
-              {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+              <span>{imageSettingsSummary(settings, t)}</span>
+              <ChevronDown className={settingsOpen ? "open" : ""} size={18} />
             </button>
           </PopoverTrigger>
           <PopoverContent className="composer-settings-popover image-generator-settings-popover-panel" align="start" sideOffset={12}>