Toggle & Switch (#21979)

![CleanShot 2024-12-13 at 11 27
39@2x](https://github.com/user-attachments/assets/7c7828c0-c5c7-4dc6-931e-722366d4f15a)

- Adds the Switch component
- Updates `Selected`, `Selectable` -> `ToggleState`, `Toggleable`
- Adds `checkbox` and `switch` functions to align better with other
elements in our layout system.

We decided not to merge Switch and Checkbox. However, in a followup I'll
introduce a Toggle or AnyToggle enum so we can update
`CheckboxWithLabel` -> `ToggleWithLabel` as this component will work
exactly the same with either a Checkbox or a Switch.

Release Notes:

- N/A

crates/editor/src/code_context_menus.rs

@@ -16,8 +16,8 @@ use project::{CodeAction, Completion, TaskSourceKind};
 use task::ResolvedTask;
 use ui::{
     h_flex, ActiveTheme as _, Color, FluentBuilder as _, InteractiveElement as _, IntoElement,
-    Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover, Selectable as _,
-    StatefulInteractiveElement as _, Styled, StyledExt as _,
+    Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover,
+    StatefulInteractiveElement as _, Styled, StyledExt as _, Toggleable as _,
 };
 use util::ResultExt as _;
 use workspace::Workspace;
@@ -473,7 +473,7 @@ impl CompletionsMenu {
                         div().min_w(px(220.)).max_w(px(540.)).child(
                             ListItem::new(mat.candidate_id)
                                 .inset(true)
-                                .selected(item_ix == selected_item)
+                                .toggle_state(item_ix == selected_item)
                                 .on_click(cx.listener(move |editor, _event, cx| {
                                     cx.stop_propagation();
                                     if let Some(task) = editor.confirm_completion(