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::Settings => {
-        Screen::Home | _ => home(state),
+            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,20 +331,18 @@ fn body(state: &State) -> Element<'_, Message> {
     if let Some(ref video) = state.video {
         video::player(video)
     } else {
-        scrollable(
+        Grid::with_children(state.cache.items_of(state.current).into_iter().map(card))
-            container(
+            .fluid(400)
-                Grid::with_children(state.cache.items_of(state.current).into_iter().map(card))
+            .spacing(50)
-                    .fluid(400)
+            .pipe(container)
-                    .spacing(50),
-            )
             .padding(50)
             .align_x(Alignment::Center)
             // .align_y(Alignment::Center)
             .height(Length::Fill)
-            .width(Length::Fill),
+            .width(Length::Fill)
-        )
+            .pipe(scrollable)
-        .height(Length::Fill)
+            .height(Length::Fill)
-        .into()
+            .into()
     }
 }
 
@@ -377,19 +396,18 @@ fn header(state: &State) -> Element<'_, Message> {
 }
 
 fn search(state: &State) -> Element<'_, Message> {
-    container(
+    TextInput::new("Search...", state.query.as_deref().unwrap_or_default())
-        TextInput::new("Search...", state.query.as_deref().unwrap_or_default())
+        .padding(10)
-            .padding(10)
+        .size(16)
-            .size(16)
+        .width(Length::Fill)
-            .width(Length::Fill)
+        .on_input(Message::SearchQueryChanged)
-            .on_input(Message::SearchQueryChanged)
+        .on_submit(Message::Search)
-            .on_submit(Message::Search),
+        .pipe(container)
-    )
+        .padding(10)
-    .padding(10)
+        .width(Length::Fill)
-    .width(Length::Fill)
+        .height(Length::Shrink)
-    .height(Length::Shrink)
+        .style(container::rounded_box)
-    .style(container::rounded_box)
+        .into()
-    .into()
 }
 
 fn footer(state: &State) -> Element<'_, Message> {