Custom buttons: improved UI, still wip

Modules/Bar/Widgets/CustomButton.qml

@@ -1,26 +1,57 @@
-import Quickshell
+import QtQuick
+import QtQuick.Layouts
 import qs.Commons
-import qs.Widgets
 import qs.Services
+import qs.Widgets
 
 NIconButton {
   id: root
-
-  property ShellScreen screen
+  
+  // Widget properties passed from Bar.qml
+  property var screen
   property real scaling: 1.0
-  property bool allowUserSettings: true
-
-  icon: "favorite"
-  tooltipText: "Hello world"
-  sizeRatio: 0.8
-
-  colorBg: Color.mSurfaceVariant
-  colorFg: Color.mOnSurface
-  colorBorder: Color.transparent
-  colorBorderHover: Color.transparent
-
-  anchors.verticalCenter: parent.verticalCenter
-  onClicked: {
-
+  property string barSection: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+  
+  // Get user settings from Settings data
+  property var widgetSettings: {
+    var section = barSection.replace("Section", "").toLowerCase()
+    if (section && sectionWidgetIndex >= 0) {
+      var widgets = Settings.data.bar.widgets[section]
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex]
+      }
+    }
+    return {}
   }
-}
+  
+  // Use settings or defaults from BarWidgetRegistry
+  property string userIcon: widgetSettings.icon || BarWidgetRegistry.widgetMetadata["CustomButton"].icon
+  property string userExecute: widgetSettings.execute || BarWidgetRegistry.widgetMetadata["CustomButton"].execute
+  
+  icon: userIcon
+  tooltipText: userExecute ? `Execute: ${userExecute}` : "Custom Button - Configure in settings"
+  
+  colorBg: Color.transparent
+  colorFg: Color.mOnSurface
+  colorBgHover: Color.applyOpacity(Color.mPrimary, "20")
+  colorFgHover: Color.mPrimary
+  
+  onClicked: {
+    if (userExecute) {
+      // Execute the user's command
+      Quickshell.execDetached(userExecute.split(" "))
+      Logger.log("CustomButton", `Executing command: ${userExecute}`)
+    } else {
+      Logger.warn("CustomButton", "No command configured for this button")
+    }
+  }
+  
+  // Visual feedback when no command is set
+  opacity: userExecute ? 1.0 : 0.6
+  
+  Component.onCompleted: {
+    Logger.log("CustomButton", `Initialized with icon: ${userIcon}, command: ${userExecute}`)
+  }
+}