Refactor settings to centralized configuration with reusable components

[Copilot]

Settings logic was duplicated across SettingsDialog.tsx (611 lines) and settings.tsx (548 lines), violating DRY and making maintenance error-prone.

Changes

Configuration Layer

• app/config/settings-config.ts: Single source of truth defining all settings metadata, types, and Zustand store bindings
• Type-safe configuration with SettingConfig, SettingCategory, and StoreBinding interfaces

Component Library (app/components/settings/)

• Setting primitives: SettingSelect, SettingSwitch, SettingButton, SettingCard, SettingStats, SettingCustom
• SettingsRenderer: Strategy pattern component supporting two rendering modes:
  • mode="dialog": Two-column layout with category navigation (desktop)
  • mode="page": Flat scrollable layout (mobile)

Refactored Consumers

• SettingsDialog.tsx: 611→104 lines (83% reduction)
• app/routes/settings.tsx: 548→120 lines (78% reduction)

Usage

Desktop dialog:

<SettingsRenderer
  mode="dialog"
  categories={settingsCategories}
  activeCategory={activeCategory}
  onCategoryChange={setActiveCategory}
  context={{...}}
/>

Mobile route:

<SettingsRenderer
  mode="page"
  categories={settingsCategories}
  context={{...}}
/>

Adding new settings requires only config changes:

{
  id: 'my-setting',
  type: 'switch',
  title: '设置标题',
  storeBinding: {
    store: 'ffmpegWeb',
    key: 'myProperty',
    setter: 'setMyProperty',
  },
}

Impact

• 80.7% code reduction (1159→224 lines) in consuming components
• ~1250 lines of reusable infrastructure added
• Zero user-facing changes
• No breaking API changes

Original prompt

refactor-settings-single-source

Custom agent used: openspec-apply
Implement an approved OpenSpec change and keep tasks in sync.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
yet-another-ffmpeg-webui	Ready	Preview	Comment	Nov 11, 2025 6:24am

[cloudflare-workers-and-pages]

Deploying yet-another-ffmpeg-webui with    Cloudflare Pages

Latest commit:	f4db091
Status:	✅  Deploy successful!
Preview URL:	https://a440b135.yet-another-ffmpeg-webui.pages.dev
Branch Preview URL:	https://copilot-refactor-settings-si.yet-another-ffmpeg-webui.pages.dev

View logs