Custom buttons: WIP support for left/right/middle click

Modules/Bar/Widgets/CustomButton.qml

@@ -4,6 +4,7 @@ import Quickshell
 import qs.Commons
 import qs.Services
 import qs.Widgets
+import qs.Modules.SettingsPanel
 
 NIconButton {
   id: root
@@ -29,24 +30,57 @@ NIconButton {
   }
 
   // Use settings or defaults from BarWidgetRegistry
-  property string userIcon: widgetSettings.icon || BarWidgetRegistry.widgetMetadata["CustomButton"].icon
+  readonly property string userIcon: widgetSettings.icon || BarWidgetRegistry.widgetMetadata["CustomButton"].icon
-  property string userExecute: widgetSettings.execute || BarWidgetRegistry.widgetMetadata["CustomButton"].execute
+  readonly property string userLeftClickExec: widgetSettings.leftClickExec
+                                              || BarWidgetRegistry.widgetMetadata["CustomButton"].leftClickExec
+  readonly property string userRightClickExec: widgetSettings.rightClickExec
+                                               || BarWidgetRegistry.widgetMetadata["CustomButton"].rightClickExec
+  readonly property string userMiddleClickExec: widgetSettings.middleClickExec
+                                                || BarWidgetRegistry.widgetMetadata["CustomButton"].middleClickExec
+  readonly property bool hasExec: (userLeftClickExec || userRightClickExec || userMiddleClickExec)
 
   icon: userIcon
-  tooltipText: userExecute ? `Execute: ${userExecute}` : "Custom Button - Configure in settings"
+  tooltipText: {
-  opacity: userExecute ? Style.opacityFull : Style.opacityMedium
+    if (!hasExec) {
+      return "Custom Button - Configure in settings"
+    } else {
+      var lines = []
+      if (userLeftClickExec !== "") {
+        lines.push(`Left click: ${userLeftClickExec}\n`)
+      }
+      if (userRightClickExec !== "") {
+        lines.push(`Right click: ${userRightClickExec}\n`)
+      }
+      if (userLeftClickExec !== "") {
+        lines.push(`Middle click: ${userMiddleClickExec}\n`)
+      }
+    }
+  }
+  opacity: hasExec ? Style.opacityFull : Style.opacityMedium
 
   onClicked: {
-    if (userExecute) {
+    if (userLeftClickExec) {
-      // Execute the user's command
+      Quickshell.execDetached(userLeftClickExec.split(" "))
-      Quickshell.execDetached(userExecute.split(" "))
+      Logger.log("CustomButton", `Executing command: ${userLeftClickExec}`)
-      Logger.log("CustomButton", `Executing command: ${userExecute}`)
+    } else if (!hasExec) {
-    } else {
+      // No script was defined, open settings
-      Logger.warn("CustomButton", "No command configured for this button")
+      var settingsPanel = PanelService.getPanel("settingsPanel")
+      settingsPanel.requestedTab = SettingsPanel.Tab.Bar
+      settingsPanel.open(screen)
     }
   }
 
-  Component.onCompleted: {
+  onRightClicked: {
-    Logger.log("CustomButton", `Initialized with icon: ${userIcon}, command: ${userExecute}`)
+    if (userRightClickExec) {
+      Quickshell.execDetached(userRightClickExec.split(" "))
+      Logger.log("CustomButton", `Executing command: ${userRightClickExec}`)
+    }
+  }
+
+  onMiddleClicked: {
+    if (userMiddleClickExec) {
+      Quickshell.execDetached(userMiddleClickExec.split(" "))
+      Logger.log("CustomButton", `Executing command: ${userMiddleClickExec}`)
+    }
   }
 }

Modules/SettingsPanel/Extras/BarSectionEditor.qml

@@ -190,14 +190,6 @@ NBox {
                                                                                                 "widgetId": modelData.id,
                                                                                                 "parent": Overlay.overlay
                                                                                               })
-                  //                                                                 })
-
-                  // var dialog = widgetSettingsDialog.createObject(root, {
-                  //   widgetIndex: index,
-                  //   widgetData: modelData,
-                  //   widgetId: modelData.id,
-                  //   parent: Overlay.overlay
-                  // })
                   dialog.open()
                 }
               }

Modules/SettingsPanel/Extras/BarWidgetSettingsDialog.qml

@@ -96,6 +96,7 @@ Popup {
       NButton {
         text: "Save"
         onClicked: {
+
           if (settingsLoader.item && settingsLoader.item.saveSettings) {
             var newSettings = settingsLoader.item.saveSettings()
             root.updateWidgetSettings(sectionId, settingsPopup.widgetIndex, newSettings)
@@ -128,7 +129,7 @@ Popup {
         id: iconInput
         Layout.fillWidth: true
         label: "Icon Name"
-        description: "Use Material Icon names from the icon set"
+        description: "Use Material Icon names from the icon set."
         text: settingsPopup.widgetData.icon || ""
         placeholderText: "Enter icon name (e.g., favorite, home, settings)"
       }
@@ -138,8 +139,8 @@ Popup {
         id: executeInput
         Layout.fillWidth: true
         label: "Execute Command"
-        description: "Command or application to run when clicked"
+        description: "Command or application to run when clicked."
-        text: settingsPopup.widgetData.execute || ""
+        text: settingsPopup.widgetData.leftClickExec || ""
         placeholderText: "Enter command to execute (app or custom script)"
       }
     }

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -201,65 +201,51 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginXL * scaling
   }
 
+  // ---------------------------------
+  // Helper functions
   function updateWidgetSettingsInSection(section, index, settings) {
     // Update the widget settings in the Settings data
     Settings.data.bar.widgets[section][index] = settings
-    Logger.log("BarTab", `Updated widget settings for ${settings.id} in ${section} section`)
+    //Logger.log("BarTab", `Updated widget settings for ${settings.id} in ${section} section`)
   }
 
-  // Helper functions
   function addWidgetToSection(widgetId, section) {
-    //Logger.log("BarTab", "Adding widget", widgetId, "to section", section)
+    var newWidget = {
-    var sectionArray = Settings.data.bar.widgets[section]
-
-    if (sectionArray) {
-      // Create a new array to avoid modifying the original
-      var newArray = sectionArray.slice()
-      newArray.push({
       "id": widgetId
-                    })
-      //Logger.log("BarTab", "Widget added. New array:", JSON.stringify(newArray))
-
-      // Assign the new array
-      Settings.data.bar.widgets[section] = newArray
     }
+    if (BarWidgetRegistry.widgetHasUserSettings(widgetId)) {
+      var metadata = BarWidgetRegistry.widgetMetadata[widgetId]
+      if (metadata) {
+        Object.keys(metadata).forEach(function (key) {
+          if (key !== "allowUserSettings") {
+            newWidget[key] = metadata[key]
+          }
+        })
+      }
+    }
+    Settings.data.bar.widgets[section].push(newWidget)
   }
 
   function removeWidgetFromSection(section, index) {
-    // Logger.log("BarTab", "Removing widget from section", section, "at index", index)
+    if (index >= 0 && index < Settings.data.bar.widgets[section].length) {
-    var sectionArray = Settings.data.bar.widgets[section]
+      var newArray = Settings.data.bar.widgets[section].slice()
-
-    //Logger.log("BarTab", "Current section array:", JSON.stringify(sectionArray))
-    if (sectionArray && index >= 0 && index < sectionArray.length) {
-      // Create a new array to avoid modifying the original
-      var newArray = sectionArray.slice()
       newArray.splice(index, 1)
-      //Logger.log("BarTab", "Widget removed. New array:", JSON.stringify(newArray))
-
-      // Assign the new array
       Settings.data.bar.widgets[section] = newArray
-    } else {
-
-      //Logger.log("BarTab", "Invalid section or index:", section, index, "array length:",
-      //            sectionArray ? sectionArray.length : "null")
     }
   }
 
   function reorderWidgetInSection(section, fromIndex, toIndex) {
-    //Logger.log("BarTab", "Reordering widget in section", section, "from", fromIndex, "to", toIndex)
+    if (fromIndex >= 0 && fromIndex < Settings.data.bar.widgets[section].length && toIndex >= 0
-    var sectionArray = Settings.data.bar.widgets[section]
+        && toIndex < Settings.data.bar.widgets[section].length) {
-    if (sectionArray && fromIndex >= 0 && fromIndex < sectionArray.length && toIndex >= 0
-        && toIndex < sectionArray.length) {
 
       // Create a new array to avoid modifying the original
-      var newArray = sectionArray.slice()
+      var newArray = Settings.data.bar.widgets[section].slice()
       var item = newArray[fromIndex]
       newArray.splice(fromIndex, 1)
       newArray.splice(toIndex, 0, item)
-      Logger.log("BarTab", "Widget reordered. New array:", JSON.stringify(newArray))
 
-      // Assign the new array
       Settings.data.bar.widgets[section] = newArray
+      //Logger.log("BarTab", "Widget reordered. New array:", JSON.stringify(newArray))
     }
   }
 

Services/BarWidgetRegistry.qml

@@ -38,7 +38,9 @@ Singleton {
                                   "CustomButton": {
                                     "allowUserSettings": true,
                                     "icon": "favorite",
-                                    "execute": ""
+                                    "leftClickExec": "",
+                                    "rightClickExec": "",
+                                    "middleClickExec": ""
                                   }
                                 })