better structure

config/quickshell/Noctalia/NButton.qml

@@ -0,0 +1,183 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Constants
+import qs.Services
+
+Rectangle {
+    id: root
+
+    // Public properties
+    property string text: ""
+    property string icon: ""
+    property string tooltipText
+    property color backgroundColor: Color.mPrimary
+    property color textColor: Color.mOnPrimary
+    property color hoverColor: Color.mTertiary
+    property bool enabled: true
+    property real fontSize: Style.fontSizeM * scaling
+    property int fontWeight: Style.fontWeightBold
+    property string fontFamily: Fonts.primary
+    property real iconSize: Style.fontSizeL * scaling
+    property bool outlined: false
+    // Internal properties
+    property bool hovered: false
+    property bool pressed: false
+
+    // Signals
+    signal clicked()
+    signal rightClicked()
+    signal middleClicked()
+
+    // Dimensions
+    implicitWidth: contentRow.implicitWidth + (Style.marginL * 2 * scaling)
+    implicitHeight: Math.max(Style.baseWidgetSize * scaling, contentRow.implicitHeight + (Style.marginM * scaling))
+    // Appearance
+    radius: Style.radiusS * scaling
+    color: {
+        if (!enabled)
+            return outlined ? Color.transparent : Qt.lighter(Color.mSurfaceVariant, 1.2);
+
+        if (hovered)
+            return hoverColor;
+
+        return outlined ? Color.transparent : backgroundColor;
+    }
+    border.width: outlined ? Math.max(1, Style.borderS * scaling) : 0
+    border.color: {
+        if (!enabled)
+            return Color.mOutline;
+
+        if (pressed || hovered)
+            return backgroundColor;
+
+        return outlined ? backgroundColor : Color.transparent;
+    }
+    opacity: enabled ? 1 : 0.6
+
+    // Content
+    RowLayout {
+        id: contentRow
+
+        anchors.centerIn: parent
+        spacing: Style.marginXS * scaling
+
+        // Icon (optional)
+        NIcon {
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.icon !== ""
+            icon: root.icon
+            pointSize: root.iconSize
+            color: {
+                if (!root.enabled)
+                    return Color.mOnSurfaceVariant;
+
+                if (root.outlined) {
+                    if (root.pressed || root.hovered)
+                        return root.backgroundColor;
+
+                    return root.backgroundColor;
+                }
+                return root.textColor;
+            }
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: Style.animationFast
+                    easing.type: Easing.OutCubic
+                }
+
+            }
+
+        }
+
+        // Text
+        NText {
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.text !== ""
+            text: root.text
+            pointSize: root.fontSize
+            font.weight: root.fontWeight
+            family: root.fontFamily
+            color: {
+                if (!root.enabled)
+                    return Color.mOnSurfaceVariant;
+
+                if (root.outlined) {
+                    if (root.hovered)
+                        return root.textColor;
+
+                    return root.backgroundColor;
+                }
+                return root.textColor;
+            }
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: Style.animationFast
+                    easing.type: Easing.OutCubic
+                }
+
+            }
+
+        }
+
+    }
+
+    // Mouse interaction
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        enabled: root.enabled
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        onEntered: {
+            root.hovered = true;
+            if (tooltipText)
+                TooltipService.show(Screen, root, root.tooltipText);
+
+        }
+        onExited: {
+            root.hovered = false;
+            if (tooltipText)
+                TooltipService.hide();
+
+        }
+        onPressed: (mouse) => {
+            if (tooltipText)
+                TooltipService.hide();
+
+            if (mouse.button === Qt.LeftButton)
+                root.clicked();
+            else if (mouse.button == Qt.RightButton)
+                root.rightClicked();
+            else if (mouse.button == Qt.MiddleButton)
+                root.middleClicked();
+        }
+        onCanceled: {
+            root.hovered = false;
+            if (tooltipText)
+                TooltipService.hide();
+
+        }
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Style.animationFast
+            easing.type: Easing.OutCubic
+        }
+
+    }
+
+    Behavior on border.color {
+        ColorAnimation {
+            duration: Style.animationFast
+            easing.type: Easing.OutCubic
+        }
+
+    }
+
+}