sidebar: create dashboard

2 files changed, 70 insertions, 9 deletions

diff --git a/src/widgets/notification.tsx b/src/widgets/notification.tsx
index 1048826..368b99b 100644
--- a/src/widgets/notification.tsx
+++ b/src/widgets/notification.tsx
@@ -51,19 +51,19 @@ const AppIcon = ({ appIcon, desktopEntry }: { appIcon: string; desktopEntry: str
     return icon ? <icon className="app-icon" icon={icon} /> : null;
 };
 
-const Image = ({ popup, icon }: { popup?: boolean; icon: string }) => {
+const Image = ({ compact, icon }: { compact?: boolean; icon: string }) => {
     if (GLib.file_test(icon, GLib.FileTest.EXISTS))
         return (
             <box
                 valign={Gtk.Align.START}
-                className={`image ${popup ? "small" : ""}`}
+                className={`image ${compact ? "small" : ""}`}
                 css={`
                     background-image: url("${icon}");
                 `}
             />
         );
     if (Astal.Icon.lookup_icon(icon))
-        return <icon valign={Gtk.Align.START} className={`image ${popup ? "small" : ""}`} icon={icon} />;
+        return <icon valign={Gtk.Align.START} className={`image ${compact ? "small" : ""}`} icon={icon} />;
     return null;
 };
 
@@ -72,7 +72,15 @@ export default class Notification extends Widget.Box {
     readonly #revealer;
     #destroyed = false;
 
-    constructor({ notification, popup }: { notification: AstalNotifd.Notification; popup?: boolean }) {
+    constructor({
+        notification,
+        popup,
+        compact = popup,
+    }: {
+        notification: AstalNotifd.Notification;
+        popup?: boolean;
+        compact?: boolean;
+    }) {
         super({ className: "notification" });
 
         const time = Variable(getTime(notification.time)).poll(60000, () => getTime(notification.time));
@@ -94,17 +102,17 @@ export default class Notification extends Widget.Box {
                         </box>
                         <box hexpand className="separator" />
                         <box className="content">
-                            {notification.image && <Image popup={popup} icon={notification.image} />}
+                            {notification.image && <Image compact={compact} icon={notification.image} />}
                             <box vertical>
                                 <label className="summary" xalign={0} label={notification.summary} truncate />
                                 {notification.body && (
                                     <label
                                         className="body"
                                         xalign={0}
-                                        label={popup ? notification.body.split("\n")[0] : notification.body}
+                                        label={compact ? notification.body.split("\n")[0] : notification.body}
                                         wrap
-                                        lines={popup ? 1 : -1}
-                                        truncate={popup}
+                                        lines={compact ? 1 : -1}
+                                        truncate={compact}
                                     />
                                 )}
                             </box>
@@ -132,7 +140,7 @@ export default class Notification extends Widget.Box {
 
         // Init animation
         const width = this.get_preferred_width()[1];
-        this.css = `margin-left: ${width}px; margin-right: -${width}px;`;
+        if (popup) this.css = `margin-left: ${width}px; margin-right: -${width}px;`;
         timeout(1, () => {
             this.#revealer.revealChild = true;
             this.css = `transition: 300ms cubic-bezier(0.05, 0.9, 0.1, 1.1); margin-left: 0; margin-right: 0;`;
diff --git a/src/widgets/slider.tsx b/src/widgets/slider.tsx
new file mode 100644
index 0000000..fb219bd
--- /dev/null
+++ b/src/widgets/slider.tsx
@@ -0,0 +1,53 @@
+import { bind, type Binding } from "astal";
+import { Gtk } from "astal/gtk3";
+import type cairo from "cairo";
+
+export default ({ value }: { value: Binding<number> }) => (
+    <drawingarea
+        hexpand
+        valign={Gtk.Align.CENTER}
+        className="slider"
+        css={bind(value).as(v => `font-size: ${v}px;`)}
+        setup={self => {
+            const halfPi = Math.PI / 2;
+
+            const styleContext = self.get_style_context();
+            self.set_size_request(-1, styleContext.get_property("min-height", Gtk.StateFlags.NORMAL) as number);
+
+            self.connect("draw", (_, cr: cairo.Context) => {
+                const styleContext = self.get_style_context();
+
+                const width = self.get_allocated_width();
+                const height = styleContext.get_property("min-height", Gtk.StateFlags.NORMAL) as number;
+                self.set_size_request(-1, height);
+
+                const progressValue = styleContext.get_property("font-size", Gtk.StateFlags.NORMAL) as number;
+                let radius = styleContext.get_property("border-radius", Gtk.StateFlags.NORMAL) as number;
+
+                const bg = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+                cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha);
+
+                // Background
+                cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left
+                cr.arc(width - radius, radius, radius, -halfPi, 0); // Top right
+                cr.arc(width - radius, height - radius, radius, 0, halfPi); // Bottom right
+                cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
+                cr.fill();
+
+                // Flatten when near 0
+                radius = Math.min(radius, Math.min(width * progressValue, height) / 2);
+
+                const progressPosition = width * progressValue - radius;
+                const fg = styleContext.get_color(Gtk.StateFlags.NORMAL);
+                cr.setSourceRGBA(fg.red, fg.green, fg.blue, fg.alpha);
+
+                // Foreground
+                cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left
+                cr.arc(progressPosition, radius, radius, -halfPi, 0); // Top right
+                cr.arc(progressPosition, height - radius, radius, 0, halfPi); // Bottom right
+                cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
+                cr.fill();
+            });
+        }}
+    />
+);