Improve bar

modules/ags/config/style.scss

@@ -8,89 +8,88 @@ window.Bar {
     color: $ctp-text;
 
     >centerbox {
-        background: $ctp-base;
-        border-radius: 5px;
-        margin: 8px;
-        padding: 8px;
+        margin: 8px 8px 0 8px;
     }
 }
 
-.Time {
-  background: $ctp-surface-0;
-  border-radius: 5px;
-
+.pill {
   >.icon {
-    background: $ctp-red;
     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;
   }
 }
 
-.Workspaces {
-  background: $ctp-surface-0;
-  border-radius: 5px;
+.Time >.icon {
+  background: $ctp-red;
+}
 
+.Date >.icon {
+  background: $ctp-lavender;
+}
+
+.Workspaces {
   >.icon {
     background: $ctp-blue;
-    color: $ctp-surface-0;
-    padding: 6px 8px;
-    font-size: 18px;
   }
 
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
-  }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
-  }
+  >.label button {
+    all: unset;
 
-  >.labels {
-    padding: 0 8px;
-    font-size: 16px;
-
-    button {
-      all: unset;
-
-      &.add {
-        font-size: 12px;
-        margin-left: 4px;
-      }
+    &.add {
+      font-size: 12px;
+      margin-left: 4px;
     }
   }
 }
 
 .Systray {
-  background: $ctp-surface-0;
-  border-radius: 5px;
-
   >.icon {
     background: $ctp-green;
-    color: $ctp-surface-0;
     padding: 4px 8px 0 8px;
     font-size: 20px;
-    border-radius: 5px 0 0 5px;
   }
 
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
-  }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
+  .items {
+    background: $ctp-surface-0;
+    font-size: 16px;
   }
 
-  >.item {
+  &.icon-left {
+    .items {
+      border-radius: 0 5px 5px 0;
+    }
+  }
+  &.icon-right {
+    .items {
+      border-radius: 5px 0 0 5px;
+    }
+  }
+
+  .item {
     all: unset;
     padding: 8px 8px;
   }

modules/ags/config/widget/Clock.tsx

@@ -6,7 +6,7 @@ export default function Clock(props: { iconSide: "left" | "right" }) {
     const time = Variable<string>("").poll(1000, () =>
         GLib.DateTime.new_now_local().format(TIME_FORMAT)!)
 
-    return <box className={`Time icon-${props.iconSide}`}>
+    return <box className={`pill Time icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="" />}
         <label
             className="label"

modules/ags/config/widget/Date.tsx

@@ -0,0 +1,18 @@
+import { GLib, Variable } from "astal"
+
+const DATE_FORMAT = "%Y-%m-%d"
+
+export default function Date(props: { iconSide: "left" | "right" }) {
+    const date = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(DATE_FORMAT)!)
+
+    return <box className={`pill Date icon-${props.iconSide}`}>
+        {props.iconSide == "left" && <label className="icon" label="" />}
+        <label
+            className="label"
+            onDestroy={() => date.drop()}
+            label={date()}
+        />
+        {props.iconSide == "right" && <label className="icon" label="" />}
+    </box>
+}

modules/ags/config/widget/RightBar.tsx

@@ -1,5 +1,6 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk3";
 import Clock from "./Clock";
+import Date from "./Date";
 import Workspaces from "./Workspaces";
 import Systray from "./Systray";
 
@@ -13,13 +14,14 @@ export default function RightBar(gdkmonitor: Gdk.Monitor) {
         anchor={TOP | LEFT | RIGHT}
         application={App}>
         <centerbox>
-            <box halign={Gtk.Align.START}>
+            <box halign={Gtk.Align.START} spacing={8}>
                 <Clock iconSide="left" />
+                <Date iconSide="left" />
             </box>
-            <box halign={Gtk.Align.CENTER}>
+            <box halign={Gtk.Align.CENTER} spacing={8}>
                 <Workspaces monitor="HDMI-A-1" iconSide="left" />
             </box>
-            <box halign={Gtk.Align.END}>
+            <box halign={Gtk.Align.END} spacing={8}>
                 <Systray iconSide="left" />
             </box>
         </centerbox>

modules/ags/config/widget/Systray.tsx

@@ -4,11 +4,13 @@ import Tray from "gi://AstalTray"
 const tray = Tray.get_default()
 
 export default function Systray(props: { iconSide: "left" | "right" }) {
-    return <box className={`Systray icon-${props.iconSide}`}>
+    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 }) {

modules/ags/config/widget/Workspaces.tsx

@@ -4,9 +4,9 @@ import Hyprland from "gi://AstalHyprland"
 export default function Workspaces(props: { monitor: string, iconSide: "left" | "right" }) {
     const hyprland = Hyprland.get_default();
 
-    return <box className={`Workspaces icon-${props.iconSide}`}>
+    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())