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/search/src/project_search.rs

@@ -35,7 +35,7 @@ use std::{
 use theme::ThemeSettings;
 use ui::{
     h_flex, prelude::*, utils::SearchInputWidth, v_flex, Icon, IconButton, IconButtonShape,
-    IconName, KeyBinding, Label, LabelCommon, LabelSize, Selectable, Tooltip,
+    IconName, KeyBinding, Label, LabelCommon, LabelSize, Toggleable, Tooltip,
 };
 use util::paths::PathMatcher;
 use workspace::{
@@ -1645,7 +1645,7 @@ impl Render for ProjectSearchBar {
                     .on_click(cx.listener(|this, _, cx| {
                         this.toggle_filters(cx);
                     }))
-                    .selected(
+                    .toggle_state(
                         self.active_project_search
                             .as_ref()
                             .map(|search| search.read(cx).filters_enabled)
@@ -1669,7 +1669,7 @@ impl Render for ProjectSearchBar {
                     .on_click(cx.listener(|this, _, cx| {
                         this.toggle_replace(&ToggleReplace, cx);
                     }))
-                    .selected(
+                    .toggle_state(
                         self.active_project_search
                             .as_ref()
                             .map(|search| search.read(cx).replace_enabled)
@@ -1878,7 +1878,7 @@ impl Render for ProjectSearchBar {
                         .child(
                             IconButton::new("project-search-opened-only", IconName::FileSearch)
                                 .shape(IconButtonShape::Square)
-                                .selected(self.is_opened_only_enabled(cx))
+                                .toggle_state(self.is_opened_only_enabled(cx))
                                 .tooltip(|cx| Tooltip::text("Only Search Open Files", cx))
                                 .on_click(cx.listener(|this, _, cx| {
                                     this.toggle_opened_only(cx);