✨ feat: feat: template gallery, site detection, and UI polish

- Template gallery: rewrite callback to fire directly in connect_activated
  instead of connect_destroy (GTK4 close() ≠ immediate destroy). Fix RefCell
  borrow panic when set_text triggers connect_changed during active borrow.

- Site detection (favicon.rs): switch reqwest native-tls → rustls-tls (fix
  builder error on systems w/o OpenSSL). Auto-prepend https:// when URL has
  no scheme. Always update name on re-detect (remove is_empty guard).

- Icon loading: centralize in load_icon() helper (webapp_row.rs). Use
  gdk-pixbuf for file-based SVGs at 4× pixel_size. Return icon name (not
  path) for hicolor dirs so GTK renders at correct size. Fix browser icons
  in browser_dialog.rs via same pipeline.

- Detect button: flat button w/ 24px globe icon (emblem-web-symbolic).

- CSS system: add style.rs w/ custom classes (.webapp-icon, .webapp-row,
  .action-btn). Load provider in connect_startup.

- Content wrap: AdwClamp max 900px in main window.

Author: talesam

Cargo.lock

@@ -27,7 +27,7 @@ env_logger = "0.11"
 anyhow = "1"
 dirs = "6"
 clap = { version = "4", features = ["derive"] }
-reqwest = { version = "0.12", default-features = false, features = ["native-tls", "blocking"] }
+reqwest = { version = "0.12", default-features = false, features = ["rustls-tls", "blocking"] }
 scraper = "0.22"
 zbus = "5"
 tokio = { version = "1", features = ["rt-multi-thread", "macros"] }

Cargo.toml

@@ -54,8 +54,9 @@ pub fn show(
             .build();
 
         // browser icon
-        let icon = gtk::Image::from_icon_name(&browser.icon_name());
+        let icon = gtk::Image::new();
         icon.set_pixel_size(32);
+        crate::webapp_row::load_icon(&icon, &browser.icon_name());
         row.add_prefix(&icon);
 
         // radio check button

crates/webapps-manager/src/browser_dialog.rs

@@ -11,17 +11,24 @@ pub struct SiteInfo {
 
 /// Fetch title + icons from URL (blocking — call from thread)
 pub fn fetch_site_info(url: &str) -> Result<SiteInfo> {
+    // normalize: prepend https:// if no scheme
+    let url = if !url.contains("://") {
+        format!("https://{url}")
+    } else {
+        url.to_string()
+    };
+
     let client = reqwest::blocking::Client::builder()
         .user_agent("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 Chrome/120.0.0.0")
         .timeout(std::time::Duration::from_secs(10))
         .build()?;
 
-    let resp = client.get(url).send()?;
+    let resp = client.get(&url).send()?;
     let html_text = resp.text()?;
     let doc = Html::parse_document(&html_text);
 
     let title = extract_title(&doc).unwrap_or_default();
-    let icon_urls = extract_icon_urls(&doc, url);
+    let icon_urls = extract_icon_urls(&doc, &url);
 
     // download icons to cache
     let cache = config::cache_dir().join("favicons");
@@ -37,7 +44,7 @@ pub fn fetch_site_info(url: &str) -> Result<SiteInfo> {
 
     // try /favicon.ico fallback
     if icon_paths.is_empty() {
-        if let Ok(base) = url::Url::parse(url) {
+        if let Ok(base) = url::Url::parse(&url) {
             let favicon_url = format!("{}://{}/favicon.ico", base.scheme(), base.host_str().unwrap_or(""));
             if let Ok(path) = download_icon(&client, &favicon_url, &cache, 99) {
                 icon_paths.push(path);

crates/webapps-manager/src/favicon.rs

@@ -1,6 +1,7 @@
 mod browser_dialog;
 mod favicon;
 mod service;
+mod style;
 mod template_gallery;
 mod webapp_dialog;
 mod webapp_row;
@@ -20,6 +21,10 @@ fn main() {
         .application_id(config::APP_ID)
         .build();
 
+    app.connect_startup(|_| {
+        style::load_css();
+    });
+
     app.connect_activate(|app| {
         window::build(app);
     });

crates/webapps-manager/src/main.rs

@@ -0,0 +1,62 @@
+use gtk4 as gtk;
+use gtk4::gdk as gdk4;
+
+const CSS: &str = r#"
+/* webapp icon — subtle rounding for modern look */
+.webapp-icon {
+    border-radius: 10px;
+}
+
+/* webapp row — refined spacing */
+.webapp-row {
+    padding: 6px 12px;
+    min-height: 56px;
+}
+
+/* category header */
+.category-header {
+    padding-top: 18px;
+    padding-bottom: 6px;
+}
+
+/* action button — circular, subtle */
+.action-btn {
+    border-radius: 50%;
+    min-width: 36px;
+    min-height: 36px;
+    padding: 6px;
+}
+
+/* app mode badge */
+.app-mode-badge {
+    font-size: 0.7em;
+    font-weight: bold;
+    padding: 2px 8px;
+    border-radius: 12px;
+    background: alpha(@accent_bg_color, 0.15);
+    color: @accent_fg_color;
+}
+
+/* empty state refinement */
+.empty-state-icon {
+    opacity: 0.6;
+}
+
+/* delete button hover emphasis */
+.action-btn.error:hover {
+    background: alpha(@error_bg_color, 0.15);
+}
+"#;
+
+pub fn load_css() {
+    let provider = gtk::CssProvider::new();
+    provider.load_from_data(CSS);
+
+    if let Some(display) = gdk4::Display::default() {
+        gtk::style_context_add_provider_for_display(
+            &display,
+            &provider,
+            gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
+        );
+    }
+}

crates/webapps-manager/src/style.rs

@@ -4,14 +4,13 @@ use libadwaita as adw;
 use adw::prelude::*;
 use gettextrs::gettext;
 use gtk::glib;
-use std::cell::RefCell;
 use std::rc::Rc;
 use webapps_core::templates::{build_default_registry, TemplateRegistry, WebAppTemplate};
 
-/// Show template gallery. Returns selected template_id via callback.
+/// Show template gallery. Fires callback immediately on selection.
 pub fn show(parent: &impl IsA<gtk::Window>, on_selected: impl Fn(String) + 'static) {
     let registry = build_default_registry();
-    let selected_id: Rc<RefCell<Option<String>>> = Rc::new(RefCell::new(None));
+    let callback: Rc<dyn Fn(String)> = Rc::new(on_selected);
 
     let win = adw::Window::builder()
         .title(&gettext("Choose a Template"))
@@ -46,31 +45,21 @@ pub fn show(parent: &impl IsA<gtk::Window>, on_selected: impl Fn(String) + 'stat
     content.append(&scroll);
 
     // initial populate
-    populate_all(&main_box, &registry, &selected_id, &win);
+    populate_all(&main_box, &registry, &callback, &win);
 
     // search handler
     {
         let mb = main_box.clone();
         let reg = registry;
-        let sel = selected_id.clone();
+        let cb = callback.clone();
         let w = win.clone();
         search_entry.connect_search_changed(move |entry| {
             let query = entry.text().to_string();
             clear_box(&mb);
             if query.is_empty() {
-                populate_all(&mb, &reg, &sel, &w);
+                populate_all(&mb, &reg, &cb, &w);
             } else {
-                populate_search(&mb, &reg, &query, &sel, &w);
-            }
-        });
-    }
-
-    // on close: fire callback if template was selected
-    {
-        let sel = selected_id.clone();
-        win.connect_destroy(move |_| {
-            if let Some(id) = sel.borrow_mut().take() {
-                on_selected(id);
+                populate_search(&mb, &reg, &query, &cb, &w);
             }
         });
     }
@@ -97,7 +86,7 @@ pub fn show(parent: &impl IsA<gtk::Window>, on_selected: impl Fn(String) + 'stat
 fn populate_all(
     container: &gtk::Box,
     registry: &TemplateRegistry,
-    selected: &Rc<RefCell<Option<String>>>,
+    callback: &Rc<dyn Fn(String)>,
     win: &adw::Window,
 ) {
     let mut categories = registry.categories();
@@ -107,15 +96,15 @@ fn populate_all(
         if templates.is_empty() {
             continue;
         }
-        add_category_section(container, cat, &templates, selected, win);
+        add_category_section(container, cat, &templates, callback, win);
     }
 }
 
 fn populate_search(
     container: &gtk::Box,
     registry: &TemplateRegistry,
     query: &str,
-    selected: &Rc<RefCell<Option<String>>>,
+    callback: &Rc<dyn Fn(String)>,
     win: &adw::Window,
 ) {
     let results = registry.search(query);
@@ -126,24 +115,22 @@ fn populate_search(
         container.append(&label);
         return;
     }
-    add_category_section(container, &gettext("Search Results"), &results, selected, win);
+    add_category_section(container, &gettext("Search Results"), &results, callback, win);
 }
 
 fn add_category_section(
     container: &gtk::Box,
     category: &str,
     templates: &[&WebAppTemplate],
-    selected: &Rc<RefCell<Option<String>>>,
+    callback: &Rc<dyn Fn(String)>,
     win: &adw::Window,
 ) {
-    // category header
     let header = gtk::Label::new(Some(category));
     header.set_halign(gtk::Align::Start);
     header.add_css_class("title-4");
     header.set_margin_top(8);
     container.append(&header);
 
-    // use a ListBox with ActionRows instead of FlowBox for simplicity
     let listbox = gtk::ListBox::new();
     listbox.add_css_class("boxed-list");
     listbox.set_selection_mode(gtk::SelectionMode::None);
@@ -154,15 +141,17 @@ fn add_category_section(
             .subtitle(&tpl.url)
             .activatable(true)
             .build();
-        let icon = gtk::Image::from_icon_name(&tpl.icon);
+        let icon = gtk::Image::new();
         icon.set_pixel_size(32);
+        crate::webapp_row::load_icon(&icon, &tpl.icon);
         row.add_prefix(&icon);
 
-        let sel = selected.clone();
+        // fire callback immediately, then close gallery
+        let cb = callback.clone();
         let tid = tpl.template_id.clone();
         let w = win.clone();
         row.connect_activated(move |_| {
-            *sel.borrow_mut() = Some(tid.clone());
+            cb(tid.clone());
             w.close();
         });
 

crates/webapps-manager/src/template_gallery.rs

@@ -55,23 +55,15 @@ pub fn show(
 
     // headerbar
     let header = adw::HeaderBar::new();
-    if is_new {
-        let tmpl_btn = gtk::Button::from_icon_name("view-grid-symbolic");
-        tmpl_btn.set_tooltip_text(Some(&gettext("Templates")));
-        let wc = webapp_cell.clone();
-        let w = win.clone();
-        tmpl_btn.connect_clicked(move |_| {
-            let wc2 = wc.clone();
-            template_gallery::show(&w, move |template_id| {
-                let reg = build_default_registry();
-                if let Some(tpl) = reg.get(&template_id) {
-                    wc2.borrow_mut().apply_template(tpl);
-                }
-                // UI sync happens via rebuilding; simplified approach
-            });
-        });
-        header.pack_start(&tmpl_btn);
-    }
+    // placeholder for template button — will be wired after widgets exist
+    let tmpl_btn = if is_new {
+        let btn = gtk::Button::from_icon_name("view-grid-symbolic");
+        btn.set_tooltip_text(Some(&gettext("Templates")));
+        header.pack_start(&btn);
+        Some(btn)
+    } else {
+        None
+    };
     outer.append(&header);
 
     // overlay for loading spinner
@@ -111,9 +103,13 @@ pub fn show(
         .title(&gettext("URL"))
         .text(&webapp_cell.borrow().app_url)
         .build();
-    let detect_btn = gtk::Button::from_icon_name("emblem-web-symbolic");
+    let detect_img = gtk::Image::from_icon_name("emblem-web-symbolic");
+    detect_img.set_pixel_size(24);
+    let detect_btn = gtk::Button::new();
+    detect_btn.set_child(Some(&detect_img));
     detect_btn.set_tooltip_text(Some(&gettext("Detect name and icon from website")));
     detect_btn.set_valign(gtk::Align::Center);
+    detect_btn.add_css_class("flat");
     url_row.add_suffix(&detect_btn);
     group.add(&url_row);
 
@@ -128,15 +124,7 @@ pub fn show(
     let icon_row = adw::ActionRow::builder().title(&gettext("Icon")).build();
     let icon_preview = gtk::Image::new();
     icon_preview.set_pixel_size(32);
-    {
-        let icon_path = service::resolve_icon_path(&webapp_cell.borrow().app_icon);
-        let p = std::path::Path::new(&icon_path);
-        if p.is_absolute() && p.exists() {
-            icon_preview.set_from_file(Some(p));
-        } else {
-            icon_preview.set_icon_name(Some(&icon_path));
-        }
-    }
+    crate::webapp_row::load_icon(&icon_preview, &webapp_cell.borrow().app_icon);
     icon_row.add_prefix(&icon_preview);
     let icon_btn = gtk::Button::with_label(&gettext("Select"));
     icon_btn.set_valign(gtk::Align::Center);
@@ -238,6 +226,47 @@ pub fn show(
 
     // -- wire up signals --
 
+    // Template button → populate URL, name, icon, category after selection
+    if let Some(ref tb) = tmpl_btn {
+        let wc = webapp_cell.clone();
+        let w = win.clone();
+        let ur = url_row.clone();
+        let nr = name_row.clone();
+        let ip = icon_preview.clone();
+        let cd = cat_dropdown.clone();
+        tb.connect_clicked(move |_| {
+            let wc2 = wc.clone();
+            let ur2 = ur.clone();
+            let nr2 = nr.clone();
+            let ip2 = ip.clone();
+            let cd2 = cd.clone();
+            template_gallery::show(&w, move |template_id| {
+                log::info!("Template callback received: {}", &template_id);
+                let reg = build_default_registry();
+                if let Some(tpl) = reg.get(&template_id) {
+                    log::info!("Template found: {} url={}", &tpl.name, &tpl.url);
+                    wc2.borrow_mut().apply_template(tpl);
+                    // clone data before dropping borrow — set_text triggers connect_changed
+                    let (url, name, icon, cat) = {
+                        let data = wc2.borrow();
+                        (
+                            data.app_url.clone(),
+                            data.app_name.clone(),
+                            data.app_icon.clone(),
+                            data.main_category().to_string(),
+                        )
+                    };
+                    ur2.set_text(&url);
+                    nr2.set_text(&name);
+                    crate::webapp_row::load_icon(&ip2, &icon);
+                    if let Some(pos) = CATEGORIES.iter().position(|c| *c == cat) {
+                        cd2.set_selected(pos as u32);
+                    }
+                }
+            });
+        });
+    }
+
     // URL changed
     {
         let wc = webapp_cell.clone();
@@ -368,7 +397,7 @@ pub fn show(
                 match rx.try_recv() {
                     Ok(info) => {
                         sbr.set_visible(false);
-                        if !info.title.is_empty() && nrr.text().is_empty() {
+                        if !info.title.is_empty() {
                             nrr.set_text(&info.title);
                             wcr.borrow_mut().app_name = info.title.clone();
                         }