sidebar calendar thingie: navrail

.config/quickshell/modules/bar/ActiveWindow.qml

@@ -23,7 +23,7 @@ Item {
         spacing: -4
 
         StyledText {
-            font.pointSize: Appearance.font.pointSize.smaller
+            font.pixelSize: Appearance.font.pixelSize.smaller
             color: Appearance.colors.colSubtext
             Layout.preferredWidth: preferredWidth
             elide: Text.ElideRight
@@ -31,7 +31,7 @@ Item {
         }
 
         StyledText {
-            font.pointSize: Appearance.font.pointSize.small
+            font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer0
             Layout.preferredWidth: preferredWidth
             elide: Text.ElideRight

.config/quickshell/modules/bar/Bar.qml

@@ -13,12 +13,12 @@ Scope {
     readonly property int barCenterSideModuleWidth: Appearance.sizes.barCenterSideModuleWidth
 
     Process {
-        id: toggleSidebarRight
+        id: openSidebarRight
-        command: ["qs", "ipc", "call", "sidebarRight", "toggle"]
+        command: ["qs", "ipc", "call", "sidebarRight", "open"]
     }
     Process {
-        id: toggleSidebarLeft
+        id: openSidebarLeft
-        command: ["qs", "ipc", "call", "sidebarLeft", "toggle"]
+        command: ["qs", "ipc", "call", "sidebarLeft", "open"]
     }
 
     Variants {
@@ -136,26 +136,34 @@ Scope {
                     spacing: 20
                     layoutDirection: Qt.RightToLeft
             
-                    RowLayout { // TODO make this wifi & bluetooth
+                    Rectangle {
+                        Layout.margins: 4
                         Layout.rightMargin: Appearance.rounding.screenRounding
-                        Layout.fillWidth: false
+                        Layout.fillHeight: true
-                        spacing: 15
+                        implicitWidth: rowLayout.implicitWidth + 10*2
+                        radius: Appearance.rounding.full
+                        color: barRightSideMouseArea.pressed ? Appearance.colors.colLayer1Active : barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent"
+                        RowLayout {
+                            id: rowLayout
+                            anchors.centerIn: parent
+                            spacing: 15
                             
-                        MaterialSymbol {
+                            MaterialSymbol {
-                            text: (Network.networkName.length > 0 && Network.networkName != "lo") ? (
+                                text: (Network.networkName.length > 0 && Network.networkName != "lo") ? (
-                                Network.networkStrength > 80 ? "signal_wifi_4_bar" :
+                                    Network.networkStrength > 80 ? "signal_wifi_4_bar" :
-                                Network.networkStrength > 60 ? "network_wifi_3_bar" :
+                                    Network.networkStrength > 60 ? "network_wifi_3_bar" :
-                                Network.networkStrength > 40 ? "network_wifi_2_bar" :
+                                    Network.networkStrength > 40 ? "network_wifi_2_bar" :
-                                Network.networkStrength > 20 ? "network_wifi_1_bar" :
+                                    Network.networkStrength > 20 ? "network_wifi_1_bar" :
-                                "signal_wifi_0_bar"
+                                    "signal_wifi_0_bar"
-                            ) : "signal_wifi_off"
+                                ) : "signal_wifi_off"
-                            font.pointSize: Appearance.font.pointSize.larger
+                                font.pixelSize: Appearance.font.pixelSize.larger
-                            color: Appearance.colors.colOnLayer0
+                                color: Appearance.colors.colOnLayer0
-                        }
+                            }
-                        MaterialSymbol {
+                            MaterialSymbol {
-                            text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
+                                text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
-                            font.pointSize: Appearance.font.pointSize.larger
+                                font.pixelSize: Appearance.font.pixelSize.larger
-                            color: Appearance.colors.colOnLayer0
+                                color: Appearance.colors.colOnLayer0
+                            }
                         }
                     }
 
@@ -171,12 +179,21 @@ Scope {
 
                 }
                 MouseArea {
+                    id: barRightSideMouseArea
+                    property bool hovered: false
                     anchors.fill: rightSection
                     acceptedButtons: Qt.LeftButton
+                    hoverEnabled: true
                     propagateComposedEvents: true
+                    onEntered: (event) => {
+                        barRightSideMouseArea.hovered = true
+                    }
+                    onExited: (event) => {
+                        barRightSideMouseArea.hovered = false
+                    }
                     onPressed: (event) => {
                         if (event.button === Qt.LeftButton) {
-                            toggleSidebarRight.running = true
+                            openSidebarRight.running = true
                         }
                     }
                     // Scroll to change volume

.config/quickshell/modules/bar/Battery.qml

@@ -57,7 +57,7 @@ Rectangle {
             MaterialSymbol {
                 anchors.centerIn: parent
                 text: "battery_full"
-                font.pointSize: Appearance.font.pointSize.normal
+                font.pixelSize: Appearance.font.pixelSize.normal
                 color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
             }
 
@@ -71,7 +71,7 @@ Rectangle {
         anchors.left: rowLayout.left
         anchors.verticalCenter: rowLayout.verticalCenter
         text: "bolt"
-        font.pointSize: Appearance.font.pointSize.large
+        font.pixelSize: Appearance.font.pixelSize.large
         color: Appearance.m3colors.m3onSecondaryContainer
         visible: opacity !== 0 // Only show when charging
         opacity: isCharging ? 1 : 0 // Keep opacity for visibility

.config/quickshell/modules/bar/ClockWidget.qml

@@ -16,19 +16,19 @@ Rectangle {
         anchors.centerIn: parent
 
         StyledText {
-            font.pointSize: Appearance.font.pointSize.large
+            font.pixelSize: Appearance.font.pixelSize.large
             color: Appearance.colors.colOnLayer1
             text: DateTime.time
         }
 
         StyledText {
-            font.pointSize: Appearance.font.pointSize.small
+            font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: "•"
         }
 
         StyledText {
-            font.pointSize: Appearance.font.pointSize.small
+            font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: DateTime.date
         }

.config/quickshell/modules/bar/Media.qml

@@ -62,7 +62,7 @@ Item {
             MaterialSymbol {
                 anchors.centerIn: parent
                 text: activePlayer?.isPlaying ? "pause" : "play_arrow"
-                font.pointSize: Appearance.font.pointSize.normal
+                font.pixelSize: Appearance.font.pixelSize.normal
                 color: Appearance.m3colors.m3onSecondaryContainer
             }
 

.config/quickshell/modules/bar/Resource.qml

@@ -29,7 +29,7 @@ Item {
             MaterialSymbol {
                 anchors.centerIn: parent
                 text: iconName
-                font.pointSize: Appearance.font.pointSize.normal
+                font.pixelSize: Appearance.font.pixelSize.normal
                 color: Appearance.m3colors.m3onSecondaryContainer
             }
 

.config/quickshell/modules/bar/SysTray.qml

@@ -37,11 +37,10 @@ Item {
 
         StyledText {
             Layout.alignment: Qt.AlignVCenter
-            font.pointSize: Appearance.font.pointSize.larger
+            font.pixelSize: Appearance.font.pixelSize.larger
             color: Appearance.colors.colSubtext
             text: "•"
             visible: {
-                console.log("SystemTray.values.length", SystemTray.items.values.length)
                 SystemTray.items.values.length > 0
             }
         }

.config/quickshell/modules/bar/UtilButtons.qml

@@ -37,7 +37,7 @@ Rectangle {
             MaterialSymbol {
                 anchors.centerIn: parent
                 text: "screenshot_region"
-                font.pointSize: Appearance.font.pointSize.normal
+                font.pixelSize: Appearance.font.pixelSize.normal
                 color: Appearance.colors.colOnLayer2
             }
 
@@ -50,7 +50,7 @@ Rectangle {
             MaterialSymbol {
                 anchors.centerIn: parent
                 text: "colorize"
-                font.pointSize: Appearance.font.pointSize.normal
+                font.pixelSize: Appearance.font.pixelSize.normal
                 color: Appearance.colors.colOnLayer2
             }
 

.config/quickshell/modules/bar/Workspaces.qml

@@ -171,7 +171,7 @@ Item {
                     anchors.fill: parent
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    font.pointSize: Appearance.font.pointSize.small
+                    font.pixelSize: Appearance.font.pixelSize.small
                     text: `${workspaceValue}`
                     elide: Text.ElideRight
                     color: (monitor.activeWorkspace?.id == workspaceValue) ? Appearance.m3colors.m3onPrimary : (workspaceOccupied[index] ? Appearance.colors.colOnLayer1 : Appearance.colors.colOnLayer1Inactive)

.config/quickshell/modules/common/Appearance.qml

@@ -122,6 +122,10 @@ Singleton {
         property color colLayer3Active: mix(colLayer3, colOnLayer3, 0.80);
         property color colPrimaryHover: mix(m3colors.m3primary, colLayer1Hover, 0.7)
         property color colPrimaryActive: mix(m3colors.m3primary, colLayer1Active, 0.4)
+        property color colSecondaryHover: mix(m3colors.m3secondary, colLayer1Hover, 0.7)
+        property color colSecondaryActive: mix(m3colors.m3secondary, colLayer1Active, 0.4)
+        property color colSecondaryContainerHover: mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.8)
+        property color colSecondaryContainerActive: mix(m3colors.m3secondaryContainer, colLayer1Active, 0.6)
         property color colTooltip: m3colors.m3inverseSurface
         property color colOnTooltip: m3colors.m3inverseOnSurface
     }
@@ -145,13 +149,14 @@ Singleton {
             property string monospace: "JetBrains Mono NF"
             property string reading: "Readex Pro"
         }
-        property QtObject pointSize: QtObject {
+        property QtObject pixelSize: QtObject {
-            property int smaller: 10
+            property int smaller: 13
-            property int small: 11
+            property int small: 15
-            property int normal: 12
+            property int normal: 16
-            property int large: 13
+            property int large: 17
-            property int larger: 14
+            property int larger: 19
-            property int huge: 16
+            property int huge: 22
+            property int hugeass: 23
         }
     }
 

.config/quickshell/modules/common/widgets/CustomIcon.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import Qt.labs.platform
 import Quickshell
 import Quickshell.Widgets
 
@@ -7,7 +6,7 @@ Item {
     id: root
     
     property string source: ""
-    property string iconFolder: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0] + "/quickshell/assets/icons"  // The folder to check first
+    property string iconFolder: "root:/assets/icons"  // The folder to check first
     width: 30
     height: 30
     

.config/quickshell/modules/common/widgets/MaterialSymbol.qml

@@ -6,6 +6,6 @@ Text {
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
     font.family: Appearance.font.family.iconMaterial
-    font.pointSize: Appearance.font.pointSize.small
+    font.pixelSize: Appearance.font.pixelSize.small
     color: Appearance.colors.colOnBackground
 }

.config/quickshell/modules/common/widgets/NavRailButton.qml

@@ -0,0 +1,64 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+
+Button {
+    id: button
+
+    property bool toggled
+    property string buttonIcon
+    property string buttonText
+
+    Layout.alignment: Qt.AlignHCenter
+    implicitHeight: columnLayout.implicitHeight
+    implicitWidth: columnLayout.implicitWidth
+
+    background: Item{} // No ugly bg
+
+    // Real stuff
+    ColumnLayout {
+        id: columnLayout
+        spacing: 5
+        Rectangle {
+            width: 62
+            implicitHeight: navRailButtonIcon.height + 2*2
+            Layout.alignment: Qt.AlignHCenter
+            radius: Appearance.rounding.full
+            color: toggled ? 
+                (button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.m3colors.m3secondaryContainer) :
+                (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: Appearance.animation.elementDecel.duration
+                    easing.type: Appearance.animation.elementDecel.type
+                }
+
+            }
+            MaterialSymbol {
+                id: navRailButtonIcon
+                anchors.centerIn: parent
+                font.pixelSize: Appearance.font.pixelSize.hugeass
+                text: buttonIcon
+                color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
+
+                Behavior on color {
+                    ColorAnimation {
+                        duration: Appearance.animation.elementDecel.duration
+                        easing.type: Appearance.animation.elementDecel.type
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: buttonText
+            color: Appearance.colors.colOnLayer1
+        }
+    }
+
+}

.config/quickshell/modules/common/widgets/StyledText.qml

@@ -6,6 +6,6 @@ Text {
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
     font.family: Appearance.font.family.main
-    font.pointSize: Appearance.font.pointSize.small
+    font.pixelSize: Appearance.font.pixelSize.small
     color: Appearance.colors.colOnBackground
 }

.config/quickshell/modules/sidebarRight/QuickToggleButton.qml

@@ -30,7 +30,7 @@ Button {
         
         MaterialSymbol {
             anchors.centerIn: parent
-            font.pointSize: Appearance.font.pointSize.larger
+            font.pixelSize: Appearance.font.pixelSize.larger
             text: buttonIcon
             color: toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer1
 

.config/quickshell/modules/sidebarRight/SidebarCalendar.qml

@@ -0,0 +1,50 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+
+Rectangle {
+    Layout.alignment: Qt.AlignHCenter
+    Layout.fillHeight: false
+    Layout.fillWidth: true
+    radius: Appearance.rounding.normal
+    color: Appearance.colors.colLayer1
+    height: 300
+
+    RowLayout {
+        id: calendarRow
+        anchors.centerIn: parent
+        width: parent.width - 10 * 2
+        height: parent.height - 10 * 2
+        spacing: 10
+        property int selectedTab: 0
+        
+        ColumnLayout {
+            id: tabBar
+            Layout.fillHeight: true
+            Layout.leftMargin: 10
+            spacing: 10
+            Repeater {
+                model: [ 
+                    {"name": "Calendar", "icon": "calendar_month"}, 
+                    {"name": "To Do", "icon": "done_outline"} 
+                ]
+                NavRailButton {
+                    toggled: calendarRow.selectedTab == index
+                    buttonText: modelData.name
+                    buttonIcon: modelData.icon
+                    onClicked: {
+                        calendarRow.selectedTab = index
+                        console.log("Selected tab:", calendarRow.selectedTab)
+                    }
+                }
+            }
+        }
+        Item { // Todo the real content goes here!
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
+}

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -44,7 +44,6 @@ Scope {
                 windows: [ sidebarRoot ]
                 active: false
                 onCleared: () => {
-                    // sidebarRoot.visible = false
                     if (!active) sidebarRoot.visible = false
                 }
             }
@@ -102,9 +101,10 @@ Scope {
                         }
 
                         StyledText {
-                            font.pointSize: Appearance.font.pointSize.normal
+                            font.pixelSize: Appearance.font.pixelSize.normal
                             color: Appearance.colors.colOnLayer0
                             text: `Uptime: ${DateTime.uptime}`
+                            textFormat: Text.MarkdownText
                         }
 
                         Item {
@@ -138,9 +138,16 @@ Scope {
                         }
                     }
 
-                    Item {
+                    Rectangle {
+                        Layout.alignment: Qt.AlignHCenter
                         Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        radius: Appearance.rounding.normal
+                        color: Appearance.colors.colLayer1
                     }
+
+                    // Calendar
+                    SidebarCalendar {}
                 }
             }
 
@@ -179,6 +186,15 @@ Scope {
                 }
             }
         }
+
+        function open(): void {
+            for (let i = 0; i < sidebarVariants.instances.length; i++) {
+                let panelWindow = sidebarVariants.instances[i];
+                if (panelWindow.modelData.name == Hyprland.focusedMonitor.name) {
+                    panelWindow.visible = true;
+                }
+            }
+        }
     }
 
 }