This adds a bunch of styling upgrades but is still slightly broken

Author: unsecretised

src/app.rs

@@ -11,7 +11,7 @@ use iced::window::{self, Id, Settings};
 pub const WINDOW_WIDTH: f32 = 500.;
 
 /// The default window height
-pub const DEFAULT_WINDOW_HEIGHT: f32 = 65.;
+pub const DEFAULT_WINDOW_HEIGHT: f32 = 80.;
 
 /// The rustcast descriptor name to be put for all rustcast commands
 pub const RUSTCAST_DESC_NAME: &str = "RustCast";

src/app/apps.rs

@@ -4,16 +4,17 @@
 use std::path::Path;
 
 use iced::{
-    Alignment, Background,
+    Alignment, Background, Border,
     Length::Fill,
-    alignment::Vertical,
     border::Radius,
-    widget::{Button, Row, Text, container, image::Viewer},
+    widget::{Button, Row, Text, button, container, image::Viewer},
 };
 
 use crate::{
     app::{Message, Page, RUSTCAST_DESC_NAME},
     commands::Function,
+    config::Theme,
+    styles::{tint, with_alpha},
     utils::handle_from_icns,
 };
 
@@ -111,73 +112,88 @@ impl App {
         id_num: u32,
         focussed_id: u32,
     ) -> impl Into<iced::Element<'a, Message>> {
-        let mut tile = Row::new().width(Fill).height(55);
+        let focused = focussed_id == id_num;
 
-        if theme.show_icons
-            && let Some(icon) = &self.icons
-        {
-            tile = tile
-                .push(container(Viewer::new(icon).height(35).width(35)))
-                .align_y(Alignment::Center);
-        }
-
-        tile = tile.push(
-            Button::new(
+        // Title + subtitle (Raycast style)
+        let text_block = iced::widget::Column::new()
+            .spacing(2)
+            .push(
                 Text::new(&self.name)
                     .font(theme.font())
-                    .height(Fill)
-                    .width(Fill)
-                    .color(theme.text_color(1.))
-                    .align_y(Vertical::Center),
+                    .size(16)
+                    .color(theme.text_color(1.0)),
             )
-            .on_press_maybe({
-                match self.open_command.clone() {
-                    AppCommand::Function(func) => Some(Message::RunFunction(func)),
-                    AppCommand::Message(msg) => Some(msg),
-                    AppCommand::Display => None,
-                }
-            })
-            .style(|_, _| iced::widget::button::Style {
-                background: None,
-                text_color: theme.text_color(1.),
-                ..Default::default()
-            })
+            .push(
+                Text::new(&self.desc)
+                    .font(theme.font())
+                    .size(13)
+                    .color(theme.text_color(0.55)),
+            );
+
+        let mut row = Row::new()
+            .align_y(Alignment::Center)
             .width(Fill)
-            .height(55),
-        );
+            .spacing(0)
+            .height(50);
 
-        tile = tile
-            .push(
-                container(
-                    Text::new(&self.desc)
-                        .font(theme.font())
-                        .color(theme.text_color(0.4)),
-                )
-                .padding(12),
-            )
-            .width(Fill);
+        if theme.show_icons
+            && let Some(icon) = &self.icons
+        {
+            row = row.push(
+                container(Viewer::new(icon).height(40).width(40))
+                    .width(40)
+                    .height(40),
+            );
+        }
+        row = row.push(container(text_block).width(Fill));
 
-        let (highlight_opacity, border_width) = if focussed_id == id_num {
-            (0.7, 0.55)
-        } else {
-            (0.5, 0.1)
+        let msg = match self.open_command.clone() {
+            AppCommand::Function(func) => Some(Message::RunFunction(func)),
+            AppCommand::Message(msg) => Some(msg),
+            AppCommand::Display => None,
         };
 
-        container(tile)
+        let content = Button::new(row)
+            .on_press_maybe(msg)
+            .style(|_, _| result_button_style(theme))
+            .width(Fill)
+            .padding(0)
+            .height(50);
+
+        container(content)
             .id(format!("result-{}", id_num))
-            .style(move |_| iced::widget::container::Style {
-                text_color: Some(theme.text_color(1.)),
-                background: Some(Background::Color(theme.bg_color())),
-                border: iced::Border {
-                    color: theme.text_color(highlight_opacity),
-                    width: border_width,
-                    radius: Radius::new(0),
-                },
-                ..Default::default()
-            })
-            .max_height(55)
-            .padding(5)
+            .style(move |_| result_row_container_style(theme, focused))
+            .padding(8)
             .width(Fill)
-            .height(Fill)
+    }
+}
+
+fn result_button_style(theme: &Theme) -> button::Style {
+    let mut s = button::Style::default();
+    s.text_color = theme.text_color(1.0);
+    s.background = None;
+    s
+}
+
+fn result_row_container_style(tile: &Theme, focused: bool) -> container::Style {
+    let base = tile.bg_color();
+    let row_bg = if focused {
+        with_alpha(tint(base, 0.10), 1.0)
+    } else {
+        with_alpha(tint(base, 0.04), 1.0)
+    };
+
+    container::Style {
+        background: Some(Background::Color(row_bg)),
+        border: Border {
+            color: if focused {
+                tile.text_color(0.35)
+            } else {
+                tile.text_color(0.10)
+            },
+            width: if focused { 1.1 } else { 0.8 },
+            radius: Radius::new(10.0),
+        },
+        ..Default::default()
     }
 }

src/app/tile.rs

@@ -84,16 +84,16 @@ impl AppIndex {
 /// - Page ([`Page`]) the current page of the window (main or clipboard history)
 #[derive(Clone)]
 pub struct Tile {
-    theme: iced::Theme,
-    focus_id: u32,
-    query: String,
+    pub theme: iced::Theme,
+    pub focus_id: u32,
+    pub query: String,
     query_lc: String,
     results: Vec<App>,
     options: AppIndex,
     visible: bool,
     focused: bool,
     frontmost: Option<Retained<NSRunningApplication>>,
-    config: Config,
+    pub config: Config,
     /// The opening hotkey
     hotkey: HotKey,
     clipboard_content: Vec<ClipBoardContentType>,

src/app/tile/elm.rs

@@ -6,7 +6,7 @@ use iced::border::Radius;
 use iced::widget::scrollable::{Anchor, Direction, Scrollbar};
 use iced::widget::text::LineHeight;
 use iced::widget::{Column, Scrollable, container, space};
-use iced::{Color, window};
+use iced::window;
 use iced::{Element, Task};
 use iced::{Length::Fill, widget::text_input};
 
@@ -15,9 +15,9 @@ use rayon::{
     slice::ParallelSliceMut,
 };
 
-use crate::app::apps::AppCommand;
 use crate::app::tile::AppIndex;
 use crate::config::Theme;
+use crate::styles::rustcast_text_input_style;
 use crate::{
     app::{Message, Page, apps::App, default_settings, tile::Tile},
     config::Config,
@@ -93,8 +93,8 @@ pub fn view(tile: &Tile, wid: window::Id) -> Element<'_, Message> {
             .on_submit(Message::OpenFocused)
             .id("query")
             .width(Fill)
-            .line_height(LineHeight::Relative(1.5))
-            .style(|_, _| text_input_style(&tile.config.theme))
+            .line_height(LineHeight::Relative(1.75))
+            .style(rustcast_text_input_style(&tile.theme))
             .padding(20);
 
         let scrollbar_direction = if tile.config.theme.show_scroll_bar {
@@ -109,7 +109,7 @@ pub fn view(tile: &Tile, wid: window::Id) -> Element<'_, Message> {
         };
         let results = match tile.page {
             Page::Main => {
-                let mut search_results = Column::new();
+                let mut search_results = Column::new().spacing(5);
                 for (i, result) in tile.results.iter().enumerate() {
                     search_results = search_results.push(result.render(
                         &tile.config.theme,
@@ -128,49 +128,32 @@ pub fn view(tile: &Tile, wid: window::Id) -> Element<'_, Message> {
                 clipboard_history
             }
         };
+
         let scrollable = Scrollable::with_direction(results, scrollbar_direction).id("results");
-        let contents = Column::new().push(title_input).push(scrollable);
+        let contents = Column::new()
+            .push(title_input)
+            .push(scrollable)
+            .spacing(if tile.results.is_empty() { 0 } else { 5 });
 
         container(contents)
-            .style(|_| iced::widget::container::Style {
-                background: None,
-                text_color: None,
-                border: iced::Border {
-                    color: tile.config.theme.text_color(1.),
-                    width: 1.,
-                    radius: Radius::new(0),
-                },
-                ..Default::default()
-            })
-            .padding(0)
+            .style(|_| panel_style(&tile.config.theme))
+            .padding(10)
             .clip(true)
             .into()
     } else {
         space().into()
     }
 }
 
-fn text_input_style(theme: &Theme) -> iced::widget::text_input::Style {
-    text_input::Style {
-        background: iced::Background::Color(Color::TRANSPARENT),
+fn panel_style(theme: &Theme) -> container::Style {
+    container::Style {
+        background: Some(iced::Background::Color(theme.bg_color())),
+        text_color: None,
         border: iced::Border {
-            color: iced::Color {
-                r: 0.95,
-                g: 0.95,
-                b: 0.95,
-                a: 0.7,
-            },
-            width: 0.5,
-            radius: iced::border::Radius {
-                top_left: 0.,
-                top_right: 0.,
-                bottom_right: 0.,
-                bottom_left: 0.,
-            },
+            color: theme.text_color(1.),
+            width: 1.0,
+            radius: Radius::new(14.0),
         },
-        icon: theme.text_color(0.),
-        placeholder: theme.text_color(0.7),
-        value: theme.text_color(1.),
-        selection: theme.text_color(0.2),
+        ..Default::default()
     }
 }

src/app/tile/update.rs

@@ -219,7 +219,7 @@ pub fn handle_update(tile: &mut Tile, message: Message) -> Task<Message> {
                         id,
                         iced::Size {
                             width: WINDOW_WIDTH,
-                            height: ((max_elem * 55) + DEFAULT_WINDOW_HEIGHT as usize) as f32,
+                            height: ((max_elem * 70) + DEFAULT_WINDOW_HEIGHT as usize) as f32,
                         },
                     ),
                     Task::done(Message::ChangeFocus(ArrowKey::Left)),
@@ -230,7 +230,7 @@ pub fn handle_update(tile: &mut Tile, message: Message) -> Task<Message> {
                     id,
                     iced::Size {
                         width: WINDOW_WIDTH,
-                        height: ((element_count * 55) + DEFAULT_WINDOW_HEIGHT as usize) as f32,
+                        height: ((element_count * 70) + DEFAULT_WINDOW_HEIGHT as usize) as f32,
                     },
                 )
             } else {