Customizable date format

Common/SettingsData.qml

@@ -1,15 +1,13 @@
-pragma Singleton
-
-pragma ComponentBehavior
-
 import QtCore
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Services
+pragma Singleton
+
+pragma ComponentBehavior
 
 Singleton {
-
     id: root
 
     property int themeIndex: 0
@@ -17,7 +15,7 @@ Singleton {
     property real topBarTransparency: 0.75
     property real topBarWidgetTransparency: 0.85
     property real popupTransparency: 0.92
-  property real dockTransparency: 1.0
+    property real dockTransparency: 1
     property bool use24HourClock: true
     property bool useFahrenheit: false
     property bool nightModeEnabled: false
@@ -44,29 +42,14 @@ Singleton {
     property bool showWorkspaceIndex: false
     property bool showWorkspacePadding: false
     property bool clockCompactMode: false
+    property string clockDateFormat: "ddd d"
     property int mediaSize: 1
     property var topBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
     property var topBarCenterWidgets: ["music", "clock", "weather"]
     property var topBarRightWidgets: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
-
     property alias topBarLeftWidgetsModel: leftWidgetsModel
     property alias topBarCenterWidgetsModel: centerWidgetsModel
     property alias topBarRightWidgetsModel: rightWidgetsModel
-
-  signal forceTopBarLayoutRefresh
-  signal widgetDataChanged
-
-  ListModel {
-    id: leftWidgetsModel
-  }
-
-  ListModel {
-    id: centerWidgetsModel
-  }
-
-  ListModel {
-    id: rightWidgetsModel
-  }
     property string appLauncherViewMode: "list"
     property string spotlightModalViewMode: "list"
     property string networkPreference: "auto"
@@ -78,7 +61,7 @@ Singleton {
     property bool useOSLogo: false
     property string osLogoColorOverride: ""
     property real osLogoBrightness: 0.5
-  property real osLogoContrast: 1.0
+    property real osLogoContrast: 1
     property bool wallpaperDynamicTheming: true
     property bool weatherEnabled: true
     property string fontFamily: "Inter Variable"
@@ -94,10 +77,8 @@ Singleton {
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
     property int notificationTimeoutCritical: 0
-
     readonly property string defaultFontFamily: "Inter Variable"
     readonly property string defaultMonoFontFamily: "Fira Code"
-
     readonly property string _homeUrl: StandardPaths.writableLocation(
                                            StandardPaths.HomeLocation)
     readonly property string _configUrl: StandardPaths.writableLocation(
@@ -106,36 +87,8 @@ Singleton {
                                              "file://") ? _configUrl.substring(
                                                               7) : _configUrl
 
-  Timer {
+    signal forceTopBarLayoutRefresh
-    id: fontCheckTimer
+    signal widgetDataChanged
-    interval: 3000
-    repeat: false
-    onTriggered: {
-      var availableFonts = Qt.fontFamilies()
-      var missingFonts = []
-
-      if (fontFamily === defaultFontFamily && !availableFonts.includes(
-            defaultFontFamily)) {
-        missingFonts.push(defaultFontFamily)
-      }
-      if (monoFontFamily === defaultMonoFontFamily && !availableFonts.includes(
-            defaultMonoFontFamily)) {
-        missingFonts.push(defaultMonoFontFamily)
-      }
-
-      if (missingFonts.length > 0) {
-        var message = "Missing fonts: " + missingFonts.join(
-          ", ") + ". Using system defaults."
-        ToastService.showWarning(message)
-      }
-    }
-  }
-
-  Component.onCompleted: {
-    loadSettings()
-    fontCheckTimer.start()
-    initializeListModels()
-  }
 
     function initializeListModels() {
         updateListModel(leftWidgetsModel, topBarLeftWidgets)
@@ -152,7 +105,8 @@ Singleton {
             if (content && content.trim()) {
                 var settings = JSON.parse(content)
                 themeIndex = settings.themeIndex !== undefined ? settings.themeIndex : 0
-        themeIsDynamic = settings.themeIsDynamic !== undefined ? settings.themeIsDynamic : false
+                themeIsDynamic = settings.themeIsDynamic
+                        !== undefined ? settings.themeIsDynamic : false
                 topBarTransparency = settings.topBarTransparency
                         !== undefined ? (settings.topBarTransparency
                                          > 1 ? settings.topBarTransparency
@@ -168,17 +122,21 @@ Singleton {
                 dockTransparency = settings.dockTransparency
                         !== undefined ? (settings.dockTransparency
                                          > 1 ? settings.dockTransparency
-                                   / 100 : settings.dockTransparency) : 1.0
+                                               / 100 : settings.dockTransparency) : 1
-        use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
+                use24HourClock = settings.use24HourClock
-        useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
+                        !== undefined ? settings.use24HourClock : true
+                useFahrenheit = settings.useFahrenheit
+                        !== undefined ? settings.useFahrenheit : false
                 nightModeEnabled = settings.nightModeEnabled
                         !== undefined ? settings.nightModeEnabled : false
                 weatherLocation = settings.weatherLocation
                         !== undefined ? settings.weatherLocation : "New York, NY"
                 weatherCoordinates = settings.weatherCoordinates
                         !== undefined ? settings.weatherCoordinates : "40.7128,-74.0060"
-        useAutoLocation = settings.useAutoLocation !== undefined ? settings.useAutoLocation : false
+                useAutoLocation = settings.useAutoLocation
-        weatherEnabled = settings.weatherEnabled !== undefined ? settings.weatherEnabled : true
+                        !== undefined ? settings.useAutoLocation : false
+                weatherEnabled = settings.weatherEnabled
+                        !== undefined ? settings.weatherEnabled : true
                 showLauncherButton = settings.showLauncherButton
                         !== undefined ? settings.showLauncherButton : true
                 showWorkspaceSwitcher = settings.showWorkspaceSwitcher
@@ -192,9 +150,12 @@ Singleton {
                 showMemUsage = settings.showMemUsage !== undefined ? settings.showMemUsage : true
                 showCpuTemp = settings.showCpuTemp !== undefined ? settings.showCpuTemp : true
                 showGpuTemp = settings.showGpuTemp !== undefined ? settings.showGpuTemp : true
-        selectedGpuIndex = settings.selectedGpuIndex !== undefined ? settings.selectedGpuIndex : 0
+                selectedGpuIndex = settings.selectedGpuIndex
-        enabledGpuPciIds = settings.enabledGpuPciIds !== undefined ? settings.enabledGpuPciIds : []
+                        !== undefined ? settings.selectedGpuIndex : 0
-        showSystemTray = settings.showSystemTray !== undefined ? settings.showSystemTray : true
+                enabledGpuPciIds = settings.enabledGpuPciIds
+                        !== undefined ? settings.enabledGpuPciIds : []
+                showSystemTray = settings.showSystemTray
+                        !== undefined ? settings.showSystemTray : true
                 showClock = settings.showClock !== undefined ? settings.showClock : true
                 showNotificationButton = settings.showNotificationButton
                         !== undefined ? settings.showNotificationButton : true
@@ -207,16 +168,23 @@ Singleton {
                         !== undefined ? settings.showWorkspacePadding : false
                 clockCompactMode = settings.clockCompactMode
                         !== undefined ? settings.clockCompactMode : false
+                clockDateFormat = settings.clockDateFormat
+                        !== undefined ? settings.clockDateFormat : "ddd d"
                 mediaSize = settings.mediaSize !== undefined ? settings.mediaSize : (settings.mediaCompactMode !== undefined ? (settings.mediaCompactMode ? 0 : 1) : 1)
                 if (settings.topBarWidgetOrder) {
-          topBarLeftWidgets = settings.topBarWidgetOrder.filter(
+                    topBarLeftWidgets = settings.topBarWidgetOrder.filter(w => {
-                w => ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(
+                                                                              return ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(w)
-                  w))
+                                                                          })
                     topBarCenterWidgets = settings.topBarWidgetOrder.filter(
-                w => ["clock", "music", "weather"].includes(w))
+                                w => {
+                                    return ["clock", "music", "weather"].includes(
+                                        w)
+                                })
                     topBarRightWidgets = settings.topBarWidgetOrder.filter(
-                w => ["systemTray", "clipboard", "systemResources", "notificationButton", "battery", "controlCenterButton"].includes(
+                                w => {
-                  w))
+                                    return ["systemTray", "clipboard", "systemResources", "notificationButton", "battery", "controlCenterButton"].includes(
+                                        w)
+                                })
                 } else {
                     var leftWidgets = settings.topBarLeftWidgets
                             !== undefined ? settings.topBarLeftWidgets : ["launcherButton", "workspaceSwitcher", "focusedWindow"]
@@ -224,11 +192,9 @@ Singleton {
                             !== undefined ? settings.topBarCenterWidgets : ["music", "clock", "weather"]
                     var rightWidgets = settings.topBarRightWidgets
                             !== undefined ? settings.topBarRightWidgets : ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
-
                     topBarLeftWidgets = leftWidgets
                     topBarCenterWidgets = centerWidgets
                     topBarRightWidgets = rightWidgets
-
                     updateListModel(leftWidgetsModel, leftWidgets)
                     updateListModel(centerWidgetsModel, centerWidgets)
                     updateListModel(rightWidgetsModel, rightWidgets)
@@ -243,11 +209,13 @@ Singleton {
                 useOSLogo = settings.useOSLogo !== undefined ? settings.useOSLogo : false
                 osLogoColorOverride = settings.osLogoColorOverride
                         !== undefined ? settings.osLogoColorOverride : ""
-        osLogoBrightness = settings.osLogoBrightness !== undefined ? settings.osLogoBrightness : 0.5
+                osLogoBrightness = settings.osLogoBrightness
-        osLogoContrast = settings.osLogoContrast !== undefined ? settings.osLogoContrast : 1.0
+                        !== undefined ? settings.osLogoBrightness : 0.5
+                osLogoContrast = settings.osLogoContrast !== undefined ? settings.osLogoContrast : 1
                 wallpaperDynamicTheming = settings.wallpaperDynamicTheming
                         !== undefined ? settings.wallpaperDynamicTheming : true
-        fontFamily = settings.fontFamily !== undefined ? settings.fontFamily : defaultFontFamily
+                fontFamily = settings.fontFamily
+                        !== undefined ? settings.fontFamily : defaultFontFamily
                 monoFontFamily = settings.monoFontFamily
                         !== undefined ? settings.monoFontFamily : defaultMonoFontFamily
                 fontWeight = settings.fontWeight !== undefined ? settings.fontWeight : Font.Normal
@@ -258,11 +226,16 @@ Singleton {
                 showDock = settings.showDock !== undefined ? settings.showDock : false
                 dockAutoHide = settings.dockAutoHide !== undefined ? settings.dockAutoHide : false
                 cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
-        notificationOverlayEnabled = settings.notificationOverlayEnabled !== undefined ? settings.notificationOverlayEnabled : false
+                notificationOverlayEnabled = settings.notificationOverlayEnabled
-        topBarAutoHide = settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false
+                        !== undefined ? settings.notificationOverlayEnabled : false
-        notificationTimeoutLow = settings.notificationTimeoutLow !== undefined ? settings.notificationTimeoutLow : 5000
+                topBarAutoHide = settings.topBarAutoHide
-        notificationTimeoutNormal = settings.notificationTimeoutNormal !== undefined ? settings.notificationTimeoutNormal : 5000
+                        !== undefined ? settings.topBarAutoHide : false
-        notificationTimeoutCritical = settings.notificationTimeoutCritical !== undefined ? settings.notificationTimeoutCritical : 0
+                notificationTimeoutLow = settings.notificationTimeoutLow
+                        !== undefined ? settings.notificationTimeoutLow : 5000
+                notificationTimeoutNormal = settings.notificationTimeoutNormal
+                        !== undefined ? settings.notificationTimeoutNormal : 5000
+                notificationTimeoutCritical = settings.notificationTimeoutCritical
+                        !== undefined ? settings.notificationTimeoutCritical : 0
                 applyStoredTheme()
                 detectAvailableIconThemes()
                 detectQtTools()
@@ -311,6 +284,7 @@ Singleton {
                                                 "showWorkspaceIndex": showWorkspaceIndex,
                                                 "showWorkspacePadding": showWorkspacePadding,
                                                 "clockCompactMode": clockCompactMode,
+                                                "clockDateFormat": clockDateFormat,
                                                 "mediaSize": mediaSize,
                                                 "topBarLeftWidgets": topBarLeftWidgets,
                                                 "topBarCenterWidgets": topBarCenterWidgets,
@@ -355,22 +329,26 @@ Singleton {
         saveSettings()
     }
 
+    function setClockDateFormat(format) {
+        clockDateFormat = format
+        saveSettings()
+    }
+
     function setMediaSize(size) {
         mediaSize = size
         saveSettings()
     }
 
     function applyStoredTheme() {
-    if (typeof Theme !== "undefined") {
+        if (typeof Theme !== "undefined")
             Theme.switchTheme(themeIndex, themeIsDynamic, false)
-    } else {
+        else
             Qt.callLater(() => {
-                     if (typeof Theme !== "undefined") {
+                             if (typeof Theme !== "undefined")
-                       Theme.switchTheme(themeIndex, themeIsDynamic, false)
+                             Theme.switchTheme(themeIndex,
-                     }
+                                               themeIsDynamic, false)
                          })
     }
-  }
 
     function setTheme(index, isDynamic) {
         themeIndex = index
@@ -529,22 +507,22 @@ Singleton {
             var widgetId = typeof order[i] === "string" ? order[i] : order[i].id
             var enabled = typeof order[i] === "string" ? true : order[i].enabled
             var size = typeof order[i] === "string" ? undefined : order[i].size
-      var selectedGpuIndex = typeof order[i] === "string" ? undefined : order[i].selectedGpuIndex
+            var selectedGpuIndex = typeof order[i]
+                    === "string" ? undefined : order[i].selectedGpuIndex
             var pciId = typeof order[i] === "string" ? undefined : order[i].pciId
-
             var item = {
                 "widgetId": widgetId,
                 "enabled": enabled
             }
-      if (size !== undefined) {
+            if (size !== undefined)
                 item.size = size
-      }
+
-      if (selectedGpuIndex !== undefined) {
+            if (selectedGpuIndex !== undefined)
                 item.selectedGpuIndex = selectedGpuIndex
-      }
+
-      if (pciId !== undefined) {
+            if (pciId !== undefined)
                 item.pciId = pciId
-      }
+
             listModel.append(item)
         }
         // Emit signal to notify widgets that data has changed
@@ -555,15 +533,12 @@ Singleton {
         var defaultLeft = ["launcherButton", "workspaceSwitcher", "focusedWindow"]
         var defaultCenter = ["music", "clock", "weather"]
         var defaultRight = ["systemTray", "clipboard", "notificationButton", "battery", "controlCenterButton"]
-
         topBarLeftWidgets = defaultLeft
         topBarCenterWidgets = defaultCenter
         topBarRightWidgets = defaultRight
-
         updateListModel(leftWidgetsModel, defaultLeft)
         updateListModel(centerWidgetsModel, defaultCenter)
         updateListModel(rightWidgetsModel, defaultRight)
-
         showLauncherButton = true
         showWorkspaceSwitcher = true
         showFocusedWindow = true
@@ -630,16 +605,13 @@ Singleton {
         updateGtkIconTheme(themeName)
         updateQtIconTheme(themeName)
         saveSettings()
-
         if (typeof Theme !== "undefined" && Theme.isDynamicTheme
-        && typeof Colors !== "undefined") {
+                && typeof Colors !== "undefined")
             Colors.generateSystemThemes()
     }
-  }
 
     function updateGtkIconTheme(themeName) {
         var gtkThemeName = (themeName === "System Default") ? systemDefaultIconTheme : themeName
-
         if (gtkThemeName !== "System Default" && gtkThemeName !== "") {
             var script = "if command -v gsettings >/dev/null 2>&1 && gsettings list-schemas | grep -q org.gnome.desktop.interface; then\n"
                     + "    gsettings set org.gnome.desktop.interface icon-theme '" + gtkThemeName + "'\n" + "    echo 'Updated via gsettings'\n" + "elif command -v dconf >/dev/null 2>&1; then\n" + "    dconf write /org/gnome/desktop/interface/icon-theme \\\"" + gtkThemeName + "\\\"\n"
@@ -649,14 +621,12 @@ Singleton {
                     + "            # Add icon theme setting to [Settings] section or create it\n" + "            if grep -q '\\[Settings\\]' \"$settings_file\"; then\n" + "                sed -i '/\\[Settings\\]/a gtk-icon-theme-name=" + gtkThemeName + "' \"$settings_file\"\n" + "            else\n" + "                echo -e '\\n[Settings]\\ngtk-icon-theme-name=" + gtkThemeName
                     + "' >> \"$settings_file\"\n" + "            fi\n" + "        fi\n" + "    else\n" + "        # Create new settings.ini file\n" + "        echo -e '[Settings]\\ngtk-icon-theme-name=" + gtkThemeName + "' > \"$settings_file\"\n"
                     + "    fi\n" + "    echo \"Updated $settings_file\"\n" + "done\n" + "\n" + "# Clear icon cache and force refresh\n" + "rm -rf ~/.cache/icon-cache ~/.cache/thumbnails 2>/dev/null || true\n" + "# Send SIGHUP to running GTK applications to reload themes (Fedora-specific)\n" + "pkill -HUP -f 'gtk' 2>/dev/null || true\n"
-
             Quickshell.execDetached(["sh", "-lc", script])
         }
     }
 
     function updateQtIconTheme(themeName) {
         var qtThemeName = (themeName === "System Default") ? "" : themeName
-
         var home = _shq(root._homeUrl.replace("file://", ""))
         if (!qtThemeName) {
             var revertScript = "remove_icon_theme() {\n"
@@ -667,11 +637,9 @@ Singleton {
                     + "/qt6ct/qt6ct.conf\n" + "rm -f " + _configDir + "/environment.d/95-qtct.conf 2>/dev/null || true\n"
                     + "rm -rf " + home + "/.cache/icon-cache " + home
                     + "/.cache/thumbnails 2>/dev/null || true\n"
-
             Quickshell.execDetached(["sh", "-lc", revertScript])
             return
         }
-
         var script = "mkdir -p " + _configDir + "/qt5ct " + _configDir + "/qt6ct " + _configDir + "/environment.d 2>/dev/null || true\n" + "update_qt_config() {\n" + "  local config_file=\"$1\"\n"
                 + "  local theme_name=\"$2\"\n" + "  if [ -f \"$config_file\" ]; then\n" + "    if grep -q '^\\[Appearance\\]' \"$config_file\"; then\n" + "      awk -v theme=\"$theme_name\" '\n" + "        BEGIN { in_appearance = 0; icon_theme_added = 0 }\n" + "        /^\\[Appearance\\]/ { in_appearance = 1; print; next }\n" + "        /^\\[/ && !/^\\[Appearance\\]/ { \n" + "          if (in_appearance && !icon_theme_added) { \n"
                 + "            print \"icon_theme=\" theme; icon_theme_added = 1 \n" + "          } \n" + "          in_appearance = 0; print; next \n" + "        }\n" + "        in_appearance && /^icon_theme=/ { \n" + "          if (!icon_theme_added) { \n" + "            print \"icon_theme=\" theme; icon_theme_added = 1 \n" + "          } \n"
@@ -679,7 +647,6 @@ Singleton {
                 + "  else\n" + "    printf '[Appearance]\\nicon_theme=%s\\n' \"$theme_name\" > \"$config_file\"\n" + "  fi\n" + "}\n" + "update_qt_config " + _configDir + "/qt5ct/qt5ct.conf " + _shq(
                     qtThemeName) + "\n" + "update_qt_config " + _configDir + "/qt6ct/qt6ct.conf " + _shq(qtThemeName) + "\n"
                 + "rm -rf " + home + "/.cache/icon-cache " + home + "/.cache/thumbnails 2>/dev/null || true\n"
-
         Quickshell.execDetached(["sh", "-lc", script])
     }
 
@@ -782,6 +749,48 @@ Singleton {
         return "'" + String(s).replace(/'/g, "'\\''") + "'"
     }
 
+    Component.onCompleted: {
+        loadSettings()
+        fontCheckTimer.start()
+        initializeListModels()
+    }
+
+    ListModel {
+        id: leftWidgetsModel
+    }
+
+    ListModel {
+        id: centerWidgetsModel
+    }
+
+    ListModel {
+        id: rightWidgetsModel
+    }
+
+    Timer {
+        id: fontCheckTimer
+
+        interval: 3000
+        repeat: false
+        onTriggered: {
+            var availableFonts = Qt.fontFamilies()
+            var missingFonts = []
+            if (fontFamily === defaultFontFamily && !availableFonts.includes(
+                        defaultFontFamily))
+                missingFonts.push(defaultFontFamily)
+
+            if (monoFontFamily === defaultMonoFontFamily
+                    && !availableFonts.includes(defaultMonoFontFamily))
+                missingFonts.push(defaultMonoFontFamily)
+
+            if (missingFonts.length > 0) {
+                var message = "Missing fonts: " + missingFonts.join(
+                            ", ") + ". Using system defaults."
+                ToastService.showWarning(message)
+            }
+        }
+    }
+
     FileView {
         id: settingsFile
 
@@ -800,20 +809,21 @@ Singleton {
 
     Process {
         id: systemDefaultDetectionProcess
+
         command: ["sh", "-c", "gsettings get org.gnome.desktop.interface icon-theme 2>/dev/null | sed \"s/'//g\" || echo ''"]
         running: false
         onExited: exitCode => {
-      if (exitCode === 0 && stdout && stdout.length > 0) {
+                      if (exitCode === 0 && stdout && stdout.length > 0)
                       systemDefaultIconTheme = stdout.trim()
-      } else {
+                      else
                       systemDefaultIconTheme = ""
-      }
                       iconThemeDetectionProcess.running = true
                   }
     }
 
     Process {
         id: iconThemeDetectionProcess
+
         command: ["sh", "-c", "find /usr/share/icons ~/.local/share/icons ~/.icons -maxdepth 1 -type d 2>/dev/null | sed 's|.*/||' | grep -v '^icons$' | sort -u"]
         running: false
 
@@ -825,11 +835,10 @@ Singleton {
                     for (var i = 0; i < themes.length; i++) {
                         var theme = themes[i].trim()
                         if (theme && theme !== "" && theme !== "default"
-                && theme !== "hicolor" && theme !== "locolor") {
+                                && theme !== "hicolor" && theme !== "locolor")
                             detectedThemes.push(theme)
                     }
                 }
-        }
                 availableIconThemes = detectedThemes
             }
         }
@@ -837,6 +846,7 @@ Singleton {
 
     Process {
         id: qtToolsDetectionProcess
+
         command: ["sh", "-c", "echo -n 'qt5ct:'; command -v qt5ct >/dev/null && echo 'true' || echo 'false'; echo -n 'qt6ct:'; command -v qt6ct >/dev/null && echo 'true' || echo 'false'"]
         running: false
 
@@ -846,14 +856,13 @@ Singleton {
                     var lines = text.trim().split('\n')
                     for (var i = 0; i < lines.length; i++) {
                         var line = lines[i]
-            if (line.startsWith('qt5ct:')) {
+                        if (line.startsWith('qt5ct:'))
                             qt5ctAvailable = line.split(':')[1] === 'true'
-            } else if (line.startsWith('qt6ct:')) {
+                        else if (line.startsWith('qt6ct:'))
                             qt6ctAvailable = line.split(':')[1] === 'true'
                     }
                 }
             }
         }
     }
-  }
 }

Modules/Settings/TimeWeatherTab.qml

@@ -16,6 +16,7 @@ Item {
 
         Column {
             id: mainColumn
+
             width: parent.width
             spacing: Theme.spacingXL
 
@@ -28,7 +29,9 @@ Item {
                 width: parent.width
                 sourceComponent: weatherComponent
             }
+
         }
+
     }
 
     // Time Format Component
@@ -39,10 +42,8 @@ Item {
             width: parent.width
             height: timeSection.implicitHeight + Theme.spacingL * 2
             radius: Theme.cornerRadius
-      color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
-                     Theme.surfaceVariant.b, 0.3)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-      border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                            Theme.outline.b, 0.2)
             border.width: 1
 
             Column {
@@ -70,6 +71,7 @@ Item {
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
                     }
+
                 }
 
                 DankToggle {
@@ -77,14 +79,208 @@ Item {
                     text: "24-Hour Format"
                     description: "Use 24-hour time format instead of 12-hour AM/PM"
                     checked: SettingsData.use24HourClock
-          onToggled: checked => {
+                    onToggled: (checked) => {
-                       return SettingsData.setClockFormat(checked)
+                        return SettingsData.setClockFormat(checked);
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: "Date Format"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    DankDropdown {
+                        width: parent.width
+                        height: 50
+                        text: "Format"
+                        description: "Preview: " + Qt.formatDate(new Date(), SettingsData.clockDateFormat)
+                        currentValue: {
+                            // Find matching preset or show "Custom"
+                            const presets = [{
+                                "format": "ddd d",
+                                "label": "Day Date"
+                            }, {
+                                "format": "ddd MMM d",
+                                "label": "Day Month Date"
+                            }, {
+                                "format": "MMM d",
+                                "label": "Month Date"
+                            }, {
+                                "format": "M/d",
+                                "label": "Numeric (M/D)"
+                            }, {
+                                "format": "d/M",
+                                "label": "Numeric (D/M)"
+                            }, {
+                                "format": "ddd d MMM yyyy",
+                                "label": "Full with Year"
+                            }, {
+                                "format": "yyyy-MM-dd",
+                                "label": "ISO Date"
+                            }, {
+                                "format": "dddd, MMMM d",
+                                "label": "Full Day & Month"
+                            }];
+                            const match = presets.find((p) => {
+                                return p.format === SettingsData.clockDateFormat;
+                            });
+                            return match ? match.label : "Custom: " + SettingsData.clockDateFormat;
+                        }
+                        options: ["Day Date", "Day Month Date", "Month Date", "Numeric (M/D)", "Numeric (D/M)", "Full with Year", "ISO Date", "Full Day & Month", "Custom..."]
+                        onValueChanged: (value) => {
+                            const formatMap = {
+                                "Day Date": "ddd d",
+                                "Day Month Date": "ddd MMM d",
+                                "Month Date": "MMM d",
+                                "Numeric (M/D)": "M/d",
+                                "Numeric (D/M)": "d/M",
+                                "Full with Year": "ddd d MMM yyyy",
+                                "ISO Date": "yyyy-MM-dd",
+                                "Full Day & Month": "dddd, MMMM d"
+                            };
+                            if (value === "Custom...") {
+                                customFormatInput.visible = true;
+                            } else {
+                                customFormatInput.visible = false;
+                                SettingsData.setClockDateFormat(formatMap[value]);
                             }
                         }
                     }
+
+                    DankTextField {
+                        id: customFormatInput
+
+                        width: parent.width
+                        visible: false
+                        placeholderText: "Enter custom format (e.g., ddd MMM d)"
+                        text: SettingsData.clockDateFormat
+                        onTextChanged: {
+                            if (visible && text)
+                                SettingsData.setClockDateFormat(text);
+
                         }
                     }
 
+                    Rectangle {
+                        width: parent.width
+                        height: formatHelp.implicitHeight + Theme.spacingM * 2
+                        radius: Theme.cornerRadius
+                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
+                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+                        border.width: 1
+
+                        Column {
+                            id: formatHelp
+
+                            anchors.fill: parent
+                            anchors.margins: Theme.spacingM
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Format Legend"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.primary
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                spacing: Theme.spacingL
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• d - Day (1-31)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• dd - Day (01-31)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• ddd - Day name (Mon)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• dddd - Day name (Monday)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• M - Month (1-12)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MM - Month (01-12)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MMM - Month (Jan)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• MMMM - Month (January)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                                Column {
+                                    spacing: 2
+
+                                    StyledText {
+                                        text: "• yy - Year (24)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    StyledText {
+                                        text: "• yyyy - Year (2024)"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
     // Weather Component
     Component {
         id: weatherComponent
@@ -93,10 +289,8 @@ Item {
             width: parent.width
             height: weatherSection.implicitHeight + Theme.spacingL * 2
             radius: Theme.cornerRadius
-      color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
-                     Theme.surfaceVariant.b, 0.3)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-      border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                            Theme.outline.b, 0.2)
             border.width: 1
 
             Column {
@@ -124,6 +318,7 @@ Item {
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
                     }
+
                 }
 
                 DankToggle {
@@ -131,8 +326,8 @@ Item {
                     text: "Enable Weather"
                     description: "Show weather information in top bar and centcom center"
                     checked: SettingsData.weatherEnabled
-          onToggled: checked => {
+                    onToggled: (checked) => {
-                       return SettingsData.setWeatherEnabled(checked)
+                        return SettingsData.setWeatherEnabled(checked);
                     }
                 }
 
@@ -142,8 +337,8 @@ Item {
                     description: "Use Fahrenheit instead of Celsius for temperature"
                     checked: SettingsData.useFahrenheit
                     enabled: SettingsData.weatherEnabled
-          onToggled: checked => {
+                    onToggled: (checked) => {
-                       return SettingsData.setTemperatureUnit(checked)
+                        return SettingsData.setTemperatureUnit(checked);
                     }
                 }
 
@@ -153,8 +348,8 @@ Item {
                     description: "Allow wttr.in to determine location based on IP address"
                     checked: SettingsData.useAutoLocation
                     enabled: SettingsData.weatherEnabled
-          onToggled: checked => {
+                    onToggled: (checked) => {
-                       return SettingsData.setAutoLocation(checked)
+                        return SettingsData.setAutoLocation(checked);
                     }
                 }
 
@@ -175,12 +370,16 @@ Item {
                         currentLocation: SettingsData.weatherLocation
                         placeholderText: "New York, NY"
                         onLocationSelected: (displayName, coordinates) => {
-                                  SettingsData.setWeatherLocation(displayName,
+                            SettingsData.setWeatherLocation(displayName, coordinates);
-                                                                  coordinates)
                         }
                     }
+
                 }
+
             }
+
         }
+
     }
+
 }

Modules/TopBar/Clock.qml

@@ -12,18 +12,17 @@ Rectangle {
     property var popupTarget: null
     property var parentScreen: null
 
-  signal clockClicked
+    signal clockClicked()
 
     width: clockRow.implicitWidth + Theme.spacingS * 2
     height: 30
     radius: Theme.cornerRadius
     color: {
-    const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+        const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
-    return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-                   baseColor.a * Theme.widgetTransparency)
     }
     Component.onCompleted: {
-    root.currentDate = systemClock.date
+        root.currentDate = systemClock.date;
     }
 
     Row {
@@ -33,9 +32,7 @@ Rectangle {
         spacing: Theme.spacingS
 
         StyledText {
-      text: SettingsData.use24HourClock ? Qt.formatTime(root.currentDate,
+            text: SettingsData.use24HourClock ? Qt.formatTime(root.currentDate, "H:mm") : Qt.formatTime(root.currentDate, "h:mm AP")
-                                                        "H:mm") : Qt.formatTime(
-                                            root.currentDate, "h:mm AP")
             font.pixelSize: Theme.fontSizeMedium - 1
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
@@ -50,12 +47,13 @@ Rectangle {
         }
 
         StyledText {
-      text: Qt.formatDate(root.currentDate, "ddd d")
+            text: Qt.formatDate(root.currentDate, SettingsData.clockDateFormat)
             font.pixelSize: Theme.fontSizeMedium - 1
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
             visible: !SettingsData.clockCompactMode
         }
+
     }
 
     SystemClock {
@@ -73,15 +71,13 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onClicked: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-        var globalPos = mapToGlobal(0, 0)
+                var globalPos = mapToGlobal(0, 0);
-        var currentScreen = parentScreen || Screen
+                var currentScreen = parentScreen || Screen;
-        var screenX = currentScreen.x || 0
+                var screenX = currentScreen.x || 0;
-        var relativeX = globalPos.x - screenX
+                var relativeX = globalPos.x - screenX;
-        popupTarget.setTriggerPosition(relativeX,
+                popupTarget.setTriggerPosition(relativeX, Theme.barHeight + Theme.spacingXS, width, section, currentScreen);
-                                       Theme.barHeight + Theme.spacingXS,
-                                       width, section, currentScreen)
             }
-      root.clockClicked()
+            root.clockClicked();
         }
     }
 
@@ -90,5 +86,7 @@ Rectangle {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
         }
+
     }
+
 }