chore: update gpui-component

crates/ui/src/modal.rs

@@ -3,9 +3,9 @@ use std::time::Duration;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    anchored, div, point, px, relative, Animation, AnimationExt as _, AnyElement, App, Bounds,
-    ClickEvent, Div, FocusHandle, InteractiveElement, IntoElement, KeyBinding, MouseButton,
-    ParentElement, Pixels, Point, RenderOnce, SharedString, Styled, Window,
+    anchored, div, hsla, point, px, relative, Animation, AnimationExt as _, AnyElement, App,
+    Bounds, BoxShadow, ClickEvent, Div, FocusHandle, InteractiveElement, IntoElement, KeyBinding,
+    MouseButton, ParentElement, Pixels, Point, RenderOnce, SharedString, Styled, Window,
 };
 use theme::ActiveTheme;
 
@@ -366,6 +366,9 @@ impl RenderOnce for Modal {
         let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top;
         let x = bounds.center().x - self.width / 2.;
 
+        let animation = Animation::new(Duration::from_secs_f64(0.25))
+            .with_easing(cubic_bezier(0.32, 0.72, 0., 1.));
+
         anchored()
             .position(point(window_paddings.left, window_paddings.top))
             .snap_to_window()
@@ -487,16 +490,27 @@ impl RenderOnce for Modal {
                                     )),
                                 )
                             })
-                            .with_animation(
-                                "slide-down",
-                                Animation::new(Duration::from_secs_f64(0.25))
-                                    .with_easing(cubic_bezier(0.32, 0.72, 0., 1.)),
-                                move |this, delta| {
-                                    let y_offset = px(0.) + delta * px(30.);
-                                    this.top(y + y_offset)
-                                },
-                            ),
-                    ),
+                            .with_animation("slide-down", animation.clone(), move |this, delta| {
+                                let y_offset = px(0.) + delta * px(30.);
+                                // This is equivalent to `shadow_xl` with an extra opacity.
+                                let shadow = vec![
+                                    BoxShadow {
+                                        color: hsla(0., 0., 0., 0.1 * delta),
+                                        offset: point(px(0.), px(20.)),
+                                        blur_radius: px(25.),
+                                        spread_radius: px(-5.),
+                                    },
+                                    BoxShadow {
+                                        color: hsla(0., 0., 0., 0.1 * delta),
+                                        offset: point(px(0.), px(8.)),
+                                        blur_radius: px(10.),
+                                        spread_radius: px(-6.),
+                                    },
+                                ];
+                                this.top(y + y_offset).shadow(shadow)
+                            }),
+                    )
+                    .with_animation("fade-in", animation, move |this, delta| this.opacity(delta)),
             )
     }
 }

crates/ui/src/notification.rs

@@ -364,26 +364,16 @@ impl Render for NotificationList {
         let size = window.viewport_size();
         let items = self.notifications.iter().rev().take(10).rev().cloned();
 
-        div()
-            .absolute()
-            .flex()
-            .top_4()
-            .bottom_4()
-            .right_4()
-            .justify_end()
-            .child(
-                v_flex()
-                    .id("notification-list")
-                    .gap_3()
-                    .absolute()
-                    .relative()
-                    .right_0()
-                    .h(size.height - px(8.))
-                    .children(items)
-                    .on_hover(cx.listener(|view, hovered, _window, cx| {
-                        view.expanded = *hovered;
-                        cx.notify();
-                    })),
-            )
+        div().absolute().top_4().right_4().child(
+            v_flex()
+                .id("notification-list")
+                .h(size.height - px(8.))
+                .on_hover(cx.listener(|view, hovered, _, cx| {
+                    view.expanded = *hovered;
+                    cx.notify()
+                }))
+                .gap_3()
+                .children(items),
+        )
     }
 }

crates/ui/src/root.rs

@@ -188,7 +188,13 @@ impl Root {
     ) -> Option<impl IntoElement> {
         let root = window.root::<Root>()??;
 
-        Some(div().child(root.read(cx).notification.clone()))
+        Some(
+            div()
+                .absolute()
+                .top_0()
+                .right_0()
+                .child(root.read(cx).notification.clone()),
+        )
     }
 
     /// Render the Modal layer.