feat(ui): consolidate footer/nav, sliding indicator, hover cues, top-right saved toast

[appergb]

User description

Summary

整体 UI 整理一波：footer 减重、三处 nav 上滑动 pill + hover 文字加深、跨页面"已保存"提示统一到右上角小 pill、Translation / SelectionAsk 删跟 Settings.shortcuts 重复的快捷键卡 + 整体减字。

净减 152 行（+381 / -533，含 2 个新文件）。

Footer 简化

• 删 账号 icon（= openSettings('providers') 跟齿轮重复入口）
• 删 帮助 popover（version + 2 条外链跟 Settings → 关于 重复）
• 删 检查更新 按钮（Settings.about 已有同等控件）
• BETA 角标从 sidebar 移到右下角紧贴版本号
• 设置 icon 内嵌 12px 不再贴右边角

Sidebar / Settings 三处 nav 统一

滑动指示器：用一个 absolute pill，currentTab 切换时 top/height 平滑过渡到目标 button（cubic-bezier(0.16,1,0.3,1) 360ms，无 overshoot 的 Apple ease-out-quint）。

Hover 三段视觉层次：

状态	文字	背景
基础态	ink-3 中灰	透明
Hover	ink 全黑	rgba(0,0,0,0.04) 浅灰
选中	ink 全黑	白色滑动 pill

icon 通过 currentColor 同步加深。用 .ol-nav-btn class + :hover 实现，inline color 让位给 CSS（CSS 不能盖 inline style 是关键）。

"已保存" toast → 右上角小 pill

新增：

• `components/SavedToast.tsx` —— 右上角 absolute 定位 pill，带毛玻璃模糊 + 22ms 弹簧入场
• `lib/savedEvent.ts` —— emitSaved 跨组件事件总线 + useSavedToastListener hook

接入：

• Translation / SelectionAsk 内联 banner → 锚到 ol-thinscroll 控制台卡右上角的 absolute pill；scroll wrapper 加 `position:relative`
• Settings → ASR 配置 CredentialField 的 API key 内联"已保存"挪到 SettingsModal 右上角统一 pill（`offsetStyle: right:54` 避开关闭按钮）；只保留持续性的 readError 在原位标识字段不可用

Translation / SelectionAsk 简化

• 删跟 Settings.shortcuts 重复的快捷键卡（用户改键统一在 Settings 完成）
• SelectionAsk "历史保存"从全宽 Card 改成左对齐的小模块（标签 + toggle 紧贴）
• PageHeader 砍 kicker+desc → 单行 title
• 使用方法卡去 inset 提示块（保留 5 步 ol）

Overview 收头

• PageHeader 单行 title（去 kicker / desc / 右侧"按 X 开始"pill）

Test plan

• 切 sidebar 7 个 tab，pill 平滑滑过，曲线 Apple 风格
• hover 任意非 active 项，文字+图标加深 + 灰底浮起
• 改 ASR API Key（设置弹窗）→ 右上角弹"已保存"小 pill
• 改翻译 / 划词追问 配置 → 同款右上角 pill
• BETA build 角标显示在 footer 右下角，不在 sidebar
• 划词追问页"历史保存"是左上角小模块，不是横条

---

PR Type

Enhancement

---

Description

• Simplify footer: remove duplicate account/help/update, move BETA badge next to version
  • Add sliding pill indicator for sidebar, Settings page and modal navigation with hover states
  • Introduce SavedToast component and event bus for unified save feedback
  • Replace inline save banners with top‑right toast in Translation, SelectionAsk, CredentialField
  • Clean page headers by dropping redundant kicker/description and hotkey hints
  • Remove outdated shortcut recorders from Translation and SelectionAsk
  • Net code reduction: +381 / -533 lines

---

Diagram Walkthrough

    flowchart LR
      A["Footer simplified: version + BETA badge + settings icon"]
      B["Sidebar / Settings / Modal nav"]
      C["Sliding pill indicator (absolute transition)"]
      D["CSS .ol-nav-btn for 3‑level hover / active states"]
      E["SavedToast component + savedEvent bus"]
      F["Translation / SelectionAsk / CredentialField emitSaved"]
      G["Page headers lose kicker / desc / inline hotkey displays"]
      A -- "removes help popover, account, update" --> A
      B --> C
      B --> D
      E --> F
      F -- "replaces inline banners" --> G
      E -- "new component & event" --> E

Loading

File Walkthrough

	Relevant files

---

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Stale Pill The active-section pill is only recalculated when section changes. If the user switches the UI language or changes text scaling while staying on the same settings section, the sidebar labels can reflow but the pill keeps the old top/height until another section is selected, so the highlight can drift out of sync. // 跟 sidebar / SettingsModal 同款滑动 pill：测当前 active section 的 offsetTop/height // → 用 absolute pill 平滑滑过去；--ol-motion-spring 是项目里的 Apple 风格 ease-out-quint。 const sectionRefs = useRef<Array<HTMLButtonElement | null>>([]); const [pillRect, setPillRect] = useState<{ top: number; height: number } | null>(null); useLayoutEffect(() => { const idx = SECTION_ORDER.indexOf(section); const el = sectionRefs.current[idx]; if (!el) return; setPillRect({ top: el.offsetTop, height: el.offsetHeight }); }, [section]);