meta: many resource usage improvements and consolidations

Modules/Settings/SettingsSection.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import qs.Common
 import qs.Widgets
@@ -8,30 +10,71 @@ Column {
     property string title: ""
     property string iconName: ""
     property alias content: contentLoader.sourceComponent
+    property bool expanded: false
+    property bool collapsible: true
+    property bool lazyLoad: true
 
     width: parent.width
-    spacing: Theme.spacingM
+    spacing: expanded ? Theme.spacingM : 0
 
     // Section header
-    Row {
+    MouseArea {
         width: parent.width
-        spacing: Theme.spacingS
-
-        DankIcon {
-            name: iconName
-            size: Theme.iconSize - 2
-            color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
+        height: headerRow.height
+        enabled: collapsible
+        hoverEnabled: collapsible
+        
+        Rectangle {
+            anchors.fill: parent
+            color: parent.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+            radius: Theme.radiusS
         }
 
-        Text {
-            text: title
-            font.pixelSize: Theme.fontSizeLarge
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            anchors.verticalCenter: parent.verticalCenter
-        }
+        Row {
+            id: headerRow
+            
+            width: parent.width
+            spacing: Theme.spacingS
+            topPadding: Theme.spacingS
+            bottomPadding: Theme.spacingS
 
+            DankIcon {
+                name: root.collapsible ? (root.expanded ? "expand_less" : "expand_more") : root.iconName
+                size: Theme.iconSize - 2
+                color: Theme.primary
+                anchors.verticalCenter: parent.verticalCenter
+                
+                Behavior on rotation {
+                    NumberAnimation {
+                        duration: Appearance.anim.durations.fast
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            }
+
+            DankIcon {
+                name: root.iconName
+                size: Theme.iconSize - 4
+                color: Theme.primary
+                anchors.verticalCenter: parent.verticalCenter
+                visible: root.collapsible
+            }
+
+            Text {
+                text: root.title
+                font.pixelSize: Theme.fontSizeLarge
+                color: Theme.surfaceText
+                font.weight: Font.Medium
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+        
+        onClicked: {
+            if (collapsible) {
+                expanded = !expanded
+            }
+        }
     }
 
     // Divider
@@ -39,6 +82,7 @@ Column {
         width: parent.width
         height: 1
         color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        visible: expanded || !collapsible
     }
 
     // Content
@@ -46,6 +90,24 @@ Column {
         id: contentLoader
 
         width: parent.width
+        active: lazyLoad ? expanded || !collapsible : true
+        visible: expanded || !collapsible
+        asynchronous: true
+        
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+        
+        opacity: visible ? 1 : 0
     }
 
+    Component.onCompleted: {
+        if (!collapsible) {
+            expanded = true
+        }
+    }
 }