Clock: simpler format management (horiz vs vertical) so one can switch the bar position without editing its clock.

Modules/Bar/Widgets/Clock.qml

@@ -37,10 +37,8 @@ Rectangle {
   // Resolve settings: try user settings or defaults from BarWidgetRegistry
   readonly property bool usePrimaryColor: widgetSettings.usePrimaryColor !== undefined ? widgetSettings.usePrimaryColor : widgetMetadata.usePrimaryColor
   property bool useMonospacedFont: widgetSettings.useMonospacedFont !== undefined ? widgetSettings.useMonospacedFont : widgetMetadata.useMonospacedFont
-  readonly property string line1: widgetSettings.line1 !== undefined ? widgetSettings.line1 : widgetMetadata.line1
+  readonly property string formatHorizontal: widgetSettings.formatHorizontal !== undefined ? widgetSettings.formatHorizontal : widgetMetadata.formatHorizontal
-  readonly property string line2: widgetSettings.line2 !== undefined ? widgetSettings.line2 : widgetMetadata.line2
+  readonly property string formatVertical: widgetSettings.formatVertical !== undefined ? widgetSettings.formatVertical : widgetMetadata.formatVertical
-  readonly property string line3: widgetSettings.line3 !== undefined ? widgetSettings.line3 : widgetMetadata.line3
-  readonly property string line4: widgetSettings.line4 !== undefined ? widgetSettings.line4 : widgetMetadata.line4
 
   implicitWidth: isBarVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
   implicitHeight: isBarVertical ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match BarPill
@@ -52,55 +50,43 @@ Rectangle {
     id: clockContainer
     anchors.centerIn: parent
 
-    // anchors.margins: compact ? 0 : Style.marginXS * scaling
+    RowLayout {
-    ColumnLayout {
       id: layout
       anchors.centerIn: parent
-      spacing: isBarVertical ? -2 * scaling : -3 * scaling
 
-      NText {
+      Loader {
-        visible: text !== ""
+        active: !isBarVertical
-        text: Qt.formatDateTime(now, line1.trim())
+        sourceComponent: NText {
-        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+          anchors.centerIn: parent
-        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling
+          visible: text !== ""
-        font.weight: Style.fontWeightBold
+          text: Qt.formatDateTime(now, formatHorizontal.trim())
-        color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
+          font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
-        wrapMode: Text.WordWrap
+          font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+          font.weight: Style.fontWeightBold
+          color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
+          wrapMode: Text.WordWrap
+        }
       }
 
-      NText {
+      Loader {
-        visible: text !== ""
+        active: isBarVertical
-        text: Qt.formatDateTime(now, line2.trim())
+        sourceComponent: ColumnLayout {
-        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+          anchors.centerIn: parent
-        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling
+          spacing: -2 * scaling
-        font.weight: Style.fontWeightBold
+          Repeater {
-        color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
+            model: Qt.formatDateTime(now, formatVertical.trim()).split(" ")
-        wrapMode: Text.WordWrap
+            delegate: NText {
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+              visible: text !== ""
-      }
+              text: modelData
-
+              font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
-      NText {
+              font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling
-        visible: text !== "" && isBarVertical
+              font.weight: Style.fontWeightBold
-        text: Qt.formatDateTime(now, line3.trim())
+              color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
-        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+              wrapMode: Text.WordWrap
-        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling
+              Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        font.weight: Style.fontWeightBold
+            }
-        color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
+          }
-        wrapMode: Text.WordWrap
+        }
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.topMargin: visible ? Style.marginXS * scaling : 0
-      }
-
-      NText {
-        visible: text !== "" && isBarVertical
-        text: Qt.formatDateTime(now, line4.trim())
-        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
-        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling
-        font.weight: Style.fontWeightBold
-        color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
-        wrapMode: Text.WordWrap
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
       }
     }
   }

Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml

@@ -17,10 +17,8 @@ ColumnLayout {
   // Local state
   property bool valueUsePrimaryColor: widgetData.usePrimaryColor !== undefined ? widgetData.usePrimaryColor : widgetMetadata.usePrimaryColor
   property bool valueUseMonospacedFont: widgetData.useMonospacedFont !== undefined ? widgetData.useMonospacedFont : widgetMetadata.useMonospacedFont
-  property string valueLine1: widgetData.line1 !== undefined ? widgetData.line1 : widgetMetadata.line1
+  property string valueFormatHorizontal: widgetData.formatHorizontal !== undefined ? widgetData.formatHorizontal : widgetMetadata.formatHorizontal
-  property string valueLine2: widgetData.line2 !== undefined ? widgetData.line2 : widgetMetadata.line2
+  property string valueFormatVertical: widgetData.formatVertical !== undefined ? widgetData.formatVertical : widgetMetadata.formatVertical
-  property string valueLine3: widgetData.line3 !== undefined ? widgetData.line3 : widgetMetadata.line3
-  property string valueLine4: widgetData.line4 !== undefined ? widgetData.line4 : widgetMetadata.line4
 
   // Track the currently focused input field
   property var focusedInput: null
@@ -32,21 +30,18 @@ ColumnLayout {
     var settings = Object.assign({}, widgetData || {})
     settings.usePrimaryColor = valueUsePrimaryColor
     settings.useMonospacedFont = valueUseMonospacedFont
-    settings.line1 = valueLine1.trim()
+    settings.formatHorizontal = valueFormatHorizontal.trim()
-    settings.line2 = valueLine2.trim()
+    settings.formatVertical = valueFormatVertical.trim()
-    settings.line3 = valueLine3.trim()
-    settings.line4 = valueLine4.trim()
     return settings
   }
 
   // Function to insert token at cursor position in the focused input
   function insertToken(token) {
     if (!focusedInput || !focusedInput.inputItem) {
-      // If no input is focused, default to line 1
+      // If no input is focused, default to horiz
-      if (inputLine1.inputItem) {
+      if (inputHoriz.inputItem) {
-        inputLine1.inputItem.focus = true
+        inputHoriz.inputItem.focus = true
-        focusedInput = inputLine1
+        focusedInput = inputHoriz
-        focusedLineIndex = 1
       }
     }
 
@@ -67,24 +62,6 @@ ColumnLayout {
     }
   }
 
-  // Function to update the value property based on which line was edited
-  function updateLineValue(lineIndex, text) {
-    switch (lineIndex) {
-    case 1:
-      valueLine1 = text
-      break
-    case 2:
-      valueLine2 = text
-      break
-    case 3:
-      valueLine3 = text
-      break
-    case 4:
-      valueLine4 = text
-      break
-    }
-  }
-
   NToggle {
     Layout.fillWidth: true
     label: "Use primary color"
@@ -121,20 +98,17 @@ ColumnLayout {
       spacing: Style.marginM * scaling
 
       NTextInput {
-        id: inputLine1
+        id: inputHoriz
         Layout.fillWidth: true
-        label: "1st line"
+        label: "Horizontal bar"
-        placeholderText: "HH:mm"
+        placeholderText: "HH:mm ddd, MMM dd"
-        text: valueLine1
+        text: valueFormatHorizontal
-        onTextChanged: updateLineValue(1, text)
+        onTextChanged: valueFormatHorizontal = text
-
-        // Track focus state
         Component.onCompleted: {
           if (inputItem) {
             inputItem.onActiveFocusChanged.connect(function () {
               if (inputItem.activeFocus) {
-                root.focusedInput = inputLine1
+                root.focusedInput = inputHoriz
-                root.focusedLineIndex = 1
               }
             })
           }
@@ -142,68 +116,17 @@ ColumnLayout {
       }
 
       NTextInput {
-        id: inputLine2
+        id: inputVert
         Layout.fillWidth: true
-        label: "2nd line"
+        label: "Vertical bar"
-        placeholderText: "ddd MMM d"
+        placeholderText: "HH mm dd MM"
-        text: valueLine2
+        text: valueFormatVertical
-        onTextChanged: updateLineValue(2, text)
+        onTextChanged: valueFormatVertical = text
-
-        // Track focus state
         Component.onCompleted: {
           if (inputItem) {
             inputItem.onActiveFocusChanged.connect(function () {
               if (inputItem.activeFocus) {
-                root.focusedInput = inputLine2
+                root.focusedInput = inputVert
-                root.focusedLineIndex = 2
-              }
-            })
-          }
-        }
-      }
-    }
-
-    ColumnLayout {
-      Layout.fillWidth: true
-      Layout.preferredWidth: 1 // Equal sizing hint
-      spacing: Style.marginM * scaling
-
-      NTextInput {
-        id: inputLine3
-        Layout.fillWidth: true
-        label: "3rd line"
-        placeholderText: ""
-        text: valueLine3
-        onTextChanged: updateLineValue(3, text)
-
-        // Track focus state
-        Component.onCompleted: {
-          if (inputItem) {
-            inputItem.onActiveFocusChanged.connect(function () {
-              if (inputItem.activeFocus) {
-                root.focusedInput = inputLine3
-                root.focusedLineIndex = 3
-              }
-            })
-          }
-        }
-      }
-
-      NTextInput {
-        id: inputLine4
-        Layout.fillWidth: true
-        label: "4th line"
-        placeholderText: ""
-        text: valueLine4
-        onTextChanged: updateLineValue(4, text)
-
-        // Track focus state
-        Component.onCompleted: {
-          if (inputItem) {
-            inputItem.onActiveFocusChanged.connect(function () {
-              if (inputItem.activeFocus) {
-                root.focusedInput = inputLine4
-                root.focusedLineIndex = 4
               }
             })
           }
@@ -223,12 +146,12 @@ ColumnLayout {
       }
 
       Rectangle {
-        Layout.preferredWidth: 240 * scaling
+        Layout.preferredWidth: 320 * scaling
-        Layout.preferredHeight: 120 * scaling // Fixed height instead of fillHeight
+        Layout.preferredHeight: 140 * scaling // Fixed height instead of fillHeight
 
         color: Color.mSurfaceVariant
         radius: Style.radiusM * scaling
-        border.color: focusedLineIndex > 0 ? Color.mSecondary : Color.mOutline
+        border.color: Color.mSecondary
         border.width: Math.max(1, Style.borderS * scaling)
 
         Behavior on border.color {
@@ -238,12 +161,13 @@ ColumnLayout {
         }
 
         ColumnLayout {
-          spacing: -2 * scaling
+          spacing: Style.marginM * scaling
           anchors.centerIn: parent
 
+          // Horizontal
           NText {
             visible: text !== ""
-            text: Qt.formatDateTime(now, valueLine1.trim())
+            text: Qt.formatDateTime(now, valueFormatHorizontal.trim())
             font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
             font.pointSize: Style.fontSizeM * scaling
             font.weight: Style.fontWeightBold
@@ -258,54 +182,29 @@ ColumnLayout {
             }
           }
 
-          NText {
+          // Vertical
-            visible: text !== ""
+          ColumnLayout {
-            text: Qt.formatDateTime(now, valueLine2.trim())
+            spacing: -2 * scaling
-            font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+            Layout.alignment: Qt.AlignHCenter
-            font.pointSize: Style.fontSizeM * scaling
-            font.weight: Style.fontWeightBold
-            color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface
-            wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Behavior on color {
+            Repeater {
-              ColorAnimation {
+              Layout.topMargin: Style.marginM * scaling
-                duration: Style.animationFast
+              model: Qt.formatDateTime(now, valueFormatVertical.trim()).split(" ")
-              }
+              delegate: NText {
-            }
+                visible: text !== ""
-          }
+                text: modelData
+                font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+                font.pointSize: Style.fontSizeM * scaling
+                font.weight: Style.fontWeightBold
+                color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface
+                wrapMode: Text.WordWrap
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-          NText {
+                Behavior on color {
-            visible: text !== ""
+                  ColorAnimation {
-            text: Qt.formatDateTime(now, valueLine3.trim())
+                    duration: Style.animationFast
-            font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+                  }
-            font.pointSize: Style.fontSizeM * scaling
+                }
-            font.weight: Style.fontWeightBold
-            color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface
-            wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.topMargin: visible ? Style.marginXS * scaling : 0
-
-            Behavior on color {
-              ColorAnimation {
-                duration: Style.animationFast
-              }
-            }
-          }
-
-          NText {
-            visible: text !== ""
-            text: Qt.formatDateTime(now, valueLine4.trim())
-            font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
-            font.pointSize: Style.fontSizeM * scaling
-            font.weight: Style.fontWeightBold
-            color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface
-            wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-            Behavior on color {
-              ColorAnimation {
-                duration: Style.animationFast
               }
             }
           }

Services/BarWidgetRegistry.qml

@@ -55,10 +55,8 @@ Singleton {
                                     "allowUserSettings": true,
                                     "usePrimaryColor": true,
                                     "useMonospacedFont": true,
-                                    "line1": "HH:mm ddd, MMM dd",
+                                    "formatHorizontal": "HH:mm ddd, MMM dd",
-                                    "line2": "",
+                                    "formatVertical": "HH mm - dd MM"
-                                    "line3": "",
-                                    "line4": ""
                                   },
                                   "CustomButton": {
                                     "allowUserSettings": true,