From a3b3a06f5e7ba5f76437783e96d9b94d013506d5 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 19 Jun 2026 17:37:43 +0800
Subject: [PATCH] feat(providers): tighten Add Provider header spacing and add
 footer hint

- Reduce title->tabs and tabs->card vertical gaps from 24px to 12px
- Add an always-visible footer hint guiding users to fill the fields
  below after choosing a preset (pinned footer, never scrolls off)
- FullScreenPanel: add optional contentClassName prop to scope content
  padding overrides without affecting the other panels that share it
- i18n: add provider.addFooterHint in zh/en/ja/zh-TW
---
 src/components/common/FullScreenPanel.tsx      | 11 ++++++++++-
 src/components/providers/AddProviderDialog.tsx |  4 ++++
 src/i18n/locales/en.json                       |  1 +
 src/i18n/locales/ja.json                       |  1 +
 src/i18n/locales/zh-TW.json                    |  1 +
 src/i18n/locales/zh.json                       |  1 +
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/common/FullScreenPanel.tsx b/src/components/common/FullScreenPanel.tsx
index 8c83ecd66..88101d8a3 100644
--- a/src/components/common/FullScreenPanel.tsx
+++ b/src/components/common/FullScreenPanel.tsx
@@ -10,6 +10,7 @@ import {
   DRAG_REGION_STYLE,
 } from "@/lib/platform";
 import { isTextEditableTarget } from "@/utils/domUtils";
+import { cn } from "@/lib/utils";
 
 interface FullScreenPanelProps {
   isOpen: boolean;
@@ -17,6 +18,11 @@ interface FullScreenPanelProps {
   onClose: () => void;
   children: React.ReactNode;
   footer?: React.ReactNode;
+  /**
+   * 覆盖内容区滚动容器的内边距/间距类。默认 `px-6 py-6 space-y-6`。
+   * 通过 `cn`(twMerge) 合并，传入如 `pt-3` 只覆盖顶部内边距，其余保持默认。
+   */
+  contentClassName?: string;
 }
 
 const DRAG_BAR_HEIGHT = isWindows() || isLinux() ? 0 : 28; // px - match App.tsx
@@ -33,6 +39,7 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
   onClose,
   children,
   footer,
+  contentClassName,
 }) => {
   React.useEffect(() => {
     if (isOpen) {
@@ -136,7 +143,9 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
 
           {/* Content */}
           <div className="flex-1 overflow-y-auto scroll-overlay">
-            <div className="px-6 py-6 space-y-6 w-full">{children}</div>
+            <div className={cn("px-6 py-6 space-y-6 w-full", contentClassName)}>
+              {children}
+            </div>
           </div>
 
           {/* Footer */}
diff --git a/src/components/providers/AddProviderDialog.tsx b/src/components/providers/AddProviderDialog.tsx
index 04f41a16f..b1eef9bd8 100644
--- a/src/components/providers/AddProviderDialog.tsx
+++ b/src/components/providers/AddProviderDialog.tsx
@@ -280,6 +280,9 @@ export function AddProviderDialog({
   const footer =
     !showUniversalTab || activeTab === "app-specific" ? (
       <>
+        <span className="mr-auto min-w-0 text-xs text-muted-foreground truncate">
+          {t("provider.addFooterHint")}
+        </span>
         <Button
           variant="outline"
           onClick={() => onOpenChange(false)}
@@ -322,6 +325,7 @@ export function AddProviderDialog({
       title={t("provider.addNewProvider")}
       onClose={() => onOpenChange(false)}
       footer={footer}
+      contentClassName="pt-3"
     >
       {showUniversalTab ? (
         <Tabs
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 7fa8dd9c9..9b7c3140c 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -115,6 +115,7 @@
     "editProviderHint": "Configuration will be applied to the current provider immediately after update.",
     "deleteProvider": "Delete Provider",
     "addNewProvider": "Add New Provider",
+    "addFooterHint": "💡 After choosing a preset, fill in the fields below (e.g. API Key)",
     "addClaudeProvider": "Add Claude Code Provider",
     "addCodexProvider": "Add Codex Provider",
     "addGeminiProvider": "Add Gemini Provider",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 8976d9be1..ce7cec695 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -115,6 +115,7 @@
     "editProviderHint": "保存すると現在のプロバイダーにすぐ反映されます。",
     "deleteProvider": "プロバイダーを削除",
     "addNewProvider": "新しいプロバイダーを追加",
+    "addFooterHint": "💡 プリセットを選んだら、下のフィールド（API Key など）を入力してください",
     "addClaudeProvider": "Claude Code プロバイダーを追加",
     "addCodexProvider": "Codex プロバイダーを追加",
     "addGeminiProvider": "Gemini プロバイダーを追加",
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index 0667db633..58df9bb2f 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -115,6 +115,7 @@
     "editProviderHint": "更新設定後將立即套用至目前供應商。",
     "deleteProvider": "刪除供應商",
     "addNewProvider": "新增供應商",
+    "addFooterHint": "💡 選擇預設後，請在下方填寫 API Key 等欄位",
     "addClaudeProvider": "新增 Claude Code 供應商",
     "addCodexProvider": "新增 Codex 供應商",
     "addGeminiProvider": "新增 Gemini 供應商",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 04cd4d388..0f6dc2cc0 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -115,6 +115,7 @@
     "editProviderHint": "更新配置后将立即应用到当前供应商。",
     "deleteProvider": "删除供应商",
     "addNewProvider": "添加新供应商",
+    "addFooterHint": "💡 选择预设后，请在下方填写 API Key 等字段",
     "addClaudeProvider": "添加 Claude Code 供应商",
     "addCodexProvider": "添加 Codex 供应商",
     "addGeminiProvider": "添加 Gemini 供应商",