vertical bar

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

@@ -329,19 +329,23 @@ Singleton {
         property real barCenterSideModuleWidthHellaShortened: 190
         property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value
         property real barHellaShortenScreenWidthThreshold: 1000 // Shorten even more...
-        property real sidebarWidth: 460
-        property real sidebarWidthExtended: 750
-        property real osdWidth: 200
-        property real mediaControlsWidth: 440
-        property real mediaControlsHeight: 160
-        property real notificationPopupWidth: 410
-        property real searchWidthCollapsed: 260
-        property real searchWidth: 450
-        property real hyprlandGapsOut: 5
         property real elevationMargin: 10
         property real fabShadowRadius: 5
         property real fabHoveredShadowRadius: 7
+        property real hyprlandGapsOut: 5
+        property real mediaControlsWidth: 440
+        property real mediaControlsHeight: 160
+        property real notificationPopupWidth: 410
+        property real osdWidth: 200
+        property real searchWidthCollapsed: 260
+        property real searchWidth: 450
+        property real sidebarWidth: 460
+        property real sidebarWidthExtended: 750
+        property real baseVerticalBarWidth: 46
+        property real verticalBarWidth: Config.options.bar.cornerStyle === 1 ? 
+            (baseVerticalBarWidth + root.sizes.hyprlandGapsOut * 2) : baseVerticalBarWidth
+        property real verticalBarGroupWidth: 38
     }
 
-    syntaxHighlightingTheme: Appearance.m3colors.darkmode ? "Monokai" : "ayu Light"
+    syntaxHighlightingTheme: root.m3colors.darkmode ? "Monokai" : "ayu Light"
 }

.config/quickshell/ii/modules/common/Config.qml

@@ -143,6 +143,7 @@ Singleton {
                 property string topLeftIcon: "spark" // Options: "distro" or any icon name in ~/.config/quickshell/ii/assets/icons
                 property bool showBackground: true
                 property bool verbose: true
+                property bool vertical: false
                 property JsonObject resources: JsonObject {
                     property bool alwaysShowSwap: true
                     property bool alwaysShowCpu: false

.config/quickshell/ii/modules/common/widgets/ClippedProgressBar.qml

@@ -10,6 +10,7 @@ import Qt5Compat.GraphicalEffects
  */
 ProgressBar {
     id: root
+    property bool vertical: false
     property real valueBarWidth: 30
     property real valueBarHeight: 18
     property color highlightColor: Appearance?.colors.colOnSecondaryContainer ?? "#685496"
@@ -45,13 +46,36 @@ ProgressBar {
         visible: false
 
         Rectangle {
+            id: progressFill
             anchors {
-                left: parent.left
                 top: parent.top
                 bottom: parent.bottom
+                left: parent.left
+                right: undefined
             }
-            radius: Appearance.rounding.unsharpen
             width: parent.width * root.visualPosition
+            height: parent.height
+
+            states: State {
+                name: "vertical"
+                when: root.vertical
+                AnchorChanges {
+                    target: progressFill
+                    anchors {
+                        top: undefined
+                        bottom: parent.bottom
+                        left: parent.left
+                        right: parent.right
+                    }
+                }
+                PropertyChanges {
+                    target: progressFill
+                    width: parent.width
+                    height: parent.height * root.visualPosition
+                }
+            }
+
+            radius: Appearance.rounding.unsharpen
             color: root.highlightColor
         }
     }

.config/quickshell/ii/modules/common/widgets/StyledPopup.qml

@@ -17,9 +17,10 @@ LazyLoader {
         id: popupWindow
         color: "transparent"
 
-        anchors.left: true
-        anchors.top: !Config.options.bar.bottom
-        anchors.bottom: Config.options.bar.bottom
+        anchors.left: !Config.options.bar.vertical || (Config.options.bar.vertical && !Config.options.bar.bottom)
+        anchors.right: Config.options.bar.vertical && Config.options.bar.bottom
+        anchors.top: Config.options.bar.vertical || (!Config.options.bar.vertical && !Config.options.bar.bottom)
+        anchors.bottom: !Config.options.bar.vertical && Config.options.bar.bottom
 
         implicitWidth: popupBackground.implicitWidth + Appearance.sizes.hyprlandGapsOut * 2
         implicitHeight: popupBackground.implicitHeight + Appearance.sizes.hyprlandGapsOut * 2
@@ -27,12 +28,22 @@ LazyLoader {
         exclusionMode: ExclusionMode.Ignore
         exclusiveZone: 0
         margins {
-            left: root.QsWindow?.mapFromItem(
-                root.hoverTarget, 
-                (root.hoverTarget.width - popupBackground.implicitWidth) / 2, 0
-                ).x
-            top: Config?.options.bar.bottom ? 0 : Appearance.sizes.barHeight
-            bottom: Config?.options.bar.bottom ? Appearance.sizes.barHeight : 0
+            left: {
+                if (!Config.options.bar.vertical) return root.QsWindow?.mapFromItem(
+                    root.hoverTarget, 
+                    (root.hoverTarget.width - popupBackground.implicitWidth) / 2, 0
+                ).x;
+                return Appearance.sizes.barHeight
+            }
+            top: {
+                if (!Config.options.bar.vertical) return Appearance.sizes.barHeight;
+                return root.QsWindow?.mapFromItem(
+                    root.hoverTarget, 
+                    (root.hoverTarget.height - popupBackground.implicitHeight) / 2, 0
+                ).y;
+            }
+            right: Appearance.sizes.barHeight
+            bottom: Appearance.sizes.barHeight
         }
         WlrLayershell.namespace: "quickshell:popup"
         WlrLayershell.layer: WlrLayer.Overlay