Skip to content

ui(settings): QueryaSwitch, a nicer toggle for Preferences in the kit's style #1488

Open

Description

@ZhuchkaTriplesix

Problem

The switches in Preferences (auto-update check, animate theme changes, confirm DML staging, and the other settings rows) are Material Switches with a theme that was never designed for the kit:

  • the knob is a large black circle on the cyan track in the dark theme, and an almost invisible track when off; the off state reads as disabled;
  • the size does not follow the control scale (sm 28 / md 32 / lg 36) and sits slightly off the label baseline;
  • no keyboard focus ring in the kit's style, a ripple from Material instead of the standard hover / pressed states;
  • the toggle animates with Material's timing, not QueryaMotion, and ignores Motion Off;
  • it is the last Material control in the settings next to QueryaButton, QueryaDropdown and QueryaSearchField, and part of leaving shadcn_flutter / Material look (epic(ui): remove shadcn_flutter from the app #1465, step 4: Switch, Checkbox, Card).

Scope

  • A kit widget QueryaSwitch in lib/shared/widgets/, built on Flutter primitives: track and knob from context.workbench (accent on, borderSubtle / muted off, onAccent knob), a track height tied to QueryaControlSize, hover, pressed, disabled and keyboard-only focus ring as in QueryaButton.
  • Motion from QueryaMotion (instant under Motion Off and reduced OS motion).
  • Semantics: toggled, label, enabled; Space / Enter toggle; the whole settings row stays clickable (PreferencesSwitchRow).
  • Use it in PreferencesSwitchRow and the other Switch call sites (mongo_aggregation_workspace.dart), remove the Material path.
  • Same for the checkbox rows in a follow-up if it fits (PreferencesCheckboxRow).
  • Tests: states and colours in dark and light themes, toggling by pointer and keyboard, semantics, one height next to a QueryaButton of the same size; add it to the UI kit gallery (dev(ui): UI kit gallery: every control, variant, size and state in every theme #1336) and to docs/ui-kit.md.

Acceptance

  • On and off are clearly different in the dark and the light theme and in imported VS Code themes; disabled is distinct from off.
  • The switch is the height of its control size and centred on its label.
  • Keyboard focus shows the kit's ring; a mouse click does not.
  • No material.Switch in lib/; a guard keeps it that way.

Activity

  1. added
    enhancementNew feature or request
    frontendTheme parser epic label: frontend
    uiUser interface components and widgets
    uxUser experience, keyboard shortcuts and interactions
    P3Low priority / Polish & Enhancements
    on Oct 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low priority / Polish & EnhancementsenhancementNew feature or requestfrontendTheme parser epic label: frontenduiUser interface components and widgetsuxUser experience, keyboard shortcuts and interactions

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions