6 files changed, 230 insertions, 109 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/ActiveWindowDisplay.qml b/accounts/gkleen@sif/shell/quickshell/ActiveWindowDisplay.qml
index d7e8e7c5..57ade488 100644
--- a/accounts/gkleen@sif/shell/quickshell/ActiveWindowDisplay.qml
+++ b/accounts/gkleen@sif/shell/quickshell/ActiveWindowDisplay.qml
@@ -7,10 +7,11 @@ Item {
   id: activeWindowDisplay
 
   required property int maxWidth
+  required property var screen
 
   property var activeWindow: {
     let currWindowId = Array.from(NiriService.workspaces).find(ws => {
-      return ws.output === bar.screen.name && ws.is_active;
+      return ws.output === screen.name && ws.is_active;
     })?.active_window_id;
 
     return currWindowId ? Array.from(NiriService.windows).find(win => win.id == currWindowId) : null;
diff --git a/accounts/gkleen@sif/shell/quickshell/Bar.qml b/accounts/gkleen@sif/shell/quickshell/Bar.qml
index accad2a9..aab1607f 100644
--- a/accounts/gkleen@sif/shell/quickshell/Bar.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Bar.qml
@@ -5,7 +5,9 @@ import QtQuick
 PanelWindow {
   id: bar
 
-  property var modelData
+  required property var screen
+
+  property var calendarMouseArea: clock.calendarMouseArea
 
   anchors {
     top: true
@@ -17,7 +19,6 @@ PanelWindow {
     right: 26 + 8
   }
 
-  screen: modelData
   implicitHeight: 21
   color: "transparent"
 
@@ -50,6 +51,7 @@ PanelWindow {
     spacing: 5
 
     ActiveWindowDisplay {
+      screen: bar.screen
       maxWidth: bar.width - 2*Math.max(left.width, right.width) - 2*8
     }
   }
@@ -78,6 +80,8 @@ PanelWindow {
       width: 4
     }
 
-    Clock {}
+    Clock {
+      id: clock
+    }
   }
 }
\ No newline at end of file
diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
index 65b842b3..58600adb 100644
--- a/accounts/gkleen@sif/shell/quickshell/Clock.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -4,6 +4,7 @@ import Quickshell
 import Custom as Custom
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell.Widgets
 
 Item {
   width: clock.contentWidth
@@ -16,6 +17,18 @@ Item {
     anchors.fill: parent
     hoverEnabled: true
     enabled: true
+
+    property real angleRem: 0
+    property real sensitivity: 1 / 120
+
+    function scrollYear(event) {
+      angleRem += event.angleDelta.y;
+      const d = Math.round(angleRem * sensitivity);
+      yearCalendar.year += d;
+      angleRem -= d / sensitivity;
+    }
+
+    onWheel: event => scrollYear(event)
   }
 
   Text {
@@ -37,145 +50,200 @@ Item {
   }
 
   PopupWindow {
+    id: tooltip
+
+    property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse
+
     anchor {
       item: clockMouseArea
-      edges: Edges.Bottom
+      edges: Edges.Bottom | Edges.Left
     }
-    visible: clockMouseArea.containsMouse
+    visible: false
 
-    implicitWidth: yearCalendar.implicitWidth + 16
-    implicitHeight: yearCalendar.implicitHeight + 16
-    color: "black"
+    onNextVisibleChanged: hangTimer.restart()
 
-    GridLayout {
-      property int year: { const d = new Date(); return d.getFullYear(); }
+    Timer {
+      id: hangTimer
+      interval: 100
+      onTriggered: tooltip.visible = tooltip.nextVisible
+    }
 
-      id: yearCalendar
+    implicitWidth: clockTooltipContent.width
+    implicitHeight: clockTooltipContent.height
+    color: "black"
 
-      columns: 3
-      columnSpacing: 16
-      rowSpacing: 16
+    onVisibleChanged: {
+      const d = new Date();
+      yearCalendar.year = d.getFullYear();
+      clockMouseArea.angleRem = 0;
+    }
 
-      anchors.centerIn: parent
+    WrapperMouseArea {
+      id: tooltipMouseArea
 
-      Repeater {
-        model: 12
+      hoverEnabled: true
+      enabled: true
 
-        GridLayout {
-          columns: 2
+      onWheel: event => clockMouseArea.scrollYear(event)
 
-          required property int index
-          property int month: index
+      anchors.fill: parent
 
-          id: monthCalendar
+      WrapperItem {
+        id: clockTooltipContent
 
-          Layout.alignment: Qt.AlignTop | Qt.AlignRight
-          Layout.fillWidth: false
+        margin: 8
+        leftMargin: 0
 
+        ColumnLayout {
           Text {
-            Layout.column: 1
-            Layout.fillWidth: true
+            id: yearLabel
 
             horizontalAlignment: Text.AlignHCenter
 
-            font.pointSize: 10
+            font.pointSize: 14
             font.family: "Fira Sans"
+            font.features: { "tnum": 1 }
+            color: "white"
 
-            text: {
-              const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd");
-              return date.toLocaleString(Qt.locale("en_DK"), "MMMM")
-            }
+            text: yearCalendar.year
 
-            color: "#ffead3"
+            Layout.fillWidth: true
+            Layout.bottomMargin: 8
           }
 
-          DayOfWeekRow {
-            locale: grid.locale
+          GridLayout {
+            property int year: { const d = new Date(); return d.getFullYear(); }
 
-            Layout.row: 1
-            Layout.column: 1
-            Layout.fillWidth: true
+            id: yearCalendar
 
-            delegate: Text {
-              required property string shortName
+            columns: 3
+            columnSpacing: 16
+            rowSpacing: 16
 
-              font.pointSize: 10
-              font.family: "Fira Mono"
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: false
 
-              text: shortName
-              color: "#ffcc66"
+            Repeater {
+              model: 12
 
-              horizontalAlignment: Text.AlignRight
-              verticalAlignment: Text.AlignVCenter
-            }
-          }
+              GridLayout {
+                columns: 2
+
+                required property int index
+                property int month: index
+
+                id: monthCalendar
+
+                Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.fillWidth: false
 
-          WeekNumberColumn {
-            month: grid.month
-            year: grid.year
-            locale: grid.locale
+                Text {
+                  Layout.column: 1
+                  Layout.fillWidth: true
 
-            Layout.fillHeight: true
+                  horizontalAlignment: Text.AlignHCenter
 
-            delegate: Text {
-              required property int weekNumber
+                  font.pointSize: 10
+                  font.family: "Fira Sans"
 
-              opacity: {
-                const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
-                const dayOfWeek = simple.getDay();
-                const isoWeekStart = simple;
+                  text: {
+                    const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd");
+                    return date.toLocaleString(Qt.locale("en_DK"), "MMMM")
+                  }
 
-                isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
-                if (dayOfWeek > 4) {
-                    isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                  color: "#ffead3"
                 }
 
-                for (let i = 0; i < 7; i++) {
-                  const dayInWeek = new Date(isoWeekStart);
-                  dayInWeek.setDate(dayInWeek.getDate() + i);
-                  if (dayInWeek.getMonth() == monthCalendar.month)
-                    return 1;
+                DayOfWeekRow {
+                  locale: grid.locale
+
+                  Layout.row: 1
+                  Layout.column: 1
+                  Layout.fillWidth: true
+
+                  delegate: Text {
+                    required property string shortName
+
+                    font.pointSize: 10
+                    font.family: "Fira Mono"
+
+                    text: shortName
+                    color: "#ffcc66"
+
+                    horizontalAlignment: Text.AlignRight
+                    verticalAlignment: Text.AlignVCenter
+                  }
                 }
 
-                return 0;
-              }
+                WeekNumberColumn {
+                  month: grid.month
+                  year: grid.year
+                  locale: grid.locale
 
-              font.pointSize: 10
-              font.family: "Fira Sans"
-              font.features: { "tnum": 1 }
+                  Layout.fillHeight: true
 
-              text: weekNumber
-              color: "#99ffdd"
+                  delegate: Text {
+                    required property int weekNumber
 
-              horizontalAlignment: Text.AlignRight
-              verticalAlignment: Text.AlignVCenter
-            }
-          }
+                    opacity: {
+                      const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
+                      const dayOfWeek = simple.getDay();
+                      const isoWeekStart = simple;
 
-          MonthGrid {
-            id: grid
+                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                      if (dayOfWeek > 4) {
+                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                      }
 
-            year: yearCalendar.year
-            month: monthCalendar.month
-            locale: Qt.locale("en_DK")
+                      for (let i = 0; i < 7; i++) {
+                        const dayInWeek = new Date(isoWeekStart);
+                        dayInWeek.setDate(dayInWeek.getDate() + i);
+                        if (dayInWeek.getMonth() == monthCalendar.month)
+                          return 1;
+                      }
 
-            Layout.fillWidth: true
-            Layout.fillHeight: true
+                      return 0;
+                    }
 
-            delegate: Text {
-                required property var model
+                    font.pointSize: 10
+                    font.family: "Fira Sans"
+                    font.features: { "tnum": 1 }
 
-                opacity: model.month === monthCalendar.month ? 1 : 0
+                    text: weekNumber
+                    color: "#99ffdd"
 
-                font.pointSize: 10
-                font.family: "Fira Sans"
-                font.features: { "tnum": 1 }
+                    horizontalAlignment: Text.AlignRight
+                    verticalAlignment: Text.AlignVCenter
+                  }
+                }
+
+                MonthGrid {
+                  id: grid
+
+                  year: yearCalendar.year
+                  month: monthCalendar.month
+                  locale: Qt.locale("en_DK")
+
+                  Layout.fillWidth: true
+                  Layout.fillHeight: true
+
+                  delegate: Text {
+                      required property var model
 
-                text: model.day
-                color: model.today ? "#ff6699" : "white"
+                      opacity: model.month === monthCalendar.month ? 1 : 0
 
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
+                      font.pointSize: 10
+                      font.family: "Fira Sans"
+                      font.features: { "tnum": 1 }
+
+                      text: model.day
+                      color: model.today ? "#ff6699" : "white"
+
+                      horizontalAlignment: Text.AlignRight
+                      verticalAlignment: Text.AlignVCenter
+                  }
+                }
+              }
             }
           }
         }
diff --git a/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml b/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
index 710ea10c..b9f91580 100644
--- a/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
+++ b/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
@@ -1,6 +1,7 @@
 import Quickshell
 import QtQuick
 import qs.Services
+import Quickshell.Widgets
 
 Rectangle {
   id: kbdWidget
@@ -27,6 +28,9 @@ Rectangle {
     onClicked: {
       NiriService.sendCommand({ "Action": { "SwitchLayout": { "layout": "Next" } } }, _ => {})
     }
+    onWheel: event => {
+      NiriService.sendCommand({ "Action": { "SwitchLayout": { "layout": event.angleDelta > 0 ? "Next" : "Prev" } } }, _ => {})
+    }
   }
 
   Text {
@@ -50,28 +54,47 @@ Rectangle {
   }
 
   PopupWindow {
+    id: tooltip
+
+    property bool nextVisible: kbdMouseArea.containsMouse || tooltipMouseArea.containsMouse
+
     anchor {
       item: kbdMouseArea
-      edges: Edges.Bottom
+      edges: Edges.Bottom | Edges.Left
+    }
+    visible: false
+
+    onNextVisibleChanged: hangTimer.restart()
+
+    Timer {
+      id: hangTimer
+      interval: 100
+      onTriggered: tooltip.visible = tooltip.nextVisible
     }
-    visible: kbdMouseArea.containsMouse
 
     implicitWidth: kbdTooltipText.contentWidth + 16
     implicitHeight: kbdTooltipText.contentHeight + 16
     color: "black"
 
-    Text {
-      id: kbdTooltipText
+    WrapperMouseArea {
+      id: tooltipMouseArea
+
+      hoverEnabled: true
+      enabled: true
 
       anchors.centerIn: parent
 
-      font.pointSize: 10
-      font.family: "Fira Sans"
-      color: "white"
+      Text {
+        id: kbdTooltipText
+
+        font.pointSize: 10
+        font.family: "Fira Sans"
+        color: "white"
 
-      text: {
-        const currentLayout = NiriService.keyboardLayouts?.names?.[NiriService.keyboardLayouts.current_idx];
-        return currentLayout || "";
+        text: {
+          const currentLayout = NiriService.keyboardLayouts?.names?.[NiriService.keyboardLayouts.current_idx];
+          return currentLayout || "";
+        }
       }
     }
   }
diff --git a/accounts/gkleen@sif/shell/quickshell/SystemTray.qml b/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
index afed4bf0..ba678138 100644
--- a/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
+++ b/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
@@ -91,18 +91,35 @@ Item {
         }
 
         PopupWindow {
+          id: tooltip
+
+          property bool nextVisible: (trayItem.tooltipTitle || trayItem.tooltipDescription) && (trayItemArea.containsMouse || tooltipMouseArea.containsMouse) && !menuAnchor.visible
+
           anchor {
             item: trayItemArea
             edges: Edges.Bottom
           }
-          visible: (trayItem.tooltipTitle || trayItem.tooltipDescription) && trayItemArea.containsMouse && !menuAnchor.visible
+
+          visible: false
+          onNextVisibleChanged: hangTimer.restart()
+
+          Timer {
+            id: hangTimer
+            interval: 100
+            onTriggered: tooltip.visible = tooltip.nextVisible
+          }
 
           color: "black"
 
           implicitWidth: Math.max(tooltipTitle.contentWidth, tooltipDescription.contentWidth) + 16
           implicitHeight: tooltipTitle.contentHeight + tooltipDescription.contentHeight + 16
 
-          WrapperItem {
+          WrapperMouseArea {
+            id: tooltipMouseArea
+
+            hoverEnabled: true
+            enabled: true
+
             margin: 8
 
             Column {
diff --git a/accounts/gkleen@sif/shell/quickshell/shell.qml b/accounts/gkleen@sif/shell/quickshell/shell.qml
index 2abd1fef..4934cd4d 100644
--- a/accounts/gkleen@sif/shell/quickshell/shell.qml
+++ b/accounts/gkleen@sif/shell/quickshell/shell.qml
@@ -8,8 +8,16 @@ ShellRoot {
   Variants {
     model: Quickshell.screens
 
-    delegate: Bar {
-      modelData: item
+    delegate: Scope {
+      id: screenScope
+
+      required property var modelData
+
+      Bar {
+        id: bar
+
+        screen: screenScope.modelData
+      }
     }
   }
 }