Restyle AGS bar as filled full-width bar with inverse corners

modules/home/ags/app/style.scss

@@ -1,5 +1,7 @@
 @use "palette" as *;
 
+$radius: 12px;
+
 * {
     all: unset;
     font-family: $font-family;
@@ -13,12 +15,19 @@
 
 .bar {
     background: $base01;
-    border-radius: 10px;
-    margin: 8px;
     padding: 4px 12px;
     color: $base05;
 }
 
+.bar-corners {
+    background: transparent;
+}
+
+.corner {
+    background: transparent;
+    color: $base01;
+}
+
 .ws {
     min-width: 20px;
     border-radius: 6px;

modules/home/ags/app/widget/Bar.tsx

@@ -6,6 +6,38 @@ import { WifiWidget } from "./Wifi"
 import { BatteryWidget } from "./Battery"
 import { PowerWidget } from "./Power"
 
+const RADIUS = 12
+
+// paints the concave sliver below the bar at the screen edge: the r x r
+// square minus the quarter disk where the wallpaper shows through
+function Corner({ side }: { side: "left" | "right" }) {
+    return (
+        <drawingarea
+            className="corner"
+            widthRequest={RADIUS}
+            heightRequest={RADIUS}
+            halign={side === "left" ? Gtk.Align.START : Gtk.Align.END}
+            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)
+                }
+                cr.closePath()
+                cr.fill()
+            }}
+        />
+    )
+}
+
 export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
     const volume = VolumeWidget(gdkmonitor)
@@ -35,6 +67,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
                 anchor={TOP | LEFT | RIGHT}
                 application={App}
             >
+                <box vertical>
                     <centerbox className="bar">
                         <box
                             className="bar-left"
@@ -58,6 +91,12 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
                             {right}
                         </box>
                     </centerbox>
+                    <box className="bar-corners">
+                        <Corner side="left" />
+                        <box hexpand />
+                        <Corner side="right" />
+                    </box>
+                </box>
             </window>
         ),
         ...popups,

modules/home/ags/app/widget/Notifications.tsx

@@ -112,7 +112,7 @@ export default function Notifications(gdkmonitor: Gdk.Monitor) {
             anchor={TOP | RIGHT}
             exclusivity={Astal.Exclusivity.IGNORE}
             keymode={Astal.Keymode.NONE}
-            marginTop={48}
+            marginTop={54}
             marginRight={8}
             visible={bind(notifd, "notifications").as((ns) => ns.length > 0)}
         >