style: render checkbox inputs as toggle switches and optimize aesthetics

[SameDesu123]

PR Checklist

• Required Checks
  • Have you added type definitions?
  • Have you tested your changes?
  • Have you checked that it won't break any existing features?
• If your PR uses models¹, check the following:
  • Have you checked if it works normally in all models?
  • Have you checked if it works normally in all web, local, and node-hosted versions? If it doesn't, have you blocked it in those versions?
• If your PR is highly AI generated², check the following:
  • Have you understood what the code does?
  • Have you cleaned up any unnecessary or redundant code?
  • Is it not a huge change?
    • We currently do not accept highly AI generated PRs that are large changes.

Summary

Redesigns the CheckInput component to render as a modern toggle switch (switch pill) instead of a standard checkbox, improving visual aesthetics, contrast, and alignment.

Related Issues

None

Changes

src/lib/UI/GUI/CheckInput.svelte

• Replaced the checkbox box and SVG checkmark structure with a toggle switch track (rounded-full) and a sliding circle knob (bg-white).
• Set the switch track width to w-[2.625rem] (42px) and the knob transition to translate-x-4 (16px) to achieve a symmetric 2px inner padding on both checked and unchecked states.
• Improved light mode contrast of the knob by utilizing a solid white background instead of bg-textcolor.
• Enhanced accessibility by adding role="switch", aria-checked, and configuring aria-label for screen readers.

Impact

• All checkboxes utilizing CheckInput are now rendered as modern toggle switches.
• Better visual balance and accessibility across both light and dark themes.

Additional Notes

None

Preview

White theme	Dark theme

Footnotes

1. Modifies the behavior of prompting, requesting, or handling responses from AI models. ↩

2. Over 80% of the code is AI generated. ↩

[sub-hub]

The code looks fine to me. The checkboxes work well across various screen width too.
I can't sure if it meets @kwaroran's design standards, but I'll approve it.
Thanks for the PR!

[cubicj]

The implementation itself looks fine to me, and I don't see any code-level issue here. This is only my design impression, and I think the final design direction should mostly be up to the maintainers.

One concern: applying this globally to every CheckInput usage feels harder to scan in some places. The old checkbox had clearer visual feedback through the checked mark vs empty box, while the new switch depends more on knob position and theme color. This is especially noticeable in the default theme, where the checked borderc track and unchecked darkbutton track are both muted blue-gray colors.

This also makes some existing separated-label layouts, like the TTS settings, feel less readable because the larger switch appears on its own line. This is not caused by this PR specifically, but the global style change makes it more noticeable.

[SameDesu123]

@cubicj Based on your feedback, I have increased the contrast. I also fixed the issues with the TTS option display and labels.

Modified (White)	Modified (Monokai-white)

[cubicj]

Verified the updated switch design. The stronger checked-state feedback addresses my main scanability concern, and the TTS option layout is now connected to its label.

Check, tests, and build pass locally. I’ll leave the final design direction and merge decision to the maintainers.

Approving — thanks for the update!