From f25bba7c11c9d2934afbc94f323ae77406b7f853 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 22 Sep 2025 11:05:26 +0800
Subject: [PATCH] feat(bar): Allow custom icon for SidePanelToggle

Adds a feature allowing users to select a custom image file to be used
as the icon for the SidePanelToggle widget.
  - Introduces a "Browse File" button in the widget's settings dialog,
utilizing the `NFilePicker` component.
  - An `NImageCircled` preview of the selected custom icon is now shown
in the settings.
  - The display logic for the widget is updated to prioritize the custom
icon path over the library icon and distro logo.
---
 Modules/Bar/Widgets/SidePanelToggle.qml       | 14 +++++--
 .../SidePanelToggleSettings.qml               | 41 ++++++++++++++++---
 Services/BarWidgetRegistry.qml                |  3 +-
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/Modules/Bar/Widgets/SidePanelToggle.qml b/Modules/Bar/Widgets/SidePanelToggle.qml
index 037de875..f2336f69 100644
--- a/Modules/Bar/Widgets/SidePanelToggle.qml
+++ b/Modules/Bar/Widgets/SidePanelToggle.qml
@@ -31,8 +31,10 @@ NIconButton {
 
   readonly property string customIcon: widgetSettings.icon || widgetMetadata.icon
   readonly property bool useDistroLogo: (widgetSettings.useDistroLogo !== undefined) ? widgetSettings.useDistroLogo : widgetMetadata.useDistroLogo
+  readonly property string customIconPath: widgetSettings.customIconPath || ""
 
-  icon: useDistroLogo ? "" : customIcon
+  // If we have a custom path or distro logo, don't use the theme icon.
+  icon: (customIconPath === "" && !useDistroLogo) ? customIcon : ""
   tooltipText: "Open side panel"
   baseSize: Style.capsuleHeight
   compact: (Settings.data.bar.density === "compact")
@@ -45,12 +47,16 @@ NIconButton {
   onRightClicked: PanelService.getPanel("settingsPanel")?.toggle()
 
   IconImage {
-    id: logo
+    id: customOrDistroLogo
     anchors.centerIn: parent
     width: root.width * 0.8
     height: width
-    source: useDistroLogo ? DistroLogoService.osLogo : ""
-    visible: useDistroLogo && source !== ""
+    source: {
+      if (customIconPath !== "") return customIconPath;
+      if (useDistroLogo) return DistroLogoService.osLogo;
+      return "";
+    }
+    visible: source !== ""
     smooth: true
     asynchronous: true
   }
diff --git a/Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml b/Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml
index ef87e177..df48506c 100644
--- a/Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml
+++ b/Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml
@@ -16,18 +16,34 @@ ColumnLayout {
   // Local state
   property string valueIcon: widgetData.icon !== undefined ? widgetData.icon : widgetMetadata.icon
   property bool valueUseDistroLogo: widgetData.useDistroLogo !== undefined ? widgetData.useDistroLogo : widgetMetadata.useDistroLogo
+  property string valueCustomIconPath: widgetData.customIconPath !== undefined ? widgetData.customIconPath : ""
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
     settings.icon = valueIcon
     settings.useDistroLogo = valueUseDistroLogo
+    settings.customIconPath = valueCustomIconPath
     return settings
   }
 
   NToggle {
     label: "Use distro logo instead of icon"
     checked: valueUseDistroLogo
-    onToggled: checked => valueUseDistroLogo = checked
+    onToggled: {
+      valueUseDistroLogo = checked
+      if (checked) {
+        valueCustomIconPath = ""
+        valueIcon = ""
+      }
+    }
+  }
+
+  NFilePicker {
+    id: filePicker
+    title: "Select a custom icon"
+    onFileSelected: function (filePath) {
+      valueCustomIconPath = "file://" + filePath
+    }
   }
 
   RowLayout {
@@ -35,21 +51,35 @@ ColumnLayout {
 
     NLabel {
       label: "Icon"
-      description: "Select an icon from the library."
+      description: "Select an icon from the library or a custom file."
+    }
+
+    NImageCircled {
+      Layout.alignment: Qt.AlignVCenter
+      imagePath: valueCustomIconPath
+      visible: valueCustomIconPath !== ""
+      width: Style.fontSizeXL * 2 * scaling
+      height: Style.fontSizeXL * 2 * scaling
     }
 
     NIcon {
       Layout.alignment: Qt.AlignVCenter
       icon: valueIcon
       font.pointSize: Style.fontSizeXL * scaling
-      visible: valueIcon !== ""
+      visible: valueIcon !== "" && valueCustomIconPath === ""
     }
 
     NButton {
       enabled: !valueUseDistroLogo
-      text: "Browse"
+      text: "Browse Library"
       onClicked: iconPicker.open()
     }
+
+    NButton {
+      enabled: !valueUseDistroLogo
+      text: "Browse File"
+      onClicked: filePicker.open()
+    }
   }
 
   NIconPicker {
@@ -57,6 +87,7 @@ ColumnLayout {
     initialIcon: valueIcon
     onIconSelected: function (iconName) {
       valueIcon = iconName
+      valueCustomIconPath = ""
     }
   }
-}
+}
\ No newline at end of file
diff --git a/Services/BarWidgetRegistry.qml b/Services/BarWidgetRegistry.qml
index d8df0bdb..d4594468 100644
--- a/Services/BarWidgetRegistry.qml
+++ b/Services/BarWidgetRegistry.qml
@@ -103,7 +103,8 @@ Singleton {
                                   "SidePanelToggle": {
                                     "allowUserSettings": true,
                                     "useDistroLogo": false,
-                                    "icon": "noctalia"
+                                    "icon": "noctalia",
+                                    "customIconPath": ""
                                   },
                                   "Volume": {
                                     "allowUserSettings": true,