From 8cf1783159da5b87343753e177376b47271566e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Mon, 13 Jul 2026 11:01:56 +0800
Subject: [PATCH] fix(desktop): compact effort slider popover #1007

---
 .../controls/ReasoningEffortPopover.test.tsx  | 13 ++++++++++
 .../controls/ReasoningEffortPopover.tsx       | 26 ++++++++++---------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/desktop/src/components/controls/ReasoningEffortPopover.test.tsx b/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
index 3808291b..3896960c 100644
--- a/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
+++ b/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
@@ -40,6 +40,19 @@ function renderPopover(overrides: Partial<React.ComponentProps<typeof ReasoningE
 }
 
 describe('ReasoningEffortPopover', () => {
+  it('keeps the effort visual compact without non-functional icon controls', () => {
+    renderPopover()
+
+    const popover = screen.getByTestId('reasoning-effort-popover')
+    expect(popover).toHaveStyle({ width: '280px' })
+    expect(popover).toHaveClass('px-4', 'pb-4', 'pt-3.5')
+    expect(popover.querySelectorAll('svg')).toHaveLength(0)
+    expect(screen.getByTestId('reasoning-effort-label')).toHaveClass('mb-3', 'text-[15px]')
+    expect(screen.getByRole('slider', { name: '推理强度' })).toHaveClass('h-11')
+    expect(screen.getByTestId('reasoning-effort-track')).toHaveClass('h-[30px]')
+    expect(screen.getByTestId('reasoning-effort-thumb')).toHaveClass('h-10', 'w-10')
+  })
+
   it('renders every model-supported stop and exposes the selected localized value', () => {
     renderPopover()
 
diff --git a/desktop/src/components/controls/ReasoningEffortPopover.tsx b/desktop/src/components/controls/ReasoningEffortPopover.tsx
index 3302cbcd..c26dff8f 100644
--- a/desktop/src/components/controls/ReasoningEffortPopover.tsx
+++ b/desktop/src/components/controls/ReasoningEffortPopover.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { ChevronRight, Zap } from 'lucide-react'
 
 import type { ReasoningEffortLevel } from '../../types/settings'
 
@@ -21,7 +20,7 @@ type PopoverPosition = {
   width: number
 }
 
-const POPOVER_WIDTH = 360
+const POPOVER_WIDTH = 280
 const VIEWPORT_MARGIN = 16
 const POPOVER_GAP = 10
 
@@ -108,15 +107,14 @@ export function ReasoningEffortPopover({
     <div
       ref={popoverRef}
       data-testid="reasoning-effort-popover"
-      className="fixed z-[90] rounded-[22px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-6 pb-7 pt-5 shadow-[0_18px_48px_rgba(15,23,42,0.14)]"
+      className="fixed z-[90] rounded-[18px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 pb-4 pt-3.5 shadow-[0_14px_36px_rgba(15,23,42,0.14)]"
       style={{ bottom: position.bottom, left: position.left, width: position.width }}
     >
-      <div className="mb-5 flex items-center justify-between">
-        <div className="flex items-center gap-1 text-[17px] font-semibold text-[var(--color-text-secondary)]">
-          <span>{labels[value]}</span>
-          <ChevronRight aria-hidden="true" className="h-5 w-5 text-[var(--color-outline)]" strokeWidth={2.2} />
-        </div>
-        <Zap aria-hidden="true" className="h-6 w-6 text-[var(--color-outline)]" strokeWidth={2} />
+      <div
+        data-testid="reasoning-effort-label"
+        className="mb-3 text-[15px] font-semibold text-[var(--color-text-secondary)]"
+      >
+        {labels[value]}
       </div>
 
       <div
@@ -128,7 +126,7 @@ export function ReasoningEffortPopover({
         aria-valuemax={maxIndex}
         aria-valuenow={selectedIndex}
         aria-valuetext={labels[value]}
-        className="group relative flex h-12 touch-none cursor-pointer items-center outline-none focus-visible:ring-2 focus-visible:ring-[#3798f7] focus-visible:ring-offset-4 focus-visible:ring-offset-[var(--color-surface-container-lowest)]"
+        className="group relative flex h-11 touch-none cursor-pointer items-center outline-none focus-visible:ring-2 focus-visible:ring-[#3798f7] focus-visible:ring-offset-4 focus-visible:ring-offset-[var(--color-surface-container-lowest)]"
         onClick={(event) => selectFromClientX(event.clientX)}
         onPointerDown={(event) => {
           draggingRef.current = true
@@ -171,7 +169,10 @@ export function ReasoningEffortPopover({
           }
         }}
       >
-        <div className="absolute inset-x-0 h-10 overflow-hidden rounded-full bg-[var(--color-surface-container-high)] shadow-[inset_0_0_0_1px_var(--color-border)]">
+        <div
+          data-testid="reasoning-effort-track"
+          className="absolute inset-x-0 h-[30px] overflow-hidden rounded-full bg-[var(--color-surface-container-high)] shadow-[inset_0_0_0_1px_var(--color-border)]"
+        >
           <div
             data-testid="reasoning-effort-fill"
             className="h-full rounded-full bg-[#3798f7] transition-[width] duration-200 motion-reduce:transition-none"
@@ -191,7 +192,8 @@ export function ReasoningEffortPopover({
 
         <div
           aria-hidden="true"
-          className="absolute top-1/2 h-14 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[var(--color-border)] bg-white shadow-[0_3px_9px_rgba(15,23,42,0.14)] transition-[left] duration-200 motion-reduce:transition-none"
+          data-testid="reasoning-effort-thumb"
+          className="absolute top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[var(--color-border)] bg-white shadow-[0_3px_9px_rgba(15,23,42,0.14)] transition-[left] duration-200 motion-reduce:transition-none"
           style={{ left: `${fillPercent}%` }}
         />
       </div>