refactor: split SettingsDialog into per-panel sub-components

Đang mở
  • Có gì không ổn?
#4 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
52/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
desktop, frontend

Hướng nghiên cứu

Start with src/components/settings/SettingsDialog.tsx and trace how the tab navigation selects each panel and how settings are read and saved. Extract the panels into src/components/settings/panels/, keeping the parent responsible for routing and passing settings through props or the store hook. Done means each panel is under 200 lines, settings persist after an app reload, and TypeScript, tests, and the build pass.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

good first issue help wanted refactor

src/components/settings/SettingsDialog.tsx is 1,321 lines. Each settings panel (General, Editor, Explorer, AI, Keymaps, Templates, Updates) is its own world but they all share one giant file.

What to extract

One PR per panel is fine. Order suggestion (lightest first):

  1. <AISettingsPanel> — the AI provider config (OpenAI / Anthropic / Google / Ollama selector, API key, endpoint, model).
  2. <KeymapsPanel> — preset selector + custom-action overrides.
  3. <TemplatesPanel> — live-template CRUD.
  4. <UpdatesPanel> — the in-app updater UI.
  5. <ExplorerSettingsPanel> — the show/hide toggles.
  6. <GeneralSettingsPanel> — everything else.

Suggested approach

  • Components live in src/components/settings/panels/.
  • The parent SettingsDialog keeps the tab nav + active-panel routing.
  • Each panel takes settings + setSetting (or its store hook) as props — no panel should useSettings() independently if the parent already has it.

Done criteria

  • SettingsDialog.tsx becomes a router; each panel < 200 lines.
  • All settings still persist correctly across app reloads (manual test).
  • TypeScript / tests / build green.

Out of scope

  • Redesigning the visual layout.
  • Adding new settings.

Audit reference

K4 in the pre-launch audit.

Ngôn ngữ chính
TypeScript
Star
6
Fork
1
Merge trung bình
17 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của openidle-dev/queryden

Tất cả issue của openidle-dev/queryden

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.