Implemented Expander

- Updated example to show behavior
- Created styles for Expander and ExpanderRow
- Simpler implementation of `ExpanderRow`
- Deleted `ExpanderData` and replaced it with `ExpanderRow`
- Every row can now have child rows.
- Ran cargo fmt.
- Deleted settings example
- Added expander to cosmic example
- Expander icons now render

ListBox partially implemented

src/widget/expander.rs

@@ -1,81 +1,232 @@
 use std::vec;
 
+use crate::list_box_row;
 use apply::Apply;
+use derive_setters::Setters;
 use iced::{
-    Element,
-    Length,
-    widget::{
-        row, 
-        horizontal_space, button, container, text, Column
-    }, alignment::{Vertical, Horizontal}, theme 
+    theme,
+    widget::{self, button, container, horizontal_space, row, text, Column},
+    Alignment, Background, Element, Length, Renderer, Theme,
 };
-use iced_native::widget::column;
+use iced_lazy::Component;
+use iced_native::widget::{column, event_container, horizontal_rule};
 
-#[derive(Default)]
-pub struct Expander
-{
-    pub expanded: bool
+#[derive(Setters)]
+pub struct Expander<'a, Message> {
+    title: &'a str,
+    #[setters(strip_option)]
+    subtitle: Option<&'a str>,
+    #[setters(strip_option)]
+    icon: Option<String>,
+    expansible: bool,
+    #[setters(skip)]
+    rows: Option<Vec<ExpanderRow<'a>>>,
+    #[setters(strip_option)]
+    on_row_selected: Option<Box<dyn Fn(usize) -> Message + 'a>>,
+}
+
+pub fn expander<'a, Message>() -> Expander<'a, Message> {
+    Expander {
+        title: "",
+        subtitle: None,
+        icon: None,
+        expansible: false,
+        rows: None,
+        on_row_selected: None,
+    }
+}
+
+#[derive(Setters, Default, Debug, Clone)]
+pub struct ExpanderRow<'a> {
+    pub(crate) title: &'a str,
+    #[setters(strip_option)]
+    pub subtitle: Option<&'a str>,
+    #[setters(strip_option)]
+    pub icon: Option<String>,
+}
+
+pub fn expander_row<'a>() -> ExpanderRow<'a> {
+    ExpanderRow {
+        title: "",
+        subtitle: None,
+        icon: None,
+    }
+}
+
+pub struct ExpanderState {
+    pub expanded: bool,
+}
+
+impl Default for ExpanderState {
+    fn default() -> Self {
+        Self { expanded: true }
+    }
 }
 
 #[derive(Clone, Copy, Debug)]
-pub enum ExpanderMsg {
+pub enum ExpanderEvent {
     Expand,
+    RowSelected(usize),
 }
 
-impl Expander {
-    pub fn new() -> Self {
-        Self::default()
+impl<'a, Message> Expander<'a, Message> {
+    pub fn rows(mut self, rows: Vec<ExpanderRow<'a>>) -> Self {
+        self.rows = Some(rows);
+        self.expansible = true;
+        self
     }
 
-    pub fn render<'a, T>(&self, children: Vec<Element<'a, T>>) -> Element<'a, T> 
-        where T: Clone + From<ExpanderMsg> + 'static
-    {
-        let title = text("Title")
-            .size(18)
-            .vertical_alignment(Vertical::Center)
-            .horizontal_alignment(Horizontal::Center)
-            .into();
-        let subtitle = iced::widget::text("Subtitle")
-            .size(14)
-            .vertical_alignment(Vertical::Center)
-            .horizontal_alignment(Horizontal::Center)
-            .into();
-        let header = column(
-            vec![title, subtitle]
-        ).into();
-        let space = horizontal_space(Length::Fill).into();
-        let icon = super::icon(
-            if self.expanded {
-                "go-down-symbolic"
-            } else {
-                "go-next-symbolic"
-            },
-            16
-        )
-        .apply(button)
-        .on_press(T::from(ExpanderMsg::Expand))
-        .width(Length::Units(25))
-        .into();
-    
-        container(
-            column(
-                if self.expanded {
-                    vec![
-                        row(vec![header, space, icon]).into(),
-                        container(
-                            Column::with_children(children)
-                        )
-                        .style(theme::Container::Transparent)
-                        .padding(5)
-                        .into()
-                    ]
-                } else {
-                    vec![row(vec![header, space, icon]).into()]
-                }
-            )
-            .padding(5)
-        )
-        .style(theme::Container::Box)
-        .into()
+    pub fn push(&mut self, row: ExpanderRow<'a>) {
+        if self.rows.is_none() {
+            self.rows = Some(vec![])
+        }
+        self.rows.as_mut().unwrap().push(row);
     }
-}
+}
+
+impl<'a, Message: Clone + 'a> Component<Message, Renderer> for Expander<'a, Message> {
+    type State = ExpanderState;
+
+    type Event = ExpanderEvent;
+
+    fn update(&mut self, state: &mut Self::State, event: Self::Event) -> Option<Message> {
+        match event {
+            ExpanderEvent::Expand => {
+                state.expanded = !state.expanded;
+                None
+            }
+            ExpanderEvent::RowSelected(index) => self
+                .on_row_selected
+                .as_ref()
+                .map(|on_row_selected| (on_row_selected)(index)),
+        }
+    }
+
+    fn view(&self, state: &Self::State) -> Element<Self::Event> {
+        let heading: Element<ExpanderEvent, Renderer> = {
+            let mut captions = vec![text(&self.title).size(18).into()];
+            if let Some(subtitle) = &self.subtitle {
+                captions.push(text(subtitle).size(16).into());
+            }
+            let text = column(captions);
+            let space: Element<ExpanderEvent, Renderer> = horizontal_space(Length::Fill).into();
+            let toggler: Element<ExpanderEvent, Renderer> = {
+                let mut icon = super::icon(
+                    if state.expanded {
+                        "go-down-symbolic"
+                    } else {
+                        "go-next-symbolic"
+                    },
+                    16,
+                )
+                .apply(button)
+                .width(Length::Units(25));
+                if self.expansible {
+                    icon = icon.on_press(ExpanderEvent::Expand);
+                }
+                icon.into()
+            };
+
+            let items = if let Some(icon) = &self.icon {
+                let icon = super::icon(icon.as_str(), 20)
+                    .apply(event_container)
+                    .padding(10);
+                row![icon, text, space, toggler]
+            } else {
+                row![text, space, toggler]
+            };
+
+            container(items.align_items(Alignment::Center))
+                .style(theme::Container::Custom(expander_heading_style))
+                .padding(10)
+                .into()
+        };
+
+        let rows: Vec<Element<_>> = if let Some(rows) = &self.rows {
+            rows.iter()
+                .enumerate()
+                .map(|(index, row)| {
+                    let subtitle = row.subtitle.unwrap_or_default();
+                    if let Some(icon) = &row.icon {
+                        list_box_row!(row.title, subtitle, icon.as_str())
+                            .apply(event_container)
+                            .on_press(ExpanderEvent::RowSelected(index))
+                            .into()
+                    } else {
+                        list_box_row!(row.title, subtitle)
+                            .apply(event_container)
+                            .on_press(ExpanderEvent::RowSelected(index))
+                            .into()
+                    }
+                })
+                .enumerate()
+                .flat_map(|(index, child)| {
+                    if index != rows.len() - 1 {
+                        vec![
+                            child,
+                            horizontal_rule(1)
+                                .style(theme::Rule::Custom(separator_style))
+                                .into(),
+                        ]
+                    } else {
+                        vec![child]
+                    }
+                })
+                .collect()
+        } else {
+            vec![]
+        };
+
+        let rows: Element<ExpanderEvent> = Column::with_children(rows).into();
+
+        let mut layout = vec![heading];
+        if state.expanded && self.expansible {
+            layout.push(rows)
+        }
+
+        column(layout)
+            .apply(widget::container)
+            .height(Length::Shrink)
+            .style(theme::Container::Custom(expander_row_style))
+            .into()
+    }
+}
+
+impl<'a, Message: Clone + 'a> From<Expander<'a, Message>> for Element<'a, Message> {
+    fn from(expander: Expander<'a, Message>) -> Self {
+        iced_lazy::component(expander)
+    }
+}
+
+pub fn expander_heading_style(theme: &Theme) -> widget::container::Appearance {
+    let primary = &theme.cosmic().primary;
+    let accent = &theme.cosmic().accent;
+    widget::container::Appearance {
+        text_color: Some(accent.base.into()),
+        background: Some(Background::Color(primary.divider.into())),
+        border_radius: 8.0,
+        border_width: 0.0,
+        border_color: primary.on.into(),
+    }
+}
+
+pub fn expander_row_style(theme: &Theme) -> widget::container::Appearance {
+    let cosmic = &theme.cosmic().primary;
+    widget::container::Appearance {
+        text_color: Some(cosmic.on.into()),
+        background: Some(Background::Color(cosmic.base.into())),
+        border_radius: 8.0,
+        border_width: 0.4,
+        border_color: cosmic.divider.into(),
+    }
+}
+
+pub fn separator_style(theme: &Theme) -> widget::rule::Appearance {
+    let cosmic = &theme.cosmic().primary;
+    widget::rule::Appearance {
+        color: cosmic.divider.into(),
+        width: 1,
+        radius: 0.0,
+        fill_mode: widget::rule::FillMode::Padded(10),
+    }
+}

src/widget/header_bar.rs

@@ -33,7 +33,7 @@ pub fn header_bar<Message>() -> HeaderBar<Message> {
         on_close: None,
         on_drag: None,
         on_maximize: None,
-        on_minimize: None
+        on_minimize: None,
     }
 }
 
@@ -53,25 +53,15 @@ impl<Message: Clone> Component<Message, Renderer> for HeaderBar<Message> {
 
     fn update(&mut self, _state: &mut Self::State, event: Self::Event) -> Option<Message> {
         match event {
-            HeaderEvent::Close => {
-                self.on_close.clone()
-            }
-            
-            HeaderEvent::ToggleSidebar => {
-                self.on_sidebar_toggle.clone()
-            }
-            
-            HeaderEvent::Drag => {
-                self.on_drag.clone()
-            }
-            
-            HeaderEvent::Maximize => {
-                self.on_maximize.clone()
-            }
-            
-            HeaderEvent::Minimize => {
-                self.on_minimize.clone()
-            }
+            HeaderEvent::Close => self.on_close.clone(),
+
+            HeaderEvent::ToggleSidebar => self.on_sidebar_toggle.clone(),
+
+            HeaderEvent::Drag => self.on_drag.clone(),
+
+            HeaderEvent::Maximize => self.on_maximize.clone(),
+
+            HeaderEvent::Minimize => self.on_minimize.clone(),
         }
     }
 

src/widget/icon.rs

@@ -1,7 +1,4 @@
-use iced::{
-    Length,
-    widget::svg,
-};
+use iced::{widget::svg, Length};
 
 pub fn icon(name: &str, size: u16) -> svg::Svg {
     let handle = match freedesktop_icons::lookup(name)
@@ -15,7 +12,7 @@ pub fn icon(name: &str, size: u16) -> svg::Svg {
         None => {
             eprintln!("icon '{}' size {} not found", name, size);
             svg::Handle::from_memory(Vec::new())
-        },
+        }
     };
     svg::Svg::new(handle)
         .width(Length::Units(size))

src/widget/list.rs

@@ -1,9 +1,4 @@
-use iced::{
-    Background,
-    Color,
-    Theme,
-    widget,
-};
+use iced::{widget, Background, Color, Theme};
 
 #[macro_export]
 macro_rules! list_item {

src/widget/list_box.rs

@@ -0,0 +1,488 @@
+use derive_setters::Setters;
+use iced::mouse::Interaction;
+use iced::{overlay, Alignment, Length, Padding, Point, Rectangle};
+use iced_native::event::Status;
+use iced_native::layout::flex::{resolve, Axis};
+use iced_native::layout::{Limits, Node};
+use iced_native::overlay::from_children;
+use iced_native::renderer::Style;
+use iced_native::widget::{column, horizontal_rule, Operation, Tree};
+use iced_native::{row, Clipboard, Element, Event, Layout, Shell, Widget, renderer, Background, Color};
+use iced_style::container::{Appearance, StyleSheet};
+use iced_style::theme;
+use iced_style::theme::Container;
+
+#[derive(Setters)]
+pub struct ListBox<'a, Message, Renderer>
+    where
+        Renderer: iced_native::Renderer,
+        Renderer::Theme: StyleSheet + iced_style::rule::StyleSheet,
+        <Renderer as iced_native::Renderer>::Theme: iced_style::rule::StyleSheet
+{
+    spacing: u16,
+    padding: Padding,
+    width: Length,
+    height: Length,
+    max_width: u32,
+    align_items: Alignment,
+    style: <Renderer::Theme as StyleSheet>::Style,
+    children: Vec<Element<'a, Message, Renderer>>,
+    #[setters(strip_option)]
+    placeholder: Option<Element<'a, Message, Renderer>>,
+    on_item_selected: Option<Box<dyn Fn(usize) -> Message + 'a>>,
+}
+
+impl<'a, Message: 'a, Renderer: iced_native::Renderer + 'a> ListBox<'a, Message, Renderer>
+where
+    Renderer::Theme: StyleSheet + iced_style::rule::StyleSheet,
+    <<Renderer as iced_native::Renderer>::Theme as StyleSheet>::Style: From<Container>,
+    <<Renderer as iced_native::Renderer>::Theme as iced_style::rule::StyleSheet>::Style: From<theme::Rule>
+{
+    /// The default padding of a [`ListBox`] drawn by this renderer.
+    pub const DEFAULT_PADDING: u16 = 0;
+
+    /// Creates an empty [`ListBox`].
+    pub fn new() -> Self {
+        Self::with_children(Vec::<Element<Message, Renderer>>::new(), true)
+    }
+
+    /// Creates a new [`ListBox`].
+    ///
+    /// [`ListBox`]: struct.ListBox.html
+    pub fn with_children(
+        children: Vec<Element<'a, Message, Renderer>>,
+        show_separators: bool,
+    ) -> Self {
+        let end = children.len() - 1;
+        let children: Vec<Element<Message, Renderer>> = children
+            .into_iter()
+            .enumerate()
+            .map(|(index, child)| {
+                let row_items = if show_separators && index != end {
+                    vec![
+                        row![child]
+                            .align_items(Alignment::Center)
+                            .into(),
+                        horizontal_rule(1).style(theme::Rule::Custom(separator_style)).into(),
+                    ]
+                } else {
+                    vec![
+                        row![child]
+                            .align_items(Alignment::Center)
+                            .into()
+                    ]
+                };
+                column(row_items).into()
+            })
+            .collect();
+        Self {
+            spacing: 0,
+            padding: Padding::from(Self::DEFAULT_PADDING),
+            width: Length::Shrink,
+            height: Length::Shrink,
+            max_width: u32::MAX,
+            align_items: Alignment::Start,
+            style: Default::default(),
+            children,
+            placeholder: None,
+            on_item_selected: None,
+        }
+    }
+
+    /// Adds an element to the [`ListBox`].
+    pub fn push(mut self, child: impl Into<Element<'a, Message, Renderer>>) -> Self {
+        self.children.push(child.into());
+        self
+    }
+}
+
+impl<'a, Message: 'a, Renderer: iced_native::Renderer + 'a> std::default::Default
+    for ListBox<'a, Message, Renderer>
+where
+    Renderer::Theme: StyleSheet + iced_style::rule::StyleSheet,
+    <<Renderer as iced_native::Renderer>::Theme as StyleSheet>::Style: From<Container>,
+    <<Renderer as iced_native::Renderer>::Theme as iced_style::rule::StyleSheet>::Style: From<theme::Rule>
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for ListBox<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    <Renderer as iced_native::Renderer>::Theme: StyleSheet + iced_style::rule::StyleSheet
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
+        let limits = limits
+            .max_width(self.max_width)
+            .width(self.width)
+            .height(self.height);
+
+        if !self.children.is_empty() {
+            resolve(
+                Axis::Vertical,
+                renderer,
+                &limits,
+                self.padding,
+                self.spacing as f32,
+                self.align_items,
+                &self.children,
+            )
+        } else if self.placeholder.is_some() {
+            self.placeholder
+                .as_ref()
+                .unwrap()
+                .as_widget()
+                .layout(renderer, &limits)
+        } else {
+            Node::default()
+        }
+    }
+
+    fn draw(
+        &self,
+        state: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        style: &Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+    ) {
+        let color_scheme = theme.appearance(self.style);
+
+        draw_background(renderer, &color_scheme, layout.bounds());
+
+        if !self.children.is_empty() {
+            for ((child, state), layout) in self
+                .children
+                .iter()
+                .zip(&state.children)
+                .zip(layout.children())
+            {
+                child.as_widget().draw(
+                    state,
+                    renderer,
+                    theme,
+                    style,
+                    layout,
+                    cursor_position,
+                    viewport,
+                );
+            }
+        } else if let Some(placeholder) = &self.placeholder {
+            placeholder.as_widget().draw(
+                state,
+                renderer,
+                theme,
+                style,
+                layout,
+                cursor_position,
+                viewport,
+            );
+        }
+    }
+
+    fn children(&self) -> Vec<Tree> {
+        let widgets = if !self.children.is_empty() {
+            self.children.iter().map(Tree::new).collect()
+        } else if let Some(placeholder) = &self.placeholder {
+            vec![Tree::new(placeholder)]
+        } else {
+            vec![Tree::empty()]
+        };
+        widgets
+    }
+
+    fn diff(&self, tree: &mut Tree) {
+        if !self.children.is_empty() {
+            tree.diff_children(&self.children);
+        } else if let Some(placeholder) = &self.placeholder {
+            tree.diff_children(&[placeholder]);
+        }
+    }
+
+    fn operate(
+        &self,
+        state: &mut Tree,
+        layout: Layout<'_>,
+        operation: &mut dyn Operation<Message>,
+    ) {
+        if !self.children.is_empty() {
+            operation.container(None, &mut |operation| {
+                self.children
+                    .iter()
+                    .zip(&mut state.children)
+                    .zip(layout.children())
+                    .for_each(|((child, state), layout)| {
+                        child.as_widget().operate(state, layout, operation);
+                    })
+            });
+        } else if let Some(placeholder) = &self.placeholder {
+            placeholder.as_widget().operate(state, layout, operation);
+        }
+    }
+
+    fn on_event(
+        &mut self,
+        state: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> Status {
+        if !self.children.is_empty() {
+            self.children
+                .iter_mut()
+                .zip(&mut state.children)
+                .zip(layout.children())
+                .map(|((child, state), layout)| {
+                    child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        layout,
+                        cursor_position,
+                        renderer,
+                        clipboard,
+                        shell,
+                    )
+                })
+                .fold(Status::Ignored, Status::merge)
+        } else if self.placeholder.is_some() {
+            self.placeholder.as_mut().unwrap().as_widget_mut().on_event(
+                &mut state.children[0],
+                event,
+                layout,
+                cursor_position,
+                renderer,
+                clipboard,
+                shell,
+            )
+        } else {
+            Status::Ignored
+        }
+    }
+
+    fn mouse_interaction(
+        &self,
+        state: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> Interaction {
+        if !self.children.is_empty() {
+            self.children
+                .iter()
+                .zip(&state.children)
+                .zip(layout.children())
+                .map(|((child, state), layout)| {
+                    child.as_widget().mouse_interaction(
+                        state,
+                        layout,
+                        cursor_position,
+                        viewport,
+                        renderer,
+                    )
+                })
+                .max()
+                .unwrap_or_default()
+        } else if let Some(placeholder) = &self.placeholder {
+            placeholder.as_widget().mouse_interaction(
+                &state.children[0],
+                layout,
+                cursor_position,
+                viewport,
+                renderer,
+            )
+        } else {
+            Interaction::Idle
+        }
+    }
+
+    fn overlay<'b>(
+        &'b self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        if !self.children.is_empty() {
+            from_children(&self.children, tree, layout, renderer)
+        } else if let Some(placeholder) = &self.placeholder {
+            placeholder
+                .as_widget()
+                .overlay(&mut tree.children[0], layout, renderer)
+        } else {
+            None
+        }
+    }
+}
+
+/// Draws the background of a [`Container`] given its [`Style`] and its `bounds`.
+pub fn draw_background<Renderer>(
+    renderer: &mut Renderer,
+    appearance: &Appearance,
+    bounds: Rectangle,
+) where
+    Renderer: iced_native::Renderer,
+{
+    if appearance.background.is_some() || appearance.border_width > 0.0 {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_radius: appearance.border_radius,
+                border_width: appearance.border_width,
+                border_color: appearance.border_color,
+            },
+            appearance
+                .background
+                .unwrap_or(Background::Color(Color::TRANSPARENT)),
+        );
+    }
+}
+
+impl<'a, Message: 'a, Renderer: iced_native::Renderer + 'a> From<ListBox<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+    where <Renderer as iced_native::Renderer>::Theme: StyleSheet + iced_style::rule::StyleSheet
+{
+    fn from(list_box: ListBox<'a, Message, Renderer>) -> Self {
+        Self::new(list_box)
+    }
+}
+
+#[macro_export]
+macro_rules! list_box_item {
+    ($($x:expr),+ $(,)?) => (
+        $crate::iced::widget::row![
+            column(vec![
+                $($x),+
+            ])
+        ]
+    );
+}
+pub use list_box_item;
+
+#[macro_export]
+macro_rules! list_box_heading {
+    ($title:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                text($title).size(18),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .style($crate::iced::theme::Container::Custom($crate::widget::expander_heading_style))
+        .max_height(60)
+        .padding(10)
+    );
+    ($title:expr, $subtitle:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                column(
+                    vec![
+                        text($title).size(18).into(),
+                        text($subtitle).size(16).into(),
+                    ]
+                ),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .style($crate::iced::theme::Container::Custom($crate::widget::expander_heading_style))
+        .max_height(60)
+        .padding(10)
+    );
+    ($title:expr, $subtitle:expr, $icon:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                container($crate::widget::icon($icon, 20)).padding(10),
+                column(
+                    vec![
+                        text($title).size(18).into(),
+                        text($subtitle).size(16).into(),
+                    ]
+                ),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .style($crate::iced::theme::Container::Custom($crate::widget::expander_heading_style))
+        .max_height(60)
+        .padding(10)
+    );
+}
+pub use list_box_heading;
+
+#[macro_export]
+macro_rules! list_box_row {
+    ($title:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                text($title).size(18),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .max_height(60)
+        .padding(10)
+    );
+    ($title:expr, $subtitle:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                column(
+                    vec![
+                        text($title).size(18).into(),
+                        text($subtitle).size(16).into(),
+                    ]
+                ),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .max_height(60)
+        .padding(10)
+    );
+    ($title:expr, $subtitle:expr, $icon:expr) => (
+        $crate::iced::widget::container(
+            $crate::iced::widget::row![
+                container($crate::widget::icon($icon, 20)).padding(10),
+                column(
+                    vec![
+                        text($title).size(18).into(),
+                        text($subtitle).size(16).into(),
+                    ]
+                ),
+                $crate::iced::widget::vertical_space(Length::Fill),
+                $crate::iced::widget::horizontal_space(Length::Fill)
+            ]
+            .height(Length::Fill)
+            .align_items($crate::iced::alignment::Alignment::Center)
+        )
+        .max_height(60)
+        .padding(10)
+    );
+}
+pub use list_box_row;
+use crate::widget::separator_style;

src/widget/mod.rs

@@ -24,3 +24,6 @@ pub use scrollable::*;
 
 mod expander;
 pub use expander::*;
+
+pub mod list_box;
+pub use list_box::*;

src/widget/nav.rs

@@ -1,9 +1,4 @@
-use iced::{
-    Background,
-    Color,
-    Theme,
-    widget
-};
+use iced::{widget, Background, Color, Theme};
 
 #[macro_export]
 macro_rules! nav_bar {
@@ -42,21 +37,16 @@ pub fn nav_bar_style(theme: &Theme) -> widget::container::Appearance {
 
 #[macro_export]
 macro_rules! nav_button {
-    ($icon: expr, $title:expr, $condensed:expr) => ({
+    ($icon: expr, $title:expr, $condensed:expr) => {{
         if $condensed {
-            $crate::iced::widget::Button::new(
-                $crate::widget::icon($icon, 22)
-            )
-            .padding(8)
+            $crate::iced::widget::Button::new($crate::widget::icon($icon, 22)).padding(8)
         } else {
             $crate::widget::button!(
                 $crate::widget::icon($icon, 22),
                 $crate::iced::widget::Text::new($title),
-                $crate::iced::widget::horizontal_space(
-                    $crate::iced::Length::Fill
-                ),
+                $crate::iced::widget::horizontal_space($crate::iced::Length::Fill),
             )
         }
-    });
+    }};
 }
 pub use nav_button;

src/widget/navbar.rs

@@ -1,26 +1,15 @@
 use iced::{
-    Element, 
-    Padding, 
-    Length, 
-    Alignment, 
-    widget::{
-        Container,
-        Column, 
-        scrollable
-    },
-     alignment
+    alignment,
+    widget::{scrollable, Column, Container},
+    Alignment, Element, Length, Padding,
 };
 use iced_native::{
-    Widget, 
+    renderer, row,
     widget::{
-        Tree, 
-        container::{
-            layout, 
-            draw_background
-        }
-    }, 
-    row,
-    renderer
+        container::{draw_background, layout},
+        Tree,
+    },
+    Widget,
 };
 use iced_style::container::StyleSheet;
 
@@ -45,27 +34,25 @@ where
 }
 
 impl<'a, Message: 'a, Renderer> NavBar<'a, Message, Renderer>
-where 
+where
     Renderer: iced_native::Renderer + 'a,
     Renderer::Theme: StyleSheet,
 {
     /// Creates a [`NavBar`] with the given elements.
-    pub fn with_children(
-        children: Vec<Element<'a, Message, Renderer>>,
-    ) -> Self where <Renderer as iced_native::Renderer>::Theme: iced_style::scrollable::StyleSheet {
+    pub fn with_children(children: Vec<Element<'a, Message, Renderer>>) -> Self
+    where
+        <Renderer as iced_native::Renderer>::Theme: iced_style::scrollable::StyleSheet,
+    {
         let nav = Self::default();
         NavBar {
             content: Container::new(
-                scrollable(
-                    row![
-                        Column::with_children(children)
-                            .spacing(nav.spacing)
-                            .padding(nav.padding)
-                    ]
-                )
+                scrollable(row![Column::with_children(children)
+                    .spacing(nav.spacing)
+                    .padding(nav.padding)])
                 .scrollbar_width(6)
-                .scroller_width(6)
-            ).into(),
+                .scroller_width(6),
+            )
+            .into(),
             ..Default::default()
         }
     }
@@ -74,7 +61,7 @@ where
         self.condensed = condensed;
         self
     }
-    
+
     pub fn active(mut self, active: bool) -> Self {
         self.active = active;
         self
@@ -126,22 +113,19 @@ where
     }
 
     /// Sets the style of the [`NavBar`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<<Renderer::Theme as StyleSheet>::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
 impl<'a, Message: 'a, Renderer> Default for NavBar<'a, Message, Renderer>
-where 
+where
     Renderer: iced_native::Renderer + 'a,
     Renderer::Theme: StyleSheet,
 {
     fn default() -> Self {
-        Self { 
+        Self {
             spacing: 12,
             padding: Padding::new(12),
             width: Length::Shrink,
@@ -152,27 +136,18 @@ where
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
             style: Default::default(),
-            condensed: false, 
-            active: true, 
+            condensed: false,
+            active: true,
             content: Container::new(row![Column::new()]).into(),
         }
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for NavBar<'a, Message, Renderer>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for NavBar<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
     Renderer::Theme: StyleSheet,
 {
-    fn children(&self) -> Vec<iced_native::widget::Tree> {
-        vec![Tree::new(&self.content)]
-    }
-
-    fn diff(&self, tree: &mut Tree) {
-        tree.diff_children(std::slice::from_ref(&self.content))
-    }
-
     fn width(&self) -> Length {
         self.width
     }
@@ -191,11 +166,7 @@ where
             limits,
             self.width,
             self.height,
-            if self.condensed {
-                100
-            } else {
-                self.max_width
-            },
+            if self.condensed { 100 } else { self.max_width },
             self.max_height,
             if self.active {
                 self.padding
@@ -208,13 +179,51 @@ where
                 if self.active {
                     self.content.as_widget().layout(renderer, limits)
                 } else {
-                    let content: Element<Message, Renderer> = Container::new(row![Column::new()]).into();
+                    let content: Element<Message, Renderer> =
+                        Container::new(row![Column::new()]).into();
                     content.as_widget().layout(renderer, limits)
                 }
             },
         )
     }
-    
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        renderer_style: &iced_native::renderer::Style,
+        layout: iced_native::Layout<'_>,
+        cursor_position: iced::Point,
+        viewport: &iced::Rectangle,
+    ) {
+        if self.active {
+            let style = theme.appearance(self.style);
+
+            draw_background(renderer, &style, layout.bounds());
+
+            self.content.as_widget().draw(
+                &tree.children[0],
+                renderer,
+                theme,
+                &renderer::Style {
+                    text_color: style.text_color.unwrap_or(renderer_style.text_color),
+                },
+                layout.children().next().unwrap(),
+                cursor_position,
+                viewport,
+            );
+        }
+    }
+
+    fn children(&self) -> Vec<iced_native::widget::Tree> {
+        vec![Tree::new(&self.content)]
+    }
+
+    fn diff(&self, tree: &mut Tree) {
+        tree.diff_children(std::slice::from_ref(&self.content))
+    }
+
     fn operate(
         &self,
         tree: &mut Tree,
@@ -268,37 +277,6 @@ where
         )
     }
 
-    fn draw(
-        &self,
-        tree: &Tree,
-        renderer: &mut Renderer,
-        theme: &Renderer::Theme,
-        renderer_style: &iced_native::renderer::Style,
-        layout: iced_native::Layout<'_>,
-        cursor_position: iced::Point,
-        viewport: &iced::Rectangle,
-    ) {
-        if self.active {
-            let style = theme.appearance(self.style);
-
-            draw_background(renderer, &style, layout.bounds());
-
-            self.content.as_widget().draw(
-                &tree.children[0],
-                renderer,
-                theme,
-                &renderer::Style {
-                    text_color: style
-                        .text_color
-                        .unwrap_or(renderer_style.text_color),
-                },
-                layout.children().next().unwrap(),
-                cursor_position,
-                viewport,
-            );
-        }
-    }
-
     fn overlay<'b>(
         &'b self,
         tree: &'b mut iced_native::widget::Tree,
@@ -311,11 +289,9 @@ where
             renderer,
         )
     }
-    
 }
 
-impl<'a, Message, Renderer> From<NavBar<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Renderer> From<NavBar<'a, Message, Renderer>> for Element<'a, Message, Renderer>
 where
     Message: 'a,
     Renderer: iced_native::Renderer + 'a,
@@ -334,4 +310,4 @@ macro_rules! navbar {
     ($($x:expr),+ $(,)?) => (
         $crate::widget::NavBar::with_children(vec![$($crate::iced::Element::from($x)),+])
     );
-}
+}

src/widget/scrollable.rs

@@ -1,8 +1,8 @@
 #[macro_export]
 macro_rules! scrollable {
-    ($x:expr) => (
+    ($x:expr) => {
         $crate::iced::widget::scrollable($x)
             .scrollbar_width(8)
             .scroller_width(8)
-    );
-}
+    };
+}

src/widget/toggler.rs

@@ -1,7 +1,4 @@
-use iced::{
-    Length,
-    widget,
-};
+use iced::{widget, Length};
 
 pub fn toggler<'a, Message, Renderer>(
     label: impl Into<Option<String>>,