feat: add Region & Language page

cosmic-settings/src/pages/bluetooth/mod.rs

@@ -135,7 +135,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let cancel_button =
                     widget::button::standard(fl!("cancel")).on_press(Message::PinCancel);
 
-                let dialog = widget::dialog(fl!("bluetooth-confirm-pin"))
+                let dialog = widget::dialog()
+                    .title(fl!("bluetooth-confirm-pin"))
                     .control(control)
                     .primary_action(confirm_button)
                     .secondary_action(cancel_button)

cosmic-settings/src/pages/desktop/appearance/mod.rs

@@ -24,7 +24,7 @@ use cosmic::widget::{
     button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, radio, row,
     scrollable, settings, spin_button, text, ColorPickerModel,
 };
-use cosmic::{Apply, Element, Task};
+use cosmic::{widget, Apply, Element, Task};
 #[cfg(feature = "wayland")]
 use cosmic_panel_config::CosmicPanelConfig;
 use cosmic_settings_page::Section;
@@ -408,6 +408,8 @@ impl Page {
         ]
         .spacing(theme.space_m())
         .width(Length::Fill)
+        .apply(widget::scrollable)
+        .height(Length::Fill)
         .apply(Element::from)
         .map(crate::pages::Message::Appearance)
     }

cosmic-settings/src/pages/desktop/panel/applets_inner.rs

@@ -308,17 +308,17 @@ impl Page {
             );
         }
 
-        column::with_children(vec![
-            text_input::search_input(fl!("search-applets"), &self.search)
-                .on_input(move |s| msg_map(Message::Search(s)))
-                .on_paste(move |s| msg_map(Message::Search(s)))
-                .width(Length::Fixed(312.0))
-                .into(),
-            list_column.into(),
-        ])
-        .align_x(Alignment::Center)
-        .spacing(space_xxs)
-        .into()
+        let search = text_input::search_input(fl!("search-applets"), &self.search)
+            .on_input(move |s| msg_map(Message::Search(s)))
+            .on_paste(move |s| msg_map(Message::Search(s)))
+            .width(Length::Fixed(312.0));
+
+        column::with_capacity(2)
+            .push(search)
+            .push(list_column)
+            .align_x(Alignment::Center)
+            .spacing(space_xxs)
+            .into()
     }
 
     #[allow(clippy::too_many_lines)]

cosmic-settings/src/pages/display/mod.rs

@@ -344,7 +344,8 @@ impl page::Page<crate::pages::Message> for Page {
     /// Task.
     fn dialog(&self) -> Option<Element<pages::Message>> {
         self.dialog?;
-        let element = widget::dialog(fl!("dialog", "title"))
+        let element = widget::dialog()
+            .title(fl!("dialog", "title"))
             .body(fl!("dialog", "change-prompt", time = self.dialog_countdown))
             .primary_action(
                 widget::button::suggested(fl!("dialog", "keep-changes"))

cosmic-settings/src/pages/input/keyboard/mod.rs

@@ -241,7 +241,7 @@ fn input_source(
 ) -> cosmic::Element<Message> {
     let expanded = expanded_source_popover.is_some_and(|expanded_id| expanded_id == id);
 
-    settings::flex_item(description, popover_button(id, expanded)).into()
+    settings::item(description, popover_button(id, expanded)).into()
 }
 
 fn special_char_radio_row<'a>(

cosmic-settings/src/pages/input/keyboard/shortcuts/common.rs

@@ -166,7 +166,8 @@ impl Model {
                         let secondary_action = button::standard(fl!("cancel"))
                             .on_press(ShortcutMessage::CancelReplace);
 
-                        let dialog = widget::dialog(fl!("replace-shortcut-dialog"))
+                        let dialog = widget::dialog()
+                            .title(fl!("replace-shortcut-dialog"))
                             .icon(icon::from_name("dialog-warning").size(64))
                             .body(fl!(
                                 "replace-shortcut-dialog",
@@ -521,7 +522,7 @@ fn context_drawer(
                 .into();
 
             let flex_control =
-                settings::flex_item_row(vec![input, delete_button]).align_items(Alignment::Center);
+                settings::item_row(vec![input, delete_button]).align_y(Alignment::Center);
 
             section.add(flex_control)
         },

cosmic-settings/src/pages/input/keyboard/shortcuts/custom.rs

@@ -321,7 +321,8 @@ impl page::Page<crate::pages::Message> for Page {
 
             let secondary_action = button::standard(fl!("cancel")).on_press(Message::ReplaceCancel);
 
-            let dialog = widget::dialog(fl!("replace-shortcut-dialog"))
+            let dialog = widget::dialog()
+                .title(fl!("replace-shortcut-dialog"))
                 .icon(icon::from_name("dialog-warning").size(64))
                 .body(fl!(
                     "replace-shortcut-dialog",

cosmic-settings/src/pages/networking/vpn/mod.rs

@@ -229,7 +229,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let primary_action =
                     widget::button::standard(fl!("ok")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("vpn-error"))
+                widget::dialog()
+                    .title(fl!("vpn-error"))
                     .icon(icon::from_name("dialog-error-symbolic").size(64))
                     .body(error_kind.localized())
                     .control(reason)
@@ -268,7 +269,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("auth-dialog"))
+                widget::dialog()
+                    .title(fl!("auth-dialog"))
                     .icon(icon::from_name("network-vpn-symbolic").size(64))
                     .body(fl!("auth-dialog", "vpn-description"))
                     .control(controls)
@@ -289,7 +291,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("wireguard-dialog"))
+                widget::dialog()
+                    .title(fl!("wireguard-dialog"))
                     .icon(icon::from_name("network-vpn-symbolic").size(64))
                     .body(fl!("wireguard-dialog", "description"))
                     .control(input)
@@ -306,7 +309,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("remove-connection-dialog"))
+                widget::dialog()
+                    .title(fl!("remove-connection-dialog"))
                     .icon(icon::from_name("dialog-information").size(64))
                     .body(fl!("remove-connection-dialog", "vpn-description"))
                     .primary_action(primary_action)

cosmic-settings/src/pages/networking/wifi.rs

@@ -158,7 +158,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("auth-dialog"))
+                widget::dialog()
+                    .title(fl!("auth-dialog"))
                     .icon(icon::from_name("preferences-wireless-symbolic").size(64))
                     .body(fl!("auth-dialog", "wifi-description"))
                     .control(password)
@@ -175,7 +176,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("forget-dialog"))
+                widget::dialog()
+                    .title(fl!("forget-dialog"))
                     .icon(icon::from_name("dialog-information").size(64))
                     .body(fl!("forget-dialog", "description"))
                     .primary_action(primary_action)

cosmic-settings/src/pages/networking/wired.rs

@@ -131,7 +131,8 @@ impl page::Page<crate::pages::Message> for Page {
                 let secondary_action =
                     widget::button::standard(fl!("cancel")).on_press(Message::CancelDialog);
 
-                widget::dialog(fl!("remove-connection-dialog"))
+                widget::dialog()
+                    .title(fl!("remove-connection-dialog"))
                     .icon(icon::from_name("dialog-information").size(64))
                     .body(fl!("remove-connection-dialog", "wired-description"))
                     .primary_action(primary_action)

cosmic-settings/src/pages/time/region.rs

@@ -6,7 +6,7 @@ use std::rc::Rc;
 use std::str::FromStr;
 use std::sync::Arc;
 
-use cosmic::iced::{Border, Color, Length};
+use cosmic::iced::{Alignment, Border, Color, Length};
 use cosmic::iced_core::text::Wrapping;
 use cosmic::widget::{self, button, container};
 use cosmic::{theme, Apply, Element};
@@ -137,7 +137,7 @@ impl page::Page<crate::pages::Message> for Page {
 
     fn on_enter(
         &mut self,
-        sender: mpsc::Sender<crate::pages::Message>,
+        _sender: mpsc::Sender<crate::pages::Message>,
     ) -> cosmic::Task<crate::pages::Message> {
         cosmic::command::future(async move { Message::Refresh(Arc::new(page_reload().await)) })
     }
@@ -162,8 +162,6 @@ impl Page {
                         }
                     }
                 }
-
-                return cosmic::command::message(crate::app::Message::CloseContextDrawer);
             }
 
             Message::SelectRegion(id) => {
@@ -291,7 +289,7 @@ impl Page {
     }
 
     fn add_language_view(&self) -> cosmic::Element<'_, crate::pages::Message> {
-        let space_l = theme::active().cosmic().spacing.space_l;
+        let cosmic::cosmic_theme::Spacing { space_l, .. } = theme::active().cosmic().spacing;
 
         let search = widget::search_input(fl!("type-to-search"), &self.add_language_search)
             .on_input(Message::AddLanguageSearch)
@@ -353,7 +351,10 @@ impl Page {
 
         let install_additional_button =
             widget::button::standard(fl!("install-additional-languages"))
-                .on_press(Message::InstallAdditionalLanguages);
+                .on_press(Message::InstallAdditionalLanguages)
+                .apply(widget::container)
+                .width(Length::Fill)
+                .align_x(Alignment::End);
 
         widget::column()
             .padding([2, 0])
@@ -499,6 +500,11 @@ impl Page {
     fn region_view(&self) -> cosmic::Element<'_, crate::pages::Message> {
         let space_l = theme::active().cosmic().spacing.space_l;
 
+        let svg_accent = Rc::new(|theme: &cosmic::Theme| {
+            let color = theme.cosmic().accent_color().into();
+            cosmic::widget::svg::Style { color: Some(color) }
+        });
+
         let search = widget::search_input(fl!("type-to-search"), &self.add_language_search)
             .on_input(Message::AddLanguageSearch)
             .on_clear(Message::AddLanguageSearch(String::new()));
@@ -515,24 +521,34 @@ impl Page {
                     .as_ref()
                     .map_or(false, |l| l.lang_code == locale.lang_code);
 
-                let button =
-                    widget::settings::item_row(vec![widget::text::body(&locale.region_name)
+                let button = widget::settings::item_row(vec![
+                    widget::text::body(&locale.region_name)
                         .class(if is_selected {
                             cosmic::theme::Text::Accent
                         } else {
                             cosmic::theme::Text::Default
                         })
                         .wrapping(Wrapping::Word)
-                        .into()])
-                    .apply(widget::container)
-                    .class(cosmic::theme::Container::List)
-                    .apply(widget::button::custom)
-                    .class(cosmic::theme::Button::Transparent)
-                    .on_press_maybe(if is_selected {
-                        None
+                        .into(),
+                    if is_selected {
+                        widget::icon::from_name("object-select-symbolic")
+                            .size(16)
+                            .icon()
+                            .class(cosmic::theme::Svg::Custom(svg_accent.clone()))
+                            .into()
                     } else {
-                        Some(Message::SelectRegion(id))
-                    });
+                        widget::horizontal_space().width(16).into()
+                    },
+                ])
+                .apply(widget::container)
+                .class(cosmic::theme::Container::List)
+                .apply(widget::button::custom)
+                .class(cosmic::theme::Button::Transparent)
+                .on_press_maybe(if is_selected {
+                    None
+                } else {
+                    Some(Message::SelectRegion(id))
+                });
 
                 list = list.add(button)
             }
@@ -599,10 +615,6 @@ mod preferred_languages {
                     .push(title)
                     .push(description)
                     .push(content)
-                    .push(
-                        widget::vertical_space()
-                            .height(cosmic::theme::active().cosmic().spacing.space_xxs),
-                    )
                     .push(add_language_button)
                     .spacing(cosmic::theme::active().cosmic().spacing.space_xxs)
                     .apply(cosmic::Element::from)
@@ -830,7 +842,7 @@ fn language_element(
 ) -> cosmic::Element<'static, Message> {
     let expanded = expanded_source_popover.is_some_and(|expanded_id| expanded_id == id);
 
-    widget::settings::flex_item(description, popover_button(id, expanded)).into()
+    widget::settings::item(description, popover_button(id, expanded)).into()
 }
 
 fn popover_button(id: usize, expanded: bool) -> Element<'static, Message> {

cosmic-settings/src/widget/mod.rs

@@ -23,24 +23,26 @@ pub fn color_picker_context_view<'a, Message: Clone + 'static>(
     let theme = theme::active();
     let spacing = &theme.cosmic().spacing;
 
-    cosmic::widget::column()
-        .push_maybe(description.map(|description| text(description).width(Length::Fill)))
-        .push(
-            model
-                .builder(on_update)
-                .reset_label(reset)
-                .height(Length::Fixed(158.0))
-                .build(
-                    fl!("recent-colors"),
-                    fl!("copy-to-clipboard"),
-                    fl!("copied-to-clipboard"),
-                )
-                .apply(container)
-                .width(Length::Fixed(248.0))
-                .align_x(Alignment::Center)
-                .apply(container)
-                .center_x(Length::Fill),
+    let description = description.map(|description| text(description).width(Length::Fill));
+
+    let color_picker = model
+        .builder(on_update)
+        .reset_label(reset)
+        .height(Length::Fixed(158.0))
+        .build(
+            fl!("recent-colors"),
+            fl!("copy-to-clipboard"),
+            fl!("copied-to-clipboard"),
         )
+        .apply(container)
+        .width(Length::Fixed(248.0))
+        .align_x(Alignment::Center)
+        .apply(container)
+        .center_x(Length::Fill);
+
+    cosmic::widget::column()
+        .push_maybe(description)
+        .push(color_picker)
         .padding(spacing.space_l)
         .align_x(Alignment::Center)
         .spacing(spacing.space_m)