From 067a71a50432fa98901668744b84fdac375e46d3 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Thu, 2 Apr 2026 10:05:24 +0800
Subject: [PATCH] feat(web-ui): workspace menu grouping, active row styling,
 font size panel

- Reorder assistant workspace context menu: group reset/delete after reveal with dividers.

- Use accent-tinted background for active workspace rows in the list.

- Font preference: custom level as a level button; show stepper only when custom is selected; wrap-friendly layout and aria-pressed.
---
 .../sections/workspaces/WorkspaceItem.tsx     |  52 ++++----
 .../workspaces/WorkspaceListSection.scss      |  30 ++++-
 .../components/FontPreferencePanel.scss       | 114 +++++-------------
 .../components/FontPreferencePanel.tsx        | 104 +++++++++-------
 4 files changed, 141 insertions(+), 159 deletions(-)

diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index 0957acb0..882e87a2 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -471,28 +471,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   <Plus size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.newSession')}</span>
                 </button>
-                {isDefaultAssistantWorkspace && (
-                  <button
-                    type="button"
-                    className="bitfun-nav-panel__workspace-item-menu-item is-danger"
-                    onClick={handleRequestResetWorkspace}
-                    disabled={isResettingWorkspace}
-                  >
-                    <RotateCcw size={13} />
-                    <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.resetWorkspace')}</span>
-                  </button>
-                )}
-                {isNamedAssistantWorkspace && (
-                  <button
-                    type="button"
-                    className="bitfun-nav-panel__workspace-item-menu-item is-danger"
-                    onClick={handleRequestDeleteAssistant}
-                    disabled={isDeletingAssistant}
-                  >
-                    <Trash2 size={13} />
-                    <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.deleteAssistant')}</span>
-                  </button>
-                )}
+                <div className="bitfun-nav-panel__workspace-item-menu-divider" />
                 <button
                   type="button"
                   className="bitfun-nav-panel__workspace-item-menu-item"
@@ -511,6 +490,33 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   <FolderSearch size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.reveal')}</span>
                 </button>
+                {(isDefaultAssistantWorkspace || isNamedAssistantWorkspace) ? (
+                  <>
+                    <div className="bitfun-nav-panel__workspace-item-menu-divider" />
+                    {isDefaultAssistantWorkspace ? (
+                      <button
+                        type="button"
+                        className="bitfun-nav-panel__workspace-item-menu-item is-danger"
+                        onClick={handleRequestResetWorkspace}
+                        disabled={isResettingWorkspace}
+                      >
+                        <RotateCcw size={13} />
+                        <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.resetWorkspace')}</span>
+                      </button>
+                    ) : null}
+                    {isNamedAssistantWorkspace ? (
+                      <button
+                        type="button"
+                        className="bitfun-nav-panel__workspace-item-menu-item is-danger"
+                        onClick={handleRequestDeleteAssistant}
+                        disabled={isDeletingAssistant}
+                      >
+                        <Trash2 size={13} />
+                        <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.deleteAssistant')}</span>
+                      </button>
+                    ) : null}
+                  </>
+                ) : null}
               </div>,
               document.body
             )}
@@ -649,6 +655,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 <FileText size={13} />
                 <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.initAgents')}</span>
               </button>
+              <div className="bitfun-nav-panel__workspace-item-menu-divider" />
               {isLinkedWorktree ? (
                 <button
                   type="button"
@@ -691,6 +698,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 <FolderSearch size={13} />
                 <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.reveal')}</span>
               </button>
+              <div className="bitfun-nav-panel__workspace-item-menu-divider" />
               <button type="button" className="bitfun-nav-panel__workspace-item-menu-item is-danger" onClick={() => { void handleCloseWorkspace(); }}>
                 <FolderOpen size={13} />
                 <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.close')}</span>
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index aafbb7c1..774771a1 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -91,8 +91,12 @@
     }
 
     &.is-active {
-      background: transparent;
-      border-color: transparent;
+      background: color-mix(
+        in srgb,
+        var(--color-accent-500) 9%,
+        color-mix(in srgb, var(--element-bg-soft) 68%, transparent)
+      );
+      border-color: color-mix(in srgb, var(--border-subtle) 45%, transparent);
     }
 
     &.is-single {
@@ -100,7 +104,12 @@
       border-color: transparent;
 
       &.is-active {
-        background: transparent;
+        background: color-mix(
+          in srgb,
+          var(--color-accent-500) 9%,
+          color-mix(in srgb, var(--element-bg-soft) 68%, transparent)
+        );
+        border-color: color-mix(in srgb, var(--border-subtle) 45%, transparent);
       }
     }
 
@@ -462,6 +471,13 @@
     animation: bitfun-footer-menu-in $motion-fast $easing-decelerate forwards;
   }
 
+  /* Match `.bitfun-nav-panel__footer-menu-divider` (PersistentFooterActions more menu) */
+  &__workspace-item-menu-divider {
+    height: 1px;
+    margin: $size-gap-1 $size-gap-2;
+    background: var(--border-subtle, rgba(255, 255, 255, 0.08));
+  }
+
   &__workspace-item-menu-item {
     display: flex;
     align-items: center;
@@ -594,8 +610,12 @@
     }
 
     &.is-active {
-      background: transparent;
-      border-color: transparent;
+      background: color-mix(
+        in srgb,
+        var(--color-accent-500) 9%,
+        color-mix(in srgb, var(--element-bg-soft) 68%, transparent)
+      );
+      border-color: color-mix(in srgb, var(--border-subtle) 45%, transparent);
     }
 
     &:not(.is-active):not(:hover):not(:focus-within):not(.is-menu-open) {
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
index 65c75830..5e2e9c97 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
@@ -26,23 +26,36 @@
     align-self: stretch;
   }
 
+  &__ui-segment-block {
+    width: 100%;
+    min-width: 0;
+  }
+
   &__level-buttons {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
+    align-items: center;
     gap: $size-gap-2;
-    flex-shrink: 0;
+    width: 100%;
+    min-width: 0;
   }
 
-  &__ui-control-row {
-    display: flex;
-    align-items: center;
-    gap: $size-gap-3;
+  /* 第六档「自定义」与右侧步进器保持同一行，整组可随前置按钮换行 */
+  &__custom-segment-inline {
+    display: inline-flex;
     flex-wrap: nowrap;
-    width: 100%;
+    align-items: center;
+    gap: $size-gap-2;
     min-width: 0;
-    overflow-x: auto;
-    scrollbar-width: thin;
-    padding-bottom: 2px;
+  }
+
+  &__custom-controls {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: $size-gap-2;
+    flex-shrink: 0;
+    box-sizing: border-box;
   }
 
   &__flow-chat {
@@ -115,6 +128,7 @@
     align-items: center;
     justify-content: center;
     min-height: 36px;
+    min-width: 0;
     padding: $size-gap-2 $size-gap-3;
     font-size: var(--font-size-sm);
     font-family: var(--font-sans, var(--font-family-sans));
@@ -156,75 +170,6 @@
     color: inherit;
   }
 
-  &__custom-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: $size-gap-2;
-
-    &--capsule {
-      flex-wrap: nowrap;
-      margin-left: auto;
-      align-items: center;
-      gap: $size-gap-2;
-      padding: 4px 4px 4px $size-gap-3;
-      border: 1px solid var(--border-strong);
-      border-radius: 999px;
-      background: var(--bg-secondary);
-      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
-    }
-
-    &--active {
-      .font-pref-panel__custom-label {
-        color: var(--text-primary);
-      }
-    }
-
-    &--capsule.font-pref-panel__custom-row--active {
-      @include btn-primary.btn-primary-surface-default;
-      border-color: var(--btn-primary-border, transparent);
-      box-shadow: var(--btn-primary-shadow, none);
-
-      .font-pref-panel__custom-label,
-      .font-pref-panel__custom-unit {
-        color: var(--btn-primary-color, var(--text-primary));
-        opacity: 0.95;
-      }
-
-      .font-pref-panel__stepper {
-        border-color: color-mix(in srgb, var(--btn-primary-color, #fff) 22%, transparent);
-      }
-
-      .font-pref-panel__step-btn {
-        color: var(--btn-primary-color, var(--text-primary));
-
-        &:hover:not(:disabled) {
-          background: color-mix(in srgb, var(--btn-primary-color, #fff) 14%, transparent);
-          color: var(--btn-primary-color, var(--text-primary));
-        }
-      }
-
-      .font-pref-panel__number-input {
-        background: color-mix(in srgb, var(--btn-primary-bg, #000) 12%, transparent);
-        color: var(--btn-primary-color, var(--text-primary));
-        border-left-color: color-mix(in srgb, var(--btn-primary-color, #fff) 22%, transparent);
-        border-right-color: color-mix(in srgb, var(--btn-primary-color, #fff) 22%, transparent);
-      }
-
-      .font-pref-panel__number-input--readonly {
-        background: color-mix(in srgb, var(--btn-primary-color, #fff) 8%, transparent);
-        color: var(--btn-primary-color, var(--text-primary));
-        opacity: 0.92;
-      }
-    }
-  }
-
-  &__custom-label {
-    font-size: var(--font-size-sm);
-    color: var(--text-secondary);
-    flex-shrink: 0;
-  }
-
   &__stepper {
     display: flex;
     align-items: center;
@@ -242,8 +187,9 @@
   }
 
   &__custom-unit {
-    font-size: var(--font-size-xs);
-    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+    flex-shrink: 0;
   }
 
   &__step-btn {
@@ -304,12 +250,6 @@
       cursor: not-allowed;
     }
 
-    &--readonly {
-      background: var(--bg-secondary);
-      color: var(--text-secondary);
-      cursor: pointer;
-    }
-
     &--error {
       border-left-color: var(--color-semantic-error);
       border-right-color: var(--color-semantic-error);
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
index 70a28373..47a77b48 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
@@ -77,8 +77,12 @@ export function FontPreferencePanel() {
   const previewBasePx = level === 'custom'
     ? (parseInt(customInput, 10) || 14)
     : parseInt(UI_FONT_SIZE_PRESETS[level].base, 10);
-  const uiCustomActive = level === 'custom';
-  const uiDisplayPx = uiCustomActive ? customInput : String(previewBasePx);
+
+  const customLevelLabelPx = (() => {
+    if (level !== 'custom') return 14;
+    const n = parseInt(customInput, 10);
+    return !isNaN(n) && n >= 12 && n <= 20 ? n : 14;
+  })();
 
   const fcIndependent = preference.flowChat.mode === 'independent';
   const flowChatSelectValue = (() => {
@@ -118,7 +122,7 @@ export function FontPreferencePanel() {
         multiline
       >
         <div className="font-pref-panel__ui-size">
-          <div className="font-pref-panel__ui-control-row">
+          <div className="font-pref-panel__ui-segment-block">
             <div className="font-pref-panel__level-buttons" role="group" aria-label={t('appearance.fontSize.uiSizeLabel')}>
               {UI_LEVELS.map((l) => (
                 <button
@@ -129,6 +133,7 @@ export function FontPreferencePanel() {
                     level === l ? 'font-pref-panel__level-btn--active' : '',
                   ].join(' ').trim()}
                   onClick={() => void handleLevelClick(l)}
+                  aria-pressed={level === l}
                 >
                   <span
                     className="font-pref-panel__level-label"
@@ -138,53 +143,62 @@ export function FontPreferencePanel() {
                   </span>
                 </button>
               ))}
-            </div>
-
-            <div
-              className={[
-                'font-pref-panel__custom-row',
-                'font-pref-panel__custom-row--capsule',
-                uiCustomActive ? 'font-pref-panel__custom-row--active' : '',
-              ].join(' ').trim()}
-            >
-              <span className="font-pref-panel__custom-label">
-                {t('appearance.fontSize.levels.custom')}
-              </span>
-              <div className="font-pref-panel__stepper">
+              <div className="font-pref-panel__custom-segment-inline">
                 <button
                   type="button"
-                  className="font-pref-panel__step-btn"
-                  onClick={() => handleCustomStep(-1)}
-                  disabled={!uiCustomActive}
-                  aria-label="-1"
-                >−</button>
-                <input
-                  type="number"
                   className={[
-                    'font-pref-panel__number-input',
-                    !uiCustomActive ? 'font-pref-panel__number-input--readonly' : '',
-                    customError ? 'font-pref-panel__number-input--error' : '',
+                    'font-pref-panel__level-btn',
+                    level === 'custom' ? 'font-pref-panel__level-btn--active' : '',
                   ].join(' ').trim()}
-                  value={uiDisplayPx}
-                  min={12}
-                  max={20}
-                  step={1}
-                  readOnly={!uiCustomActive}
-                  placeholder={t('appearance.fontSize.customPxPlaceholder')}
-                  onChange={handleCustomInputChange}
-                  onFocus={() => void handleLevelClick('custom')}
-                  aria-readonly={!uiCustomActive}
-                  aria-invalid={!!customError}
-                />
-                <button
-                  type="button"
-                  className="font-pref-panel__step-btn"
-                  onClick={() => handleCustomStep(1)}
-                  disabled={!uiCustomActive}
-                  aria-label="+1"
-                >+</button>
+                  onClick={() => void handleLevelClick('custom')}
+                  aria-pressed={level === 'custom'}
+                >
+                  <span
+                    className="font-pref-panel__level-label"
+                    style={{ fontSize: `${customLevelLabelPx}px` }}
+                  >
+                    {t('appearance.fontSize.levels.custom')}
+                  </span>
+                </button>
+                {level === 'custom' && (
+                  <div
+                    className="font-pref-panel__custom-controls"
+                    role="group"
+                    aria-label={t('appearance.fontSize.customPxLabel')}
+                  >
+                    <div className="font-pref-panel__stepper">
+                      <button
+                        type="button"
+                        className="font-pref-panel__step-btn"
+                        onClick={() => handleCustomStep(-1)}
+                        aria-label="-1"
+                      >−</button>
+                      <input
+                        type="number"
+                        className={[
+                          'font-pref-panel__number-input',
+                          customError ? 'font-pref-panel__number-input--error' : '',
+                        ].join(' ').trim()}
+                        value={customInput}
+                        min={12}
+                        max={20}
+                        step={1}
+                        placeholder={t('appearance.fontSize.customPxPlaceholder')}
+                        onChange={handleCustomInputChange}
+                        onFocus={() => void handleLevelClick('custom')}
+                        aria-invalid={!!customError}
+                      />
+                      <button
+                        type="button"
+                        className="font-pref-panel__step-btn"
+                        onClick={() => handleCustomStep(1)}
+                        aria-label="+1"
+                      >+</button>
+                    </div>
+                    <span className="font-pref-panel__custom-unit">px</span>
+                  </div>
+                )}
               </div>
-              <span className="font-pref-panel__custom-unit">px</span>
             </div>
           </div>
           {customError && (