Skip to content

refactor(ui): Collapsible groups in Settings & Vocab - #407

Merged
appergb merged 3 commits into
betafrom
pr/settings-vocab-collapsible
May 11, 2026
Merged

refactor(ui): Collapsible groups in Settings & Vocab#407
appergb merged 3 commits into
betafrom
pr/settings-vocab-collapsible

Conversation

@appergb

@appergbappergb commented May 11, 2026•
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Collaborator

User description

Summary

  • 把 Settings/Recording 与 Vocab 三段从单一长 Card 切成可折叠分组，缓解内容下沉时整段 reflow / overflow 的拥挤感
  • 新组件 Collapsible（_atoms.tsx）：grid-template-rows 0fr↔1fr 高度过渡（Chromium 117+ 解析 1fr 为内容真实高度），右上角 chevron 旋转 90° 标示展开
  • 5 个 locale 同步新增 group/section title key，并对若干 Recording desc 文案做了去冗余整理

Test plan

  • `npm run build` (tsc + vite) pass
  • i18n 5 个 locale 都加齐新 key
  • 真机视觉验证：Settings → Recording 三组折叠展开动画顺滑，关闭无 "卡卡" 感
  • Vocab 词条区域 defaultOpen 行为正确，纠正规则 / 场景预设默认折叠

PR Type

Enhancement, Bug fix

Description

  • Split Recording into collapsible groups

  • Add collapsible Vocabulary subsections

  • Shorten recording copy across locales

  • Hide collapsed controls from focus

Diagram Walkthrough

flowchart LR
A["_atoms.tsx: Collapsible"] --> B["Settings.tsx recording groups"]
A --> C["Vocab.tsx sections"]
D["i18n locale files"] --> B
D --> C
A --> E["Collapsed content stays non-tabbable"]
Loading

File Walkthrough

Relevant files
Configuration changes
5 files
en.ts
Add section titles and shorter copy
+20/-16
ja.ts
Add section titles and shorter copy
+12/-8
ko.ts
Add section titles and shorter copy
+12/-8
zh-CN.ts
Add section titles and shorter copy
+21/-17
zh-TW.ts
Add section titles and shorter copy
+12/-8
Enhancement
2 files
Settings.tsx
Split recording settings into sections
+20/-3
Vocab.tsx
Convert vocabulary panels to collapsibles
+36/-32
Bug fix
1 files
_atoms.tsx
Add reusable accessible collapsible component
+105/-1

baiqing
refactor(ui): Collapsible groups in Settings & Vocab
f5d9288
把 Settings/Recording 与 Vocab 三段从单一长 Card 切成可折叠分组，缓解
内容下沉时整段 reflow / overflow 的拥挤感。
新组件：
- _atoms.tsx::Collapsible — grid-template-rows 0fr↔1fr 高度过渡（Chromium
117+ 解析 1fr 为内容真实高度，比 max-height 固定大值稳）；右上角 chevron
旋转 90° 标示展开
- embedded prop：嵌在 padding=0 的父 Card 里时只画底部分隔线，无独立 border
Settings/RecordingSection：
- 原单 Card 拆为 1 个主 Card + 3 个 Collapsible（插入与剪贴板 / 历史与上下文 /
启动）
- 滚动容器加 paddingBottom: 16 防 Card 底部 shadow 被裁
- 同步把若干 desc 文案缩短一句，避免 Collapsible 折叠展开时的高度抖动
Vocab：
- 原 3 段 div padding=18 改用 Collapsible(embedded)，词条区域 defaultOpen
- 标题从 strong + tip div 改为 Collapsible 自带的 title + desc props
i18n（5 个 locale 全平等更新）：
- 新增 4 个 key：vocab.sectionTitle / settings.recording.{insertGroupTitle,
historyGroupTitle, startupGroupTitle}
- 同步缩短若干 recording 区 desc 文案
@github-actions

github-actionsBot commented May 11, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

(Review updated until commit 50daab1)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

baiqing
fix(a11y): make collapsed Collapsible content non-tabbable
e44dcbc
pr-agent #407 反馈：grid-template-rows: 0fr 把内容视觉裁掉，但内部的 input /
button / Toggle 仍 mounted 且 tabbable —— 键盘用户折叠 Section 之后仍能 tab
到不可见的控件，屏幕阅读器也会朗读。
修复：内容容器 inert={当未展开} + aria-hidden={当未展开}：
- inert 把整个子树从 tab 顺序、点击事件、a11y 树里同时移除
- aria-hidden 配合 inert 给保守的 AT 兜底
React 18 types 没收 inert，用 spread { inert: '' } 绕过 TS。Chromium 102+ /
Safari 15.4+ 支持，Tauri WebView 远高于此基线。
@github-actions

github-actionsBot commented May 11, 2026

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit e44dcbc

baiqing
fix(a11y): expose Collapsible expanded state + keyboard focus
50daab1
pr-agent #407 二次反馈：toggle button 缺 aria-expanded（屏幕阅读器无法判断
当前组是否展开），并且 outline: 'none' 把浏览器默认 keyboard focus indicator
也抹掉了（Tab 切换时丢失视觉焦点）。
修复：
- 加 aria-expanded={open}
- 移除 outline: 'none'，让浏览器默认 focus ring 显示出来
@github-actions

github-actionsBot commented May 11, 2026

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit 50daab1

@appergb
appergb merged commit af07795 into betaMay 11, 2026
4 checks passed
@appergb
appergb deleted the pr/settings-vocab-collapsible branch May 11, 2026 17:25
@appergbappergb mentioned this pull request May 12, 2026
Merged
11 tasks
appergb pushed a commit that referenced this pull request May 12, 2026
baiqing
fix(a11y): SelectLite / SwitchLite 加键盘焦点指示
70917cb
pr-agent #419 review 指出两个 button 都用 outline:none 关掉了浏览器默认
焦点 ring 却没替代——键盘 Tab 时用户看不到当前焦点在哪。和 _atoms.tsx
Collapsible 的 pr-agent #407 是同一类问题。
修法：新增 .ol-focus-ring class，:focus-visible 时上 2px 半透明蓝
box-shadow（不是 outline，因为 inline style 的 outline:none 会盖掉
class 里的 outline，但盖不掉 box-shadow）。:focus-visible 只在键盘
focus 时生效，鼠标点击保持干净。
H-Chris233 pushed a commit to H-Chris233/openless that referenced this pull request May 12, 2026
baiqing
fix(ui): Windows 原生 chrome / 胶囊缩小 / 自定义下拉 (Open-Less#417Open-Less#418)
5bf6350
- WindowChrome: 移除 Windows 端自定义标题栏和 resize handles，
交还 Tauri decorations:true 原生 Win11 标题栏，修复 X 按钮重叠
与圆角处的黑边/白线
- Capsule (Open-Less#417): Windows pill 196×52→180×44，textWidth 104→88，
视觉密度与 macOS 对齐
- SelectLite (Open-Less#418): 重写为受控下拉组件（portal popover, 键盘导航
Arrow/Enter/Esc, 视口翻转, a11y combobox/listbox），替换 11 处
native <select> 以避开 Win32 ComboBox 直角丑框
- SettingsModal: 删除"个性化"中重复的"界面语言"入口，功能保留在
"设置 → 语言"分区；5 个 locale 同步清理 modal.personalize.language
- SwitchLite: 加 outline:none 解决 Windows 上点击后的黑色焦点框
- global.css: 移入 ol-select-pop 关键帧；不再用全局 outline:none，
以保留 _atoms.tsx Collapsible 的键盘 outline (pr-agent Open-Less#407)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Review effort 2/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@appergb