improv: color schemes

- added view for empty color schemes
- divided installed and available with tabs
- removed `with_children` where possible
- re-enabled wgpu feature to fix scroll perf
- moved context dependent buttons to footer
- made color schemes page responsive

Author: edfloreshz

Cargo.lock

@@ -22,7 +22,7 @@ chrono = { version = "0.4.38", features = ["serde"] }
 [dependencies.libcosmic]
 git = "https://github.com/pop-os/libcosmic.git"
 default-features = false
-features = ["tokio", "winit", "about"]
+features = ["tokio", "winit", "wgpu", "about"]
 
 [dependencies.cosmic-ext-config-templates]
 git = "https://github.com/ryanabx/cosmic-ext-config-templates"

Cargo.toml

@@ -15,6 +15,7 @@ import-color-scheme = Import color scheme
 delete-color-scheme = Delete color scheme
 available-color-schemes-body = Find and install color schemes
 install-color-scheme = Install color scheme
+set-color-scheme = Set color scheme
 find-color-schemes = Find color schemes
 open-containing-folder = Open containing folder
 open-link = Open link
@@ -80,4 +81,4 @@ view = View
 ## Shortcuts
 
 warning = Warning: this will remove your existing custom shortcuts
-windows-desc = Super+Arrows to move windows. Ctrl+Alt+Arrows to navigate workspaces.
+windows-desc = Super+Arrows to move windows. Ctrl+Alt+Arrows to navigate workspaces.

i18n/en/cosmic_ext_tweaks.ftl

@@ -21,7 +21,6 @@ use cosmic::{
     Application, ApplicationExt, Apply, Element, Task,
 };
 use key_bind::key_binds;
-use pages::color_schemes::providers::cosmic_themes::CosmicTheme;
 
 use crate::{
     app::{
@@ -32,7 +31,7 @@ use crate::{
     fl,
     pages::{
         self,
-        color_schemes::{config::ColorScheme, preview, ColorSchemeProvider, ColorSchemes},
+        color_schemes::{self, ColorSchemes, Status, Tab},
         dock::Dock,
         layouts::Layouts,
         panel::Panel,
@@ -67,23 +66,12 @@ pub struct TweakTool {
     app_themes: Vec<String>,
     config_handler: Option<cosmic_config::Config>,
     config: TweaksConfig,
-    available: Vec<ColorScheme>,
-    status: Status,
-    limit: usize,
-    offset: usize,
-}
-
-pub enum Status {
-    Idle,
-    Loading,
-    LoadingMore,
 }
 
 #[derive(Clone, Debug, Eq, PartialEq)]
 pub enum DialogPage {
     SaveCurrentColorScheme(String),
     CreateSnapshot(String),
-    AvailableColorSchemes,
 }
 
 #[derive(Debug, Clone)]
@@ -102,8 +90,6 @@ pub enum Message {
     ToggleContextDrawer,
     ToggleDialogPage(DialogPage),
     AppTheme(usize),
-    FetchAvailableColorSchemes(ColorSchemeProvider, usize),
-    SetAvailableColorSchemes(Vec<ColorScheme>),
     Key(Modifiers, Key),
     Modifiers(Modifiers),
     SystemThemeModeChange,
@@ -213,18 +199,16 @@ impl Application for TweakTool {
             app_themes: vec![fl!("match-desktop"), fl!("dark"), fl!("light")],
             config_handler: flags.config_handler,
             config: flags.config,
-            available: vec![],
-            status: Status::Idle,
-            limit: 15,
-            offset: 0,
             shorcuts: Shortcuts::new(),
         };
 
         let mut tasks = vec![
-            app.update(Message::FetchAvailableColorSchemes(
-                ColorSchemeProvider::CosmicThemes,
-                app.limit,
-            )),
+            app.update(Message::ColorSchemes(Box::new(
+                color_schemes::Message::FetchAvailableColorSchemes(
+                    color_schemes::ColorSchemeProvider::CosmicThemes,
+                    app.color_schemes.limit,
+                ),
+            ))),
             app.update(Message::Snapshots(
                 pages::snapshots::Message::CreateSnapshot(
                     fl!("application-opened"),
@@ -319,17 +303,17 @@ impl Application for TweakTool {
                     widget::button::standard(fl!("cancel")).on_press(Message::DialogCancel),
                 )
                 .control(
-                    widget::column::with_children(vec![
-                        widget::text::body(fl!("color-scheme-name")).into(),
-                        widget::text_input("", name.as_str())
-                            .id(self.dialog_text_input.clone())
-                            .on_input(move |name| {
-                                Message::DialogUpdate(DialogPage::SaveCurrentColorScheme(name))
-                            })
-                            .on_submit(Message::DialogComplete)
-                            .into(),
-                    ])
-                    .spacing(spacing.space_xxs),
+                    widget::column()
+                        .push(widget::text::body(fl!("color-scheme-name")))
+                        .push(
+                            widget::text_input("", name.as_str())
+                                .id(self.dialog_text_input.clone())
+                                .on_input(move |name| {
+                                    Message::DialogUpdate(DialogPage::SaveCurrentColorScheme(name))
+                                })
+                                .on_submit(Message::DialogComplete),
+                        )
+                        .spacing(spacing.space_xxs),
                 ),
             DialogPage::CreateSnapshot(name) => widget::dialog()
                 .title(fl!("create-snapshot"))
@@ -349,39 +333,6 @@ impl Application for TweakTool {
                         })
                         .on_submit(Message::DialogComplete),
                 ),
-            DialogPage::AvailableColorSchemes => {
-                let show_more_button: Option<Element<Message>> = match self.status {
-                    Status::Idle => Some(
-                        widget::button::text(fl!("show-more"))
-                            .on_press(Message::FetchAvailableColorSchemes(
-                                ColorSchemeProvider::CosmicThemes,
-                                self.limit,
-                            ))
-                            .class(cosmic::style::Button::Standard)
-                            .into(),
-                    ),
-                    Status::LoadingMore => Some(
-                        widget::button::text(fl!("loading"))
-                            .class(cosmic::style::Button::Standard)
-                            .into(),
-                    ),
-                    Status::Loading => None,
-                };
-
-                let mut dialog = widget::dialog()
-                    .title(fl!("available"))
-                    .body(fl!("available-color-schemes-body"))
-                    .secondary_action(
-                        widget::button::standard(fl!("close")).on_press(Message::DialogCancel),
-                    )
-                    .control(self.available_themes());
-
-                if let Some(show_more_button) = show_more_button {
-                    dialog = dialog.primary_action(show_more_button);
-                }
-
-                dialog
-            }
         };
 
         Some(dialog.into())
@@ -405,14 +356,74 @@ impl Application for TweakTool {
             Page::Shortcuts => self.shorcuts.view().map(Message::Shortcuts),
         };
 
-        widget::column::with_children(vec![view])
+        widget::column()
+            .push(view)
             .padding(spacing.space_xs)
             .width(Length::Fill)
             .height(Length::Fill)
             .align_x(Alignment::Center)
             .into()
     }
 
+    fn footer(&self) -> Option<Element<Self::Message>> {
+        let spacing = cosmic::theme::active().cosmic().spacing;
+
+        match self.nav_model.active_data::<Page>() {
+            Some(Page::ColorSchemes) => match self.color_schemes.model.active_data::<Tab>() {
+                Some(Tab::Installed) => Some(
+                    widget::row()
+                        .push(widget::horizontal_space())
+                        .push(
+                            widget::button::standard(fl!("save-current-color-scheme"))
+                                .trailing_icon(icons::get_handle("arrow-into-box-symbolic", 16))
+                                .on_press(Message::ColorSchemes(Box::new(
+                                    color_schemes::Message::SaveCurrentColorScheme(None),
+                                ))),
+                        )
+                        .push(
+                            widget::button::standard(fl!("import-color-scheme"))
+                                .trailing_icon(icons::get_handle("document-save-symbolic", 16))
+                                .on_press(Message::ColorSchemes(Box::new(
+                                    color_schemes::Message::StartImport,
+                                ))),
+                        )
+                        .spacing(spacing.space_xxs)
+                        .apply(widget::container)
+                        .class(cosmic::style::Container::Card)
+                        .padding(spacing.space_xxs)
+                        .into(),
+                ),
+                Some(Tab::Available) => Some(
+                    widget::row()
+                        .push(widget::horizontal_space())
+                        .push(match self.color_schemes.status {
+                            Status::Idle => widget::button::standard(fl!("show-more"))
+                                .leading_icon(crate::core::icons::get_handle(
+                                    "content-loading-symbolic",
+                                    16,
+                                ))
+                                .on_press(Message::ColorSchemes(Box::new(
+                                    color_schemes::Message::FetchAvailableColorSchemes(
+                                        color_schemes::ColorSchemeProvider::CosmicThemes,
+                                        self.color_schemes.limit,
+                                    ),
+                                ))),
+                            Status::LoadingMore | Status::Loading => {
+                                widget::button::standard(fl!("loading"))
+                            }
+                        })
+                        .spacing(spacing.space_xxs)
+                        .apply(widget::container)
+                        .class(cosmic::style::Container::Card)
+                        .padding(spacing.space_xxs)
+                        .into(),
+                ),
+                None => None,
+            },
+            _ => None,
+        }
+    }
+
     fn update(&mut self, message: Self::Message) -> cosmic::Task<app::Message<Self::Message>> {
         // Helper for updating config values efficiently
         macro_rules! config_set {
@@ -448,45 +459,6 @@ impl Application for TweakTool {
                     log::error!("{err}")
                 }
             }
-            Message::FetchAvailableColorSchemes(provider, limit) => {
-                if self.offset == 0 {
-                    self.status = Status::Loading;
-                } else {
-                    self.status = Status::LoadingMore;
-                }
-                self.limit = limit;
-                self.offset += self.limit;
-                let limit = self.limit;
-                let offset = self.offset;
-                tasks.push(Task::perform(
-                    async move {
-                        let url = match provider {
-                            ColorSchemeProvider::CosmicThemes => {
-                                format!("https://cosmic-themes.org/api/themes/?order=name&limit={}&offset={}", limit, offset)
-                            }
-                        };
-
-                        let response = reqwest::get(url).await?;
-                        let themes: Vec<CosmicTheme> = response.json().await?;
-                        let available = themes
-                            .into_iter()
-                            .map(ColorScheme::from)
-                            .collect();
-                        Ok(available)
-                    },
-                    |res: Result<Vec<ColorScheme>, reqwest::Error>| match res {
-                        Ok(themes) => cosmic::app::Message::App(Message::SetAvailableColorSchemes(themes)),
-                        Err(e) => {
-                            log::error!("{e}");
-                            cosmic::app::Message::App(Message::SetAvailableColorSchemes(vec![]))
-                        }
-                    },
-                ));
-            }
-            Message::SetAvailableColorSchemes(mut available) => {
-                self.status = Status::Idle;
-                self.available.append(&mut available);
-            }
             Message::AppTheme(index) => {
                 let app_theme = match index {
                     1 => AppTheme::Dark,
@@ -535,9 +507,6 @@ impl Application for TweakTool {
                         DialogPage::SaveCurrentColorScheme(String::new()),
                     )))
                 }
-                pages::color_schemes::Message::OpenAvailableThemes => tasks.push(
-                    self.update(Message::ToggleDialogPage(DialogPage::AvailableColorSchemes)),
-                ),
                 _ => tasks.push(
                     self.color_schemes
                         .update(*message)
@@ -569,7 +538,6 @@ impl Application for TweakTool {
                                 pages::snapshots::Message::CreateSnapshot(name, SnapshotKind::User),
                             )))
                         }
-                        DialogPage::AvailableColorSchemes => (),
                     }
                 }
             }
@@ -645,6 +613,7 @@ impl Application for TweakTool {
 
 impl TweakTool {
     fn update_config(&mut self) -> Task<cosmic::app::Message<Message>> {
+        self.color_schemes.refresh_theme_mode();
         app::command::set_theme(self.config.app_theme.theme())
     }
 
@@ -666,34 +635,4 @@ impl TweakTool {
             .into()])
         .into()
     }
-
-    fn available_themes<'a>(&self) -> Element<'a, Message> {
-        let spacing = cosmic::theme::active().cosmic().spacing;
-
-        let loading: Option<Element<'a, Message>> = if let Status::Loading = self.status {
-            Some(widget::text(fl!("loading")).into())
-        } else {
-            None
-        };
-
-        let available: Option<Element<'a, Message>> = match self.status {
-            Status::Idle | Status::LoadingMore => {
-                let themes: Vec<Element<Message>> =
-                    self.available.iter().map(preview::available).collect();
-                let widgets = widget::flex_row(themes)
-                    .row_spacing(spacing.space_xs)
-                    .column_spacing(spacing.space_xs)
-                    .apply(widget::container)
-                    .padding([0, spacing.space_xxs]);
-                Some(widgets.into())
-            }
-            Status::Loading => None,
-        };
-
-        widget::container(widget::scrollable(widget::column::with_children(
-            loading.into_iter().chain(available).collect(),
-        )))
-        .height(Length::Fixed(450.0))
-        .into()
-    }
 }

res/icons/bundled/selection-mode-symbolic.svg

@@ -57,6 +57,7 @@ impl IconCache {
         bundle!("list-add-symbolic", 16);
         bundle!("symbolic-link-symbolic", 14);
         bundle!("user-trash-symbolic", 14);
+        bundle!("selection-mode-symbolic", 14);
         bundle!("folder-download-symbolic", 14);
         bundle!("arrow-circular-bottom-right-symbolic", 14);