feat(system-tray): Windows-style toggle arrow + floating popover

src/mewline/constants.py

@@ -115,7 +115,11 @@
                 "10": "10",
             },
         },
-        "system_tray": {"icon_size": 16, "ignore": []},
+        "system_tray": {
+            "icon_size": 16, 
+            "ignore": [],
+            "pinned": ["Telegram"]
+        },
         "power": {"icon": "", "icon_size": "16px", "tooltip": True},
         "datetime": {"format": "%d-%m-%y %H:%M"},
         "battery": {

src/mewline/shared/popover.py

@@ -26,6 +26,7 @@ def __init__(self):
             name="popover-overlay",
             style_classes="popover-overlay",
             anchor="left top right bottom",
+            margin="-50px 0px 0px 0px",
             exclusivity="auto",
             layer="overlay",
             type="top-level",
@@ -87,14 +88,14 @@ def popover_closed(widget: Widget): ...
 
 @GObject.type_register
 class Popover(Widget):
-    """Memory-efficient popover implementation (ported from Tsumiki style)."""
+    """Memory-efficient popover implementation"""
 
     __gsignals__: ClassVar = {
         "popover-opened": (GObject.SignalFlags.RUN_LAST, GObject.TYPE_NONE, ()),
         "popover-closed": (GObject.SignalFlags.RUN_LAST, GObject.TYPE_NONE, ()),
     }
 
-    def __init__(self, content=None, point_to=None, gap: int = 2):
+    def __init__(self, content=None, point_to=None, gap: int = 4):
         super().__init__()
         self._content_factory = None
         self._point_to = point_to
@@ -122,22 +123,30 @@ def open(self, *_):
     def _calculate_margins(self):
         widget_allocation = self._point_to.get_allocation()
         popover_size = self._content_window.get_size()
+
         display = Gdk.Display.get_default()
         screen = display.get_default()
-        monitor_at_window = screen.get_monitor_at_window(self._point_to.get_window())
+        monitor_at_window = screen.get_monitor_at_window(
+            self._point_to.get_window()
+        )
         monitor_geometry = monitor_at_window.get_geometry()
-        # Center under widget horizontally
+
+        # Center horizontally under the widget
         x = (
             widget_allocation.x
-            + (widget_allocation.width / 2)
-            - (popover_size.width / 2)
+            + widget_allocation.width / 2
+            - popover_size.width / 2
         )
-        y = widget_allocation.y + widget_allocation.height + self._gap
+
+        y = widget_allocation.y + self._gap
+
+        # Horizontal bounds check
         if x <= 0:
             x = widget_allocation.x
         elif x + popover_size.width >= monitor_geometry.width:
             x = widget_allocation.x - popover_size.width + widget_allocation.width
-        return [y, 0, 0, int(x)]
+
+        return [int(y), 0, 0, int(x)]
 
     def set_position(self, position: tuple[int, int, int, int] | None = None):
         if position is None:
@@ -157,11 +166,8 @@ def _create_popover(self):
         self._content_window.add(
             Box(style_classes="popover-content", children=self._content)
         )
-        # Key and focus handling
         try:
             self._content_window.connect("key-press-event", self._on_key_press)
-            # Do not auto-close on focus-out to avoid closing
-            # while interacting with sliders
             self._content_window.set_can_focus(True)
         except Exception:
             ...
@@ -173,8 +179,6 @@ def _create_popover(self):
             self._content_window.grab_focus()
 
         self._visible = True
-        self._content_window.show()
-        self._visible = True
 
     def hide_popover(self):
         if not self._visible or not self._content_window:
@@ -195,7 +199,6 @@ def _on_key_press(self, widget, event):
 
         return False
 
-    # Compatibility helpers
     def close(self):
         return self.hide_popover()
 

src/mewline/styles/system_tray.scss

@@ -2,42 +2,89 @@
 @use "variable.scss";
 @use "common/functions.scss";
 
+// ── Status-bar toggle capsule ──────────────────────────────────────────────
 #system-tray {
-  padding: 0.125em 0.7em;
-  color: theme.$text-color;
+  padding: 0.2em 1em;
+  border-radius: variable.$radius-large;
+
+  #system-tray-pinned {
+    // Pinned icons sit flush next to the chevron
+  }
 
-  // Recolor tray icons (symbolic via CSS, raster are tinted in code)
-  image,
-  .tray-icon {
+  #nerd-icon.chevron-icon {
+    font-size: 0.75em;
     color: theme.$text-color;
+    opacity: 0.8;
   }
 
-  & > button {
-    margin: 0 0.1em;
-    padding: 0 0.15em;
-    border-radius: variable.$radius-large;
+  &.active,
+  &:active {
+    background-color: theme.$background-highlight;
+
+    #nerd-icon.chevron-icon {
+      color: theme.$accent-color;
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    background-color: theme.$background-highlight;
+  }
+
+  // Pinned icon buttons
+  .tray-item-btn {
+    padding: 0 0.1em;
+    border-radius: variable.$radius;
+    background: transparent;
+    min-width: 0;
+    min-height: 0;
+
+    &:hover {
+      background-color: theme.$background-highlight;
+    }
+  }
+}
+
+// ── Popup grid ────────────────────────────────────────────────────────────
+#system-tray-popup {
+  background-color: theme.$background-base;
+  border-radius: variable.$radius; 
+  padding: 0; 
+
+  .tray-item-btn {
+    padding: 0.35em;
+    border-radius: variable.$radius;
+    background: transparent;
+    min-width: 32px;
+    min-height: 32px;
+
     &:hover {
       background-color: theme.$background-highlight;
     }
 
     &:active {
-      background-color: theme.$text-color;
+      opacity: 0.7;
+    }
+
+    image {
+      color: theme.$text-color;
     }
   }
 }
 
+// ── GTK context menus (right-click on a tray icon) ────────────────────────
 #system-tray-menu > menuitem menu,
 #system-tray-menu {
   background-color: theme.$background-highlight;
-  border-radius: 1em;
+  border-radius: variable.$radius;
   padding: functions.toEm(10);
   min-width: 100px;
   font-weight: bold;
 }
 
 #system-tray-menu > menuitem menu > menuitem,
 #system-tray-menu > menuitem {
-  margin: 5px 0px;
+  margin: 5px 0;
   background-color: theme.$background-highlight;
   padding: 0.3em 0.5em;
   border-radius: variable.$radius;
@@ -50,13 +97,11 @@
 }
 
 #system-tray-menu > menuitem menu > menuitem:hover,
-#system-tray-menu > menuitem:hover,
-#submenu-button:hover {
+#system-tray-menu > menuitem:hover {
   background-color: theme.$background-highlight;
   color: theme.$accent-color;
 }
 
-// Ensure symbolic icons inside tray menus also get the accent color
 #system-tray-menu image {
   color: theme.$text-color;
 }

src/mewline/utils/config_structure.py

@@ -63,6 +63,7 @@ class WorkspacesModule(BaseModel):
 class TrayModule(BaseModel):
     icon_size: int
     ignore: list[str]
+    pinned: list[str]
 
 
 class PowerModule(BaseModel):