Align vertical bar widgets to the icon grid

shell/Ui/BarIndicator.qml

@@ -1,7 +1,7 @@
 import QtQuick
 import qs.Commons
 
-WidgetButton {
+BarIconButton {
   id: root
 
   property string moduleName: ""
@@ -43,7 +43,4 @@ WidgetButton {
   useActiveColor: false
   maintainIndicatorReveal: indicatorBlock === "inactive"
   revealHost: indicatorHost
-  fontSize: Style.font.caption
-  horizontalMargin: 5
-  verticalPadding: 5
 }

shell/plugins/bar/widgets/Clock.qml

@@ -14,6 +14,8 @@ BarWidget {
   readonly property string activeFormat: alt
     ? setting("formatAlt", "d MMMM 'W'ww yyyy")
     : (bar && bar.vertical ? setting("verticalFormat", "HH\n—\nmm") : setting("format", "dddd HH:mm"))
+  readonly property string displayText: formatted(displayDate)
+  readonly property var verticalLines: displayText.split("\n")
 
   function refresh() {
     displayDate = new Date()
@@ -54,7 +56,10 @@ BarWidget {
     id: button
     anchors.fill: parent
     bar: root.bar
-    text: root.formatted(root.displayDate)
+    text: root.vertical ? "" : root.displayText
+    labelVisible: !root.vertical
+    hasVisualContent: root.vertical ? root.verticalLines.length > 0 : text !== ""
+    fixedHeight: root.vertical ? root.verticalLines.length * Style.bar.iconSlot : -1
     horizontalMargin: 8.75
     verticalPadding: 8.75
     onPressed: function(button) {
@@ -62,5 +67,24 @@ BarWidget {
       if (button === Qt.RightButton) root.bar.run("omarchy-menu-timezone")
       else root.alt = !root.alt
     }
+
+    Column {
+      visible: root.vertical
+      anchors.fill: parent
+
+      Repeater {
+        model: root.verticalLines
+
+        OpticalGlyph {
+          required property string modelData
+          width: button.width
+          height: Style.bar.iconSlot
+          text: modelData
+          fontFamily: button.fontFamily
+          fontSize: button.fontSize
+          color: button.foreground
+        }
+      }
+    }
   }
 }

shell/plugins/panels/weather/BarWidget.qml

@@ -37,7 +37,7 @@ BarWidget {
   }
 
   visible: panelLoader.item && panelLoader.item.label !== ""
-  implicitWidth: bar && bar.vertical ? button.implicitWidth : button.implicitWidth + Style.spacing.labelGap
+  implicitWidth: button.implicitWidth
   implicitHeight: button.implicitHeight
 
   onBarChanged: injectPanel()
@@ -54,16 +54,12 @@ BarWidget {
     }
   }
 
-  WidgetButton {
+  BarIconButton {
     id: button
-    anchors.verticalCenter: parent.verticalCenter
+    anchors.fill: parent
-    x: bar && bar.vertical ? Math.round((parent.width - width) / 2) : 0
-    width: implicitWidth
-    height: implicitHeight
     bar: root.bar
     text: panelLoader.item ? panelLoader.item.label : ""
     active: panelLoader.item && panelLoader.item.klass === "active"
-    horizontalMargin: 2.5
     // Tooltip suppressed because the panel is the detail view.
     tooltipText: ""
 

test/shell.d/bar-icon-geometry-test.sh

@@ -65,6 +65,18 @@ ShellRoot {
       fail("vector icon does not share glyph geometry")
       return
     }
+    if (verticalIcon.implicitWidth !== Style.bar.sizeVertical || verticalIcon.implicitHeight !== Style.bar.iconSlot) {
+      fail("vertical icon does not use the shared slot")
+      return
+    }
+    if (verticalIndicator.implicitWidth !== Style.bar.sizeVertical || verticalIndicator.implicitHeight !== Style.bar.iconSlot) {
+      fail("vertical indicator does not use the shared slot")
+      return
+    }
+    if (Math.abs(verticalIndicator.opticalCenterErrorX) > 0.5) {
+      fail("vertical indicator is not optically centered")
+      return
+    }
     console.log("RESULT pass")
     Qt.quit()
   })
@@ -83,6 +95,20 @@ ShellRoot {
     function showTooltip(target, text) {}
   }
 
+  QtObject {
+    id: verticalBar
+    property bool vertical: true
+    property int barSize: Style.bar.sizeVertical
+    property string fontFamily: Style.font.family
+    property color barForeground: "white"
+    property color urgent: "red"
+    property bool foregroundAnimationEnabled: false
+    function registerClickTarget(target) {}
+    function unregisterClickTarget(target) {}
+    function hideTooltip(target) {}
+    function showTooltip(target, text) {}
+  }
+
   BarIconButton { id: bluetooth; bar: testBar; text: "󰂯" }
   BarIconButton { id: network; bar: testBar; text: "󰖩" }
   BarIconButton { id: audio; bar: testBar; text: "󰖁" }
@@ -93,6 +119,8 @@ ShellRoot {
     bar: testBar
     iconComponent: Component { Rectangle { width: 12; height: 12 } }
   }
+  BarIconButton { id: verticalIcon; bar: verticalBar; text: "\uf021" }
+  BarIndicator { id: verticalIndicator; bar: verticalBar; active: true; activeText: "󰅶" }
 }
 QML
 

test/shell.d/fixtures/bar-widget-contract/shell.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell
+import qs.Commons
 
 ShellRoot {
   id: root
@@ -167,10 +168,24 @@ ShellRoot {
           var id = root.createdIds[j]
           root.assertTrue(root.finiteDimension(item.implicitWidth), id + " has a finite implicitWidth")
           root.assertTrue(root.finiteDimension(item.implicitHeight), id + " has a finite implicitHeight")
-          if (item && typeof item.destroy === "function") item.destroy()
         }
-        root.assertTrue(root.createdIds.length === entries.length, "all bar widgets instantiate")
+
-        root.writeResult()
+        fakeBar.vertical = true
+        fakeBar.barSize = Style.bar.sizeVertical
+
+        Qt.callLater(function() {
+          for (var k = 0; k < root.createdObjects.length; k++) {
+            var verticalItem = root.createdObjects[k]
+            var verticalId = root.createdIds[k]
+            if (verticalId === "omarchy.clock")
+              root.assertEqual(verticalItem.implicitHeight, Style.bar.iconSlot * 3, verticalId + " uses one slot per line")
+            else if (verticalId === "omarchy.weather" || verticalId === "omarchy.system-update")
+              root.assertEqual(verticalItem.implicitHeight, Style.bar.iconSlot, verticalId + " uses one vertical slot")
+            if (verticalItem && typeof verticalItem.destroy === "function") verticalItem.destroy()
+          }
+          root.assertTrue(root.createdIds.length === entries.length, "all bar widgets instantiate")
+          root.writeResult()
+        })
       })
     }
   }