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: {
@@ -32,9 +33,12 @@ Rectangle {
   readonly property bool use12h: widgetSettings.use12HourClock !== undefined ? widgetSettings.use12HourClock : widgetMetadata.use12HourClock
   readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth !== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth
   readonly property string displayFormat: widgetSettings.displayFormat !== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat
+  
+  // Use compact mode for vertical bars
+  readonly property bool useCompactMode: barPosition === "left" || barPosition === "right"
 
-  implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
+  implicitWidth: useCompactMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
-  implicitHeight: Math.round(Style.capsuleHeight * 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,66 +50,129 @@ 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)
-      NText {
+      Repeater {
-        readonly property bool showSeconds: (displayFormat === "time-seconds")
+        model: useCompactMode ? 2 : 1
-        readonly property bool inlineDate: (displayFormat === "time-date")
+        NText {
+          readonly property bool showSeconds: (displayFormat === "time-seconds")
+          readonly property bool inlineDate: (displayFormat === "time-date")
+          readonly property var now: Time.date
 
-        text: {
+          text: {
-          const now = Time.date
+            if (useCompactMode) {
-          let timeStr = ""
+              // Compact mode: time section (first 2 lines)
-
+              switch (index) {
-          if (use12h) {
+                case 0: // Hours
-            // 12-hour format with proper padding and consistent spacing
+                  if (use12h) {
-            const hours = now.getHours()
+                    const hours = now.getHours()
-            const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
+                    const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
-            const paddedHours = displayHours.toString().padStart(2, '0')
+                    return displayHours.toString().padStart(2, '0')
-            const minutes = now.getMinutes().toString().padStart(2, '0')
+                  } else {
-            const ampm = hours < 12 ? 'AM' : 'PM'
+                    return now.getHours().toString().padStart(2, '0')
-
+                  }
-            if (showSeconds) {
+                case 1: // Minutes
-              const seconds = now.getSeconds().toString().padStart(2, '0')
+                  return now.getMinutes().toString().padStart(2, '0')
-              timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}`
+                default:
+                  return ""
+              }
             } else {
-              timeStr = `${paddedHours}:${minutes} ${ampm}`
+              // Normal mode: single line with time
-            }
+              let timeStr = ""
-          } else {
-            // 24-hour format with padding
-            const hours = now.getHours().toString().padStart(2, '0')
-            const minutes = now.getMinutes().toString().padStart(2, '0')
 
-            if (showSeconds) {
+              if (use12h) {
-              const seconds = now.getSeconds().toString().padStart(2, '0')
+                // 12-hour format with proper padding and consistent spacing
-              timeStr = `${hours}:${minutes}:${seconds}`
+                const hours = now.getHours()
-            } else {
+                const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
-              timeStr = `${hours}:${minutes}`
+                const paddedHours = displayHours.toString().padStart(2, '0')
+                const minutes = now.getMinutes().toString().padStart(2, '0')
+                const ampm = hours < 12 ? 'AM' : 'PM'
+
+                if (showSeconds) {
+                  const seconds = now.getSeconds().toString().padStart(2, '0')
+                  timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}`
+                } else {
+                  timeStr = `${paddedHours}:${minutes} ${ampm}`
+                }
+              } else {
+                // 24-hour format with padding
+                const hours = now.getHours().toString().padStart(2, '0')
+                const minutes = now.getMinutes().toString().padStart(2, '0')
+
+                if (showSeconds) {
+                  const seconds = now.getSeconds().toString().padStart(2, '0')
+                  timeStr = `${hours}:${minutes}:${seconds}`
+                } else {
+                  timeStr = `${hours}:${minutes}`
+                }
+              }
+
+              // Add inline date if needed
+              if (inlineDate) {
+                let dayName = now.toLocaleDateString(Qt.locale(), "ddd")
+                dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1)
+                const day = now.getDate().toString().padStart(2, '0')
+                let month = now.toLocaleDateString(Qt.locale(), "MMM")
+                timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
+              }
+
+              return timeStr
             }
           }
 
-          // Add inline date if needed
+          //font.family: Settings.data.ui.fontFixed
-          if (inlineDate) {
+          font.pointSize: useCompactMode ? Style.fontSizeXXS * scaling : Style.fontSizeXS * scaling
-            let dayName = now.toLocaleDateString(Qt.locale(), "ddd")
+          font.weight: Style.fontWeightBold
-            dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1)
+          color: Color.mPrimary
-            const day = now.getDate().toString().padStart(2, '0')
+          Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            let month = now.toLocaleDateString(Qt.locale(), "MMM")
-            timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
-          }
-
-          return timeStr
         }
-
-        //font.family: Settings.data.ui.fontFixed
-        font.pointSize: 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 {
+          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: (displayFormat === "time-date-short")
+        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 {