dock: restructure + icon size option + orientation improvements

Modules/Dock/Dock.qml

@@ -34,8 +34,8 @@ Variants {
     property real backgroundTransparency: SettingsData.dockTransparency
     property bool groupByApp: SettingsData.dockGroupByApp
 
-    readonly property real widgetHeight: Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
-    readonly property real effectiveBarHeight: Math.max(widgetHeight + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+    readonly property real widgetHeight: SettingsData.dockIconSize
+    readonly property real effectiveBarHeight: widgetHeight + SettingsData.dockSpacing * 2 + 10
     readonly property real barSpacing: {
         const barIsHorizontal = (SettingsData.dankBarPosition === SettingsData.Position.Top || SettingsData.dankBarPosition === SettingsData.Position.Bottom)
         const barIsVertical = (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right)
@@ -103,11 +103,38 @@ Variants {
     exclusiveZone: {
         if (!SettingsData.showDock || autoHide) return -1
         if (barSpacing > 0) return -1
-        return px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap)
+        return px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap)
+    }
+
+    property real animationHeadroom: Math.ceil(SettingsData.dockIconSize * 0.35)
+
+    implicitWidth: isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+    implicitHeight: !isVertical ? (px(effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockIconSize * 0.3) + animationHeadroom) : 0
+
+    Item {
+        id: maskItem
+        parent: dock.contentItem
+        visible: false
+        x: {
+            const baseX = dockCore.x + dockMouseArea.x
+            if (isVertical && SettingsData.dockPosition === SettingsData.Position.Right) {
+                return baseX - animationHeadroom
+            }
+            return baseX
+        }
+        y: {
+            const baseY = dockCore.y + dockMouseArea.y
+            if (!isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                return baseY - animationHeadroom
+            }
+            return baseY
+        }
+        width: dockMouseArea.width + (isVertical ? animationHeadroom : 0)
+        height: dockMouseArea.height + (!isVertical ? animationHeadroom : 0)
     }
 
     mask: Region {
-        item: dockMouseArea
+        item: maskItem
     }
 
     property var hoveredButton: {
@@ -136,9 +163,75 @@ Variants {
         return null
     }
 
+    DankTooltip {
+        id: dockTooltip
+        targetScreen: dock.screen
+    }
+
+    Timer {
+        id: tooltipRevealDelay
+        interval: 250
+        repeat: false
+        onTriggered: dock.showTooltipForHoveredButton()
+    }
+
+    function showTooltipForHoveredButton() {
+        dockTooltip.hide()
+        if (dock.hoveredButton && dock.reveal && !slideXAnimation.running && !slideYAnimation.running) {
+            const buttonGlobalPos = dock.hoveredButton.mapToGlobal(0, 0)
+            const tooltipText = dock.hoveredButton.tooltipText || ""
+            if (tooltipText) {
+                const screenX = dock.screen ? (dock.screen.x || 0) : 0
+                const screenY = dock.screen ? (dock.screen.y || 0) : 0
+                const screenHeight = dock.screen ? dock.screen.height : 0
+                if (!dock.isVertical) {
+                    const isBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+                    const globalX = buttonGlobalPos.x + dock.hoveredButton.width / 2
+                    const screenRelativeY = isBottom
+                        ? (screenHeight - dock.effectiveBarHeight - SettingsData.dockSpacing - SettingsData.dockBottomGap - 35)
+                        : (buttonGlobalPos.y - screenY + dock.hoveredButton.height + Theme.spacingS)
+                    dockTooltip.show(tooltipText,
+                                   globalX,
+                                   screenRelativeY,
+                                   dock.screen,
+                                   false, false)
+                } else {
+                    const isLeft = SettingsData.dockPosition === SettingsData.Position.Left
+                    const tooltipOffset = dock.effectiveBarHeight + SettingsData.dockSpacing + Theme.spacingXS
+                    const tooltipX = isLeft ? tooltipOffset : (dock.screen.width - tooltipOffset)
+                    const screenRelativeY = buttonGlobalPos.y - screenY + dock.hoveredButton.height / 2
+                    dockTooltip.show(tooltipText,
+                                   screenX + tooltipX,
+                                   screenRelativeY,
+                                   dock.screen,
+                                   isLeft,
+                                   !isLeft)
+                }
+            }
+        }
+    }
+
+    Connections {
+        target: dock
+        function onRevealChanged() {
+            if (!dock.reveal) {
+                tooltipRevealDelay.stop()
+                dockTooltip.hide()
+            } else {
+                tooltipRevealDelay.restart()
+            }
+        }
+
+        function onHoveredButtonChanged() {
+            dock.showTooltipForHoveredButton()
+        }
+    }
+
     Item {
         id: dockCore
         anchors.fill: parent
+        x: isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? animationHeadroom : 0
+        y: !isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? animationHeadroom : 0
 
         Connections {
             target: dockMouseArea
@@ -164,16 +257,16 @@ Variants {
 
             height: {
                 if (dock.isVertical) {
-                    return dock.reveal ? Math.min(dockBackground.implicitHeight + 32, maxDockHeight) : Math.min(Math.max(dockBackground.implicitHeight + 64, 200), screenHeight * 0.5)
+                    return dock.reveal ? Math.min(dockBackground.implicitHeight + 4, maxDockHeight) : Math.min(Math.max(dockBackground.implicitHeight + 64, 200), screenHeight * 0.5)
                 } else {
-                    return dock.reveal ? px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
+                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
                 }
             }
             width: {
                 if (dock.isVertical) {
-                    return dock.reveal ? px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
+                    return dock.reveal ? px(dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
                 } else {
-                    return dock.reveal ? Math.min(dockBackground.implicitWidth + 32, maxDockWidth) : Math.min(Math.max(dockBackground.implicitWidth + 64, 200), screenWidth * 0.5)
+                    return dock.reveal ? Math.min(dockBackground.implicitWidth + 4, maxDockWidth) : Math.min(Math.max(dockBackground.implicitWidth + 64, 200), screenWidth * 0.5)
                 }
             }
             anchors {
@@ -204,69 +297,14 @@ Variants {
             Item {
                 id: dockContainer
                 anchors.fill: parent
-
-                Item {
-                    id: appTooltip
-                    z: 1000
-                    anchors.fill: parent
-
-                    property string tooltipText: dock.hoveredButton ? dock.hoveredButton.tooltipText : ""
-                    property bool shouldShow: dock.hoveredButton !== null && tooltipText !== "" && dock.reveal && !slideXAnimation.running && !slideYAnimation.running
-
-                    Rectangle {
-                        id: tooltipBackground
-                        width: tooltipLabel.contentWidth + 24
-                        height: tooltipLabel.contentHeight + 12
-
-                        visible: appTooltip.shouldShow && tooltipLabel.contentWidth > 0
-                        color: Theme.surfaceContainer
-                        radius: Theme.cornerRadius
-                        border.width: 1
-                        border.color: Theme.outlineMedium
-
-                        x: {
-                            if (!dock.hoveredButton || !visible) return 0
-                            const buttonPos = dock.hoveredButton.mapToItem(dockContainer, 0, 0)
-                            if (!dock.isVertical) {
-                                return buttonPos.x + dock.hoveredButton.width / 2 - width / 2
-                            } else {
-                                if (SettingsData.dockPosition === SettingsData.Position.Right) {
-                                    return buttonPos.x - width - Theme.spacingS
-                                } else {
-                                    return buttonPos.x + dock.hoveredButton.width + Theme.spacingS
-                                }
-                            }
-                        }
-                        y: {
-                            if (!dock.hoveredButton || !visible) return 0
-                            const buttonPos = dock.hoveredButton.mapToItem(dockContainer, 0, 0)
-                            if (!dock.isVertical) {
-                                if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
-                                    return buttonPos.y - height - Theme.spacingS
-                                } else {
-                                    return buttonPos.y + dock.hoveredButton.height + Theme.spacingS
-                                }
-                            } else {
-                                return buttonPos.y + dock.hoveredButton.height / 2 - height / 2
-                            }
-                        }
-
-                        StyledText {
-                            id: tooltipLabel
-                            anchors.centerIn: parent
-                            text: appTooltip.tooltipText
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                        }
-                    }
-                }
+                clip: false
 
                 transform: Translate {
                     id: dockSlide
                     x: {
                         if (!dock.isVertical) return 0
                         if (dock.reveal) return 0
-                        const hideDistance = 58 + SettingsData.dockSpacing + SettingsData.dockBottomGap + 10
+                        const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + 10
                         if (SettingsData.dockPosition === SettingsData.Position.Right) {
                             return hideDistance
                         } else {
@@ -276,7 +314,7 @@ Variants {
                     y: {
                         if (dock.isVertical) return 0
                         if (dock.reveal) return 0
-                        const hideDistance = 58 + SettingsData.dockSpacing + SettingsData.dockBottomGap + 10
+                        const hideDistance = dock.effectiveBarHeight + SettingsData.dockSpacing + SettingsData.dockBottomGap + 10
                         if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
                             return hideDistance
                         } else {
@@ -305,17 +343,17 @@ Variants {
                     id: dockBackground
                     objectName: "dockBackground"
                     anchors {
-                        top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top) : undefined
+                        top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top ? parent.top : undefined) : undefined
                         bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined) : undefined
                         horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
-                        left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.left) : undefined
+                        left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined) : undefined
                         right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
                         verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
                     }
-                    anchors.topMargin: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? 0 : barSpacing + 4) : 0
-                    anchors.bottomMargin: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + 1 : 0) : 0
-                    anchors.leftMargin: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? 0 : barSpacing + 4) : 0
-                    anchors.rightMargin: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + 1 : 0) : 0
+                    anchors.topMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Top ? barSpacing + 1 : 0
+                    anchors.bottomMargin: !dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + 1 : 0
+                    anchors.leftMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? barSpacing + 1 : 0
+                    anchors.rightMargin: dock.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + 1 : 0
 
                     implicitWidth: dock.isVertical ? (dockApps.implicitHeight + SettingsData.dockSpacing * 2) : (dockApps.implicitWidth + SettingsData.dockSpacing * 2)
                     implicitHeight: dock.isVertical ? (dockApps.implicitWidth + SettingsData.dockSpacing * 2) : (dockApps.implicitHeight + SettingsData.dockSpacing * 2)
@@ -326,33 +364,34 @@ Variants {
                     radius: Theme.cornerRadius
                     border.width: 1
                     border.color: Theme.outlineMedium
-                    layer.enabled: true
+                    clip: false
 
                     Rectangle {
                         anchors.fill: parent
                         color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
                         radius: parent.radius
                     }
+                }
 
-                    DockApps {
-                        id: dockApps
+                DockApps {
+                    id: dockApps
 
-                        anchors.top: !dock.isVertical ? parent.top : undefined
-                        anchors.bottom: !dock.isVertical ? parent.bottom : undefined
-                        anchors.horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
-                        anchors.left: dock.isVertical ? parent.left : undefined
-                        anchors.right: dock.isVertical ? parent.right : undefined
-                        anchors.verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
-                        anchors.topMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
-                        anchors.bottomMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
-                        anchors.leftMargin: dock.isVertical ? SettingsData.dockSpacing : 0
-                        anchors.rightMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top ? dockBackground.top : undefined) : undefined
+                    anchors.bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? dockBackground.bottom : undefined) : undefined
+                    anchors.horizontalCenter: !dock.isVertical ? dockBackground.horizontalCenter : undefined
+                    anchors.left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Left ? dockBackground.left : undefined) : undefined
+                    anchors.right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? dockBackground.right : undefined) : undefined
+                    anchors.verticalCenter: dock.isVertical ? dockBackground.verticalCenter : undefined
+                    anchors.topMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.bottomMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.leftMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+                    anchors.rightMargin: dock.isVertical ? SettingsData.dockSpacing : 0
 
-                        contextMenu: dockVariants.contextMenu
-                        groupByApp: dock.groupByApp
-                        isVertical: dock.isVertical
-                        dockScreen: dock.screen
-                    }
+                    contextMenu: dockVariants.contextMenu
+                    groupByApp: dock.groupByApp
+                    isVertical: dock.isVertical
+                    dockScreen: dock.screen
+                    iconSize: dock.widgetHeight
                 }
             }
         }

Modules/Dock/DockAppButton.qml

@@ -27,6 +27,7 @@ Item {
     property bool isHovered: mouseArea.containsMouse && !dragging
     property bool showTooltip: mouseArea.containsMouse && !dragging
     property var cachedDesktopEntry: null
+    property real actualIconSize: 40
 
     function updateDesktopEntry() {
         if (!appData || appData.appId === "__SEPARATOR__") {
@@ -89,9 +90,6 @@ Item {
         return cachedDesktopEntry && cachedDesktopEntry.name ? cachedDesktopEntry.name : appData.appId
     }
 
-    width: 40
-    height: 40
-
     function getToplevelObject() {
         if (!appData) {
             return null
@@ -145,34 +143,47 @@ Item {
         return toplevels
     }
     onIsHoveredChanged: {
+        if (mouseArea.pressed) return
+
         if (isHovered) {
             exitAnimation.stop()
-            if (!bounceAnimation.running)
+            if (!bounceAnimation.running) {
                 bounceAnimation.restart()
+            }
         } else {
             bounceAnimation.stop()
             exitAnimation.restart()
         }
     }
 
+    readonly property bool animateX: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+    readonly property real animationDistance: actualIconSize
+    readonly property real animationDirection: {
+        if (SettingsData.dockPosition === SettingsData.Position.Bottom) return -1
+        if (SettingsData.dockPosition === SettingsData.Position.Top) return 1
+        if (SettingsData.dockPosition === SettingsData.Position.Right) return -1
+        if (SettingsData.dockPosition === SettingsData.Position.Left) return 1
+        return -1
+    }
+
     SequentialAnimation {
         id: bounceAnimation
 
         running: false
 
         NumberAnimation {
-            target: translateY
-            property: "y"
-            to: -10
+            target: iconTransform
+            property: animateX ? "x" : "y"
+            to: animationDirection * animationDistance * 0.25
             duration: Anims.durShort
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Anims.emphasizedAccel
         }
 
         NumberAnimation {
-            target: translateY
-            property: "y"
-            to: -8
+            target: iconTransform
+            property: animateX ? "x" : "y"
+            to: animationDirection * animationDistance * 0.2
             duration: Anims.durShort
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Anims.emphasizedDecel
@@ -183,24 +194,14 @@ Item {
         id: exitAnimation
 
         running: false
-        target: translateY
-        property: "y"
+        target: iconTransform
+        property: animateX ? "x" : "y"
         to: 0
         duration: Anims.durShort
         easing.type: Easing.BezierSpline
         easing.bezierCurve: Anims.emphasizedDecel
     }
 
-    Rectangle {
-        anchors.fill: parent
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
-        border.width: 2
-        border.color: Theme.primary
-        visible: dragging
-        z: -1
-    }
-
     Timer {
         id: longPressTimer
 
@@ -217,7 +218,6 @@ Item {
         id: mouseArea
 
         anchors.fill: parent
-        anchors.bottomMargin: -20
         hoverEnabled: true
         cursorShape: longPressing ? Qt.DragMoveCursor : Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
@@ -253,7 +253,7 @@ Item {
                                if (dragging) {
                                    dragOffset = Qt.point(mouse.x - dragStartPos.x, mouse.y - dragStartPos.y)
                                    if (dockApps) {
-                                       const threshold = 40
+                                       const threshold = actualIconSize
                                        let newTargetIndex = targetIndex
                                        if (dragOffset.x > threshold && targetIndex < dockApps.pinnedAppCount - 1) {
                                            newTargetIndex = targetIndex + 1
@@ -318,7 +318,7 @@ Item {
                                    }
                                } else {
                                    if (contextMenu) {
-                                       contextMenu.showForButton(root, appData, 65, true, cachedDesktopEntry, parentDockScreen)
+                                       contextMenu.showForButton(root, appData, root.height + 25, true, cachedDesktopEntry, parentDockScreen)
                                    }
                                }
                            }
@@ -335,7 +335,7 @@ Item {
                                }
                            } else if (appData && appData.type === "grouped") {
                                if (contextMenu) {
-                                   contextMenu.showForButton(root, appData, 40, false, cachedDesktopEntry, parentDockScreen)
+                                   contextMenu.showForButton(root, appData, root.height, false, cachedDesktopEntry, parentDockScreen)
                                }
                            } else if (appData && appData.appId) {
                                const desktopEntry = cachedDesktopEntry
@@ -352,7 +352,7 @@ Item {
                            }
                        } else if (mouse.button === Qt.RightButton) {
                            if (contextMenu && appData) {
-                               contextMenu.showForButton(root, appData, 40, false, cachedDesktopEntry, parentDockScreen)
+                               contextMenu.showForButton(root, appData, root.height, false, cachedDesktopEntry, parentDockScreen)
                            } else {
                                console.warn("No context menu or appData available")
                            }
@@ -360,123 +360,205 @@ Item {
                    }
     }
 
-    IconImage {
-        id: iconImg
+    Item {
+        id: visualContent
+        anchors.fill: parent
 
-        anchors.centerIn: parent
-        implicitSize: 40
-        source: {
-            if (appData.appId === "__SEPARATOR__") {
-                return ""
-            }
-            const moddedId = Paths.moddedAppId(appData.appId)
-            if (moddedId.toLowerCase().includes("steam_app")) {
-                return ""
-            }
-            return cachedDesktopEntry && cachedDesktopEntry.icon ? Quickshell.iconPath(cachedDesktopEntry.icon, true) : ""
+        transform: Translate {
+            id: iconTransform
+            x: 0
+            y: 0
         }
-        mipmap: true
-        smooth: true
-        asynchronous: true
-        visible: status === Image.Ready
-    }
 
-    DankIcon {
-        anchors.centerIn: parent
-        size: 40
-        name: "sports_esports"
-        color: Theme.surfaceText
-        visible: {
-            if (!appData || !appData.appId || appData.appId === "__SEPARATOR__") {
-                return false
-            }
-            const moddedId = Paths.moddedAppId(appData.appId)
-            return moddedId.toLowerCase().includes("steam_app")
+        Rectangle {
+            anchors.fill: parent
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+            border.width: 2
+            border.color: Theme.primary
+            visible: dragging
+            z: -1
         }
-    }
 
-    Rectangle {
-        width: 40
-        height: 40
-        anchors.centerIn: parent
-        visible: iconImg.status !== Image.Ready
-        color: Theme.surfaceLight
-        radius: Theme.cornerRadius
-        border.width: 1
-        border.color: Theme.primarySelected
+        IconImage {
+            id: iconImg
 
-        Text {
             anchors.centerIn: parent
-            text: {
-                if (!appData || !appData.appId) {
-                    return "?"
+            implicitSize: actualIconSize
+            source: {
+                if (appData.appId === "__SEPARATOR__") {
+                    return ""
                 }
-
-                const desktopEntry = cachedDesktopEntry
-                if (desktopEntry && desktopEntry.name) {
-                    return desktopEntry.name.charAt(0).toUpperCase()
+                const moddedId = Paths.moddedAppId(appData.appId)
+                if (moddedId.toLowerCase().includes("steam_app")) {
+                    return ""
                 }
-
-                return appData.appId.charAt(0).toUpperCase()
+                return cachedDesktopEntry && cachedDesktopEntry.icon ? Quickshell.iconPath(cachedDesktopEntry.icon, true) : ""
             }
-            font.pixelSize: 14
-            color: Theme.primary
-            font.weight: Font.Bold
+            mipmap: true
+            smooth: true
+            asynchronous: true
+            visible: status === Image.Ready
         }
-    }
 
-    // Indicator for running/focused state
-    Row {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: -2
-        spacing: 2
-        visible: appData && (appData.isRunning || appData.type === "window" || (appData.type === "grouped" && appData.windowCount > 0))
-
-        Repeater {
-            model: {
-                if (!appData) return 0
-                if (appData.type === "grouped") {
-                    return Math.min(appData.windowCount, 4)
-                } else if (appData.type === "window" || appData.isRunning) {
-                    return 1
+        DankIcon {
+            anchors.centerIn: parent
+            size: actualIconSize
+            name: "sports_esports"
+            color: Theme.surfaceText
+            visible: {
+                if (!appData || !appData.appId || appData.appId === "__SEPARATOR__") {
+                    return false
                 }
-                return 0
+                const moddedId = Paths.moddedAppId(appData.appId)
+                return moddedId.toLowerCase().includes("steam_app")
             }
+        }
 
-            Rectangle {
-                width: appData && appData.type === "grouped" && appData.windowCount > 1 ? 4 : 8
-                height: 2
-                radius: 1
-                color: {
-                    if (!appData) {
-                        return "transparent"
+        Rectangle {
+            width: actualIconSize
+            height: actualIconSize
+            anchors.centerIn: parent
+            visible: iconImg.status !== Image.Ready
+            color: Theme.surfaceLight
+            radius: Theme.cornerRadius
+            border.width: 1
+            border.color: Theme.primarySelected
+
+            Text {
+                anchors.centerIn: parent
+                text: {
+                    if (!appData || !appData.appId) {
+                        return "?"
                     }
 
-                    if (appData.type !== "grouped" || appData.windowCount === 1) {
-                        if (isWindowFocused) {
-                            return Theme.primary
+                    const desktopEntry = cachedDesktopEntry
+                    if (desktopEntry && desktopEntry.name) {
+                        return desktopEntry.name.charAt(0).toUpperCase()
+                    }
+
+                    return appData.appId.charAt(0).toUpperCase()
+                }
+                font.pixelSize: Math.max(8, parent.width * 0.35)
+                color: Theme.primary
+                font.weight: Font.Bold
+            }
+        }
+
+        Loader {
+            anchors.horizontalCenter: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.horizontalCenter
+            anchors.verticalCenter: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? parent.verticalCenter : undefined
+            anchors.bottom: SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined
+            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
+
+            sourceComponent: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right ? columnIndicator : rowIndicator
+
+            visible: {
+                if (!appData) return false
+                if (appData.type === "window") return true
+                if (appData.type === "grouped") return appData.windowCount > 0
+                return appData.isRunning
+            }
+        }
+    }
+
+    Component {
+        id: rowIndicator
+
+        Row {
+            spacing: 2
+
+            Repeater {
+                model: {
+                    if (!appData) return 0
+                    if (appData.type === "grouped") {
+                        return Math.min(appData.windowCount, 4)
+                    } else if (appData.type === "window" || appData.isRunning) {
+                        return 1
+                    }
+                    return 0
+                }
+
+                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
+                    color: {
+                        if (!appData) {
+                            return "transparent"
                         }
+
+                        if (appData.type !== "grouped" || appData.windowCount === 1) {
+                            if (isWindowFocused) {
+                                return Theme.primary
+                            }
+                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        }
+
+                        if (appData.type === "grouped" && appData.windowCount > 1) {
+                            const groupToplevels = getGroupedToplevels()
+                            if (index < groupToplevels.length && groupToplevels[index].activated) {
+                                return Theme.primary
+                            }
+                        }
+
                         return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
                     }
-
-                    if (appData.type === "grouped" && appData.windowCount > 1) {
-                        const groupToplevels = getGroupedToplevels()
-                        if (index < groupToplevels.length && groupToplevels[index].activated) {
-                            return Theme.primary
-                        }
-                    }
-
-                    return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
                 }
             }
         }
     }
 
+    Component {
+        id: columnIndicator
 
-    transform: Translate {
-        id: translateY
+        Column {
+            spacing: 2
 
-        y: 0
+            Repeater {
+                model: {
+                    if (!appData) return 0
+                    if (appData.type === "grouped") {
+                        return Math.min(appData.windowCount, 4)
+                    } else if (appData.type === "window" || appData.isRunning) {
+                        return 1
+                    }
+                    return 0
+                }
+
+                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
+                    color: {
+                        if (!appData) {
+                            return "transparent"
+                        }
+
+                        if (appData.type !== "grouped" || appData.windowCount === 1) {
+                            if (isWindowFocused) {
+                                return Theme.primary
+                            }
+                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        }
+
+                        if (appData.type === "grouped" && appData.windowCount > 1) {
+                            const groupToplevels = getGroupedToplevels()
+                            if (index < groupToplevels.length && groupToplevels[index].activated) {
+                                return Theme.primary
+                            }
+                        }
+
+                        return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                    }
+                }
+            }
+        }
     }
 }

Modules/Dock/DockApps.qml

@@ -15,7 +15,9 @@ Item {
     property bool groupByApp: false
     property bool isVertical: false
     property var dockScreen: null
+    property real iconSize: 40
 
+    clip: false
     implicitWidth: isVertical ? appLayout.height : appLayout.width
     implicitHeight: isVertical ? appLayout.width : appLayout.height
 
@@ -37,14 +39,18 @@ Item {
 
     Item {
         id: appLayout
-        anchors.centerIn: parent
         width: layoutFlow.width
         height: layoutFlow.height
+        anchors.horizontalCenter: root.isVertical ? undefined : parent.horizontalCenter
+        anchors.verticalCenter: root.isVertical ? parent.verticalCenter : undefined
+        anchors.left: root.isVertical && SettingsData.dockPosition === SettingsData.Position.Left ? parent.left : undefined
+        anchors.right: root.isVertical && SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined
+        anchors.top: root.isVertical ? undefined : parent.top
 
         Flow {
             id: layoutFlow
             flow: root.isVertical ? Flow.TopToBottom : Flow.LeftToRight
-            spacing: 8
+            spacing: Math.min(8, Math.max(4, root.iconSize * 0.08))
 
         Repeater {
             id: repeater
@@ -193,26 +199,35 @@ Item {
             delegate: Item {
                 id: delegateItem
                 property alias dockButton: button
+                clip: false
 
-                width: model.type === "separator" ? 16 : 40
-                height: 40
+                width: model.type === "separator" ? (root.isVertical ? root.iconSize : 8) : (root.isVertical ? root.iconSize : root.iconSize * 1.2)
+                height: model.type === "separator" ? (root.isVertical ? 8 : root.iconSize) : (root.isVertical ? root.iconSize * 1.2 : root.iconSize)
 
                 Rectangle {
                     visible: model.type === "separator"
-                    width: 2
-                    height: 20
+                    width: root.isVertical ? root.iconSize * 0.5 : 2
+                    height: root.isVertical ? 2 : root.iconSize * 0.5
                     color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
                     radius: 1
                     anchors.centerIn: parent
                 }
 
+                MouseArea {
+                    visible: model.type === "separator"
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    acceptedButtons: Qt.NoButton
+                }
+
                 DockAppButton {
                     id: button
                     visible: model.type !== "separator"
                     anchors.centerIn: parent
 
-                    width: 40
-                    height: 40
+                    width: delegateItem.width
+                    height: delegateItem.height
+                    actualIconSize: root.iconSize
 
                     appData: model
                     contextMenu: root.contextMenu
@@ -220,7 +235,6 @@ Item {
                     index: model.index
                     parentDockScreen: root.dockScreen
 
-                    // Override tooltip for windows to show window title
                     showWindowTitle: model.type === "window" || model.type === "grouped"
                     windowTitle: model.windowTitle || ""
                 }

Modules/Dock/DockContextMenu.qml

@@ -9,7 +9,6 @@ import qs.Widgets
 PanelWindow {
     id: root
 
-    property bool showContextMenu: false
     property var appData: null
     property var anchorItem: null
     property real dockVisibleHeight: 40
@@ -18,25 +17,24 @@ PanelWindow {
     property var desktopEntry: null
 
     function showForButton(button, data, dockHeight, hidePinOption, entry, dockScreen) {
+        if (dockScreen) {
+            root.screen = dockScreen
+        }
+
         anchorItem = button
         appData = data
         dockVisibleHeight = dockHeight || 40
         hidePin = hidePinOption || false
         desktopEntry = entry || null
 
-        if (dockScreen) {
-            root.screen = dockScreen
-        }
-
-        showContextMenu = true
+        visible = true
     }
     function close() {
-        showContextMenu = false
+        visible = false
     }
 
-    screen: Quickshell.screens[0]
-
-    visible: showContextMenu
+    screen: null
+    visible: false
     WlrLayershell.layer: WlrLayershell.Overlay
     WlrLayershell.exclusiveZone: -1
     WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
@@ -168,7 +166,7 @@ PanelWindow {
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
         border.width: 1
 
-        opacity: root.showContextMenu ? 1 : 0
+        opacity: root.visible ? 1 : 0
         visible: opacity > 0
 
         Behavior on opacity {