From 445e0269d86d184e9ca1cf1c0f10c4c5785fc459 Mon Sep 17 00:00:00 2001
From: Kalle Struik <kalle@kallestruik.nl>
Date: Tue, 1 Apr 2025 21:22:55 +0200
Subject: [PATCH] Improve bar

---
 modules/ags/config/style.scss            | 55 ++++++++++++++++--------
 modules/ags/config/widget/Systray.tsx    |  6 ++-
 modules/ags/config/widget/Workspaces.tsx |  2 +-
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/modules/ags/config/style.scss b/modules/ags/config/style.scss
index 96191a3..9aecdc4 100644
--- a/modules/ags/config/style.scss
+++ b/modules/ags/config/style.scss
@@ -13,23 +13,31 @@ window.Bar {
 }
 
 .pill {
-  background: $ctp-surface-0;
-  border-radius: 5px;
-
   >.icon {
     color: $ctp-surface-0;
     padding: 6px 8px;
     font-size: 18px;
   }
 
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
+  &.icon-left {
+    &>.icon {
+      border-radius: 5px 0 0 5px;
+    }
+    &>.label {
+      border-radius: 0 5px 5px 0;
+    }
   }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
+  &.icon-right {
+    &>.icon {
+      border-radius: 0 5px 5px 0;
+    }
+    &>.label {
+      border-radius: 5px 0 0 5px;
+    }
   }
 
   >.label {
+    background: $ctp-surface-0;
     padding: 0 8px;
     font-size: 16px;
   }
@@ -48,17 +56,12 @@ window.Bar {
     background: $ctp-blue;
   }
 
-  >.labels {
-    padding: 0 8px;
-    font-size: 16px;
+  >.label button {
+    all: unset;
 
-    button {
-      all: unset;
-
-      &.add {
-        font-size: 12px;
-        margin-left: 4px;
-      }
+    &.add {
+      font-size: 12px;
+      margin-left: 4px;
     }
   }
 }
@@ -70,7 +73,23 @@ window.Bar {
     font-size: 20px;
   }
 
-  >.item {
+  .items {
+    background: $ctp-surface-0;
+    font-size: 16px;
+  }
+
+  &.icon-left {
+    .items {
+      border-radius: 0 5px 5px 0;
+    }
+  }
+  &.icon-right {
+    .items {
+      border-radius: 5px 0 0 5px;
+    }
+  }
+
+  .item {
     all: unset;
     padding: 8px 8px;
   }
diff --git a/modules/ags/config/widget/Systray.tsx b/modules/ags/config/widget/Systray.tsx
index e535ac3..b5a8887 100644
--- a/modules/ags/config/widget/Systray.tsx
+++ b/modules/ags/config/widget/Systray.tsx
@@ -6,9 +6,11 @@ const tray = Tray.get_default()
 export default function Systray(props: { iconSide: "left" | "right" }) {
     return <box className={`pill Systray icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="󱊔" />}
-        {bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
+        <box className="items">
+            {bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
+        </box>
         {props.iconSide == "right" && <label className="icon" label="󱊔" />}
-    </box>
+    </box >
 }
 
 function SystrayItem({ item }: { item: Tray.TrayItem }) {
diff --git a/modules/ags/config/widget/Workspaces.tsx b/modules/ags/config/widget/Workspaces.tsx
index e78d8aa..2d9d5af 100644
--- a/modules/ags/config/widget/Workspaces.tsx
+++ b/modules/ags/config/widget/Workspaces.tsx
@@ -6,7 +6,7 @@ export default function Workspaces(props: { monitor: string, iconSide: "left" |
 
     return <box className={`pill Workspaces icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="󱗼" />}
-        <box className="labels">
+        <box className="label">
             {bind(hyprland, "workspaces").as(wss => wss
                 .filter(it => it && it.get_monitor && it.get_monitor().name == props.monitor)
                 .sort((a, b) => a.get_id() - b.get_id())