feat: Use a floating box for settings

ui-iced/src/lib.rs

@@ -4,6 +4,7 @@ mod video;
 mod shared_string;
 use iced_video::{Ready, Video, VideoHandle};
 use shared_string::SharedString;
+use tap::Pipe as _;
 
 use std::sync::Arc;
 
@@ -293,9 +294,29 @@ fn update(state: &mut State, message: Message) -> Task<Message> {
 }
 
 fn view(state: &State) -> Element<'_, Message> {
+    let content = home(state);
     match state.screen {
-        Screen::Settings => settings::settings(state),
-        Screen::Home | _ => home(state),
+        Screen::Settings => {
+            let settings = settings::settings(state);
+            let settings = container(settings)
+                .width(Length::FillPortion(4))
+                .height(Length::FillPortion(4))
+                .style(container::rounded_box)
+                .pipe(mouse_area)
+                .on_press(Message::Refresh)
+                .pipe(|c| iced::widget::column![space::vertical(), c, space::vertical()])
+                .pipe(container)
+                .width(Length::Fill)
+                .width(Length::Fill)
+                .align_y(Alignment::Center)
+                .align_x(Alignment::Center)
+                .padding(50)
+                .pipe(mouse_area)
+                .on_press(Message::Settings(settings::SettingsMessage::Close));
+            // let content = mouse_area(content).on_press(Message::Home);
+            stack![content, settings].into()
+        }
+        Screen::Home | _ => content,
     }
 }
 
@@ -310,18 +331,16 @@ fn body(state: &State) -> Element<'_, Message> {
     if let Some(ref video) = state.video {
         video::player(video)
     } else {
-        scrollable(
-            container(
         Grid::with_children(state.cache.items_of(state.current).into_iter().map(card))
             .fluid(400)
-                    .spacing(50),
-            )
+            .spacing(50)
+            .pipe(container)
             .padding(50)
             .align_x(Alignment::Center)
             // .align_y(Alignment::Center)
             .height(Length::Fill)
-            .width(Length::Fill),
-        )
+            .width(Length::Fill)
+            .pipe(scrollable)
             .height(Length::Fill)
             .into()
     }
@@ -377,14 +396,13 @@ fn header(state: &State) -> Element<'_, Message> {
 }
 
 fn search(state: &State) -> Element<'_, Message> {
-    container(
     TextInput::new("Search...", state.query.as_deref().unwrap_or_default())
         .padding(10)
         .size(16)
         .width(Length::Fill)
         .on_input(Message::SearchQueryChanged)
-            .on_submit(Message::Search),
-    )
+        .on_submit(Message::Search)
+        .pipe(container)
         .padding(10)
         .width(Length::Fill)
         .height(Length::Shrink)