From 10f3b4f2c191000cb752ea4b897e04775874afba Mon Sep 17 00:00:00 2001
From: mesalogo <pettygay757@gmail.com>
Date: Mon, 28 Sep 2026 18:38:01 +0800
Subject: [PATCH] fix: center sidebar footer divider and correct Apps arrow

Use equal-width Apps and Settings buttons so the divider stays centered. Increase divider visibility and point the Apps arrow upward to match the menu opening direction.

Release note: Make the sidebar footer divider clearer and centered, and align the Apps arrow with its upward-opening menu.
---
 .../application-tool-navigation/technical-design.md        | 2 +-
 docs/features/application-tool-navigation/ui-design.md     | 6 +++---
 src/renderer/src/App.tsx                                   | 3 ++-
 src/renderer/src/application-center.css                    | 7 ++++---
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/features/application-tool-navigation/technical-design.md b/docs/features/application-tool-navigation/technical-design.md
index bd737ac9..a6c91927 100644
--- a/docs/features/application-tool-navigation/technical-design.md
+++ b/docs/features/application-tool-navigation/technical-design.md
@@ -179,7 +179,7 @@ Main 继续校验可信 sender、Zod 输入，复用 `ApplicationSettingsStore`
   <button className="nav-item" onClick={toggleApplicationMenu} aria-haspopup="menu" aria-expanded={applicationMenuOpen} ...>
     <Grid2X2 aria-hidden="true" />
     <span>{t('applications.menuLabel')}</span>
-    <ChevronDown aria-hidden="true" />
+    <ChevronUp aria-hidden="true" />
   </button>
   <div className="sidebar-footer__divider" aria-hidden="true" />
   <button className="nav-item" aria-label={t('navigation.settings')} ...>
diff --git a/docs/features/application-tool-navigation/ui-design.md b/docs/features/application-tool-navigation/ui-design.md
index 60c1c047..c4ffd297 100644
--- a/docs/features/application-tool-navigation/ui-design.md
+++ b/docs/features/application-tool-navigation/ui-design.md
@@ -41,15 +41,15 @@
 
 ## 2. 底部应用中心入口
 
-底部使用连续平整表面和顶部分隔线，“应用”在前，“设置”靠右，二者为横向排列的等高 `nav-item` 独立按钮，中间使用弱竖分隔线：
+底部使用连续平整表面和顶部分隔线，“应用”在前，“设置”靠右，二者为横向排列的等宽、等高 `nav-item` 独立按钮，内容各自居中，竖分隔线位于底部入口区域的正中间：
 
 | 位置 | 图标 | 可见文字 | 点击结果 |
 | --- | --- | --- | --- |
-| 1 | `Grid2X2` + `ChevronDown` | 应用 / Apps | 向上展开已启用应用菜单，底部“管理应用”进入管理 Modal |
+| 1 | `Grid2X2` + `ChevronUp` | 应用 / Apps | 向上展开已启用应用菜单，底部“管理应用”进入管理 Modal |
 | 末位 | `Settings` | 设置 / Settings | 在当前工作区上打开设置 Modal |
 
 图标使用项目现有 Lucide 库。两个按钮均保留可见文字，沿用主导航的高度、间距和焦点样式；
-“应用”文字后显示向下箭头，菜单仍向上展开。不得把整个容器做成设置按钮。
+“应用”文字后显示向上箭头，与菜单展开方向一致。竖分隔线宽 1px、高 `--space-6`，使用 `--border-control`，确保在侧栏背景上可辨。不得把整个容器做成设置按钮。
 
 ### 2.1 状态
 
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 2b407895..7e617b38 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -31,6 +31,7 @@ import {
   Check,
   CheckCircle2,
   ChevronDown,
+  ChevronUp,
   ChevronRight,
   CircleAlert,
   CircleHelp,
@@ -9350,7 +9351,7 @@ function App(): React.JSX.Element {
           >
             <Grid2X2 size={17} aria-hidden="true" />
             <span>{t("applications.menuLabel")}</span>
-            <ChevronDown size={16} aria-hidden="true" />
+            <ChevronUp size={16} aria-hidden="true" />
           </button>
           <div className="sidebar-footer__divider" aria-hidden="true" />
           <button
diff --git a/src/renderer/src/application-center.css b/src/renderer/src/application-center.css
index eb0a06f8..df892243 100644
--- a/src/renderer/src/application-center.css
+++ b/src/renderer/src/application-center.css
@@ -205,7 +205,8 @@
   gap: var(--space-2);
 }
 .sidebar-footer--applications > .nav-item {
-  flex: 1 0 auto;
+  flex: 1 1 0;
+  min-width: 0;
   gap: var(--space-2);
   padding-inline: var(--space-2);
   justify-content: center;
@@ -216,6 +217,6 @@
 }
 .sidebar-footer__divider {
   flex: 0 0 1px;
-  height: var(--space-4);
-  background: var(--border-subtle);
+  height: var(--space-6);
+  background: var(--border-control);
 }