settings: reorganize and add settings

.config/quickshell/modules/common/widgets/ContentSection.qml

@@ -17,6 +17,6 @@ ColumnLayout {
     }
     ColumnLayout {
         id: sectionContent
-        spacing: 4
+        spacing: 8
     }
 }

.config/quickshell/modules/common/widgets/ContentSubsection.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ColumnLayout {
+    id: root
+    property string title: ""
+    default property alias data: sectionContent.data
+
+    Layout.fillWidth: true
+    Layout.topMargin: 4
+    spacing: 2
+
+    ContentSubsectionLabel {
+        Layout.fillWidth: true
+        visible: root.title && root.title.length > 0
+        text: root.title
+    }
+    ColumnLayout {
+        id: sectionContent
+        Layout.fillWidth: true
+        spacing: 2
+    }
+}

.config/quickshell/modules/common/widgets/ContentSubsectionLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+StyledText {
+    text: "Subsection"
+    color: Appearance.colors.colSubtext
+    Layout.leftMargin: 4
+}

.config/quickshell/modules/common/widgets/MaterialTextField.qml

@@ -0,0 +1,53 @@
+import "root:/modules/common"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls
+
+/**
+ * Material 3 styled TextArea (filled style)
+ * https://m3.material.io/components/text-fields/overview
+ * Note: We don't use NativeRendering because it makes the small placeholder text look weird
+ */
+TextArea {
+    id: root
+    Material.theme: Material.System
+    Material.accent: Appearance.m3colors.m3primary
+    Material.primary: Appearance.m3colors.m3primary
+    Material.background: Appearance.m3colors.m3surface
+    Material.foreground: Appearance.m3colors.m3onSurface
+    Material.containerStyle: Material.Filled
+    renderType: Text.QtRendering
+
+    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+    placeholderTextColor: Appearance.m3colors.m3outline
+
+    background: Rectangle {
+        implicitHeight: 56
+        color: Appearance.m3colors.m3surface
+        topLeftRadius: 4
+        topRightRadius: 4
+        Rectangle {
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            height: 1
+            color: root.focus ? Appearance.m3colors.m3primary : 
+                root.hovered ? Appearance.m3colors.m3outline : Appearance.m3colors.m3outlineVariant
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+        }
+    }
+
+    font {
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        hintingPreference: Font.PreferFullHinting
+    }
+    wrapMode: TextEdit.Wrap
+}

.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml

@@ -14,6 +14,12 @@ RippleButton {
         parent.expanded = !parent.expanded;
     }
     buttonRadius: Appearance.rounding.full
+
+    rotation: root.parent.expanded ? 0 : -180
+    Behavior on rotation {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
     contentItem: MaterialSymbol {
         id: icon
         anchors.centerIn: parent