ui: Implement hover color for scrollbar component

crates/ui/src/components/scrollbar.rs

@@ -14,6 +14,14 @@ pub struct Scrollbar {
     kind: ScrollbarAxis,
 }
 
+#[derive(Default, Debug, Clone, Copy)]
+enum ThumbState {
+    #[default]
+    Inactive,
+    Hover,
+    Active,
+}
+
 impl ScrollableHandle for UniformListScrollHandle {
     fn content_size(&self) -> Option<ContentSize> {
         Some(ContentSize {
@@ -101,6 +109,7 @@ pub struct ScrollbarState {
     drag: Rc<Cell<Option<Pixels>>>,
     parent_id: Option<EntityId>,
     scroll_handle: Arc<dyn ScrollableHandle>,
+    state: Rc<Cell<ThumbState>>,
 }
 
 impl ScrollbarState {
@@ -109,6 +118,7 @@ impl ScrollbarState {
             drag: Default::default(),
             parent_id: None,
             scroll_handle: Arc::new(scroll),
+            state: Default::default(),
         }
     }
 
@@ -126,6 +136,27 @@ impl ScrollbarState {
         self.drag.get().is_some()
     }
 
+    fn set_drag(&self, drag: Option<Pixels>) {
+        self.drag.set(drag);
+        self.set_thumb_active();
+    }
+
+    fn set_thumb_active(&self) {
+        self.set_thumb_state(ThumbState::Active);
+    }
+
+    fn set_thumb_hovered(&self, hovered: bool) {
+        self.set_thumb_state(if hovered {
+            ThumbState::Hover
+        } else {
+            ThumbState::Inactive
+        });
+    }
+
+    fn set_thumb_state(&self, state: ThumbState) {
+        self.state.set(state);
+    }
+
     fn thumb_range(&self, axis: ScrollbarAxis) -> Option<Range<f32>> {
         const MINIMUM_THUMB_SIZE: f32 = 25.;
         let ContentSize {
@@ -231,9 +262,13 @@ impl Element for Scrollbar {
     ) {
         window.with_content_mask(Some(ContentMask { bounds }), |window| {
             let colors = cx.theme().colors();
-            let thumb_background = colors
-                .surface_background
-                .blend(colors.scrollbar_thumb_background);
+            let thumb_base_color = match self.state.state.get() {
+                // TODO: Use the active scrollbar thumb color once available in themes.
+                ThumbState::Active | ThumbState::Hover => colors.scrollbar_thumb_hover_background,
+                ThumbState::Inactive => colors.scrollbar_thumb_background,
+            };
+
+            let thumb_background = colors.surface_background.blend(thumb_base_color);
             let is_vertical = self.kind == ScrollbarAxis::Vertical;
             let extra_padding = px(5.0);
             let padded_bounds = if is_vertical {
@@ -301,7 +336,7 @@ impl Element for Scrollbar {
 
                     if thumb_bounds.contains(&event.position) {
                         let offset = event.position.along(axis) - thumb_bounds.origin.along(axis);
-                        state.drag.set(Some(offset));
+                        state.set_drag(Some(offset));
                     } else if let Some(ContentSize {
                         size: item_size, ..
                     }) = scroll.content_size()
@@ -350,6 +385,7 @@ impl Element for Scrollbar {
             let axis = self.kind;
             window.on_mouse_event(move |event: &MouseMoveEvent, _, _, cx| {
                 if let Some(drag_state) = state.drag.get().filter(|_| event.dragging()) {
+                    state.set_thumb_active();
                     if let Some(ContentSize {
                         size: item_size, ..
                     }) = scroll.content_size()
@@ -385,13 +421,16 @@ impl Element for Scrollbar {
                         }
                     }
                 } else {
+                    state.set_thumb_hovered(thumb_bounds.contains(&event.position));
                     state.drag.set(None);
                 }
             });
             let state = self.state.clone();
-            window.on_mouse_event(move |_event: &MouseUpEvent, phase, _, cx| {
+            window.on_mouse_event(move |event: &MouseUpEvent, phase, _, cx| {
                 if phase.bubble() {
-                    state.drag.take();
+                    if state.drag.take().is_some() {
+                        state.set_thumb_hovered(thumb_bounds.contains(&event.position));
+                    }
                     if let Some(id) = state.parent_id {
                         cx.notify(id);
                     }