Skip to content

ui: migrate settings and API configuration panels to shared primitives #500

@icebear0828

Description

@icebear0828

Context

The settings tab contains many repeated panel and form patterns: collapsible sections, API config, Anthropic SDK setup, Ollama Bridge, code examples, test connection, quota settings, rotation settings, logs settings, and general settings. These screens are visually consistent today, but the consistency is maintained through repeated class strings.

Depends on #497 and #498.

Scope

  • Migrate collapsible settings panels to the shared Card/Panel primitive.
  • Migrate settings form inputs, selects, checkboxes, segmented controls, helper text, save/reset actions, and disabled states.
  • Migrate API Config and Anthropic Setup copy controls and technical fields.
  • Migrate CodeExamples tabs, language selector, code block, and copy button styling.
  • Keep technical strings monospace and compact.

Acceptance criteria

  • Settings panels share the same radius, border, padding, typography, and dark-mode treatment.
  • Inputs/selects/buttons use shared primitives and preserve current behavior.
  • Code examples remain readable in light and dark mode, with secondary copy actions visually subdued.
  • No TypeScript any is introduced.

Verification

  • Add/update tests for migrated form controls or settings interactions touched by the change.
  • Run npm test.
  • Run npm run build.
  • Manually verify the Settings tab at localhost:8080 in light and dark mode.

Notes

Do not change config semantics while doing this migration. This issue is visual-system consolidation only.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions