fix: 输入框焦点样式 & Tailwind 类名拼写错误

[AmintaCCCP]

Summary

修复 Issue #103 和 #109 的根因：

• Issue [Bug] 添加 AI 时，除下拉框外其他输入框无法点击或输入；WebDAV 页面同样受影响（非100%复现） #103（输入框无法点击）：AIConfigPanel 和 WebDAVPanel 中的 text/url/password/select 输入框完全没有 focus 可见样式，alert() 对话框消失后用户无法从视觉上确认焦点在哪
• Issue 输入框焦点问题：输入时外框无高亮显示且光标不闪动 #109（焦点无高亮+光标不闪）：同样是输入框缺少 focus ring 样式
• 两处共有的 Tailwind 类名拼写错误：bg-light-surfaceborder-black/[0.06] 缺少空格，导致 Tailwind 将整个字符串当作无效类名处理，背景和边框样式失效

Changes

1. AIConfigPanel.tsx

   • 5个 text/url/password/select 输入框添加 focus:ring-2 focus:ring-brand-violet focus:border-transparent focus:outline-none
   • 修复 checkbox 和 radio 背景色的 Tailwind 类名拼写错误

2. WebDAVPanel.tsx

   • 5个 text/url/password 输入框添加相同的 focus ring 样式
   • 修复 radio 背景色的 Tailwind 类名拼写错误

3. GeneralPanel.tsx / RepositoryList.tsx / AssetFilterManager.tsx

   • 修复 Tailwind 类名拼写错误（bg-light-surfaceborder-black/[0.06] → bg-light-surface border-black/[0.06]）

Test plan

• 进入 AI 配置页面，点击"添加 AI 配置"，点击测试连接（失败弹 alert），alert 关闭后点击任意输入框 — 应有紫色 focus ring 高亮
• 同上操作后 WebDAV 页面的输入框 — 应有紫色 focus ring 高亮
• 验证 GeneralPanel 语言切换、RepositoryList 复选框等元素的背景色正常显示

Related Issues

Fixes #103, Fixes #109

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Fixed styling inconsistencies for unselected filter items, radio controls, and selection inputs across the app to ensure backgrounds and borders render correctly.

• Style

  • Added consistent focus rings and suppressed default outlines on various form inputs and selects, providing clearer, brand-themed visual feedback when interacting with settings and forms.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1b1804b8-debf-4e97-bb1f-b3d74f02347f

📥 Commits

Reviewing files that changed from the base of the PR and between 9592b79 and 9082809.

📒 Files selected for processing (2)

• src/components/settings/BackendPanel.tsx
• src/components/settings/CategoryPanel.tsx

✅ Files skipped from review due to trivial changes (2)

• src/components/settings/BackendPanel.tsx
• src/components/settings/CategoryPanel.tsx

---

📝 Walkthrough

Walkthrough

Separated malformed Tailwind utility concatenations (bg-light-surfaceborder-black/[0.06] → bg-light-surface border-black/[0.06]) across several components and added consistent focus-ring classes (focus:ring-2 focus:ring-brand-violet focus:border-transparent focus:outline-none) to various input/select controls; no control-flow or API changes.

Changes

Cohort / File(s)	Summary
Class String Corrections src/components/AssetFilterManager.tsx, src/components/RepositoryList.tsx, src/components/settings/GeneralPanel.tsx, src/components/settings/WebDAVPanel.tsx	Fixed concatenated Tailwind utilities by splitting bg-light-surfaceborder-black/[0.06] into bg-light-surface and border-black/[0.06] for filter items, radio controls, and language selectors.
Focus Ring Additions & Fixes src/components/settings/AIConfigPanel.tsx, src/components/settings/WebDAVPanel.tsx, src/components/settings/BackendPanel.tsx, src/components/settings/CategoryPanel.tsx	Added consistent focus styling (focus:ring-2 focus:ring-brand-violet focus:border-transparent focus:outline-none) to input/select elements and corrected a few concatenated checkbox/radio class strings.
Minor UI Styling src/components/RepositoryList.tsx	Also updated radio/display control classNames to use separated background and border utilities (covered above) affecting enabled radio visuals.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: 改进侧栏滚动行为并修复主题持久化·修复某些UI显示问题 #105 — Modifies Tailwind className strings in overlapping UI components; likely touches the same styling areas.
• style: apply linear design system across all components #99 — Broad refactor that introduced similar concatenated class/style issues and focus-ring changes across the same files.
• Fix repository and discovery UI inconsistencies #100 — Touches src/components/settings/BackendPanel.tsx and related Tailwind class corrections.

Poem

🐰 I nudged a tangled class apart,
split borders and backgrounds with my heart.
Violet rings now wink on focus bright,
Inputs hop lively in morning light.
Hooray — small fixes, big delight!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	All changes are within scope: fixing Tailwind class typos and adding focus styles to inputs. However, BackendPanel and CategoryPanel changes extend beyond the PR description's listed components.	Clarify whether extending focus styles to BackendPanel and CategoryPanel was intentional or if these should be in a separate PR.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: fixing input focus styles and Tailwind class name typos across multiple components.
Linked Issues check	✅ Passed	The PR directly addresses both Issue #103 and #109 by adding focus ring styling to input fields and correcting malformed Tailwind class names in affected components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/input-focus-styles

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/settings/AIConfigPanel.tsx (1)

506-510: ⚠️ Potential issue | 🟡 Minor

Same class-concatenation bug still present in disabled-state styling (out of diff scope).

While fixing bg-light-surfaceborder-black/[0.06], two additional missing-space bugs in this file were not addressed and continue to break utilities for the “View Default Prompt” button:

• Line 508: dark:text-text-tertiarycursor-not-allowed — should be two classes.
• Line 509: text-gray-700hover:text-gray-900 — should be two classes.

Result: in disabled state the cursor is not not-allowed, and in non-disabled state the gray text and hover color don't apply.

🔧 Proposed fix

                   className={`flex items-center space-x-1 text-sm ${
                     showCustomPrompt 
-                      ? 'text-gray-400 dark:text-text-tertiarycursor-not-allowed' 
-                      : 'text-gray-700hover:text-gray-900 dark:text-text-tertiary dark:hover:text-gray-300'
+                      ? 'text-gray-400 dark:text-text-tertiary cursor-not-allowed'
+                      : 'text-gray-700 hover:text-gray-900 dark:text-text-tertiary dark:hover:text-gray-300'
                   }`}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/settings/AIConfigPanel.tsx` around lines 506 - 510, The
className string in the AIConfigPanel component for the "View Default Prompt"
button has two concatenation bugs: when showCustomPrompt is true the classes are
joined as "dark:text-text-tertiarycursor-not-allowed" and when false as
"text-gray-700hover:text-gray-900", causing missing utilities; update the
className construction in AIConfigPanel (the JSX using showCustomPrompt) to
split those into separate classes — replace
"dark:text-text-tertiarycursor-not-allowed" with "dark:text-text-tertiary
cursor-not-allowed" and "text-gray-700hover:text-gray-900" with "text-gray-700
hover:text-gray-900" (preserving the existing dark: and dark:hover: classes that
follow).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/components/settings/AIConfigPanel.tsx`:
- Around line 506-510: The className string in the AIConfigPanel component for
the "View Default Prompt" button has two concatenation bugs: when
showCustomPrompt is true the classes are joined as
"dark:text-text-tertiarycursor-not-allowed" and when false as
"text-gray-700hover:text-gray-900", causing missing utilities; update the
className construction in AIConfigPanel (the JSX using showCustomPrompt) to
split those into separate classes — replace
"dark:text-text-tertiarycursor-not-allowed" with "dark:text-text-tertiary
cursor-not-allowed" and "text-gray-700hover:text-gray-900" with "text-gray-700
hover:text-gray-900" (preserving the existing dark: and dark:hover: classes that
follow).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1e481992-3dbd-4942-9e1a-af1a3a48edb2

📥 Commits

Reviewing files that changed from the base of the PR and between 7de8076 and 9592b79.

📒 Files selected for processing (5)

• src/components/AssetFilterManager.tsx
• src/components/RepositoryList.tsx
• src/components/settings/AIConfigPanel.tsx
• src/components/settings/GeneralPanel.tsx
• src/components/settings/WebDAVPanel.tsx