Add nix logo, clock format, and curved module separators

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;
+    background: $bar-bg;
-    padding: 4px 12px;
+    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;

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,8 +21,17 @@ 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)
+                // bar color comes from the parent strip so the sliver gets the
-                cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha)
+                // 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)
@@ -32,6 +42,12 @@ function Corner({ side }: { side: "left" | "right" }) {
                         cr.arc(0, h, w, -Math.PI / 2, 0)
                     }
                     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}
                         >
+                            <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">

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, () =>
+const time = Variable("").poll(1000, () => {
-    GLib.DateTime.new_now_local().format("%I:%M %p")!.replace(/^0/, "")
+    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)} />

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>
+    )
+}

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 {