make unseen hosts and services dimmed in thumbnail mode (fixes #1142)

Author: GyulyVGC

CHANGELOG.md

@@ -9,6 +9,7 @@ All Sniffnet releases with the relative changes are documented in this file.
   - French ([#1123](https://github.com/GyulyVGC/sniffnet/pull/1123))
   - Spanish ([#1140](https://github.com/GyulyVGC/sniffnet/pull/1140))
   - Indonesian ([#1145](https://github.com/GyulyVGC/sniffnet/pull/1145))
+- Fix unseen hosts and services not appearing dimmed in thumbnail mode (fixes [#1142](https://github.com/GyulyVGC/sniffnet/issues/1142))
 
 ## [1.5.0] - 2026-04-14
 - Show which apps and programs are generating network traffic ([#1056](https://github.com/GyulyVGC/sniffnet/pull/1056) — fixes [#170](https://github.com/GyulyVGC/sniffnet/issues/170))

src/gui/components/ellipsized_text.rs

@@ -16,7 +16,7 @@ where
     class: Theme::Class<'a>,
 }
 
-impl<Theme, Renderer> EllipsizedText<'_, Theme, Renderer>
+impl<'a, Theme, Renderer> EllipsizedText<'a, Theme, Renderer>
 where
     Theme: widget::text::Catalog,
     Renderer: text::Renderer,
@@ -79,6 +79,11 @@ where
         self.format.wrapping = wrapping;
         self
     }
+
+    pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
+        self.class = class.into();
+        self
+    }
 }
 
 struct State<P: text::Paragraph> {

src/gui/pages/overview_page.rs

@@ -223,35 +223,39 @@ pub fn item_bar<'a>(
     data_info: &DataInfo,
     data_repr: DataRepr,
     first_entry_data_info: DataInfo,
-) -> Container<'a, Message, StyleType> {
-    Container::new(
-        Row::new()
-            .height(ICONS_SIZE_BIG)
-            .align_y(Alignment::Center)
-            .spacing(5)
-            .push(icon)
-            .push(
-                Column::new()
-                    .spacing(2)
-                    .push(
-                        Row::new()
-                            .push(
-                                EllipsizedText::new(item)
-                                    .wrapping(Wrapping::Glyph)
-                                    .width(Length::Fill),
-                            )
-                            .push(Text::new(
-                                data_repr.formatted_string(data_info.tot_data(data_repr)),
-                            )),
-                    )
-                    .push(get_bars(data_repr, &first_entry_data_info, data_info)),
-            ),
-    )
-    .class(if data_info.tot_data(DataRepr::Packets) == 0 {
-        ContainerType::DimmedText
-    } else {
-        ContainerType::Standard
-    })
+) -> Row<'a, Message, StyleType> {
+    let is_dimmed = data_info.tot_data(DataRepr::Packets) == 0;
+    Row::new()
+        .height(ICONS_SIZE_BIG)
+        .align_y(Alignment::Center)
+        .spacing(5)
+        .push(icon)
+        .push(
+            Column::new()
+                .spacing(2)
+                .push(
+                    Row::new()
+                        .push(
+                            EllipsizedText::new(item)
+                                .wrapping(Wrapping::Glyph)
+                                .width(Length::Fill)
+                                .class(if is_dimmed {
+                                    TextType::Dimmed
+                                } else {
+                                    TextType::Standard
+                                }),
+                        )
+                        .push(
+                            Text::new(data_repr.formatted_string(data_info.tot_data(data_repr)))
+                                .class(if is_dimmed {
+                                    TextType::Dimmed
+                                } else {
+                                    TextType::Standard
+                                }),
+                        ),
+                )
+                .push(get_bars(data_repr, &first_entry_data_info, data_info)),
+        )
 }
 
 fn col_info(sniffer: &Sniffer) -> Container<'_, Message, StyleType> {

src/gui/pages/thumbnail_page.rs

@@ -8,6 +8,7 @@ use crate::countries::country_utils::get_flag_tooltip;
 use crate::gui::sniffer::Sniffer;
 use crate::gui::styles::rule::RuleType;
 use crate::gui::styles::style_constants::FONT_SIZE_FOOTER;
+use crate::gui::styles::text::TextType;
 use crate::gui::styles::types::style_type::StyleType;
 use crate::gui::types::favorite::{Favorite, FavoriteItem};
 use crate::gui::types::message::Message;
@@ -96,12 +97,28 @@ fn host_col<'a>(sniffer: &Sniffer) -> Column<'a, Message, StyleType> {
 
         thumbnail_hosts.push(thumbnail_host);
 
-        let flag = get_flag_tooltip(country, data_info_host, Language::default(), true, 1.0);
+        let is_dimmed = data_info_host.data_info.tot_data(DataRepr::Packets) == 0;
+        let opacity = if is_dimmed {
+            sniffer
+                .conf
+                .settings
+                .style
+                .get_extension()
+                .alpha_chart_badge
+        } else {
+            1.0
+        };
+
+        let flag = get_flag_tooltip(country, data_info_host, Language::default(), true, opacity);
         let host_row = Row::new()
             .align_y(Alignment::Center)
             .spacing(5)
             .push(flag)
-            .push(Text::new(text).size(FONT_SIZE_FOOTER));
+            .push(Text::new(text).size(FONT_SIZE_FOOTER).class(if is_dimmed {
+                TextType::Dimmed
+            } else {
+                TextType::Standard
+            }));
         host_col = host_col.push(host_row);
 
         if thumbnail_hosts.len() >= MAX_ENTRIES {
@@ -117,12 +134,20 @@ fn service_col<'a>(sniffer: &Sniffer) -> Column<'a, Message, StyleType> {
     let services = Favorite::Service.get_entries(sniffer);
     let n_entry = min(services.len(), MAX_ENTRIES);
     for fi in services.get(..n_entry).unwrap_or_default() {
-        let FavoriteItem::Service((service, _)) = fi else {
+        let FavoriteItem::Service((service, data_info)) = fi else {
             continue;
         };
 
+        let is_dimmed = data_info.tot_data(DataRepr::Packets) == 0;
+
         service_col = service_col.push(
-            Text::new(clip_text(&service.to_string(), MAX_CHARS_SERVICE)).size(FONT_SIZE_FOOTER),
+            Text::new(clip_text(&service.to_string(), MAX_CHARS_SERVICE))
+                .size(FONT_SIZE_FOOTER)
+                .class(if is_dimmed {
+                    TextType::Dimmed
+                } else {
+                    TextType::Standard
+                }),
         );
     }
     service_col

src/gui/styles/container.rs

@@ -25,7 +25,6 @@ pub enum ContainerType {
     HighlightedOnHeader,
     ModalBackground,
     AdapterAddress,
-    DimmedText,
 }
 
 impl ContainerType {
@@ -35,10 +34,6 @@ impl ContainerType {
         Style {
             text_color: Some(match self {
                 ContainerType::Gradient(_) | ContainerType::Highlighted => colors.text_headers,
-                ContainerType::DimmedText => Color {
-                    a: ext.alpha_chart_badge,
-                    ..colors.text_body
-                },
                 _ => colors.text_body,
             }),
             background: Some(match self {
@@ -60,7 +55,7 @@ impl ContainerType {
                 ContainerType::Modal | ContainerType::HighlightedOnHeader => {
                     Background::Color(colors.primary)
                 }
-                ContainerType::Standard | ContainerType::Palette | ContainerType::DimmedText => {
+                ContainerType::Standard | ContainerType::Palette => {
                     Background::Color(Color::TRANSPARENT)
                 }
                 ContainerType::ModalBackground => Background::Color(Color {
@@ -86,7 +81,6 @@ impl ContainerType {
                 },
                 width: match self {
                     ContainerType::Standard
-                    | ContainerType::DimmedText
                     | ContainerType::ModalBackground
                     | ContainerType::Gradient(_)
                     | ContainerType::HighlightedOnHeader

src/gui/styles/text.rs

@@ -19,6 +19,7 @@ pub enum TextType {
     Danger,
     Sponsor,
     Welcome(f32),
+    Dimmed,
 }
 
 /// Returns a formatted caption followed by subtitle, new line, tab, and desc
@@ -77,6 +78,10 @@ pub fn highlight(style: &StyleType, element: TextType) -> Color {
         TextType::Outgoing => colors.outgoing,
         TextType::Danger | TextType::Sponsor => ext.red_alert_color,
         TextType::Standard => colors.text_body,
+        TextType::Dimmed => Color {
+            a: ext.alpha_chart_badge,
+            ..colors.text_body
+        },
     }
 }