refactor(ui): Collapsible groups in Settings & Vocab#407
Merged
Conversation
把 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 文案
PR Reviewer Guide 🔍(Review updated until commit 50daab1)Here are some key observations to aid the review process:
|
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 远高于此基线。
|
Persistent review updated to latest commit e44dcbc |
pr-agent #407 二次反馈：toggle button 缺 aria-expanded（屏幕阅读器无法判断 当前组是否展开），并且 outline: 'none' 把浏览器默认 keyboard focus indicator 也抹掉了（Tab 切换时丢失视觉焦点）。 修复： - 加 aria-expanded={open} - 移除 outline: 'none'，让浏览器默认 focus ring 显示出来
|
Persistent review updated to latest commit 50daab1 |
11 tasks
appergb
pushed a commit
that referenced
this pull request
May 12, 2026
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
- 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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
Summary
Collapsible（_atoms.tsx）：grid-template-rows 0fr↔1fr 高度过渡（Chromium 117+ 解析 1fr 为内容真实高度），右上角 chevron 旋转 90° 标示展开Test plan
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
File Walkthrough
5 files
Add section titles and shorter copyAdd section titles and shorter copyAdd section titles and shorter copyAdd section titles and shorter copyAdd section titles and shorter copy2 files
Split recording settings into sectionsConvert vocabulary panels to collapsibles1 files
Add reusable accessible collapsible component