DesktopClock: add settings from bar clock to minimal mode

Assets/Translations/de.json

@@ -1341,17 +1341,36 @@
           "description": "Das Erscheinungsbild des Uhr-Widgets konfigurieren.",
           "label": "Uhr-Widget"
         },
+        "clock-display": {
+          "description": "Passen Sie die Anzeige Ihrer Uhr an, indem Sie Token aus der Liste unten hinzufügen. Um das 12-Stunden-Format zu verwenden, müssen Sie das 'AP'-Token einschließen.",
+          "label": "Uhrenanzeige"
+        },
+        "custom-font": {
+          "description": "Wählen Sie eine benutzerdefinierte Schriftart für die Uhrenanzeige aus.",
+          "label": "Benutzerdefinierte Schriftart",
+          "placeholder": "Benutzerdefinierte Schriftart auswählen...",
+          "search-placeholder": "Schriftarten suchen..."
+        },
+        "format": {
+          "description": "Tipp: Verwenden Sie \\n, um einen Zeilenumbruch zu erstellen.",
+          "label": "Format"
+        },
         "minimal-mode": {
           "description": "Verwende eine minimale Uhr-Anzeige mit Zeit und Datum.",
           "label": "Minimaler Modus"
         },
+        "preview": "Vorschau",
         "show-background": {
           "description": "Zeige den Hintergrundcontainer für das Uhr-Widget an.",
           "label": "Hintergrund anzeigen"
         },
-        "show-month-name": {
-          "description": "Zeige den Monatsnamen im Datum an. Wenn deaktiviert, wird die Monatsnummer angezeigt.",
-          "label": "Monatsnamen anzeigen"
+        "use-custom-font": {
+          "description": "Überschreibt die Standard-Schriftart mit einer benutzerdefinierten Schriftart für die Uhr.",
+          "label": "Benutzerdefinierte Schriftart verwenden"
+        },
+        "use-primary-color": {
+          "description": "Wenn aktiviert, wird die Primärfarbe zur Hervorhebung angewendet.",
+          "label": "Primärfarbe verwenden"
         },
         "style": {
           "analog": "Analog",

Assets/Translations/en.json

@@ -1341,17 +1341,36 @@
           "description": "Configure the clock widget appearance.",
           "label": "Clock Widget"
         },
+        "clock-display": {
+          "description": "Customize your clock's display by adding tokens from the list below. To use the 12-hour format, you must include the 'AP' token.",
+          "label": "Clock display"
+        },
+        "custom-font": {
+          "description": "Select a custom font for the clock display.",
+          "label": "Custom font",
+          "placeholder": "Select custom font...",
+          "search-placeholder": "Search fonts..."
+        },
+        "format": {
+          "description": "Tip: Use \\n to create a line break.",
+          "label": "Format"
+        },
         "minimal-mode": {
           "description": "Use a minimal clock display with time and date.",
           "label": "Minimal mode"
         },
+        "preview": "Preview",
         "show-background": {
           "description": "Show the background container for the clock widget.",
           "label": "Show background"
         },
-        "show-month-name": {
-          "description": "Display the month name in the date. When disabled, shows the month number.",
-          "label": "Show month name"
+        "use-custom-font": {
+          "description": "Override the default font selection with a custom font for the clock.",
+          "label": "Use custom font"
+        },
+        "use-primary-color": {
+          "description": "When enabled, this applies the primary color for emphasis.",
+          "label": "Use primary color"
         },
         "style": {
           "analog": "Analog",

Assets/Translations/es.json

@@ -1341,17 +1341,36 @@
           "description": "Configurar la apariencia del widget de reloj.",
           "label": "Widget de reloj"
         },
+        "clock-display": {
+          "description": "Personaliza la visualización de tu reloj añadiendo tokens de la lista de abajo. Para usar el formato de 12 horas, debes incluir el token 'AP'.",
+          "label": "Visualización del reloj"
+        },
+        "custom-font": {
+          "description": "Seleccionar una fuente personalizada para la visualización del reloj.",
+          "label": "Fuente personalizada",
+          "placeholder": "Seleccionar fuente personalizada...",
+          "search-placeholder": "Buscar fuentes..."
+        },
+        "format": {
+          "description": "Consejo: Usa \\n para crear un salto de línea.",
+          "label": "Formato"
+        },
         "minimal-mode": {
           "description": "Usar una visualización de reloj minimalista con hora y fecha.",
           "label": "Modo minimalista"
         },
+        "preview": "Vista previa",
         "show-background": {
           "description": "Mostrar el contenedor de fondo para el widget de reloj.",
           "label": "Mostrar fondo"
         },
-        "show-month-name": {
-          "description": "Mostrar el nombre del mes en la fecha. Cuando está desactivado, muestra el número del mes.",
-          "label": "Mostrar nombre del mes"
+        "use-custom-font": {
+          "description": "Anular la selección de fuente predeterminada con una fuente personalizada para el reloj.",
+          "label": "Usar fuente personalizada"
+        },
+        "use-primary-color": {
+          "description": "Cuando está activado, se aplica el color primario para dar énfasis.",
+          "label": "Usar color primario"
         },
         "style": {
           "analog": "Analógico",

Assets/Translations/fr.json

@@ -1341,17 +1341,36 @@
           "description": "Configurer l'apparence du widget horloge.",
           "label": "Widget d'horloge"
         },
+        "clock-display": {
+          "description": "Personnalisez l'affichage de votre horloge en ajoutant des jetons de la liste ci-dessous. Pour utiliser le format 12 heures, vous devez inclure le jeton 'AP'.",
+          "label": "Affichage de l'horloge"
+        },
+        "custom-font": {
+          "description": "Sélectionner une police personnalisée pour l'affichage de l'horloge.",
+          "label": "Police personnalisée",
+          "placeholder": "Sélectionner une police personnalisée...",
+          "search-placeholder": "Rechercher des polices..."
+        },
+        "format": {
+          "description": "Astuce : Utilisez \\n pour créer un saut de ligne.",
+          "label": "Format"
+        },
         "minimal-mode": {
           "description": "Utiliser un affichage d'horloge minimaliste avec l'heure et la date.",
           "label": "Mode minimaliste"
         },
+        "preview": "Aperçu",
         "show-background": {
           "description": "Afficher le conteneur d'arrière-plan pour le widget d'horloge.",
           "label": "Afficher l'arrière-plan"
         },
-        "show-month-name": {
-          "description": "Afficher le nom du mois dans la date. Lorsqu'il est désactivé, affiche le numéro du mois.",
-          "label": "Afficher le nom du mois"
+        "use-custom-font": {
+          "description": "Remplacez la police par défaut par une police personnalisée pour l'horloge.",
+          "label": "Utiliser une police personnalisée."
+        },
+        "use-primary-color": {
+          "description": "Lorsque cette option est activée, la couleur principale est utilisée pour la mise en évidence.",
+          "label": "Utiliser la couleur principale"
         },
         "style": {
           "analog": "Analogique",

Assets/Translations/ja.json

@@ -1341,17 +1341,36 @@
           "description": "時計ウィジェットの外観を設定します。",
           "label": "時計ウィジェット"
         },
+        "clock-display": {
+          "description": "以下のトークンを使用して時計の表示をカスタマイズします。12時間表記にするには AP トークンを含める必要があります。",
+          "label": "時計の表示形式"
+        },
+        "custom-font": {
+          "description": "時計表示用のカスタムフォントを選択します。",
+          "label": "カスタムフォント",
+          "placeholder": "カスタムフォントを選択...",
+          "search-placeholder": "フォントを検索..."
+        },
+        "format": {
+          "description": "ヒント: \\n を使用すると改行できます。",
+          "label": "フォーマット"
+        },
         "minimal-mode": {
           "description": "時刻と日付を含むミニマルな時計表示を使用します。",
           "label": "ミニマルモード"
         },
+        "preview": "プレビュー",
         "show-background": {
           "description": "時計ウィジェットの背景コンテナを表示する。",
           "label": "背景を表示"
         },
-        "show-month-name": {
-          "description": "日付に月名を表示します。無効にすると、月番号が表示されます。",
-          "label": "月名を表示"
+        "use-custom-font": {
+          "description": "デフォルトのフォント設定を上書きし、時計にカスタムフォントを使用します。",
+          "label": "カスタムフォントを使用"
+        },
+        "use-primary-color": {
+          "description": "有効にすると、強調のためにプライマリカラーが適用されます。",
+          "label": "プライマリカラーを使用"
         },
         "style": {
           "analog": "アナログ",

Assets/Translations/nl.json

@@ -1341,17 +1341,36 @@
           "description": "Configureer de weergave van de klokwidget.",
           "label": "Klokwidget"
         },
+        "clock-display": {
+          "description": "Pas de weergave van je klok aan door tokens uit onderstaande lijst toe te voegen. Om de 12-uursnotatie te gebruiken, moet je de 'AP'-token opnemen.",
+          "label": "Klokweergave"
+        },
+        "custom-font": {
+          "description": "Selecteer een aangepast lettertype voor de klokweergave.",
+          "label": "Aangepast lettertype",
+          "placeholder": "Selecteer aangepast lettertype...",
+          "search-placeholder": "Lettertypen zoeken..."
+        },
+        "format": {
+          "description": "Tip: gebruik \\n om een regeleinde te maken.",
+          "label": "Formaat"
+        },
         "minimal-mode": {
           "description": "Gebruik een minimale klokweergave met tijd en datum.",
           "label": "Minimale modus"
         },
+        "preview": "Voorbeeld",
         "show-background": {
           "description": "Toon de achtergrondcontainer voor de klokwidget.",
           "label": "Achtergrond weergeven"
         },
-        "show-month-name": {
-          "description": "Toon de maandnaam in de datum. Wanneer uitgeschakeld, wordt het maandnummer weergegeven.",
-          "label": "Maandnaam weergeven"
+        "use-custom-font": {
+          "description": "Overschrijf het standaardlettertype met een aangepast lettertype voor de klok.",
+          "label": "Aangepast lettertype gebruiken"
+        },
+        "use-primary-color": {
+          "description": "Indien ingeschakeld wordt de primaire kleur gebruikt voor nadruk.",
+          "label": "Primaire kleur gebruiken"
         },
         "style": {
           "analog": "Analoog",

Assets/Translations/pt.json

@@ -1341,17 +1341,36 @@
           "description": "Configurar a aparência do widget de relógio.",
           "label": "Widget de Relógio"
         },
+        "clock-display": {
+          "description": "Personalize a exibição do seu relógio adicionando tokens da lista abaixo. Para usar o formato de 12 horas, você deve incluir o token 'AP'.",
+          "label": "Exibição do relógio"
+        },
+        "custom-font": {
+          "description": "Selecione uma fonte personalizada para a exibição do relógio.",
+          "label": "Fonte personalizada",
+          "placeholder": "Selecionar fonte personalizada...",
+          "search-placeholder": "Procurar fontes..."
+        },
+        "format": {
+          "description": "Dica: Use \\n para criar uma quebra de linha.",
+          "label": "Formato"
+        },
         "minimal-mode": {
           "description": "Usar uma exibição de relógio minimalista com hora e data.",
           "label": "Modo minimalista"
         },
+        "preview": "Pré-visualização",
         "show-background": {
           "description": "Mostrar o contêiner de fundo para o widget de relógio.",
           "label": "Mostrar plano de fundo"
         },
-        "show-month-name": {
-          "description": "Exibir o nome do mês na data. Quando desativado, mostra o número do mês.",
-          "label": "Mostrar nome do mês"
+        "use-custom-font": {
+          "description": "Substitua a fonte padrão por uma fonte personalizada para o relógio.",
+          "label": "Usar fonte personalizada"
+        },
+        "use-primary-color": {
+          "description": "Quando ativado, aplica a cor primária para dar ênfase.",
+          "label": "Usar cor primária"
         },
         "style": {
           "analog": "Analógico",

Assets/Translations/ru.json

@@ -1341,17 +1341,36 @@
           "description": "Настроить внешний вид виджета часов.",
           "label": "Виджет часов"
         },
+        "clock-display": {
+          "description": "Настройте отображение часов, добавив токены из списка ниже. Чтобы использовать 12-часовой формат, необходимо включить токен 'AP'.",
+          "label": "Отображение часов"
+        },
+        "custom-font": {
+          "description": "Выберите пользовательский шрифт для отображения часов.",
+          "label": "Пользовательский шрифт",
+          "placeholder": "Выбрать пользовательский шрифт...",
+          "search-placeholder": "Поиск шрифтов..."
+        },
+        "format": {
+          "description": "Совет: используйте \\n для создания разрыва строки.",
+          "label": "Формат"
+        },
         "minimal-mode": {
           "description": "Использовать минимальное отображение часов с временем и датой.",
           "label": "Минимальный режим"
         },
+        "preview": "Предварительный просмотр",
         "show-background": {
           "description": "Показать фоновый контейнер для виджета часов.",
           "label": "Показать фон"
         },
-        "show-month-name": {
-          "description": "Отображать название месяца в дате. При отключении отображается номер месяца.",
-          "label": "Показать название месяца"
+        "use-custom-font": {
+          "description": "Переопределить выбор шрифта по умолчанию пользовательским шрифтом для часов.",
+          "label": "Использовать пользовательский шрифт"
+        },
+        "use-primary-color": {
+          "description": "Если включено, это применит основной цвет для выделения.",
+          "label": "Использовать основной цвет"
         },
         "style": {
           "analog": "Аналоговый",

Assets/Translations/tr.json

@@ -1341,17 +1341,36 @@
           "description": "Saat aracı görünümünü yapılandırın.",
           "label": "Saat Widget'ı"
         },
+        "clock-display": {
+          "description": "Saatinizin görüntüsünü özelleştirmek için aşağıdaki listeden jetonları ekleyin. 12 saat formatını kullanmak için 'AP' jetonunu eklemelisiniz.",
+          "label": "Saat görüntüleme"
+        },
+        "custom-font": {
+          "description": "Saat görüntüleme için özel bir yazı tipi seçin.",
+          "label": "Özel yazı tipi",
+          "placeholder": "Özel yazı tipi seçin...",
+          "search-placeholder": "Yazı tiplerini ara..."
+        },
+        "format": {
+          "description": "İpucu: Bir satır sonu oluşturmak için \\n kullanın.",
+          "label": "Biçim"
+        },
         "minimal-mode": {
           "description": "Zaman ve tarih içeren minimal bir saat görüntüsü kullanın.",
           "label": "Minimal mod"
         },
+        "preview": "Önizleme",
         "show-background": {
           "description": "Saat widget'ı için arka plan kabını göster.",
           "label": "Arka planı göster"
         },
-        "show-month-name": {
-          "description": "Tarihte ay adını göster. Devre dışı bırakıldığında, ay numarasını gösterir.",
-          "label": "Ay adını göster"
+        "use-custom-font": {
+          "description": "Saat için varsayılan yazı tipi seçimini özel bir yazı tipiyle geçersiz kılın.",
+          "label": "Özel yazı tipi kullan"
+        },
+        "use-primary-color": {
+          "description": "Etkinleştirildiğinde, bu vurgu için birincil rengi uygular.",
+          "label": "Birincil rengi kullan"
         },
         "style": {
           "analog": "Analog",

Assets/Translations/uk-UA.json

@@ -1341,17 +1341,36 @@
           "description": "Налаштуйте вигляд віджета годинника.",
           "label": "Віджет годинника"
         },
+        "clock-display": {
+          "description": "Налаштуйте відображення годинника, додавши токени зі списку нижче. Для використання 12-годинного формату ви повинні включити токен 'AP'.",
+          "label": "Відображення годинника"
+        },
+        "custom-font": {
+          "description": "Вибрати власний шрифт для відображення годинника.",
+          "label": "Власний шрифт",
+          "placeholder": "Вибрати власний шрифт...",
+          "search-placeholder": "Пошук шрифтів..."
+        },
+        "format": {
+          "description": "Порада: Використовуйте \\n для створення розриву рядка.",
+          "label": "Формат"
+        },
         "minimal-mode": {
           "description": "Використовувати мінімальне відображення годинника з часом і датою.",
           "label": "Мінімальний режим"
         },
+        "preview": "Попередній перегляд",
         "show-background": {
           "description": "Показати фоновий контейнер для віджета годинника.",
           "label": "Показати фон"
         },
-        "show-month-name": {
-          "description": "Відображати назву місяця в даті. Коли вимкнено, відображається номер місяця.",
-          "label": "Показати назву місяця"
+        "use-custom-font": {
+          "description": "Замінити стандартний вибір шрифту власним шрифтом для годинника.",
+          "label": "Використовувати власний шрифт"
+        },
+        "use-primary-color": {
+          "description": "Коли увімкнено, застосовується основний колір для акценту.",
+          "label": "Використовувати основний колір"
         },
         "style": {
           "analog": "Аналоговий",

Assets/Translations/zh-CN.json

@@ -1341,17 +1341,36 @@
           "description": "配置时钟小部件外观。",
           "label": "时钟小部件"
         },
+        "clock-display": {
+          "description": "通过从下面的列表添加标记来自定义时钟显示。要使用 12 小时制，必须包含 'AP' 标记。",
+          "label": "时钟显示"
+        },
+        "custom-font": {
+          "description": "选择时钟显示使用的自定义字体。",
+          "label": "自定义字体",
+          "placeholder": "选择自定义字体...",
+          "search-placeholder": "搜索字体..."
+        },
+        "format": {
+          "description": "提示：使用 \\n 创建换行。",
+          "label": "格式"
+        },
         "minimal-mode": {
           "description": "使用包含时间和日期的简约时钟显示。",
           "label": "简约模式"
         },
+        "preview": "预览",
         "show-background": {
           "description": "显示时钟小部件的背景容器。",
           "label": "显示背景"
         },
-        "show-month-name": {
-          "description": "在日期中显示月份名称。禁用时，显示月份数字。",
-          "label": "显示月份名称"
+        "use-custom-font": {
+          "description": "使用自定义字体覆盖时钟的默认字体选择。",
+          "label": "使用自定义字体"
+        },
+        "use-primary-color": {
+          "description": "启用后，将应用主颜色进行强调。",
+          "label": "使用主颜色"
         },
         "style": {
           "analog": "模拟",

Modules/DesktopWidgets/Widgets/DesktopClock.qml

@@ -11,6 +11,9 @@ DraggableDesktopWidget {
   readonly property var now: Time.now
 
   property color clockTextColor: {
+    if (usePrimaryColor) {
+      return Color.mPrimary;
+    }
     var txtColor = widgetData && widgetData.textColor ? widgetData.textColor : "";
     return (txtColor && txtColor !== "") ? txtColor : Color.mOnSurface;
   }
@@ -22,7 +25,10 @@ DraggableDesktopWidget {
   property bool showSeconds: (widgetData && widgetData.showSeconds !== undefined) ? widgetData.showSeconds : true
   property bool showDate: (widgetData && widgetData.showDate !== undefined) ? widgetData.showDate : true
   property string clockStyle: (widgetData && widgetData.clockStyle) ? widgetData.clockStyle : "digital"
-  property bool showMonthName: (widgetData && widgetData.showMonthName !== undefined) ? widgetData.showMonthName : true
+  property bool usePrimaryColor: (widgetData && widgetData.usePrimaryColor !== undefined) ? widgetData.usePrimaryColor : false
+  property bool useCustomFont: (widgetData && widgetData.useCustomFont !== undefined) ? widgetData.useCustomFont : false
+  property string customFont: (widgetData && widgetData.customFont) ? widgetData.customFont : ""
+  property string format: (widgetData && widgetData.format) ? widgetData.format : "HH:mm\\nd MMMM yyyy"
 
   readonly property real contentPadding: clockStyle === "minimal" ? Style.marginL : Style.marginXL
   implicitWidth: contentLoader.item ? (contentLoader.item.implicitWidth || contentLoader.item.width || 0) + contentPadding * 2 : 0
@@ -49,37 +55,27 @@ DraggableDesktopWidget {
   Component {
     id: minimalClockComponent
     ColumnLayout {
-      spacing: Style.marginXS
+      spacing: -2
       opacity: root.widgetOpacity
 
-      NText {
-        text: {
-          var timeFormat = Settings.data.location.use12hourFormat ? "hh:mm AP" : "HH:mm";
-          return I18n.locale.toString(root.now, timeFormat);
-        }
-        pointSize: Style.fontSizeXXL
-        font.weight: Style.fontWeightBold
-        color: clockTextColor
-        family: Settings.data.ui.fontFixed
-        Layout.alignment: Qt.AlignHCenter
-      }
-
-      NText {
-        text: {
-          if (root.showMonthName) {
-            return I18n.locale.toString(root.now, "d MMMM yyyy");
-          } else {
-            // Format with month number: "17 12 2025"
-            var day = root.now.getDate();
-            var month = root.now.getMonth() + 1; // getMonth() is 0-based
-            var year = root.now.getFullYear();
-            return I18n.locale.toString(root.now, "d") + " " + month.toString() + " " + year.toString();
+      Repeater {
+        model: I18n.locale.toString(root.now, root.format.trim()).split("\\n")
+        delegate: NText {
+          visible: text !== ""
+          text: modelData
+          family: root.useCustomFont && root.customFont ? root.customFont : Settings.data.ui.fontDefault
+          pointSize: {
+            if (model.length == 1) {
+              return Style.fontSizeXXL;
+            } else {
+              return (index == 0) ? Style.fontSizeXXL : Style.fontSizeM;
+            }
           }
+          font.weight: Style.fontWeightBold
+          color: root.clockTextColor
+          wrapMode: Text.WordWrap
+          Layout.alignment: Qt.AlignHCenter
         }
-        pointSize: Style.fontSizeM
-        font.weight: Style.fontWeightMedium
-        color: clockTextColor
-        Layout.alignment: Qt.AlignHCenter
       }
     }
   }

Modules/Panels/Settings/DesktopWidgets/WidgetSettings/ClockSettings.qml

@@ -2,11 +2,13 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Commons
+import qs.Services.System
 import qs.Widgets
 
 ColumnLayout {
   id: root
   spacing: Style.marginM
+  width: 700
 
   property var widgetData: null
   property var widgetMetadata: null
@@ -24,7 +26,15 @@ ColumnLayout {
     }
     return widgetData.clockStyle === "minimal";
   }
-  property bool valueShowMonthName: widgetData.showMonthName !== undefined ? widgetData.showMonthName : true
+  property bool valueUsePrimaryColor: widgetData.usePrimaryColor !== undefined ? widgetData.usePrimaryColor : false
+  property bool valueUseCustomFont: widgetData.useCustomFont !== undefined ? widgetData.useCustomFont : false
+  property string valueCustomFont: widgetData.customFont !== undefined ? widgetData.customFont : ""
+  property string valueFormat: widgetData.format !== undefined ? widgetData.format : "HH:mm\\nd MMMM yyyy"
+
+  // Track the currently focused input field
+  property var focusedInput: null
+
+  readonly property var now: Time.now
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {});
@@ -35,10 +45,40 @@ ColumnLayout {
       settings.clockStyle = valueClockStyle;
     }
     settings.minimalMode = valueMinimalMode;
-    settings.showMonthName = valueShowMonthName;
+    settings.usePrimaryColor = valueUsePrimaryColor;
+    settings.useCustomFont = valueUseCustomFont;
+    settings.customFont = valueCustomFont;
+    settings.format = valueFormat.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 format input
+      if (formatInput.inputItem) {
+        formatInput.inputItem.focus = true;
+        focusedInput = formatInput;
+      }
+    }
+
+    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;
+    }
+  }
+
   NToggle {
     Layout.fillWidth: true
     label: I18n.tr("settings.desktop-widgets.clock.minimal-mode.label")
@@ -68,12 +108,155 @@ ColumnLayout {
   }
 
   NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("settings.desktop-widgets.clock.use-primary-color.label")
+    description: I18n.tr("settings.desktop-widgets.clock.use-primary-color.description")
+    checked: valueUsePrimaryColor
+    onToggled: checked => valueUsePrimaryColor = checked
+  }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("settings.desktop-widgets.clock.use-custom-font.label")
+    description: I18n.tr("settings.desktop-widgets.clock.use-custom-font.description")
+    checked: valueUseCustomFont
+    onToggled: checked => valueUseCustomFont = checked
+  }
+
+  NSearchableComboBox {
+    Layout.fillWidth: true
+    visible: valueUseCustomFont
+    label: I18n.tr("settings.desktop-widgets.clock.custom-font.label")
+    description: I18n.tr("settings.desktop-widgets.clock.custom-font.description")
+    model: FontService.availableFonts
+    currentKey: valueCustomFont
+    placeholder: I18n.tr("settings.desktop-widgets.clock.custom-font.placeholder")
+    searchPlaceholder: I18n.tr("settings.desktop-widgets.clock.custom-font.search-placeholder")
+    popupHeight: 420
+    minimumWidth: 300
+    onSelected: function (key) {
+      valueCustomFont = key;
+    }
+  }
+
+  NDivider {
     Layout.fillWidth: true
     visible: valueMinimalMode
-    label: I18n.tr("settings.desktop-widgets.clock.show-month-name.label")
-    description: I18n.tr("settings.desktop-widgets.clock.show-month-name.description")
-    checked: valueShowMonthName
-    onToggled: checked => valueShowMonthName = checked
+  }
+
+  NHeader {
+    visible: valueMinimalMode
+    label: I18n.tr("settings.desktop-widgets.clock.clock-display.label")
+    description: I18n.tr("settings.desktop-widgets.clock.clock-display.description")
+  }
+
+  // Format editor - only visible in minimal mode
+  RowLayout {
+    id: main
+    visible: valueMinimalMode
+    spacing: Style.marginL
+    Layout.fillWidth: true
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+    ColumnLayout {
+      spacing: Style.marginM
+      Layout.fillWidth: true
+      Layout.preferredWidth: 1
+      Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+      NTextInput {
+        id: formatInput
+        Layout.fillWidth: true
+        label: I18n.tr("settings.desktop-widgets.clock.format.label")
+        description: I18n.tr("settings.desktop-widgets.clock.format.description")
+        placeholderText: "HH:mm\\nd MMMM yyyy"
+        text: valueFormat
+        onTextChanged: valueFormat = text
+        Component.onCompleted: {
+          if (inputItem) {
+            inputItem.onActiveFocusChanged.connect(function () {
+              if (inputItem.activeFocus) {
+                root.focusedInput = formatInput;
+              }
+            });
+          }
+        }
+      }
+    }
+
+    // Preview
+    ColumnLayout {
+      Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+      Layout.fillWidth: false
+
+      NLabel {
+        label: I18n.tr("settings.desktop-widgets.clock.preview")
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+      }
+
+      Rectangle {
+        Layout.preferredWidth: 320
+        Layout.preferredHeight: 160
+        color: Color.mSurfaceVariant
+        radius: Style.radiusM
+        border.color: Color.mSecondary
+        border.width: Style.borderS
+
+        Behavior on border.color {
+          ColorAnimation {
+            duration: Style.animationFast
+          }
+        }
+
+        ColumnLayout {
+          spacing: Style.marginM
+          anchors.centerIn: parent
+
+          ColumnLayout {
+            spacing: -2
+            Layout.alignment: Qt.AlignHCenter
+
+            Repeater {
+              Layout.topMargin: Style.marginM
+              model: I18n.locale.toString(now, valueFormat.trim()).split("\\n")
+              delegate: NText {
+                visible: text !== ""
+                text: modelData
+                family: valueUseCustomFont && valueCustomFont ? valueCustomFont : Settings.data.ui.fontDefault
+                pointSize: Style.fontSizeM
+                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.marginM
+    Layout.bottomMargin: Style.marginM
+    visible: valueMinimalMode
+  }
+
+  NDateTimeTokens {
+    Layout.fillWidth: true
+    height: 200
+    visible: valueMinimalMode
+    onTokenClicked: token => root.insertToken(token)
+  }
+
+  NDivider {
+    Layout.fillWidth: true
   }
 
   NToggle {

Services/Theming/TemplateProcessor.qml

@@ -149,6 +149,8 @@ Singleton {
 
 
 
+
+
 ${expandedPath}' ${tmpDir}/extension/themes/NoctaliaTheme-color-theme.json && cd ${tmpDir} && zip -q -r ${modifiedVsix} . && ${client.name} --install-extension ${modifiedVsix} 2>&1 && rm -rf ${tmpDir}; fi`;
                                                                         var updateSettingsJson = `if command -v ${client.name} >/dev/null 2>&1 && [ -f ${settingsPath} ]; then sed -i 's/\\\\\\"workbench.colorTheme\\\\\\":[[:space:]]*\\\\\\"[^\\\\\\"]*/\\\\\\"workbench.colorTheme\\\\\\": \\\\\\"NoctaliaTheme/' ${settingsPath}; fi`;
                                                                         lines.push(`post_hook = "sh -c \\"${reinstallVsix}; ${updateSettingsJson}\\""`);