More layout fixes

Modules/Bar/Widgets/Clock.qml

@@ -16,6 +16,7 @@ Rectangle {
   property string section: ""
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
+  property string barPosition: "top"
 
   property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
   property var widgetSettings: {
@@ -33,8 +34,11 @@ Rectangle {
   readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth !== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth
   readonly property string displayFormat: widgetSettings.displayFormat !== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat
   
-  implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
+  // Use compact mode for vertical bars
-  implicitHeight: Math.round(Style.capsuleHeight * scaling)
+  readonly property bool useCompactMode: barPosition === "left" || barPosition === "right"
+
+  implicitWidth: useCompactMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
+  implicitHeight: useCompactMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusS * scaling)
   color: Color.mSurfaceVariant
 
@@ -46,15 +50,35 @@ Rectangle {
     ColumnLayout {
       id: layout
       anchors.centerIn: parent
-      spacing: -3 * scaling
+      spacing: useCompactMode ? -2 * scaling : -3 * scaling
 
-      // First line
+      // Compact mode for vertical bars - Time section (HH, MM)
+      Repeater {
+        model: useCompactMode ? 2 : 1
         NText {
           readonly property bool showSeconds: (displayFormat === "time-seconds")
           readonly property bool inlineDate: (displayFormat === "time-date")
+          readonly property var now: Time.date
 
           text: {
-          const now = Time.date
+            if (useCompactMode) {
+              // Compact mode: time section (first 2 lines)
+              switch (index) {
+                case 0: // Hours
+                  if (use12h) {
+                    const hours = now.getHours()
+                    const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
+                    return displayHours.toString().padStart(2, '0')
+                  } else {
+                    return now.getHours().toString().padStart(2, '0')
+                  }
+                case 1: // Minutes
+                  return now.getMinutes().toString().padStart(2, '0')
+                default:
+                  return ""
+              }
+            } else {
+              // Normal mode: single line with time
               let timeStr = ""
 
               if (use12h) {
@@ -95,17 +119,60 @@ Rectangle {
 
               return timeStr
             }
+          }
 
           //font.family: Settings.data.ui.fontFixed
-        font.pointSize: Style.fontSizeXS * scaling
+          font.pointSize: useCompactMode ? Style.fontSizeXXS * scaling : Style.fontSizeXS * scaling
           font.weight: Style.fontWeightBold
           color: Color.mPrimary
           Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
         }
+      }
 
-      // Second line
+      // Separator line for compact mode (between time and date)
+      Rectangle {
+        visible: useCompactMode
+        Layout.preferredWidth: 20 * scaling
+        Layout.preferredHeight: 2 * scaling
+        Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: 3 * scaling
+        Layout.bottomMargin: 3 * scaling
+        color: Color.mPrimary
+        opacity: 0.3
+        radius: 1 * scaling
+      }
+
+      // Compact mode for vertical bars - Date section (DD, MM)
+      Repeater {
+        model: useCompactMode ? 2 : 0
         NText {
-        visible: (displayFormat === "time-date-short")
+          readonly property var now: Time.date
+
+          text: {
+            if (useCompactMode) {
+              // Compact mode: date section (last 2 lines)
+              switch (index) {
+                case 0: // Day
+                  return now.getDate().toString().padStart(2, '0')
+                case 1: // Month
+                  return (now.getMonth() + 1).toString().padStart(2, '0')
+                default:
+                  return ""
+              }
+            }
+            return ""
+          }
+
+          font.pointSize: Style.fontSizeXXS * scaling
+          font.weight: Style.fontWeightBold
+          color: Color.mPrimary
+          Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        }
+      }
+
+      // Second line for normal mode (date)
+      NText {
+        visible: !useCompactMode && (displayFormat === "time-date-short")
         text: {
           const now = Time.date
           const day = now.getDate().toString().padStart(2, '0')

Modules/Bar/Widgets/Tray.qml

@@ -15,6 +15,7 @@ Rectangle {
 
   property ShellScreen screen
   property real scaling: 1.0
+  property string barPosition: "top"
 
   readonly property real itemSize: 24 * scaling
 
@@ -26,9 +27,20 @@ Rectangle {
     }
   }
 
+  // React to bar position changes
+  Connections {
+    target: BarService
+    function onBarPositionChanged(newPosition) {
+      root.barPosition = newPosition
+      // Force re-evaluation of implicitWidth and implicitHeight
+      root.implicitWidth = Qt.binding(() => (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (trayLayout.implicitWidth + Style.marginM * scaling * 2))
+      root.implicitHeight = Qt.binding(() => (barPosition === "left" || barPosition === "right") ? Math.round(trayLayout.implicitHeight + Style.marginM * scaling * 2) : Math.round(Style.capsuleHeight * scaling))
+    }
+  }
+
   visible: SystemTray.items.values.length > 0
-  implicitWidth: trayLayout.implicitWidth + Style.marginM * scaling * 2
+  implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (trayLayout.implicitWidth + Style.marginM * scaling * 2)
-  implicitHeight: Math.round(Style.capsuleHeight * scaling)
+  implicitHeight: (barPosition === "left" || barPosition === "right") ? Math.round(trayLayout.implicitHeight + Style.marginM * scaling * 2) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
   color: Color.mSurfaceVariant
 
@@ -111,9 +123,21 @@ Rectangle {
                          if (modelData.hasMenu && modelData.menu && trayMenu.item) {
                            trayPanel.open()
 
-                           // Anchor the menu to the tray icon item (parent) and position it below the icon
+                           // Position menu based on bar position
-                           const menuX = (width / 2) - (trayMenu.item.width / 2)
+                           let menuX, menuY
-                           const menuY = Math.round(Style.barHeight * scaling)
+                           if (barPosition === "left") {
+                             // For left bar: position menu to the right of the bar
+                             menuX = width + Style.marginM * scaling
+                             menuY = 0
+                           } else if (barPosition === "right") {
+                             // For right bar: position menu to the left of the bar
+                             menuX = -trayMenu.item.width - Style.marginM * scaling
+                             menuY = 0
+                           } else {
+                             // For horizontal bars: center horizontally and position below
+                             menuX = (width / 2) - (trayMenu.item.width / 2)
+                             menuY = Math.round(Style.barHeight * scaling)
+                           }
                            trayMenu.item.menu = modelData.menu
                            trayMenu.item.showAt(parent, menuX, menuY)
                          } else {

Modules/Calendar/Calendar.qml

@@ -12,7 +12,7 @@ NPanel {
 
   preferredWidth: 340
   preferredHeight: 320
-  panelAnchorRight: true
+  panelAnchorRight: Settings.data.bar.position === "right"
 
   // Main Column
   panelContent: ColumnLayout {

Modules/Notification/NotificationHistoryPanel.qml

@@ -14,7 +14,7 @@ NPanel {
 
   preferredWidth: 380
   preferredHeight: 500
-  panelAnchorRight: true
+  panelAnchorRight: Settings.data.bar.position === "right"
   panelKeyboardFocus: true
 
   panelContent: Rectangle {