Design refresh: new icon assets, bluetooth popover, notification urgency styling, RAM/power draw in control panel

Adds real SVG icon assets replacing the icons-needed.txt checklist,
a bluetooth popover module, per-notification urgency (CSS-styled),
and app-name/summary dedup in notification cards. Rounds out the
control panel's stats section with RAM and power draw alongside the
existing CPU/GPU/net rows.

Cargo.toml

@@ -4,8 +4,8 @@ version = "0.2.4"
 edition = "2021"
 description = "Minimal status bar and notification daemon for Hyprland on Wayland"
 license = "MIT"
-authors = ["Breadway <rileyhorsham@gmail.com>"]
+authors = ["Breadway <plasticbread849@gmail.com>"]
-repository = "https://github.com/Breadway/breadbar"
+repository = "https://git.breadway.dev/Breadway/breadbar"
 keywords = ["wayland", "hyprland", "bar", "status-bar", "gtk4"]
 categories = ["gui"]
 

assets/Bluetooth Settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-icon lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>

assets/Brightness.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>

assets/Lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-icon lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>

assets/Next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-forward-icon lucide-skip-forward"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></svg>

assets/Pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause-icon lucide-pause"><rect x="14" y="3" width="5" height="18" rx="1"/><rect x="6" y="3" width="5" height="18" rx="1"/></svg>

assets/Play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><polygon points="6 3 20 12 6 21 6 3"/></svg>

assets/Previous.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-back-icon lucide-skip-back"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" x2="5" y1="19" y2="5"/></svg>

assets/Restart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw-icon lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>

assets/Shutdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-power-icon lucide-power"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>

assets/Sleep.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>

assets/Volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume-2-icon lucide-volume-2"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>

assets/icons-needed.txt

@@ -1,48 +0,0 @@
-SVG icons needed for breadbar
-==============================
-24×24 viewBox. Use `currentColor` for all fill/stroke so icons recolour
-automatically with the bar theme. Drop finished files in this directory.
-
-
-Control panel — slider row icons
----------------------------------
-Volume.svg
-    Speaker / soundwave icon for the volume slider row.
-    Currently placeholder: 🔊 emoji label.
-    Usage: control panel, left of volume slider.
-
-Brightness.svg
-    Sun / light bulb icon for the brightness slider row.
-    Currently placeholder: ☀ emoji label.
-    Usage: control panel, left of brightness slider.
-
-
-Power section buttons
------------------------
-Lock.svg
-    Padlock icon — triggers hyprlock (lock screen).
-    Currently placeholder: 🔒
-
-Sleep.svg
-    Crescent moon or Zzz icon — triggers systemctl suspend.
-    Currently placeholder: 💤
-
-Restart.svg
-    Circular arrow icon — triggers systemctl reboot.
-    Currently placeholder: 🔄
-
-Shutdown.svg
-    Power symbol (⏻) icon — triggers systemctl poweroff.
-    Currently placeholder: ⏻
-
-
-How to wire up icons once SVGs are ready
------------------------------------------
-Each power button and slider row icon is currently a gtk4::Label with an emoji.
-To replace with an SVG:
-
-  1. Add the SVG to this directory.
-  2. In main.rs, replace the emoji Label with:
-       gtk4::Image::from_paintable(Some(&svg_texture(asset!("Icon Name.svg"))))
-  3. For slider rows, replace the icon_lbl in build_slider_row() calls,
-     or add an overload that takes an image widget instead of a string.

packaging/arch/PKGBUILD

@@ -1,11 +1,11 @@
-# Maintainer: Breadway <rileyhorsham@gmail.com>
+# Maintainer: Breadway <plasticbread849@gmail.com>
 
 pkgname=breadbar
 pkgver=0.2.0
 pkgrel=1
 pkgdesc="Minimal status bar and notification daemon for Hyprland"
 arch=('x86_64')
-url="https://github.com/Breadway/breadbar"
+url="https://git.breadway.dev/Breadway/breadbar"
 license=('MIT')
 # Some Rust deps (ring/mlua) build vendored C/asm into static archives; makepkg's
 # default -flto=auto emits GCC LTO bitcode the Rust (lld) link cannot read,

src/bar/bluetooth.rs

@@ -0,0 +1,123 @@
+use crate::{App, AppInput};
+use relm4::ComponentSender;
+use std::fs;
+
+#[derive(Debug, Clone)]
+pub struct BtDevice {
+    pub address: String,
+    pub name: String,
+    pub connected: bool,
+    pub paired: bool,
+}
+
+#[derive(Debug, Clone)]
+pub struct BtPopoverData {
+    pub powered: bool,
+    pub devices: Vec<BtDevice>,
+}
+
+/// Same rfkill scan `bar::stats` uses for the bar icon — kept independent
+/// (rather than shared) since it's a two-line read and pulling in a shared
+/// helper isn't worth the coupling.
+fn powered() -> bool {
+    fs::read_dir("/sys/class/rfkill")
+        .into_iter()
+        .flatten()
+        .filter_map(|e| e.ok())
+        .any(|e| {
+            let p = e.path();
+            fs::read_to_string(p.join("type"))
+                .map(|t| t.trim() == "bluetooth")
+                .unwrap_or(false)
+                && fs::read_to_string(p.join("state"))
+                    .map(|s| s.trim() == "1")
+                    .unwrap_or(false)
+        })
+}
+
+async fn fetch_devices() -> Vec<BtDevice> {
+    try_fetch_devices().await.unwrap_or_default()
+}
+
+async fn try_fetch_devices() -> Option<Vec<BtDevice>> {
+    let conn = zbus::Connection::system().await.ok()?;
+    let mgr = zbus::fdo::ObjectManagerProxy::builder(&conn)
+        .destination("org.bluez")
+        .ok()?
+        .path("/")
+        .ok()?
+        .build()
+        .await
+        .ok()?;
+    let objects = mgr.get_managed_objects().await.ok()?;
+
+    let mut devices: Vec<BtDevice> = objects
+        .values()
+        .filter_map(|ifaces| ifaces.get("org.bluez.Device1"))
+        .filter_map(|props| {
+            let paired = props
+                .get("Paired")
+                .and_then(|v| bool::try_from(v.clone()).ok())
+                .unwrap_or(false);
+            if !paired {
+                return None;
+            }
+            let address = props
+                .get("Address")
+                .and_then(|v| String::try_from(v.clone()).ok())?;
+            let name = props
+                .get("Alias")
+                .or_else(|| props.get("Name"))
+                .and_then(|v| String::try_from(v.clone()).ok())
+                .unwrap_or_else(|| address.clone());
+            let connected = props
+                .get("Connected")
+                .and_then(|v| bool::try_from(v.clone()).ok())
+                .unwrap_or(false);
+            Some(BtDevice { address, name, connected, paired })
+        })
+        .collect();
+
+    devices.sort_by(|a, b| b.connected.cmp(&a.connected).then(a.name.cmp(&b.name)));
+    Some(devices)
+}
+
+pub fn spawn_popover_load(sender: ComponentSender<App>) {
+    relm4::spawn(async move {
+        let devices = fetch_devices().await;
+        sender.input(AppInput::BtPopoverData(BtPopoverData {
+            powered: powered(),
+            devices,
+        }));
+    });
+}
+
+/// Fire-and-forget: toggle the adapter's rfkill soft-block.
+pub fn spawn_set_powered(on: bool) {
+    relm4::spawn(async move {
+        let _ = tokio::process::Command::new("rfkill")
+            .args([if on { "unblock" } else { "block" }, "bluetooth"])
+            .output()
+            .await;
+    });
+}
+
+/// Fire-and-forget: connect a paired device by address via `bluetoothctl`.
+pub fn spawn_connect(address: String) {
+    relm4::spawn(async move {
+        let _ = tokio::process::Command::new("bluetoothctl")
+            .args(["connect", &address])
+            .output()
+            .await;
+    });
+}
+
+/// Fire-and-forget: disconnect a device by address via `bluetoothctl`.
+pub fn spawn_disconnect(address: String) {
+    relm4::spawn(async move {
+        let _ = tokio::process::Command::new("bluetoothctl")
+            .args(["disconnect", &address])
+            .output()
+            .await;
+    });
+}

src/bar/mod.rs

@@ -1,3 +1,4 @@
+pub mod bluetooth;
 pub mod clock;
 pub mod control;
 pub mod media;

src/bar/stats.rs

@@ -37,11 +37,22 @@ pub const BT_CONNECTED: &str = include_str!(concat!(
     "/assets/Bluetooth Connected.svg"
 ));
 
+pub const ICON_VOLUME: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Volume.svg"));
+pub const ICON_BRIGHTNESS: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Brightness.svg"));
+pub const ICON_LOCK: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Lock.svg"));
+pub const ICON_SLEEP: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Sleep.svg"));
+pub const ICON_RESTART: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Restart.svg"));
+pub const ICON_SHUTDOWN: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Shutdown.svg"));
+pub const ICON_BT_SETTINGS: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/Bluetooth Settings.svg"));
+
 #[derive(Debug)]
 pub struct Stats {
     pub cpu: String,
+    pub cpu_pct: f32,
     pub mem: String,
+    pub mem_pct: f32,
     pub power: String,
+    pub power_watts: f32,
     pub bat: String,
     pub bat_icon: &'static str,
     pub ac_connected: bool,
@@ -99,7 +110,8 @@ fn read_cpu() -> f32 {
     (dtotal - didle) as f32 / dtotal as f32 * 100.0
 }
 
-fn read_ram() -> u64 {
+/// Returns (used_kb, total_kb).
+fn read_ram() -> (u64, u64) {
     let text = fs::read_to_string("/proc/meminfo").unwrap_or_default();
     let mut total = 0u64;
     let mut avail = 0u64;
@@ -121,7 +133,7 @@ fn read_ram() -> u64 {
             break;
         }
     }
-    total.saturating_sub(avail)
+    (total.saturating_sub(avail), total)
 }
 
 fn bat_path() -> Option<&'static PathBuf> {
@@ -392,8 +404,14 @@ fn read_crumbs_profile() -> Option<String> {
 
 pub async fn poll() -> Stats {
     let cpu = read_cpu();
-    let mem = read_ram();
+    let (mem, mem_total) = read_ram();
-    let power = read_power().map_or_else(|| "—W".into(), |w| format!("{w:.1}W"));
+    let mem_pct = if mem_total > 0 {
+        mem as f32 / mem_total as f32 * 100.0
+    } else {
+        0.0
+    };
+    let power_watts = read_power();
+    let power = power_watts.map_or_else(|| "—W".into(), |w| format!("{w:.1}W"));
     let pct = read_battery();
     let bat = pct.map_or_else(|| "—".into(), |p| format!("{p}%"));
     let bat_icon = pct.map_or(BAT_MID, bat_level_icon);
@@ -426,12 +444,15 @@ pub async fn poll() -> Stats {
     let (net_rx_kbs, net_tx_kbs) = read_net_throughput();
     Stats {
         cpu: format!("{cpu:.0}%"),
+        cpu_pct: cpu,
         mem: if mem >= 1024 * 1024 {
             format!("{:.1}G", mem as f32 / (1024.0 * 1024.0))
         } else {
             format!("{}M", mem / 1024)
         },
+        mem_pct,
         power,
+        power_watts: power_watts.unwrap_or(0.0),
         bat,
         bat_icon,
         ac_connected,

src/main.rs

@@ -9,6 +9,12 @@ mod notifications;
 mod osd;
 mod theme;
 
+/// Thresholds above which the bar's CPU/RAM/power-draw readouts appear at
+/// all — see `AppInput::StatsUpdate`. Below these, the bar stays quiet.
+const CPU_ATTENTION_THRESHOLD: f32 = 70.0;
+const MEM_ATTENTION_THRESHOLD: f32 = 80.0;
+const POWER_ATTENTION_THRESHOLD: f32 = 30.0;
+
 use gtk4::prelude::*;
 use gtk4_layer_shell::{Edge, Layer, LayerShell};
 use hyprland::data::Workspace;
@@ -29,6 +35,14 @@ pub struct App {
     clock_lbl: gtk4::Label,
 
     // ── Stats bar ─────────────────────────────────────────────────────────
+    // The system-stats trio (CPU/RAM/power draw) only shows up when a value
+    // crosses a "you probably want to know about this" threshold — otherwise
+    // the bar stays quiet. See AppInput::StatsUpdate.
+    system_stats_box: gtk4::Box,
+    system_sep: gtk4::Separator,
+    cpu_pair: gtk4::Box,
+    mem_pair: gtk4::Box,
+    pwr_pair: gtk4::Box,
     cpu_lbl: gtk4::Label,
     mem_lbl: gtk4::Label,
     pwr_lbl: gtk4::Label,
@@ -43,16 +57,20 @@ pub struct App {
     wifi_textures: std::collections::HashMap<usize, gtk4::gdk::Texture>,
 
     // ── WiFi popover ──────────────────────────────────────────────────────
-    wifi_popover_box: gtk4::Box,
+    wifi_pane: gtk4::Box,
     crumbs_status: Option<bar::wifi::CrumbsStatus>,
     wifi_popover_data: Option<bar::wifi::WifiPopoverData>,
     wifi_profile: Option<String>,
     current_ssid: String,
 
+    // ── Bluetooth popover ────────────────────────────────────────────────
+    bt_pane: gtk4::Box,
+    bt_popover_data: Option<bar::bluetooth::BtPopoverData>,
+
     // ── Media ─────────────────────────────────────────────────────────────
     media_widget: gtk4::Box,
     media_track_lbl: gtk4::Label,
-    media_play_btn: gtk4::Button,
+    media_play_icon: gtk4::Image,
     media_last: Option<bar::media::MediaState>,
     media_paused_at: Option<std::time::Instant>,
 
@@ -66,10 +84,14 @@ pub struct App {
     panel_sink_signal: Option<gtk4::glib::SignalHandlerId>,
     panel_sinks: Vec<bar::control::AudioSink>,
     panel_cpu_lbl: gtk4::Label,
+    panel_mem_lbl: gtk4::Label,
+    panel_pwr_lbl: gtk4::Label,
     panel_gpu_lbl: gtk4::Label,
     panel_net_lbl: gtk4::Label,
 
     // ── Tray ──────────────────────────────────────────────────────────────
+    tray_section: gtk4::Box,
+    tray_sep: gtk4::Separator,
     tray_box: gtk4::Box,
     tray_items: std::collections::HashMap<String, gtk4::Button>,
 }
@@ -84,6 +106,7 @@ pub enum AppInput {
     CrumbsStatus(bar::wifi::CrumbsStatus),
     WifiPopoverData(bar::wifi::WifiPopoverData),
     SetProfile(String),
+    BtPopoverData(bar::bluetooth::BtPopoverData),
     MediaUpdate(bar::media::MediaState),
     ControlPanelData(bar::control::ControlPanelData),
 }
@@ -176,39 +199,15 @@ impl SimpleComponent for App {
         let wifi_img =
             gtk4::Image::from_paintable(Some(&svg_texture(asset!("WiFi Connecting.svg"))));
 
-        let wifi_pair = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
-        wifi_pair.add_css_class("stat-pair");
-        wifi_pair.add_css_class("wifi-pair");
         wifi_img.add_css_class("stat-icon");
-        wifi_pair.append(&wifi_img);
-        wifi_pair.append(&wifi_lbl);
 
-        let wifi_popover_box = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
+        // Content pane only — this becomes a tab inside the merged
-        wifi_popover_box.add_css_class("wifi-popover-inner");
+        // connectivity popover built alongside the Bluetooth pane below,
-        wifi_popover_box.set_margin_top(4);
+        // once bt_img exists too. See "Connectivity popover" further down.
-        wifi_popover_box.set_margin_bottom(4);
+        let wifi_pane = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
-        wifi_popover_box.set_margin_start(4);
-        wifi_popover_box.set_margin_end(4);
         let loading_lbl = gtk4::Label::new(Some("Scanning…"));
         loading_lbl.add_css_class("wifi-popover-loading");
-        wifi_popover_box.append(&loading_lbl);
+        wifi_pane.append(&loading_lbl);
-
-        let wifi_popover = gtk4::Popover::new();
-        wifi_popover.add_css_class("wifi-popover");
-        wifi_popover.set_child(Some(&wifi_popover_box));
-        wifi_popover.set_parent(&wifi_pair);
-
-        let wpop = wifi_popover.clone();
-        let gesture = gtk4::GestureClick::new();
-        gesture.connect_released(move |_, _, _, _| {
-            if wpop.is_visible() { wpop.popdown(); } else { wpop.popup(); }
-        });
-        wifi_pair.add_controller(gesture);
-
-        let sender_wp = sender.clone();
-        wifi_popover.connect_show(move |_| {
-            bar::wifi::spawn_popover_load(sender_wp.clone());
-        });
 
         // ── Media widget (center) ────────────────────────────────────────
         let media_widget = gtk4::Box::new(gtk4::Orientation::Horizontal, 4);
@@ -235,18 +234,26 @@ impl SimpleComponent for App {
         media_controls_box.set_margin_start(4);
         media_controls_box.set_margin_end(4);
 
-        let prev_btn = gtk4::Button::with_label("⏮");
+        let prev_btn = gtk4::Button::new();
+        prev_btn.set_child(Some(&gtk4::Image::from_paintable(Some(&svg_texture(
+            asset!("Previous.svg"),
+        )))));
         prev_btn.add_css_class("flat");
         prev_btn.add_css_class("media-btn");
         prev_btn.connect_clicked(|_| bar::media::spawn_cmd("previous"));
 
-        let media_play_btn = gtk4::Button::with_label("⏸");
+        let media_play_icon = gtk4::Image::from_paintable(Some(&svg_texture(asset!("Pause.svg"))));
+        let media_play_btn = gtk4::Button::new();
+        media_play_btn.set_child(Some(&media_play_icon));
         media_play_btn.add_css_class("flat");
         media_play_btn.add_css_class("media-btn");
         media_play_btn.add_css_class("media-play-btn");
         media_play_btn.connect_clicked(|_| bar::media::spawn_cmd("play-pause"));
 
-        let next_btn = gtk4::Button::with_label("⏭");
+        let next_btn = gtk4::Button::new();
+        next_btn.set_child(Some(&gtk4::Image::from_paintable(Some(&svg_texture(
+            asset!("Next.svg"),
+        )))));
         next_btn.add_css_class("flat");
         next_btn.add_css_class("media-btn");
         next_btn.connect_clicked(|_| bar::media::spawn_cmd("next"));
@@ -280,9 +287,22 @@ impl SimpleComponent for App {
         // ── Stats box (right side) ───────────────────────────────────────
         let stats_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
         stats_box.add_css_class("stats-box");
-        stats_box.append(&stat_pair(asset!("CPU.svg"), &cpu_lbl));
+
-        stats_box.append(&stat_pair(asset!("RAM Usage.svg"), &mem_lbl));
+        // CPU/RAM/power draw: hidden by default (see StatsUpdate), so this
-        stats_box.append(&stat_pair(asset!("Power Draw.svg"), &pwr_lbl));
+        // whole sub-group — plus its separator — collapses away when quiet.
+        let cpu_pair = stat_pair(asset!("CPU.svg"), &cpu_lbl);
+        let mem_pair = stat_pair(asset!("RAM Usage.svg"), &mem_lbl);
+        let pwr_pair = stat_pair(asset!("Power Draw.svg"), &pwr_lbl);
+        let system_stats_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
+        system_stats_box.append(&cpu_pair);
+        system_stats_box.append(&mem_pair);
+        system_stats_box.append(&pwr_pair);
+        system_stats_box.set_visible(false);
+        stats_box.append(&system_stats_box);
+        let system_sep = gtk4::Separator::new(gtk4::Orientation::Vertical);
+        system_sep.add_css_class("bar-sep");
+        system_sep.set_visible(false);
+        stats_box.append(&system_sep);
 
         let bat_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
         bat_box.add_css_class("stat-pair");
@@ -296,28 +316,121 @@ impl SimpleComponent for App {
         stats_box.append(&bat_box);
 
         bt_img.add_css_class("bt-icon");
-        bt_img.add_css_class("clickable");
+
-        let bt_gesture = gtk4::GestureClick::new();
+        // Content pane only — same deal as wifi_pane above.
-        bt_gesture.connect_released(|_, _, _, _| {
+        let bt_pane = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
-            relm4::spawn(async {
+        let bt_loading_lbl = gtk4::Label::new(Some("Loading…"));
-                let _ = tokio::process::Command::new("blueman-manager").spawn();
+        bt_loading_lbl.add_css_class("wifi-popover-loading");
-            });
+        bt_pane.append(&bt_loading_lbl);
+
+        // ── Connectivity popover ─────────────────────────────────────────
+        // WiFi and Bluetooth share one popover with one anatomy (same CSS
+        // classes throughout the two panes) instead of two near-identical
+        // popups behind two separate icons. A small tab row switches between
+        // them; both fetches kick off on open so switching tabs afterward is
+        // instant. The two panes live in a Stack rather than plain sibling
+        // Boxes with manual visibility toggling, which left stale width
+        // behind on reopen.
+        //
+        // hhomogeneous/vhomogeneous are ON (GTK's default), even though that
+        // means the popover is always sized to the *larger* of the two panes
+        // (visible empty space under the shorter one) — the alternative,
+        // sizing to just the active pane, means the popup has to resize
+        // itself in place when you switch tabs while it's open. Under
+        // gtk4-layer-shell that in-place resize doesn't reliably reach the
+        // compositor as a proper xdg_popup reposition; switching from the
+        // shorter tab to the taller one after a close/reopen cycle made the
+        // whole popover silently vanish instead of growing. A constant
+        // footprint sidesteps the resize entirely.
+        let content_stack = gtk4::Stack::new();
+        content_stack.set_hhomogeneous(true);
+        content_stack.set_vhomogeneous(true);
+        // Reserve enough room up front for the tallest realistic content
+        // (WiFi tab with a handful of nearby networks). Homogeneous sizing
+        // alone still lets the *first* real data load (Scanning… → populated
+        // list) trigger a live resize while the popup is mapped, which hits
+        // the same reposition fragility as the tab-switch case — claiming
+        // the space before anything is shown avoids that resize too.
+        content_stack.set_size_request(220, 420);
+        content_stack.add_named(&wifi_pane, Some("wifi"));
+        content_stack.add_named(&bt_pane, Some("bluetooth"));
+        content_stack.set_visible_child_name("wifi");
+
+        let wifi_tab_btn = gtk4::ToggleButton::with_label("Wi-Fi");
+        wifi_tab_btn.add_css_class("popover-tab");
+        wifi_tab_btn.set_active(true);
+        let bt_tab_btn = gtk4::ToggleButton::with_label("Bluetooth");
+        bt_tab_btn.add_css_class("popover-tab");
+        bt_tab_btn.set_group(Some(&wifi_tab_btn));
+
+        let tab_row = gtk4::Box::new(gtk4::Orientation::Horizontal, 4);
+        tab_row.add_css_class("popover-tab-row");
+        tab_row.append(&wifi_tab_btn);
+        tab_row.append(&bt_tab_btn);
+
+        let stack_for_wifi = content_stack.clone();
+        wifi_tab_btn.connect_toggled(move |btn| {
+            if btn.is_active() {
+                stack_for_wifi.set_visible_child_name("wifi");
+            }
+        });
+        let stack_for_bt = content_stack.clone();
+        bt_tab_btn.connect_toggled(move |btn| {
+            if btn.is_active() {
+                stack_for_bt.set_visible_child_name("bluetooth");
+            }
+        });
+
+        let connectivity_inner = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
+        connectivity_inner.add_css_class("wifi-popover-inner");
+        connectivity_inner.append(&tab_row);
+        connectivity_inner.append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
+        connectivity_inner.append(&content_stack);
+
+        let connectivity_popover = gtk4::Popover::new();
+        connectivity_popover.add_css_class("wifi-popover");
+        connectivity_popover.set_child(Some(&connectivity_inner));
+
+        let connectivity_pair = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
+        connectivity_pair.add_css_class("stat-pair");
+        connectivity_pair.add_css_class("wifi-pair");
+        connectivity_pair.append(&bt_img);
+        connectivity_pair.append(&wifi_img);
+        connectivity_pair.append(&wifi_lbl);
+        // Anchored to wifi_lbl specifically, not the connectivity_pair row —
+        // a Popover parented to a multi-child Box via set_parent() balloons
+        // that Box's own allocation after a popup→popdown→popup cycle (its
+        // width roughly quadrupled in testing, shoving every bar item to its
+        // left further left). Anchoring to a single leaf widget instead
+        // sidesteps whatever GTK4/gtk4-layer-shell interaction causes that;
+        // the click target below still covers the whole row regardless.
+        connectivity_popover.set_parent(&wifi_lbl);
+        stats_box.append(&connectivity_pair);
+
+        let cpop = connectivity_popover.clone();
+        let gesture = gtk4::GestureClick::new();
+        gesture.connect_released(move |_, _, _, _| {
+            if cpop.is_visible() { cpop.popdown(); } else { cpop.popup(); }
+        });
+        connectivity_pair.add_controller(gesture);
+
+        let sender_conn = sender.clone();
+        connectivity_popover.connect_show(move |_| {
+            bar::wifi::spawn_popover_load(sender_conn.clone());
+            bar::bluetooth::spawn_popover_load(sender_conn.clone());
         });
-        bt_img.add_controller(bt_gesture);
-        stats_box.append(&bt_img);
-        stats_box.append(&wifi_pair);
 
         // ── Control panel popover ────────────────────────────────────────
         let panel_inner = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
         panel_inner.add_css_class("control-panel-inner");
 
         // Volume row
-        let vol_row = build_slider_row("🔊", 0.0, 1.5, 0.02);
+        let vol_row = build_slider_row(bar::stats::ICON_VOLUME, 0.0, 1.5, 0.02);
         let panel_vol_slider = vol_row.1.clone();
         panel_inner.append(&vol_row.0);
 
         // Brightness row
-        let bright_row = build_slider_row("☀", 0.0, 1.0, 0.02);
+        let bright_row = build_slider_row(bar::stats::ICON_BRIGHTNESS, 0.0, 1.0, 0.02);
         let panel_bright_slider = bright_row.1.clone();
         panel_inner.append(&bright_row.0);
 
@@ -331,6 +444,14 @@ impl SimpleComponent for App {
         panel_cpu_lbl.add_css_class("control-panel-stat");
         panel_cpu_lbl.set_xalign(0.0);
 
+        let panel_mem_lbl = gtk4::Label::new(Some("RAM  —"));
+        panel_mem_lbl.add_css_class("control-panel-stat");
+        panel_mem_lbl.set_xalign(0.0);
+
+        let panel_pwr_lbl = gtk4::Label::new(Some("PWR  —"));
+        panel_pwr_lbl.add_css_class("control-panel-stat");
+        panel_pwr_lbl.set_xalign(0.0);
+
         let panel_gpu_lbl = gtk4::Label::new(Some("GPU  —"));
         panel_gpu_lbl.add_css_class("control-panel-stat");
         panel_gpu_lbl.set_xalign(0.0);
@@ -340,6 +461,8 @@ impl SimpleComponent for App {
         panel_net_lbl.set_xalign(0.0);
 
         stats_section.append(&panel_cpu_lbl);
+        stats_section.append(&panel_mem_lbl);
+        stats_section.append(&panel_pwr_lbl);
         stats_section.append(&panel_gpu_lbl);
         stats_section.append(&panel_net_lbl);
         panel_inner.append(&stats_section);
@@ -377,9 +500,14 @@ impl SimpleComponent for App {
         tray_box.add_css_class("tray-box");
         tray_section.append(&tray_header);
         tray_section.append(&tray_box);
+        // Collapsed (along with its separator) until an SNI app actually
+        // registers — an empty "Apps" section heading is dead weight.
+        tray_section.set_visible(false);
         panel_inner.append(&tray_section);
 
-        panel_inner.append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
+        let tray_sep = gtk4::Separator::new(gtk4::Orientation::Horizontal);
+        tray_sep.set_visible(false);
+        panel_inner.append(&tray_sep);
 
         // Power section
         let power_section = gtk4::Box::new(gtk4::Orientation::Vertical, 4);
@@ -391,13 +519,14 @@ impl SimpleComponent for App {
 
         let power_row = gtk4::Box::new(gtk4::Orientation::Horizontal, 4);
         power_row.add_css_class("power-row");
-        for (label, cmd) in [
+        for (icon_svg, cmd) in [
-            ("🔒", vec!["hyprlock"]),
+            (bar::stats::ICON_LOCK, vec!["hyprlock"]),
-            ("💤", vec!["systemctl", "suspend"]),
+            (bar::stats::ICON_SLEEP, vec!["systemctl", "suspend"]),
-            ("🔄", vec!["systemctl", "reboot"]),
+            (bar::stats::ICON_RESTART, vec!["systemctl", "reboot"]),
-            ("⏻", vec!["systemctl", "poweroff"]),
+            (bar::stats::ICON_SHUTDOWN, vec!["systemctl", "poweroff"]),
         ] {
-            let btn = gtk4::Button::with_label(label);
+            let btn = gtk4::Button::new();
+            btn.set_child(Some(&gtk4::Image::from_paintable(Some(&svg_texture(icon_svg)))));
             btn.add_css_class("flat");
             btn.add_css_class("power-btn");
             btn.connect_clicked(move |_| {
@@ -463,6 +592,11 @@ impl SimpleComponent for App {
             button_map: std::collections::HashMap::new(),
             time_str: bar::clock::current(),
             clock_lbl,
+            system_stats_box,
+            system_sep,
+            cpu_pair,
+            mem_pair,
+            pwr_pair,
             cpu_lbl,
             mem_lbl,
             pwr_lbl,
@@ -475,14 +609,16 @@ impl SimpleComponent for App {
             wifi_lbl,
             wifi_img,
             wifi_textures,
-            wifi_popover_box,
+            wifi_pane,
             crumbs_status: None,
             wifi_popover_data: None,
             wifi_profile: None,
             current_ssid: "—".to_string(),
+            bt_pane,
+            bt_popover_data: None,
             media_widget,
             media_track_lbl,
-            media_play_btn,
+            media_play_icon,
             media_last: None,
             media_paused_at: None,
             control_popover,
@@ -494,8 +630,12 @@ impl SimpleComponent for App {
             panel_sink_signal: None,
             panel_sinks: vec![],
             panel_cpu_lbl,
+            panel_mem_lbl,
+            panel_pwr_lbl,
             panel_gpu_lbl,
             panel_net_lbl,
+            tray_section,
+            tray_sep,
             tray_box,
             tray_items: std::collections::HashMap::new(),
         };
@@ -539,6 +679,20 @@ impl SimpleComponent for App {
                 self.cpu_lbl.set_label(&stats.cpu);
                 self.mem_lbl.set_label(&stats.mem);
                 self.pwr_lbl.set_label(&stats.power);
+
+                // Bar information diet: CPU/RAM/power draw only surface once
+                // they're actually worth knowing about, individually, so a
+                // hot CPU doesn't drag an idle RAM/power reading along with it.
+                let cpu_hot = stats.cpu_pct > CPU_ATTENTION_THRESHOLD;
+                let mem_hot = stats.mem_pct > MEM_ATTENTION_THRESHOLD;
+                let pwr_hot = stats.power_watts > POWER_ATTENTION_THRESHOLD;
+                self.cpu_pair.set_visible(cpu_hot);
+                self.mem_pair.set_visible(mem_hot);
+                self.pwr_pair.set_visible(pwr_hot);
+                let any_hot = cpu_hot || mem_hot || pwr_hot;
+                self.system_stats_box.set_visible(any_hot);
+                self.system_sep.set_visible(any_hot);
+
                 self.bat_lbl.set_label(&stats.bat);
                 if let Some(tex) = self.bat_textures.get(&(stats.bat_icon.as_ptr() as usize)) {
                     self.bat_img.set_paintable(Some(tex));
@@ -574,6 +728,11 @@ impl SimpleComponent for App {
                     };
                     self.panel_cpu_lbl.set_label(&cpu_str);
 
+                    self.panel_mem_lbl
+                        .set_label(&format!("RAM  {:.0}%  {}", stats.mem_pct, stats.mem));
+                    self.panel_pwr_lbl
+                        .set_label(&format!("PWR  {}", stats.power));
+
                     let gpu_str = match (stats.gpu_usage, stats.gpu_temp) {
                         (Some(u), Some(t)) => format!("GPU  {u}%  {t:.0}°C"),
                         (Some(u), None) => format!("GPU  {u}%"),
@@ -603,19 +762,34 @@ impl SimpleComponent for App {
                 btn.connect_clicked(move |_| bar::tray::spawn_activate(id_click.clone()));
                 self.tray_box.append(&btn);
                 self.tray_items.insert(id, btn);
+                self.tray_section.set_visible(true);
+                self.tray_sep.set_visible(true);
             }
             AppInput::TrayUpdate(bar::tray::TrayUpdate::Remove { id }) => {
                 if let Some(btn) = self.tray_items.remove(&id) {
                     self.tray_box.remove(&btn);
                 }
+                let has_items = !self.tray_items.is_empty();
+                self.tray_section.set_visible(has_items);
+                self.tray_sep.set_visible(has_items);
             }
             AppInput::CrumbsStatus(status) => {
                 self.crumbs_status = Some(status);
+                // CrumbsStatus and WifiPopoverData arrive independently (different
+                // pollers); whichever lands second must still repaint the header —
+                // otherwise it only shows up if CrumbsStatus happens to win the race.
+                if self.wifi_popover_data.is_some() {
+                    self.rebuild_wifi_popover(&sender);
+                }
             }
             AppInput::WifiPopoverData(data) => {
                 self.wifi_popover_data = Some(data);
                 self.rebuild_wifi_popover(&sender);
             }
+            AppInput::BtPopoverData(data) => {
+                self.bt_popover_data = Some(data);
+                self.rebuild_bt_popover();
+            }
             AppInput::SetProfile(name) => {
                 self.wifi_profile = Some(name);
                 self.apply_wifi_label();
@@ -628,8 +802,12 @@ impl SimpleComponent for App {
                         format!("{} · {}", state.artist, state.title)
                     };
                     self.media_track_lbl.set_label(&label);
-                    self.media_play_btn
+                    let icon_svg = if state.playing {
-                        .set_label(if state.playing { "⏸" } else { "▶" });
+                        asset!("Pause.svg")
+                    } else {
+                        asset!("Play.svg")
+                    };
+                    self.media_play_icon.set_paintable(Some(&svg_texture(icon_svg)));
 
                     if state.playing {
                         self.media_paused_at = None;
@@ -717,8 +895,8 @@ impl App {
     }
 
     fn rebuild_wifi_popover(&mut self, sender: &ComponentSender<Self>) {
-        while let Some(child) = self.wifi_popover_box.first_child() {
+        while let Some(child) = self.wifi_pane.first_child() {
-            self.wifi_popover_box.remove(&child);
+            self.wifi_pane.remove(&child);
         }
 
         if let Some(st) = &self.crumbs_status {
@@ -755,15 +933,15 @@ impl App {
             status_lbl.set_xalign(0.0);
             header.append(&status_lbl);
 
-            self.wifi_popover_box.append(&header);
+            self.wifi_pane.append(&header);
-            self.wifi_popover_box
+            self.wifi_pane
                 .append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
         }
 
         let Some(data) = &self.wifi_popover_data else {
             let lbl = gtk4::Label::new(Some("Scanning…"));
             lbl.add_css_class("wifi-popover-loading");
-            self.wifi_popover_box.append(&lbl);
+            self.wifi_pane.append(&lbl);
             return;
         };
 
@@ -772,7 +950,7 @@ impl App {
         ph.set_xalign(0.0);
         ph.set_margin_top(6);
         ph.set_margin_bottom(2);
-        self.wifi_popover_box.append(&ph);
+        self.wifi_pane.append(&ph);
 
         for (name, active) in &data.profiles {
             let row = gtk4::Button::new();
@@ -796,18 +974,18 @@ impl App {
                 bar::wifi::spawn_profile_set(name_clone.clone());
                 close_parent_popover(btn);
             });
-            self.wifi_popover_box.append(&row);
+            self.wifi_pane.append(&row);
         }
 
         if !data.scan.is_empty() {
-            self.wifi_popover_box
+            self.wifi_pane
                 .append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
             let nh = gtk4::Label::new(Some("Nearby"));
             nh.add_css_class("wifi-popover-section");
             nh.set_xalign(0.0);
             nh.set_margin_top(6);
             nh.set_margin_bottom(2);
-            self.wifi_popover_box.append(&nh);
+            self.wifi_pane.append(&nh);
 
             for entry in &data.scan {
                 let row = gtk4::Button::new();
@@ -847,25 +1025,120 @@ impl App {
                     }
                     close_parent_popover(btn);
                 });
-                self.wifi_popover_box.append(&row);
+                self.wifi_pane.append(&row);
+            }
+        }
+    }
+
+    fn rebuild_bt_popover(&mut self) {
+        while let Some(child) = self.bt_pane.first_child() {
+            self.bt_pane.remove(&child);
+        }
+
+        let Some(data) = &self.bt_popover_data else {
+            let lbl = gtk4::Label::new(Some("Loading…"));
+            lbl.add_css_class("wifi-popover-loading");
+            self.bt_pane.append(&lbl);
+            return;
+        };
+
+        // Power toggle row
+        let toggle_row = gtk4::Box::new(gtk4::Orientation::Horizontal, 8);
+        toggle_row.set_margin_bottom(4);
+        let toggle_lbl = gtk4::Label::new(Some("Bluetooth"));
+        toggle_lbl.add_css_class("wifi-popover-ssid");
+        toggle_lbl.set_hexpand(true);
+        toggle_lbl.set_xalign(0.0);
+        let toggle_switch = gtk4::Switch::new();
+        toggle_switch.set_active(data.powered);
+        toggle_switch.set_valign(gtk4::Align::Center);
+        toggle_switch.connect_state_set(|_, on| {
+            bar::bluetooth::spawn_set_powered(on);
+            gtk4::glib::Propagation::Proceed
+        });
+        toggle_row.append(&toggle_lbl);
+        toggle_row.append(&toggle_switch);
+        self.bt_pane.append(&toggle_row);
+        self.bt_pane
+            .append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
+
+        if !data.powered {
+            let lbl = gtk4::Label::new(Some("Bluetooth is off"));
+            lbl.add_css_class("wifi-popover-loading");
+            self.bt_pane.append(&lbl);
+        } else if data.devices.is_empty() {
+            let lbl = gtk4::Label::new(Some("No paired devices"));
+            lbl.add_css_class("wifi-popover-loading");
+            self.bt_pane.append(&lbl);
+        } else {
+            let dh = gtk4::Label::new(Some("Paired"));
+            dh.add_css_class("wifi-popover-section");
+            dh.set_xalign(0.0);
+            dh.set_margin_top(2);
+            dh.set_margin_bottom(2);
+            self.bt_pane.append(&dh);
+
+            for dev in &data.devices {
+                let row = gtk4::Button::new();
+                row.add_css_class("flat");
+                row.add_css_class("wifi-popover-row");
+                if dev.connected {
+                    row.add_css_class("wifi-popover-row-active");
+                }
+                let lbl = gtk4::Label::new(Some(&format!(
+                    "{}{}",
+                    if dev.connected { "● " } else { "  " },
+                    dev.name,
+                )));
+                lbl.set_xalign(0.0);
+                row.set_child(Some(&lbl));
+
+                let address = dev.address.clone();
+                let connected = dev.connected;
+                row.connect_clicked(move |_| {
+                    if connected {
+                        bar::bluetooth::spawn_disconnect(address.clone());
+                    } else {
+                        bar::bluetooth::spawn_connect(address.clone());
+                    }
+                });
+                self.bt_pane.append(&row);
             }
         }
 
-        self.wifi_popover_box.set_visible(true);
+        self.bt_pane
+            .append(&gtk4::Separator::new(gtk4::Orientation::Horizontal));
+        let settings_row = gtk4::Button::new();
+        settings_row.add_css_class("flat");
+        settings_row.add_css_class("wifi-popover-row");
+        let settings_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 4);
+        let settings_icon = gtk4::Image::from_paintable(Some(&svg_texture(bar::stats::ICON_BT_SETTINGS)));
+        settings_icon.add_css_class("stat-icon");
+        settings_box.append(&settings_icon);
+        settings_box.append(&gtk4::Label::new(Some("Bluetooth settings")));
+        settings_row.set_child(Some(&settings_box));
+        settings_row.connect_clicked(|_| {
+            relm4::spawn(async {
+                let _ = tokio::process::Command::new("blueman-manager").spawn();
+            });
+        });
+        self.bt_pane.append(&settings_row);
     }
 }
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-fn build_slider_row(icon: &str, min: f64, max: f64, step: f64) -> (gtk4::Box, gtk4::Scale) {
+fn build_slider_row(icon_svg: &str, min: f64, max: f64, step: f64) -> (gtk4::Box, gtk4::Scale) {
     let row = gtk4::Box::new(gtk4::Orientation::Horizontal, 8);
     row.add_css_class("control-panel-row");
     row.set_margin_top(2);
     row.set_margin_bottom(2);
 
-    let icon_lbl = gtk4::Label::new(Some(icon));
+    // Rendered larger than the standard 16px stat/section icons: these are
-    icon_lbl.add_css_class("control-panel-row-icon");
+    // the two things in the panel you actually drag, so they should read as
-    icon_lbl.set_width_chars(2);
+    // primary controls rather than blend in with passive readouts.
+    let icon = gtk4::Image::from_paintable(Some(&svg_texture_sized(icon_svg, 20)));
+    icon.add_css_class("control-panel-row-icon");
 
     let slider = gtk4::Scale::with_range(gtk4::Orientation::Horizontal, min, max, step);
     slider.set_draw_value(false);
@@ -873,7 +1146,7 @@ fn build_slider_row(icon: &str, min: f64, max: f64, step: f64) -> (gtk4::Box, gt
     slider.set_width_request(180);
     slider.add_css_class("control-panel-slider");
 
-    row.append(&icon_lbl);
+    row.append(&icon);
     row.append(&slider);
     (row, slider)
 }
@@ -984,12 +1257,21 @@ fn stat_pair(icon_svg: &str, label: &gtk4::Label) -> gtk4::Box {
     pair
 }
 
-fn svg_texture(svg_src: &str) -> gtk4::gdk::Texture {
+pub(crate) fn svg_texture(svg_src: &str) -> gtk4::gdk::Texture {
+    svg_texture_sized(svg_src, 16)
+}
+
+/// Same as `svg_texture` but rendered at an explicit pixel size — used to give
+/// primary/interactive icons (e.g. sliders you actually drag) more visual
+/// weight than passive informational ones, which otherwise all read as the
+/// same flat 16px stroke glyph once emoji stopped providing accidental variety.
+pub(crate) fn svg_texture_sized(svg_src: &str, px: u32) -> gtk4::gdk::Texture {
     use resvg::{tiny_skia, usvg};
     let fg = theme::fg_color();
+    let dim = format!(r#"width="{px}" height="{px}""#);
     let svg = svg_src
         .replace("currentColor", &fg)
-        .replace(r#"width="24" height="24""#, r#"width="16" height="16""#);
+        .replace(r#"width="24" height="24""#, &dim);
     let tree = usvg::Tree::from_str(&svg, &usvg::Options::default()).expect("parse svg");
     let size = tree.size().to_int_size();
     let (w, h) = (size.width(), size.height());

src/notifications/mod.rs

@@ -11,10 +11,29 @@ pub enum NotifEvent {
         summary: String,
         body: String,
         timeout_ms: u32,
+        urgency: Urgency,
     },
     Close(u32),
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Urgency {
+    Low,
+    Normal,
+    Critical,
+}
+
+impl Urgency {
+    /// CSS class suffix for `.notification-card.urgency-<kind>`.
+    pub fn css_class(self) -> Option<&'static str> {
+        match self {
+            Urgency::Low => None,
+            Urgency::Normal => Some("urgency-normal"),
+            Urgency::Critical => Some("urgency-critical"),
+        }
+    }
+}
+
 struct NotifServer {
     tx: mpsc::Sender<NotifEvent>,
     next_id: AtomicU32,
@@ -32,7 +51,7 @@ impl NotifServer {
         summary: &str,
         body: &str,
         _actions: Vec<String>,
-        _hints: std::collections::HashMap<String, OwnedValue>,
+        hints: std::collections::HashMap<String, OwnedValue>,
         expire_timeout: i32,
     ) -> u32 {
         let id = if replaces_id != 0 {
@@ -45,6 +64,12 @@ impl NotifServer {
         } else {
             expire_timeout as u32
         };
+        // Spec: hints["urgency"] is a byte, 0=low, 1=normal, 2=critical (default normal).
+        let urgency = match hints.get("urgency").and_then(|v| u8::try_from(v.clone()).ok()) {
+            Some(0) => Urgency::Low,
+            Some(2) => Urgency::Critical,
+            _ => Urgency::Normal,
+        };
         let _ = self
             .tx
             .send(NotifEvent::Show {
@@ -53,6 +78,7 @@ impl NotifServer {
                 summary: summary.to_string(),
                 body: body.to_string(),
                 timeout_ms,
+                urgency,
             })
             .await;
         id

src/notifications/popup.rs

@@ -4,7 +4,7 @@ use gtk4::prelude::*;
 use gtk4_layer_shell::{Edge, Layer, LayerShell};
 use tokio::sync::mpsc::Receiver;
 
-use super::NotifEvent;
+use super::{NotifEvent, Urgency};
 
 type Cards = Rc<RefCell<HashMap<u32, gtk4::Box>>>;
 
@@ -27,12 +27,13 @@ pub async fn run(mut rx: Receiver<NotifEvent>) {
                 summary,
                 body,
                 timeout_ms,
+                urgency,
             } => {
                 // Replace existing card with same id (replaces_id case)
                 if let Some(old) = cards.borrow_mut().remove(&id) {
                     cards_box.remove(&old);
                 }
-                let card = make_card(&app_name, &summary, &body);
+                let card = make_card(&app_name, &summary, &body, urgency);
                 cards_box.prepend(&card);
                 cards.borrow_mut().insert(id, card.clone());
                 window.set_visible(true);
@@ -75,11 +76,17 @@ fn create_window() -> gtk4::Window {
     window
 }
 
-fn make_card(app_name: &str, summary: &str, body: &str) -> gtk4::Box {
+fn make_card(app_name: &str, summary: &str, body: &str, urgency: Urgency) -> gtk4::Box {
     let card = gtk4::Box::new(gtk4::Orientation::Vertical, 4);
     card.add_css_class("notification-card");
+    if let Some(class) = urgency.css_class() {
+        card.add_css_class(class);
+    }
 
-    if !app_name.is_empty() {
+    // Senders often set the title/summary to their own app name (e.g. a bare
+    // "Spotify" notification) — showing app_name above an identical summary
+    // is pure repetition, so skip the app label in that case.
+    if !app_name.is_empty() && !app_name.eq_ignore_ascii_case(summary) {
         let lbl = gtk4::Label::new(Some(app_name));
         lbl.add_css_class("notification-app");
         lbl.set_xalign(0.0);

src/osd.rs

@@ -122,40 +122,39 @@ fn brightness_watcher(tx: mpsc::Sender<OsdEvent>) {
 async fn run_osd(mut rx: mpsc::Receiver<OsdEvent>) {
     let window = create_window();
 
-    let container = gtk4::Box::new(gtk4::Orientation::Vertical, 6);
+    let container = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
-    container.set_margin_top(12);
+    container.set_margin_top(10);
-    container.set_margin_bottom(12);
+    container.set_margin_bottom(10);
-    container.set_margin_start(16);
+    container.set_margin_start(14);
-    container.set_margin_end(16);
+    container.set_margin_end(14);
     window.set_child(Some(&container));
 
-    let header = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
+    let icon = gtk4::Image::from_paintable(Some(&crate::svg_texture(
-    let kind_lbl = gtk4::Label::new(Some("Volume"));
+        crate::bar::stats::ICON_VOLUME,
-    kind_lbl.add_css_class("osd-kind");
+    )));
-    kind_lbl.set_hexpand(true);
+    icon.add_css_class("osd-icon");
-    kind_lbl.set_xalign(0.0);
+    container.append(&icon);
-    let pct_lbl = gtk4::Label::new(Some("0%"));
-    pct_lbl.add_css_class("osd-pct");
-    header.append(&kind_lbl);
-    header.append(&pct_lbl);
-    container.append(&header);
 
     let pbar = gtk4::ProgressBar::new();
     pbar.add_css_class("osd-bar");
+    pbar.set_hexpand(true);
+    pbar.set_valign(gtk4::Align::Center);
     container.append(&pbar);
 
     let dismiss_token = Rc::new(Cell::new(0u32));
 
     while let Some(event) = rx.recv().await {
-        let (kind, pct) = match event {
+        let (icon_svg, pct, muted) = match event {
-            OsdEvent::Volume { pct, muted } => {
+            OsdEvent::Volume { pct, muted } => (crate::bar::stats::ICON_VOLUME, pct, muted),
-                (if muted { "Volume (Muted)" } else { "Volume" }, pct)
+            OsdEvent::Brightness { pct } => (crate::bar::stats::ICON_BRIGHTNESS, pct, false),
-            }
-            OsdEvent::Brightness { pct } => ("Brightness", pct),
         };
 
-        kind_lbl.set_label(kind);
+        icon.set_paintable(Some(&crate::svg_texture(icon_svg)));
-        pct_lbl.set_label(&format!("{pct}%"));
+        if muted {
+            icon.add_css_class("osd-icon-muted");
+        } else {
+            icon.remove_css_class("osd-icon-muted");
+        }
         pbar.set_fraction(pct as f64 / 100.0);
         window.set_visible(true);
 
@@ -179,6 +178,6 @@ fn create_window() -> gtk4::Window {
     window.set_layer(Layer::Overlay);
     window.set_anchor(Edge::Bottom, true);
     window.set_margin(Edge::Bottom, 80);
-    window.set_default_width(280);
+    window.set_default_width(180);
     window
 }

src/theme.rs

@@ -14,71 +14,89 @@ fn load_css() -> String {
     // card) and child labels inherit it, so text stays legible whatever lightness
     // pywal hands a given slot. `on_*` are luminance-picked ink (black/white) for
     // that background — the pywal hues themselves are untouched.
+    //
+    // Shared tokens: one radius and one padding rhythm reused across every
+    // popover/card/OSD surface so they read as one design system rather than
+    // four different ones. `radius_pill` is only for the tiny transient OSD.
+    let radius = "10px";
+    let radius_sm = "6px";
+    let radius_pill = "20px";
+    let pad = "10px";
+
     format!(
         "window.breadbar {{ background-color: {bg_rgba}; color: {on_bg}; border-radius: 0; }}\
-         .workspace-btn {{ background: transparent; opacity: 0.45;\
+         .workspace-btn {{ background: transparent; opacity: 0.45; color: {on_bg};\
-             border-radius: 0; border: none; outline: none; box-shadow: none;\
+             border-radius: {radius_sm}; border: none; outline: none; box-shadow: none;\
-             min-width: 24px; padding: 4px 8px; }}\
+             min-width: 20px; margin: 5px 2px; padding: 2px 9px; }}\
          .workspace-btn:hover {{ opacity: 0.8; }}\
-         .workspace-btn.active {{ background: {accent}; color: {on_accent}; opacity: 1; }}\
+         .workspace-btn.active {{ background: alpha({accent}, 0.18); color: {accent}; opacity: 1; }}\
          .stats-box {{ margin-right: 8px; }}\
          .stat-pair {{ margin-right: 14px; }}\
          .stat-icon {{ margin-right: 2px; }}\
          .bt-icon {{ margin-right: 14px; }}\
+         separator.bar-sep {{ min-height: 14px; margin: 0 8px 0 0; background: alpha({on_bg}, 0.14); }}\
          window.breadbar-notification {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; }}\
-         .notification-card {{ background: {surface}; color: {on_surface}; border-radius: 8px;\
+         .notification-card {{ background: {surface}; color: {on_surface}; border-radius: {radius};\
-             padding: 12px; margin-bottom: 8px; }}\
+             padding: {pad}; margin-bottom: 8px; border-left: 3px solid transparent; }}\
+         .notification-card.urgency-critical {{ border-left-color: {critical}; }}\
+         .notification-card.urgency-normal {{ border-left-color: {accent}; }}\
          .notification-summary {{ font-weight: bold; }}\
          .notification-app {{ opacity: 0.6; }}\
-         window.breadbar-osd {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; border-radius: 8px; }}\
+         window.breadbar-osd {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; border-radius: {radius_pill}; }}\
-         .osd-kind {{ opacity: 0.75; font-size: 12px; }}\
+         .osd-icon {{ opacity: 0.85; margin-right: 8px; }}\
-         .osd-pct {{ font-weight: bold; font-size: 12px; }}\
+         .osd-icon-muted {{ opacity: 0.35; }}\
-         progressbar.osd-bar {{ min-height: 8px; }}\
+         progressbar.osd-bar {{ min-height: 6px; }}\
-         progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 4px; min-height: 8px; }}\
+         progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 3px; min-height: 6px; }}\
-         progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 4px; min-height: 8px; }}\
+         progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 3px; min-height: 6px; }}\
          .clickable {{ cursor: pointer; }}\
-         .wifi-pair {{ border-radius: 4px; padding: 0 2px; }}\
+         .wifi-pair {{ border-radius: {radius_sm}; padding: 0 2px; }}\
          .wifi-pair:hover {{ background: alpha({on_bg}, 0.12); }}\
-         .wifi-popover-inner {{ min-width: 180px; padding: 2px; }}\
+         .wifi-popover-inner {{ min-width: 200px; padding: {pad}; }}\
+         .popover-tab-row {{ margin-bottom: {pad}; }}\
+         .popover-tab {{ background: transparent; color: {on_bg}; border: none; box-shadow: none;\
+             outline: none; border-radius: {radius_sm}; padding: 4px 10px; font-size: 11px;\
+             font-weight: bold; opacity: 0.55; }}\
+         .popover-tab:hover {{ opacity: 0.8; }}\
+         .popover-tab:checked {{ background: alpha({accent}, 0.18); color: {accent}; opacity: 1; }}\
          .wifi-popover-ssid {{ font-weight: bold; font-size: 13px; }}\
          .wifi-popover-ip {{ opacity: 0.6; font-size: 11px; }}\
          .wifi-popover-status {{ font-size: 11px; margin-top: 2px; }}\
          .wifi-popover-section {{ font-size: 10px; font-weight: bold; opacity: 0.5; letter-spacing: 0.08em; }}\
          .wifi-popover-row {{ background: transparent; border: none; box-shadow: none;\
-             border-radius: 4px; padding: 2px 6px; }}\
+             border-radius: {radius_sm}; padding: 4px 6px; }}\
          .wifi-popover-row:hover {{ background: alpha({on_bg}, 0.08); }}\
          .wifi-popover-row-active {{ color: {accent}; }}\
          .wifi-popover-row-unsaved {{ opacity: 0.4; }}\
          .wifi-popover-loading {{ opacity: 0.5; padding: 8px; }}\
          window.wifi-add-dialog {{ background-color: {bg_rgba}; color: {on_bg}; min-width: 240px; }}\
-         .media-widget {{ border-radius: 4px; padding: 0 6px; cursor: pointer; }}\
+         .media-widget {{ border-radius: {radius_sm}; padding: 0 6px; cursor: pointer; }}\
          .media-widget:hover {{ background: alpha({on_bg}, 0.10); }}\
          .media-indicator {{ font-size: 11px; opacity: 0.7; margin-right: 2px; }}\
          .media-track-lbl {{ font-size: 12px; }}\
          .media-controls {{ padding: 2px; }}\
-         .media-btn {{ font-size: 16px; min-width: 36px; padding: 2px 8px; }}\
+         .media-btn {{ min-width: 32px; padding: 4px 8px; }}\
-         .control-panel-btn {{ font-size: 14px; padding: 0 6px; margin-left: 6px; border-radius: 4px; }}\
+         .control-panel-btn {{ padding: 0 6px; margin-left: 6px; border-radius: {radius_sm}; }}\
          .control-panel {{ }}\
-         .control-panel-inner {{ min-width: 240px; padding: 8px; }}\
+         .control-panel-inner {{ min-width: 220px; padding: {pad}; }}\
          .control-panel-row {{ margin: 4px 0; }}\
-         .control-panel-row-icon {{ opacity: 0.75; }}\
+         .control-panel-row-icon {{ opacity: 1; margin-right: 4px; }}\
          .control-panel-slider {{ margin: 0; }}\
-         .control-panel-stats {{ margin: 8px 0; }}\
+         .control-panel-stats {{ margin: {pad} 0; }}\
          .control-panel-stat {{ font-size: 12px; opacity: 0.85; margin: 1px 0; }}\
-         .control-panel-section {{ margin: 6px 0; }}\
+         .control-panel-section {{ margin: {pad} 0; }}\
          .control-panel-section-header {{ font-size: 10px; font-weight: bold; opacity: 0.5;\
              letter-spacing: 0.08em; margin-bottom: 4px; }}\
          .control-panel-sink-dropdown {{ }}\
          .power-row {{ margin-top: 2px; }}\
-         .power-btn {{ font-size: 16px; min-width: 44px; padding: 4px; border-radius: 6px; }}\
+         .power-btn {{ min-width: 40px; padding: 8px; border-radius: {radius_sm}; }}\
          separator {{ margin: 4px 0; }}",
         bg_plain   = p.background,
         bg_rgba    = hex_to_rgba(&p.background, 0.92),
         surface    = p.color0,
         accent     = p.color4,
+        critical   = p.color1,
         on_bg      = ink_on(&p.background),
         on_surface = ink_on(&p.color0),
-        on_accent  = ink_on(&p.color4),
         trough     = hex_to_rgba(&p.color4, 0.25),
     )
 }