feat(dock): add custom icon selector for the dock launcher

Assets/Translations/en.json

@@ -1143,6 +1143,8 @@
       "appearance-launcher-position-start": "Start",
       "appearance-launcher-use-distro-logo-description": "Use your distribution logo as the dock launcher icon.",
       "appearance-launcher-use-distro-logo-label": "Use distro logo instead of icon",
+      "appearance-launcher-icon-description": "Choose the icon used for the dock launcher.",
+      "appearance-launcher-icon-label": "Launcher icon",
       "appearance-pinned-static-description": "Always push pinned app icons to the left in static order.",
       "appearance-pinned-static-label": "Static pinned apps",
       "appearance-position-description": "Choose where the dock appears on screen.",

Assets/settings-default.json

@@ -362,6 +362,7 @@
     "showLauncherIcon": false,
     "launcherPosition": "end",
     "launcherUseDistroLogo": false,
+    "launcherIcon": "",
     "launcherIconColor": "none",
     "pinnedStatic": false,
     "inactiveIndicators": false,

Commons/Settings.qml

@@ -556,6 +556,7 @@ Singleton {
       property bool showLauncherIcon: false
       property string launcherPosition: "end" // "start", "end"
       property bool launcherUseDistroLogo: false
+      property string launcherIcon: ""
       property string launcherIconColor: "none"
       property bool pinnedStatic: false
       property bool inactiveIndicators: false

Modules/Dock/DockContent.qml

@@ -237,7 +237,13 @@ Item {
               return -1;
             }
             readonly property var launcherMetadata: BarWidgetRegistry.widgetMetadata["Launcher"]
-            readonly property string launcherIcon: launcherWidgetSettings.icon || (launcherMetadata && launcherMetadata.icon ? launcherMetadata.icon : "search")
+            readonly property string launcherIcon: {
+              if (Settings.data.dock.launcherIcon !== undefined && Settings.data.dock.launcherIcon !== "")
+                return Settings.data.dock.launcherIcon;
+              if (launcherWidgetSettings.icon !== undefined && launcherWidgetSettings.icon !== "")
+                return launcherWidgetSettings.icon;
+              return (launcherMetadata && launcherMetadata.icon) ? launcherMetadata.icon : "search";
+            }
             readonly property string launcherIconColorKey: {
               if (Settings.data.dock.launcherIconColor !== undefined)
                 return Settings.data.dock.launcherIconColor;
@@ -279,7 +285,7 @@ Item {
                 color: Color.resolveColorKey(launcherButton.launcherIconColorKey)
                 visible: !launcherButton.launcherUseDistroLogo
               }
-              
+
               IconImage {
                 anchors.centerIn: parent
                 width: dockRoot.iconSize * 0.8

Modules/Panels/Settings/Tabs/Dock/AppearanceSubTab.qml

@@ -1,7 +1,9 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
 import qs.Commons
+import qs.Services.System
 import qs.Widgets
 
 ColumnLayout {
@@ -9,6 +11,8 @@ ColumnLayout {
   spacing: Style.marginL
   Layout.fillWidth: true
 
+  readonly property color launcherPreviewColor: Color.resolveColorKey((Settings.data.dock.launcherIconColor !== undefined) ? Settings.data.dock.launcherIconColor : "none")
+
   NToggle {
     Layout.fillWidth: true
     label: I18n.tr("panels.dock.enabled-label")
@@ -360,6 +364,64 @@ ColumnLayout {
       onToggled: checked => Settings.data.dock.launcherUseDistroLogo = checked
     }
 
+    RowLayout {
+      visible: Settings.data.dock.showLauncherIcon
+      Layout.fillWidth: true
+
+      NLabel {
+        Layout.fillWidth: true
+        label: I18n.tr("panels.dock.appearance-launcher-icon-label")
+        description: I18n.tr("panels.dock.appearance-launcher-icon-description")
+      }
+
+      NIconButton {
+        visible: !Settings.data.dock.launcherUseDistroLogo
+        enabled: !Settings.data.dock.launcherUseDistroLogo
+        icon: (Settings.data.dock.launcherIcon && Settings.data.dock.launcherIcon !== "") ? Settings.data.dock.launcherIcon : "search"
+        colorFg: root.launcherPreviewColor
+        colorFgHover: root.launcherPreviewColor
+        tooltipText: I18n.tr("bar.control-center.browse-library")
+        onClicked: launcherIconPicker.open()
+      }
+
+      Rectangle {
+        visible: Settings.data.dock.launcherUseDistroLogo
+        width: Style.toOdd(Style.baseWidgetSize * Style.uiScaleRatio)
+        height: width
+        radius: Math.min(Style.iRadiusL, width / 2)
+        color: Color.smartAlpha(Color.mSurfaceVariant)
+        border.color: Color.mOutline
+        border.width: Style.borderS
+        opacity: Style.opacityMedium
+
+        Image {
+          anchors.centerIn: parent
+          width: parent.width * 0.62
+          height: width
+          source: HostService.osLogo
+          fillMode: Image.PreserveAspectFit
+          smooth: true
+          asynchronous: true
+          layer.enabled: visible
+          layer.effect: ShaderEffect {
+            property color targetColor: root.launcherPreviewColor
+            property real colorizeMode: 2.0
+
+            fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+          }
+        }
+      }
+    }
+
+    NIconPicker {
+      id: launcherIconPicker
+      initialIcon: (Settings.data.dock.launcherIcon && Settings.data.dock.launcherIcon !== "") ? Settings.data.dock.launcherIcon : "search"
+      onIconSelected: iconName => {
+                        Settings.data.dock.launcherIcon = iconName;
+                        Settings.saveImmediate();
+                      }
+    }
+
     NColorChoice {
       Layout.fillWidth: true
       visible: Settings.data.dock.showLauncherIcon