dock: add dot indicator style

Common/SettingsData.qml

@@ -202,6 +202,7 @@ Singleton {
     property real dockSpacing: 4
     property real dockBottomGap: 0
     property real dockIconSize: 40
+    property string dockIndicatorStyle: "circle"
 
     property bool notificationOverlayEnabled: false
     property bool dankBarAutoHide: false
@@ -450,6 +451,7 @@ Singleton {
                 dockSpacing = settings.dockSpacing !== undefined ? settings.dockSpacing : 4
                 dockBottomGap = settings.dockBottomGap !== undefined ? settings.dockBottomGap : 0
                 dockIconSize = settings.dockIconSize !== undefined ? settings.dockIconSize : 40
+                dockIndicatorStyle = settings.dockIndicatorStyle !== undefined ? settings.dockIndicatorStyle : "circle"
                 cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
                 notificationOverlayEnabled = settings.notificationOverlayEnabled !== undefined ? settings.notificationOverlayEnabled : false
                 dankBarAutoHide = settings.dankBarAutoHide !== undefined ? settings.dankBarAutoHide : (settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false)
@@ -631,6 +633,7 @@ Singleton {
                                                 "dockSpacing": dockSpacing,
                                                 "dockBottomGap": dockBottomGap,
                                                 "dockIconSize": dockIconSize,
+                                                "dockIndicatorStyle": dockIndicatorStyle,
                                                 "cornerRadius": cornerRadius,
                                                 "notificationOverlayEnabled": notificationOverlayEnabled,
                                                 "dankBarAutoHide": dankBarAutoHide,
@@ -724,7 +727,7 @@ Singleton {
             "notepadTransparencyOverride", "notepadLastCustomTransparency", "soundsEnabled",
             "useSystemSoundTheme", "soundNewNotification", "soundVolumeChanged", "soundPluggedIn", "gtkThemingEnabled",
             "qtThemingEnabled", "syncModeWithPortal", "showDock", "dockAutoHide", "dockGroupByApp",
-            "dockOpenOnOverview", "dockPosition", "dockSpacing", "dockBottomGap", "dockIconSize",
+            "dockOpenOnOverview", "dockPosition", "dockSpacing", "dockBottomGap", "dockIconSize", "dockIndicatorStyle",
             "cornerRadius", "notificationOverlayEnabled", "dankBarAutoHide",
             "dankBarOpenOnOverview", "dankBarVisible", "dankBarSpacing", "dankBarBottomGap",
             "dankBarInnerPadding", "dankBarSquareCorners", "dankBarNoBackground",
@@ -1607,6 +1610,11 @@ Singleton {
         saveSettings()
     }
 
+    function setDockIndicatorStyle(style) {
+        dockIndicatorStyle = style
+        saveSettings()
+    }
+
     function setNotificationOverlayEnabled(enabled) {
         notificationOverlayEnabled = enabled
         saveSettings()

Modules/Dock/DockAppButton.qml

@@ -452,10 +452,10 @@ Item {
             anchors.top: SettingsData.dockPosition === SettingsData.Position.Top ? parent.top : undefined
             anchors.left: SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined
             anchors.right: SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined
-            anchors.bottomMargin: SettingsData.dockPosition === SettingsData.Position.Bottom ? -2 : 0
-            anchors.topMargin: SettingsData.dockPosition === SettingsData.Position.Top ? -2 : 0
-            anchors.leftMargin: SettingsData.dockPosition === SettingsData.Position.Left ? -2 : 0
-            anchors.rightMargin: SettingsData.dockPosition === SettingsData.Position.Right ? -2 : 0
+            anchors.bottomMargin: SettingsData.dockPosition === SettingsData.Position.Bottom ? (SettingsData.dockIndicatorStyle === "circle" ? -4 : -2) : 0
+            anchors.topMargin: SettingsData.dockPosition === SettingsData.Position.Top ? (SettingsData.dockIndicatorStyle === "circle" ? -4 : -2) : 0
+            anchors.leftMargin: SettingsData.dockPosition === SettingsData.Position.Left ? (SettingsData.dockIndicatorStyle === "circle" ? -4 : -2) : 0
+            anchors.rightMargin: SettingsData.dockPosition === SettingsData.Position.Right ? (SettingsData.dockIndicatorStyle === "circle" ? -4 : -2) : 0
 
             sourceComponent: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? columnIndicator : rowIndicator
 
@@ -486,9 +486,19 @@ Item {
                 }
 
                 Rectangle {
-                    width: appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
-                    height: Math.max(2, actualIconSize * 0.05)
-                    radius: Theme.cornerRadius
+                    width: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
+                    }
+                    height: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return Math.max(2, actualIconSize * 0.05)
+                    }
+                    radius: SettingsData.dockIndicatorStyle === "circle" ? width / 2 : Theme.cornerRadius
                     color: {
                         if (!appData) {
                             return "transparent"
@@ -533,9 +543,19 @@ Item {
                 }
 
                 Rectangle {
-                    width: Math.max(2, actualIconSize * 0.05)
-                    height: appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
-                    radius: Theme.cornerRadius
+                    width: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return Math.max(2, actualIconSize * 0.05)
+                    }
+                    height: {
+                        if (SettingsData.dockIndicatorStyle === "circle") {
+                            return Math.max(4, actualIconSize * 0.1)
+                        }
+                        return appData && appData.type === "grouped" && appData.windowCount > 1 ? Math.max(3, actualIconSize * 0.1) : Math.max(6, actualIconSize * 0.2)
+                    }
+                    radius: SettingsData.dockIndicatorStyle === "circle" ? width / 2 : Theme.cornerRadius
                     color: {
                         if (!appData) {
                             return "transparent"

Modules/Settings/DockTab.qml

@@ -329,6 +329,72 @@ Item {
                 }
             }
 
+            // Indicator Style Section
+            StyledRect {
+                width: parent.width
+                height: indicatorStyleSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                      Theme.outline.b, 0.2)
+                border.width: 0
+                visible: SettingsData.showDock
+                opacity: visible ? 1 : 0
+
+                Column {
+                    id: indicatorStyleSection
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "fiber_manual_record"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            id: indicatorStyleText
+                            text: I18n.tr("Indicator Style")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Item {
+                            width: parent.width - Theme.iconSize - Theme.spacingM - indicatorStyleText.width - indicatorStyleButtonGroup.width - Theme.spacingM * 2
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        DankButtonGroup {
+                            id: indicatorStyleButtonGroup
+                            anchors.verticalCenter: parent.verticalCenter
+                            model: ["Circle", "Line"]
+                            currentIndex: SettingsData.dockIndicatorStyle === "circle" ? 0 : 1
+                            onSelectionChanged: (index, selected) => {
+                                if (selected) {
+                                    SettingsData.setDockIndicatorStyle(index === 0 ? "circle" : "line")
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Theme.mediumDuration
+                        easing.type: Theme.emphasizedEasing
+                    }
+                }
+            }
+
             // Icon Size Section
             StyledRect {
                 width: parent.width