import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Effects import Quickshell import Quickshell.Wayland import Quickshell.Widgets import qs.Commons import qs.Services import qs.Widgets Variants { model: Quickshell.screens delegate: Item { id: root required property ShellScreen modelData property bool barIsReady: modelData ? BarService.isBarReady(modelData.name) : false Connections { target: BarService function onBarReadyChanged(screenName) { if (screenName === modelData.name) { barIsReady = true } } } // Update dock apps when toplevels change Connections { target: ToplevelManager ? ToplevelManager.toplevels : null function onValuesChanged() { updateDockApps() } } // Update dock apps when pinned apps change Connections { target: Settings.data.dock function onPinnedAppsChanged() { updateDockApps() } function onOnlySameOutputChanged() { updateDockApps() } } // Initial update when component is ready Component.onCompleted: { if (ToplevelManager) { updateDockApps() } } // Shared properties between peek and dock windows readonly property string displayMode: Settings.data.dock.displayMode readonly property bool autoHide: displayMode === "auto_hide" readonly property bool exclusive: displayMode === "exclusive" readonly property int hideDelay: 500 readonly property int showDelay: 100 readonly property int hideAnimationDuration: Style.animationFast readonly property int showAnimationDuration: Style.animationFast readonly property int peekHeight: 1 readonly property int iconSize: Math.round(12 + 24 * (Settings.data.dock.size ?? 1)) readonly property int floatingMargin: Settings.data.dock.floatingRatio * Style.marginL // Bar detection and positioning properties readonly property bool hasBar: modelData && modelData.name ? (Settings.data.bar.monitors.includes(modelData.name) || (Settings.data.bar.monitors.length === 0)) : false readonly property bool barAtBottom: hasBar && Settings.data.bar.position === "bottom" readonly property int barHeight: Style.barHeight // Shared state between windows property bool dockHovered: false property bool anyAppHovered: false property bool menuHovered: false property bool hidden: autoHide property bool peekHovered: false // Separate property to control Loader - stays true during animations property bool dockLoaded: !autoHide // Start loaded if autoHide is off // Track the currently open context menu property var currentContextMenu: null // Combined model of running apps and pinned apps property var dockApps: [] // Function to close any open context menu function closeAllContextMenus() { if (currentContextMenu && currentContextMenu.visible) { currentContextMenu.hide() } } // Function to update the combined dock apps model function updateDockApps() { const runningApps = ToplevelManager ? (ToplevelManager.toplevels.values || []) : [] const pinnedApps = Settings.data.dock.pinnedApps || [] const combined = [] const processedAppIds = new Set() // Strategy: Maintain app positions as much as possible // 1. First pass: Add all running apps (both pinned and non-pinned) in their current order runningApps.forEach(toplevel => { if (toplevel && toplevel.appId && !(Settings.data.dock.onlySameOutput && toplevel.screens && !toplevel.screens.includes(modelData))) { const isPinned = pinnedApps.includes(toplevel.appId) const appType = isPinned ? "pinned-running" : "running" combined.push({ "type": appType, "toplevel": toplevel, "appId": toplevel.appId, "title": toplevel.title }) processedAppIds.add(toplevel.appId) } }) // 2. Second pass: Add non-running pinned apps at the end pinnedApps.forEach(pinnedAppId => { if (!processedAppIds.has(pinnedAppId)) { // Pinned app that is not running combined.push({ "type": "pinned", "toplevel": null, "appId": pinnedAppId, "title": pinnedAppId }) } }) dockApps = combined } // Timer to unload dock after hide animation completes Timer { id: unloadTimer interval: hideAnimationDuration + 50 // Add small buffer onTriggered: { if (hidden && autoHide) { dockLoaded = false } } } // Timer for auto-hide delay Timer { id: hideTimer interval: hideDelay onTriggered: { if (autoHide && !dockHovered && !anyAppHovered && !peekHovered && !menuHovered) { hidden = true unloadTimer.restart() // Start unload timer when hiding } } } // Timer for show delay Timer { id: showTimer interval: showDelay onTriggered: { if (autoHide) { dockLoaded = true // Load dock immediately hidden = false // Then trigger show animation unloadTimer.stop() // Cancel any pending unload } } } // Watch for autoHide setting changes onAutoHideChanged: { if (!autoHide) { hidden = false dockLoaded = true hideTimer.stop() showTimer.stop() unloadTimer.stop() } else { hidden = true unloadTimer.restart() // Schedule unload after animation } } // PEEK WINDOW - Always visible when auto-hide is enabled Loader { active: (barIsReady || !hasBar) && modelData && Settings.data.dock.monitors.includes(modelData.name) && autoHide sourceComponent: PanelWindow { id: peekWindow screen: modelData anchors.bottom: true anchors.left: true anchors.right: true focusable: false color: Color.transparent WlrLayershell.namespace: "noctalia-dock-peek" WlrLayershell.exclusionMode: ExclusionMode.Ignore implicitHeight: peekHeight MouseArea { id: peekArea anchors.fill: parent hoverEnabled: true onEntered: { peekHovered = true if (hidden) { showTimer.start() } } onExited: { peekHovered = false if (!hidden && !dockHovered && !anyAppHovered && !menuHovered) { hideTimer.restart() } } } } } // DOCK WINDOW Loader { active: (barIsReady || !hasBar) && modelData && Settings.data.dock.monitors.includes(modelData.name) && dockLoaded && ToplevelManager && (dockApps.length > 0) sourceComponent: PanelWindow { id: dockWindow screen: modelData focusable: false color: Color.transparent WlrLayershell.namespace: "noctalia-dock-main" WlrLayershell.exclusionMode: exclusive ? ExclusionMode.Auto : ExclusionMode.Ignore // Size to fit the dock container exactly implicitWidth: dockContainerWrapper.width implicitHeight: dockContainerWrapper.height // Position above the bar if it's at bottom anchors.bottom: true margins.bottom: { switch (Settings.data.bar.position) { case "bottom": return (Style.barHeight + Style.marginM) + (Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL + floatingMargin : floatingMargin) default: return floatingMargin } } // Wrapper item for scale/opacity animations Item { id: dockContainerWrapper width: dockContainer.width height: dockContainer.height anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom // Apply animations to this wrapper opacity: hidden ? 0 : 1 scale: hidden ? 0.85 : 1 Behavior on opacity { NumberAnimation { duration: hidden ? hideAnimationDuration : showAnimationDuration easing.type: Easing.InOutQuad } } Behavior on scale { NumberAnimation { duration: hidden ? hideAnimationDuration : showAnimationDuration easing.type: hidden ? Easing.InQuad : Easing.OutBack easing.overshoot: hidden ? 0 : 1.05 } } Rectangle { id: dockContainer width: dockLayout.implicitWidth + Style.marginM * 2 height: Math.round(iconSize * 1.5) color: Qt.alpha(Color.mSurface, Settings.data.dock.backgroundOpacity) anchors.centerIn: parent radius: Style.radiusL border.width: Style.borderS border.color: Qt.alpha(Color.mOutline, Settings.data.dock.backgroundOpacity) MouseArea { id: dockMouseArea anchors.fill: parent hoverEnabled: true onEntered: { dockHovered = true if (autoHide) { showTimer.stop() hideTimer.stop() unloadTimer.stop() // Cancel unload if hovering } } onExited: { dockHovered = false if (autoHide && !anyAppHovered && !peekHovered && !menuHovered) { hideTimer.restart() } } onClicked: { // Close any open context menu when clicking on the dock background closeAllContextMenus() } } Item { id: dock width: dockLayout.implicitWidth height: parent.height - (Style.marginM * 2) anchors.centerIn: parent function getAppIcon(appData): string { if (!appData || !appData.appId) return "" return ThemeIcons.iconForAppId(appData.appId?.toLowerCase()) } RowLayout { id: dockLayout spacing: Style.marginM Layout.preferredHeight: parent.height anchors.centerIn: parent Repeater { model: dockApps delegate: Item { id: appButton Layout.preferredWidth: iconSize Layout.preferredHeight: iconSize Layout.alignment: Qt.AlignCenter property bool isActive: modelData.toplevel && ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData.toplevel property bool hovered: appMouseArea.containsMouse property string appId: modelData ? modelData.appId : "" property string appTitle: modelData ? (modelData.title || modelData.appId) : "" property bool isRunning: modelData && (modelData.type === "running" || modelData.type === "pinned-running") // Listen for the toplevel being closed Connections { target: modelData?.toplevel function onClosed() { Qt.callLater(root.updateDockApps) } } Image { id: appIcon width: iconSize height: iconSize anchors.centerIn: parent source: dock.getAppIcon(modelData) visible: source.toString() !== "" sourceSize.width: iconSize * 2 sourceSize.height: iconSize * 2 smooth: true mipmap: true antialiasing: true fillMode: Image.PreserveAspectFit cache: true // Dim pinned apps that aren't running opacity: appButton.isRunning ? 1.0 : 0.6 scale: appButton.hovered ? 1.15 : 1.0 // Apply dock-specific colorization shader only to non-focused apps layer.enabled: !appButton.isActive && Settings.data.dock.colorizeIcons layer.effect: ShaderEffect { property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant property real colorizeMode: 0.0 // Dock mode (grayscale) fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb") } Behavior on scale { NumberAnimation { duration: Style.animationNormal easing.type: Easing.OutBack easing.overshoot: 1.2 } } Behavior on opacity { NumberAnimation { duration: Style.animationFast easing.type: Easing.OutQuad } } } // Fall back if no icon NIcon { anchors.centerIn: parent visible: !appIcon.visible icon: "question-mark" pointSize: iconSize * 0.7 color: appButton.isActive ? Color.mPrimary : Color.mOnSurfaceVariant opacity: appButton.isRunning ? 1.0 : 0.6 scale: appButton.hovered ? 1.15 : 1.0 Behavior on scale { NumberAnimation { duration: Style.animationFast easing.type: Easing.OutBack easing.overshoot: 1.2 } } Behavior on opacity { NumberAnimation { duration: Style.animationFast easing.type: Easing.OutQuad } } } // Context menu popup DockMenu { id: contextMenu onHoveredChanged: menuHovered = hovered onRequestClose: { contextMenu.hide() // Restart hide timer after menu action if auto-hide is enabled if (autoHide && !dockHovered && !anyAppHovered && !peekHovered) { hideTimer.restart() } } onAppClosed: root.updateDockApps // Force immediate dock update when app is closed onVisibleChanged: { if (visible) { root.currentContextMenu = contextMenu } else if (root.currentContextMenu === contextMenu) { root.currentContextMenu = null // Reset menu hover state when menu becomes invisible menuHovered = false // Restart hide timer if conditions are met if (autoHide && !dockHovered && !anyAppHovered && !peekHovered) { hideTimer.restart() } } } } MouseArea { id: appMouseArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton onEntered: { anyAppHovered = true const appName = appButton.appTitle || appButton.appId || "Unknown" const tooltipText = appName.length > 40 ? appName.substring(0, 37) + "..." : appName if (!contextMenu.visible) { TooltipService.show(Screen, appButton, tooltipText, "top") } if (autoHide) { showTimer.stop() hideTimer.stop() unloadTimer.stop() // Cancel unload if hovering app } } onExited: { anyAppHovered = false TooltipService.hide() if (autoHide && !dockHovered && !peekHovered && !menuHovered) { hideTimer.restart() } } onClicked: function (mouse) { if (mouse.button === Qt.RightButton) { // If right-clicking on the same app with an open context menu, close it if (root.currentContextMenu === contextMenu && contextMenu.visible) { root.closeAllContextMenus() return } // Close any other existing context menu first root.closeAllContextMenus() // Hide tooltip when showing context menu TooltipService.hideImmediately() contextMenu.show(appButton, modelData.toplevel || modelData) return } // Close any existing context menu for non-right-click actions root.closeAllContextMenus() // Check if toplevel is still valid (not a stale reference) const isValidToplevel = modelData?.toplevel && ToplevelManager && ToplevelManager.toplevels.values.includes(modelData.toplevel) if (mouse.button === Qt.MiddleButton && isValidToplevel && modelData.toplevel.close) { modelData.toplevel.close() Qt.callLater(root.updateDockApps) // Force immediate dock update } else if (mouse.button === Qt.LeftButton) { if (isValidToplevel && modelData.toplevel.activate) { // Running app - activate it modelData.toplevel.activate() } else if (modelData?.appId) { // Pinned app not running - launch it Quickshell.execDetached(["gtk-launch", modelData.appId]) } } } } // Active indicator Rectangle { visible: isActive width: iconSize * 0.2 height: iconSize * 0.1 color: Color.mPrimary radius: Style.radiusXS anchors.top: parent.bottom anchors.horizontalCenter: parent.horizontalCenter // Pulse animation for active indicator SequentialAnimation on opacity { running: isActive loops: Animation.Infinite NumberAnimation { to: 0.6 duration: Style.animationSlowest easing.type: Easing.InOutQuad } NumberAnimation { to: 1.0 duration: Style.animationSlowest easing.type: Easing.InOutQuad } } } } } } } } } } } } }