Icon badge and Notification widget

- Add badge feature to `SquareIconWidget`
- Badges for notifications, weather alerts, etc.

ui/square-icon-widget.slint

@@ -1,20 +1,24 @@
 export component SquareIconWidget {
-    // Skeleton of suqre-shaped icon widgets
+    // Basic parameters shared by all square icon widgets
-    // with similar basic functions and appearance
     in property <int> bar_height;
     in property <string> icon_text;
     in property <string> tooltip_text;
 
-    // Colors  
+    // Colors
     in property <color> icon_color: #ffffff;
     in property <color> bg_normal: #8e9162;
     in property <color> bg_hover: #6d8a4d;
     in property <color> bg_clicked: #4a5f70;
 
+    // Badge
+    in property <int> badge_count: 0;
+    in property <color> badge_color: #165a96;
+    in property <color> badge_text_color: #ffffff;
+
     callback square_btn_callback();
 
-    height: bar_height * 1px;   // Same height as the bar
+    height: bar_height * 1px;
-    width: bar_height * 1px;    // Square shape
+    width: bar_height * 1px;
 
     Rectangle {
         background: touch_area.pressed ? bg_clicked
@@ -22,23 +26,53 @@ export component SquareIconWidget {
                   : bg_normal;
         border-radius: 3px;
 
+        // Main icon centered
         HorizontalLayout {
             padding-left: 3px;
             padding-right: 3px;
 
             Text {
-                text: icon_text;    // Every `SquareIconWidget` has an icon
+                text: icon_text;    // The icon
                 color: icon_color;
                 vertical-alignment: center;
                 horizontal-alignment: center;
             }
         }
 
+        // Click area
         touch_area := TouchArea {
-            // Action when the icon is clicked  
+            // Action when the icon is clicked
             clicked => { square_btn_callback(); }
         }
-    }
 
-    // Tooltip will be added later — Slint’s ToolTip element is window-global
+        // Badge overlay (bottom-right)
+        if badge_count > 0 : Rectangle {
+            // Outer container: positioned and height-constrained
+            height: (bar_height / 3 + 3) * 1px;
+            x: root.width - self.width - 1px;
+            y: root.height - self.height - 1px;
+            horizontal-stretch: 0;
+            
+            HorizontalLayout {
+                padding-left: 1px;
+                padding-right: 1px;
+                alignment: end;
+                
+                Rectangle {
+                    background: badge_color;
+                    border-radius: self.height / 3;
+                    min-width: self.height;
+                    
+                    Text {
+                        text: badge_count;
+                        color: badge_text_color;
+                        vertical-alignment: center;
+                        horizontal-alignment: center;
+                        font-size: (bar_height / 3) * 1px;
+                    }
+                }
+            }
+        }
+    }
+     // Tooltip will be added later
 }

ui/topbar.slint

@@ -57,12 +57,22 @@ export component TopBar inherits Window {
     // Weather widget
     in property <string> weather_tooltip;      
     in property <string> weather_icon;  
-    in property <color> weather_icon_color: #ffffff;
+    /*in property <color> weather_icon_color: #ffffff;
     in property <color> weather_bg_normal: #8e9162;
     in property <color> weather_bg_hover: #6d8a4d;
-    in property <color> weather_bg_clicked: #4a5f70;
+    in property <color> weather_bg_clicked: #4a5f70;*/
     callback show_weather();
 
+    // Notifications widget
+    in property <string> notif_tooltip;      
+    in property <string> notif_icon: "󰂚";  
+    in property <int> notif_count: 0;  
+    /*in property <color> notif_icon_color: #ffffff;
+    in property <color> notif_bg_normal: #8e9162;
+    in property <color> notif_bg_hover: #6d8a4d;
+    in property <color> notif_bg_clicked: #4a5f70;*/
+    callback show_notif();
+
     title: "chocobar";
     width: bar_width *1px;
     height: bar_height *1px;
@@ -107,15 +117,28 @@ export component TopBar inherits Window {
                 HorizontalLayout {
                     alignment: end; // Right-align
 
+                    // SquareIconWidget - Notifications
+                    SquareIconWidget {
+                        bar_height: root.bar_height;
+                        icon_text: root.notif_icon;
+                        tooltip_text: root.notif_tooltip;
+                        badge_count: root.notif_count;
+                        /*icon_color: root.notif_icon_color;
+                        bg_normal: root.notif_bg_normal;
+                        bg_hover: root.notif_bg_hover;
+                        bg_clicked: root.notif_bg_clicked;*/
+                        square_btn_callback => root.show_notif();
+                    }
+
                     // SquareIconWidget - Weather
                     SquareIconWidget {
                         bar_height: root.bar_height;
                         icon_text: root.weather_icon;
                         tooltip_text: root.weather_tooltip;
-                        icon_color: root.weather_icon_color;
+                        /*icon_color: root.weather_icon_color;
                         bg_normal: root.weather_bg_normal;
                         bg_hover: root.weather_bg_hover;
-                        bg_clicked: root.weather_bg_clicked;
+                        bg_clicked: root.weather_bg_clicked;*/
                         square_btn_callback => root.show_weather();
                     }