1 files changed, 203 insertions, 15 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/Bar.qml b/accounts/gkleen@sif/shell/quickshell/Bar.qml
index 520ec2c6..9cb58b93 100644
--- a/accounts/gkleen@sif/shell/quickshell/Bar.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Bar.qml
@@ -5,6 +5,9 @@ import Quickshell.Widgets
 import Custom as Custom
 import QtQuick
 import qs.Services
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQml
 
 
 PanelWindow {
@@ -309,10 +312,9 @@ PanelWindow {
       }
     }
 
-    Rectangle {
+    Item {
       height: parent.height
       width: 4
-      color: "transparent"
     }
 
     Rectangle {
@@ -361,30 +363,216 @@ PanelWindow {
           return kbdWidget.keyboardAbbrev[currentLayout] ? kbdWidget.keyboardAbbrev[currentLayout] : currentLayout;
         }
       }
+
+      PopupWindow {
+        anchor {
+          item: kbdMouseArea
+          edges: Edges.Bottom
+        }
+        visible: kbdMouseArea.containsMouse
+
+        implicitWidth: kbdTooltipText.contentWidth + 4
+        implicitHeight: kbdTooltipText.contentHeight + 4
+        color: "black"
+
+        Text {
+          id: kbdTooltipText
+
+          anchors.centerIn: parent
+
+          font.pointSize: 10
+          font.family: "Fira Sans"
+          color: "white"
+
+          text: {
+            const currentLayout = NiriService.keyboardLayouts?.names?.[NiriService.keyboardLayouts.current_idx];
+            return currentLayout || "";
+          }
+        }
+      }
     }
 
-    Rectangle {
+    Item {
       height: parent.height
       width: 4
-      color: "transparent"
     }
 
-    Text {
-      id: clock
-      color: "white"
-
+    Item {
+      width: clock.contentWidth
+      height: parent.height
       anchors.verticalCenter: parent.verticalCenter
 
-      Custom.Chrono {
-        id: chrono
-        format: "W{0:%V-%u} {0:%F} {0:%H:%M:%S%Ez}"
+      MouseArea {
+        id: clockMouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: true
+      }
+
+      Text {
+        id: clock
+        color: "white"
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        Custom.Chrono {
+          id: chrono
+          format: "W{0:%V-%u} {0:%F} {0:%H:%M:%S%Ez}"
+        }
+
+        text: chrono.date
+
+        font.pointSize: 10
+        font.family: "Fira Sans"
+        font.features: { "tnum": 1 }
       }
 
-      text: chrono.date
+      PopupWindow {
+        anchor {
+          item: clockMouseArea
+          edges: Edges.Bottom
+        }
+        visible: clockMouseArea.containsMouse
+
+        implicitWidth: yearCalendar.implicitWidth + 16
+        implicitHeight: yearCalendar.implicitHeight + 16
+        color: "black"
+
+        GridLayout {
+          property int year: { const d = new Date(); return d.getFullYear(); }
+
+          id: yearCalendar
+
+          columns: 3
+          columnSpacing: 16
+          rowSpacing: 16
+
+          anchors.centerIn: parent
+
+          Repeater {
+            model: 12
+
+            Column {
+              required property int index
+              property int month: index
+
+              id: monthCalendar
 
-      font.pointSize: 10
-      font.family: "Fira Sans"
-      font.features: { "tnum": 1 }
+              width: parent.width
+
+              Text {
+                width: parent.width
+
+                horizontalAlignment: Text.AlignHCenter
+
+                font.pointSize: 10
+                font.family: "Fira Sans"
+
+                text: {
+                  const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd");
+                  return date.toLocaleString(Qt.locale("en_DK"), "MMMM")
+                }
+
+                color: "#ffead3"
+              }
+
+              GridLayout {
+                columns: 2
+
+                DayOfWeekRow {
+                  locale: grid.locale
+
+                  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
+                  }
+                }
+
+                WeekNumberColumn {
+                  month: grid.month
+                  year: grid.year
+                  locale: grid.locale
+
+                  Layout.fillHeight: true
+
+                  delegate: Text {
+                    required property int weekNumber
+
+                    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;
+
+                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                      if (dayOfWeek > 4) {
+                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                      }
+
+                      for (let i = 0; i < 7; i++) {
+                        const dayInWeek = isoWeekStart;
+                        dayInWeek.setDate(dayInWeek.getDate() + i);
+                        if (dayInWeek.getMonth() == monthCalendar.month)
+                          return 1;
+                      }
+
+                      return 0;
+                    }
+
+                    font.pointSize: 10
+                    font.family: "Fira Sans"
+                    font.features: { "tnum": 1 }
+
+                    text: weekNumber
+                    color: "#99ffdd"
+
+                    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
+
+                      opacity: model.month === monthCalendar.month ? 1 : 0
+
+                      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
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file