Clock: new approach to bar clock display based on tokens.

Modules/Bar/Widgets/Clock.qml

@@ -29,167 +29,77 @@ Rectangle {
   }
 
   readonly property string barPosition: Settings.data.bar.position
+  readonly property bool isBarVertical: barPosition === "left" || barPosition === "right"
   readonly property bool compact: (Settings.data.bar.density === "compact")
-  readonly property bool use12h: Settings.data.location.use12hourFormat
-  readonly property bool monthBeforeDay: Settings.data.location.monthBeforeDay
+
+  readonly property var now: Time.date
 
   // Resolve settings: try user settings or defaults from BarWidgetRegistry
-  readonly property string displayFormat: widgetSettings.displayFormat !== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat
+  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 line2: widgetSettings.line2 !== undefined ? widgetSettings.line2 : widgetMetadata.line2
+  readonly property string line3: widgetSettings.line3 !== undefined ? widgetSettings.line3 : widgetMetadata.line3
+  readonly property string line4: widgetSettings.line4 !== undefined ? widgetSettings.line4 : widgetMetadata.line4
 
-  // Use compact mode for vertical bars
-  readonly property bool verticalMode: barPosition === "left" || barPosition === "right"
-
-  implicitWidth: verticalMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
-  implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match BarPill
+  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
 
   radius: Math.round(Style.radiusS * scaling)
   color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   Item {
     id: clockContainer
-    anchors.fill: parent
-    anchors.margins: compact ? 0 : Style.marginXS * scaling
+    anchors.centerIn: parent
 
+    // anchors.margins: compact ? 0 : Style.marginXS * scaling
     ColumnLayout {
       id: layout
       anchors.centerIn: parent
-      spacing: verticalMode ? -2 * scaling : -3 * scaling
+      spacing: isBarVertical ? -2 * scaling : -3 * scaling
 
-      // Compact mode for vertical bars - Time section (HH, MM)
-      Repeater {
-        model: verticalMode ? 2 : 1
-        NText {
-          readonly property bool showSeconds: (displayFormat === "time-seconds")
-          readonly property bool inlineDate: (displayFormat === "time-date")
-          readonly property var now: Time.date
-
-          text: {
-            if (verticalMode) {
-              // 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) {
-                // 12-hour format with proper padding and consistent spacing
-                const hours = now.getHours()
-                const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
-                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 += " - " + (monthBeforeDay ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
-              }
-
-              return timeStr
-            }
-          }
-
-          font.family: Settings.data.ui.fontFixed
-          font.pointSize: verticalMode ? Style.fontSizeXXS * scaling : Style.fontSizeXS * scaling
-          font.weight: Style.fontWeightBold
-          color: Color.mPrimary
-          Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        }
-      }
-
-      // Separator line for compact mode (between time and date)
-      Rectangle {
-        visible: verticalMode
-        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: verticalMode ? 2 : 0
-        NText {
-          readonly property var now: Time.date
-
-          text: {
-            if (verticalMode) {
-              // Compact mode: date section (last 2 lines)
-              switch (index) {
-              case 0:
-                return monthBeforeDay ? (now.getMonth() + 1).toString().padStart(2, '0') : now.getDate().toString().padStart(2, '0')
-              case 1:
-                return monthBeforeDay ? now.getDate().toString().padStart(2, '0') : (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: !verticalMode && (displayFormat === "time-date-short")
-        text: {
-          const now = Time.date
-          const day = now.getDate().toString().padStart(2, '0')
-          const month = (now.getMonth() + 1).toString().padStart(2, '0')
-          return monthBeforeDay ? `${month}/${day}` : `${day}/${month}`
-        }
+        visible: text !== ""
+        text: Qt.formatDateTime(now, line1.trim())
+        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling
+        font.weight: Style.fontWeightBold
+        color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface
+        wrapMode: Text.WordWrap
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+      }
 
-        // Enable fixed-width font for consistent spacing
-        font.family: Settings.data.ui.fontFixed
-        font.pointSize: Style.fontSizeXXS * scaling
-        font.weight: Style.fontWeightRegular
-        color: Color.mPrimary
+      NText {
+        visible: text !== ""
+        text: Qt.formatDateTime(now, line2.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
+      }
+
+      NText {
+        visible: text !== "" && isBarVertical
+        text: Qt.formatDateTime(now, line3.trim())
+        font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault
+        font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling
+        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
       }
     }
@@ -197,7 +107,7 @@ Rectangle {
 
   NTooltip {
     id: tooltip
-    text: `${Time.formatDate(monthBeforeDay)}.`
+    text: "Open calendar"
     target: clockContainer
     positionAbove: Settings.data.bar.position === "bottom"
   }

Modules/SettingsPanel/Bar/BarWidgetSettingsDialog.qml

@@ -19,7 +19,7 @@ Popup {
   x: (parent.width - width) * 0.5
   y: (parent.height - height) * 0.5
 
-  width: 500 * scaling
+  width: Math.max(content.implicitWidth + padding * 2, 500 * scaling)
   height: content.implicitHeight + padding * 2
   padding: Style.marginXL * scaling
   modal: true

Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml

@@ -8,42 +8,327 @@ import qs.Services
 ColumnLayout {
   id: root
   spacing: Style.marginM * scaling
+  width: 700 * scaling
 
   // Properties to receive data from parent
   property var widgetData: null
   property var widgetMetadata: null
 
   // Local state
-  property string valueDisplayFormat: widgetData.displayFormat !== undefined ? widgetData.displayFormat : widgetMetadata.displayFormat
+  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 valueLine2: widgetData.line2 !== undefined ? widgetData.line2 : widgetMetadata.line2
+  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
+  property int focusedLineIndex: -1
+
+  readonly property var now: Time.date
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.displayFormat = valueDisplayFormat
+    settings.usePrimaryColor = valueUsePrimaryColor
+    settings.useMonospacedFont = valueUseMonospacedFont
+    settings.line1 = valueLine1.trim()
+    settings.line2 = valueLine2.trim()
+    settings.line3 = valueLine3.trim()
+    settings.line4 = valueLine4.trim()
     return settings
   }
 
-  NComboBox {
-    label: "Display format"
-    model: ListModel {
-      ListElement {
-        key: "time"
-        name: "HH:mm"
-      }
-      ListElement {
-        key: "time-seconds"
-        name: "HH:mm:ss"
-      }
-      ListElement {
-        key: "time-date"
-        name: "HH:mm + Date"
-      }
-      ListElement {
-        key: "time-date-short"
-        name: "HH:mm + Short date"
+  // 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 (inputLine1.inputItem) {
+        inputLine1.inputItem.focus = true
+        focusedInput = inputLine1
+        focusedLineIndex = 1
       }
     }
-    currentKey: valueDisplayFormat
-    onSelected: key => valueDisplayFormat = key
-    minimumWidth: 230 * scaling
+
+    if (focusedInput && focusedInput.inputItem) {
+      var input = focusedInput.inputItem
+      var cursorPos = input.cursorPosition
+      var currentText = input.text
+
+      // Insert token at cursor position
+      var newText = currentText.substring(0, cursorPos) + token + currentText.substring(cursorPos)
+      input.text = newText + " "
+
+      // Move cursor after the inserted token
+      input.cursorPosition = cursorPos + token.length + 1
+
+      // Ensure the input keeps focus
+      input.focus = true
+    }
+  }
+
+  // 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"
+    description: "When enabled, this applies the primary color for emphasis."
+    checked: valueUsePrimaryColor
+    onToggled: checked => valueUsePrimaryColor = checked
+  }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: "Use monospaced font"
+    description: "When enabled, the clock will use the monospaced font."
+    checked: valueUseMonospacedFont
+    onToggled: checked => valueUseMonospacedFont = checked
+  }
+
+  NDivider {
+    Layout.fillWidth: true
+  }
+
+  NHeader {
+    label: "Clock format"
+    description: "Build your clock display using the tokens below.\nAdditional lines (3 & 4) are only shown in the vertical bar layout.\nClick on any token to insert it into the selected input field."
+  }
+
+  RowLayout {
+    id: main
+    Layout.fillWidth: true
+    spacing: Style.marginL * scaling
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      Layout.preferredWidth: 1 // Equal sizing hint
+      spacing: Style.marginM * scaling
+
+      NTextInput {
+        id: inputLine1
+        Layout.fillWidth: true
+        label: "1st line"
+        placeholderText: "HH:mm"
+        text: valueLine1
+        onTextChanged: updateLineValue(1, text)
+
+        // Track focus state
+        Component.onCompleted: {
+          if (inputItem) {
+            inputItem.onActiveFocusChanged.connect(function () {
+              if (inputItem.activeFocus) {
+                root.focusedInput = inputLine1
+                root.focusedLineIndex = 1
+              }
+            })
+          }
+        }
+      }
+
+      NTextInput {
+        id: inputLine2
+        Layout.fillWidth: true
+        label: "2nd line"
+        placeholderText: "ddd MMM d"
+        text: valueLine2
+        onTextChanged: updateLineValue(2, text)
+
+        // Track focus state
+        Component.onCompleted: {
+          if (inputItem) {
+            inputItem.onActiveFocusChanged.connect(function () {
+              if (inputItem.activeFocus) {
+                root.focusedInput = inputLine2
+                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
+              }
+            })
+          }
+        }
+      }
+    }
+
+    // --------------
+    // Preview
+    ColumnLayout {
+      Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+      Layout.fillWidth: false // Don't stretch this column
+
+      NLabel {
+        label: "Preview"
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+      }
+
+      Rectangle {
+        Layout.preferredWidth: 240 * scaling
+        Layout.preferredHeight: 120 * scaling // Fixed height instead of fillHeight
+
+        color: Color.mSurfaceVariant
+        radius: Style.radiusM * scaling
+        border.color: focusedLineIndex > 0 ? Color.mSecondary : Color.mOutline
+        border.width: Math.max(1, Style.borderS * scaling)
+
+        Behavior on border.color {
+          ColorAnimation {
+            duration: Style.animationFast
+          }
+        }
+
+        ColumnLayout {
+          spacing: -2 * scaling
+          anchors.centerIn: parent
+
+          NText {
+            visible: text !== ""
+            text: Qt.formatDateTime(now, valueLine1.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
+              }
+            }
+          }
+
+          NText {
+            visible: text !== ""
+            text: Qt.formatDateTime(now, valueLine2.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
+              }
+            }
+          }
+
+          NText {
+            visible: text !== ""
+            text: Qt.formatDateTime(now, valueLine3.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
+            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
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  NDivider {
+    Layout.topMargin: Style.marginL * scaling
+    Layout.bottomMargin: Style.marginL * scaling
+  }
+
+  NHeader {
+    label: "Tokens"
+    description: focusedLineIndex > 0 ? "Click any token to add it to line " + focusedLineIndex : "Select an input field above, then click a token to insert it."
+  }
+
+  NDateTimeTokens {
+    Layout.fillWidth: true
+    height: 400 * scaling
+
+    // Connect to token clicked signal if NDateTimeTokens provides it
+    onTokenClicked: token => root.insertToken(token)
   }
 }

Modules/SettingsPanel/Tabs/LocationTab.qml

@@ -93,19 +93,12 @@ ColumnLayout {
     }
 
     NToggle {
-      label: "Use 12-hour time format"
+      label: "Use 12-hour time format on the lock screen"
       description: "On for AM/PM format (e.g., 8:00 PM), off for 24-hour format (e.g., 20:00)."
       checked: Settings.data.location.use12hourFormat
       onToggled: checked => Settings.data.location.use12hourFormat = checked
     }
 
-    NToggle {
-      label: "Show month before day"
-      description: "On for 09/17/2025, off for 17/09/2025."
-      checked: Settings.data.location.monthBeforeDay
-      onToggled: checked => Settings.data.location.monthBeforeDay = checked
-    }
-
     NToggle {
       label: "Show week numbers"
       description: "Displays the week of the year (e.g., Week 38) in the calendar."