From 28e0c8dc31d87dbe3a2bc8ce2f794163153eeb0c Mon Sep 17 00:00:00 2001
From: Joshua Yuen <joshuayuen99@gmail.com>
Date: Sat, 12 Sep 2026 15:27:13 -0400
Subject: [PATCH] Add nix logo, clock format, and curved module separators

---
 modules/home/ags/app/style.scss       | 62 +++++++++++++++++++++++----
 modules/home/ags/app/widget/Bar.tsx   | 54 +++++++++++++++--------
 modules/home/ags/app/widget/Clock.tsx |  8 ++--
 modules/home/ags/app/widget/Logo.tsx  |  9 ++++
 modules/home/ags/default.nix          |  1 +
 5 files changed, 106 insertions(+), 28 deletions(-)
 create mode 100644 modules/home/ags/app/widget/Logo.tsx

diff --git a/modules/home/ags/app/style.scss b/modules/home/ags/app/style.scss
index 51c195f..2f2f027 100644
--- a/modules/home/ags/app/style.scss
+++ b/modules/home/ags/app/style.scss
@@ -1,6 +1,9 @@
 @use "palette" as *;
 
 $radius: 12px;
+$bar-alpha: 0.7;
+$bar-bg: transparentize($base01, 1 - $bar-alpha);
+$module-bg: transparentize($base02, 0.4);
 
 * {
     all: unset;
@@ -14,18 +17,66 @@ $radius: 12px;
 }
 
 .bar {
-    background: $base01;
-    padding: 4px 12px;
+    background: $bar-bg;
+    padding: 0;
     color: $base05;
+
+    label,
+    icon {
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+        -gtk-icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+    }
 }
 
 .bar-corners {
     background: transparent;
+    color: $bar-bg;
 }
 
 .corner {
     background: transparent;
-    color: $base01;
+    color: $module-bg;
+}
+
+.bar .first,
+.bar .center,
+.bar .end,
+.bar .last {
+    background: $module-bg;
+    padding: 0 10px;
+
+    &:hover {
+        background: $base03;
+    }
+}
+
+.bar .first {
+    border-radius: 0 0 ($radius * 2.5) 0;
+    margin: 0 2px 0 0;
+}
+
+.bar .center {
+    border-radius: $radius;
+    margin: 0 2px;
+}
+
+.bar .end {
+    border-radius: ($radius * 0.75) ($radius * 2) ($radius * 0.75) ($radius * 2);
+    margin: 0 2px;
+}
+
+.bar .last {
+    border-radius: 0 0 0 ($radius * 2.5);
+    margin: 0 0 0 2px;
+}
+
+.logo icon {
+    min-width: 20px;
+    min-height: 20px;
+}
+
+.clock {
+    font-weight: bold;
 }
 
 .ws {
@@ -40,11 +91,6 @@ $radius: 12px;
     color: $base00;
 }
 
-.clock {
-    font-weight: bold;
-    margin: 0 8px;
-}
-
 .volume {
     border-radius: 6px;
     margin: 0 2px;
diff --git a/modules/home/ags/app/widget/Bar.tsx b/modules/home/ags/app/widget/Bar.tsx
index 8e37273..f2e081b 100644
--- a/modules/home/ags/app/widget/Bar.tsx
+++ b/modules/home/ags/app/widget/Bar.tsx
@@ -1,5 +1,6 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk3"
 import Workspaces from "./Workspaces"
+import Logo from "./Logo"
 import Clock from "./Clock"
 import { VolumeWidget } from "./Volume"
 import { WifiWidget } from "./Wifi"
@@ -20,18 +21,33 @@ function Corner({ side }: { side: "left" | "right" }) {
             onDraw={(self, cr) => {
                 const w = self.get_allocated_width()
                 const h = self.get_allocated_height()
-                const c = self.get_style_context().get_color(Gtk.StateFlags.NORMAL)
-                cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha)
-                if (side === "left") {
-                    cr.moveTo(0, 0)
-                    cr.lineTo(w, 0)
-                    cr.arcNegative(w, h, w, -Math.PI / 2, -Math.PI)
-                } else {
-                    cr.moveTo(w, 0)
-                    cr.lineTo(0, 0)
-                    cr.arc(0, h, w, -Math.PI / 2, 0)
+                // bar color comes from the parent strip so the sliver gets the
+                // same bar-bg + module-bg stack as the pills
+                const bar = self
+                    .get_parent()!
+                    .get_style_context()
+                    .get_color(Gtk.StateFlags.NORMAL)
+                const mod = self
+                    .get_style_context()
+                    .get_color(Gtk.StateFlags.NORMAL)
+
+                const trace = () => {
+                    if (side === "left") {
+                        cr.moveTo(0, 0)
+                        cr.lineTo(w, 0)
+                        cr.arcNegative(w, h, w, -Math.PI / 2, -Math.PI)
+                    } else {
+                        cr.moveTo(w, 0)
+                        cr.lineTo(0, 0)
+                        cr.arc(0, h, w, -Math.PI / 2, 0)
+                    }
+                    cr.closePath()
                 }
-                cr.closePath()
+
+                cr.setSourceRGBA(bar.red, bar.green, bar.blue, bar.alpha)
+                trace()
+                cr.fillPreserve()
+                cr.setSourceRGBA(mod.red, mod.green, mod.blue, mod.alpha)
                 cr.fill()
             }}
         />
@@ -72,23 +88,27 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
                         <box
                             className="bar-left"
                             halign={Gtk.Align.START}
-                            valign={Gtk.Align.CENTER}
+                            valign={Gtk.Align.FILL}
                         >
-                            <Workspaces />
+                            <Logo />
+                            <box className="center">
+                                <Workspaces />
+                            </box>
                         </box>
                         <box
                             className="bar-center"
                             halign={Gtk.Align.CENTER}
                             valign={Gtk.Align.CENTER}
-                        >
-                            <Clock />
-                        </box>
+                        />
                         <box
                             className="bar-right"
                             halign={Gtk.Align.END}
-                            valign={Gtk.Align.CENTER}
+                            valign={Gtk.Align.FILL}
                         >
                             {right}
+                            <box className="clock last">
+                                <Clock />
+                            </box>
                         </box>
                     </centerbox>
                     <box className="bar-corners">
diff --git a/modules/home/ags/app/widget/Clock.tsx b/modules/home/ags/app/widget/Clock.tsx
index eeda39b..e6b0f83 100644
--- a/modules/home/ags/app/widget/Clock.tsx
+++ b/modules/home/ags/app/widget/Clock.tsx
@@ -1,9 +1,11 @@
 import GLib from "gi://GLib"
 import { Variable, bind } from "astal"
 
-const time = Variable("").poll(1000, () =>
-    GLib.DateTime.new_now_local().format("%I:%M %p")!.replace(/^0/, "")
-)
+const time = Variable("").poll(1000, () => {
+    const now = GLib.DateTime.new_now_local()
+    const clock = now.format("%I:%M %p")!.replace(/^0/, "")
+    return `${now.format("%a, %d %b")}, ${clock}`
+})
 
 export default function Clock() {
     return <label className="clock" label={bind(time)} />
diff --git a/modules/home/ags/app/widget/Logo.tsx b/modules/home/ags/app/widget/Logo.tsx
new file mode 100644
index 0000000..47dae69
--- /dev/null
+++ b/modules/home/ags/app/widget/Logo.tsx
@@ -0,0 +1,9 @@
+import Gtk from "gi://Gtk?version=3.0"
+
+export default function Logo() {
+    return (
+        <box className="logo first" valign={Gtk.Align.FILL}>
+            <icon icon="nix-snowflake-white" pixelSize={20} />
+        </box>
+    )
+}
\ No newline at end of file
diff --git a/modules/home/ags/default.nix b/modules/home/ags/default.nix
index dced158..38972ea 100644
--- a/modules/home/ags/default.nix
+++ b/modules/home/ags/default.nix
@@ -74,6 +74,7 @@ in
       ags-bar
       pkgs.ags
       pkgs.dart-sass
+      pkgs.nixos-icons
     ];
 
     wayland.windowManager.hyprland = mkIf hyprlandCfg.enable {