sidebar: notifpane + scroll switch panes

Also placeholder for empty lists (notifs and events)
To switch panes, primary click + scroll

1 files changed, 24 insertions, 11 deletions

diff --git a/src/modules/sidebar/index.tsx b/src/modules/sidebar/index.tsx
index 3b62d82..a908430 100644
--- a/src/modules/sidebar/index.tsx
+++ b/src/modules/sidebar/index.tsx
@@ -1,7 +1,8 @@
 import type { Monitor } from "@/services/monitors";
 import { bind, register, Variable } from "astal";
-import { App, Astal, Gtk, Widget } from "astal/gtk3";
+import { App, Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import Dashboard from "./dashboard";
+import NotifPane from "./notifpane";
 
 @register()
 export default class SideBar extends Widget.Window {
@@ -18,17 +19,29 @@ export default class SideBar extends Widget.Window {
             // visible: false,
         });
 
+        const panes = [<Dashboard />, <NotifPane />];
+
         this.add(
-            <box vertical className="sidebar">
-                <stack
-                    vexpand
-                    transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
-                    transitionDuration={200}
-                    shown={bind(this.shown)}
-                >
-                    <Dashboard />
-                </stack>
-            </box>
+            <eventbox
+                onScroll={(_, event) => {
+                    if (event.modifier & Gdk.ModifierType.BUTTON1_MASK) {
+                        const index = panes.findIndex(p => p.name === this.shown.get()) + (event.delta_y < 0 ? -1 : 1);
+                        if (index < 0 || index >= panes.length) return;
+                        this.shown.set(panes[index].name);
+                    }
+                }}
+            >
+                <box vertical className="sidebar">
+                    <stack
+                        vexpand
+                        transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
+                        transitionDuration={200}
+                        shown={bind(this.shown)}
+                    >
+                        {panes}
+                    </stack>
+                </box>
+            </eventbox>
         );
     }
 }