launcher: grid re-style and customizable column counts

quickshell/Common/SettingsData.qml

@@ -161,6 +161,7 @@ Singleton {
     property string appLauncherViewMode: "list"
     property string spotlightModalViewMode: "list"
     property bool sortAppsAlphabetically: false
+    property int appLauncherGridColumns: 4
 
     property string weatherLocation: "New York, NY"
     property string weatherCoordinates: "40.7128,-74.0060"

quickshell/Common/settings/SettingsSpec.js

@@ -90,6 +90,7 @@ var SPEC = {
     appLauncherViewMode: { def: "list" },
     spotlightModalViewMode: { def: "list" },
     sortAppsAlphabetically: { def: false },
+    appLauncherGridColumns: { def: 4 },
 
     weatherLocation: { def: "New York, NY" },
     weatherCoordinates: { def: "40.7128,-74.0060" },

quickshell/Modals/Spotlight/SpotlightContent.qml

@@ -154,7 +154,7 @@ Item {
         id: appLauncher
 
         viewMode: SettingsData.spotlightModalViewMode
-        gridColumns: 4
+        gridColumns: SettingsData.appLauncherGridColumns
         onAppLaunched: () => {
                            if (parentModal)
                            parentModal.hide()

quickshell/Modals/Spotlight/SpotlightResults.qml

@@ -96,7 +96,7 @@ Rectangle {
         id: resultsGrid
 
         property int currentIndex: appLauncher ? appLauncher.selectedIndex : -1
-        property int columns: 4
+        property int columns: appLauncher ? appLauncher.gridColumns : 4
         property bool adaptiveColumns: false
         property int minCellWidth: 120
         property int maxCellWidth: 160

quickshell/Modules/AppDrawer/AppDrawerPopout.qml

@@ -58,7 +58,7 @@ DankPopout {
         id: appLauncher
 
         viewMode: SettingsData.appLauncherViewMode
-        gridColumns: 4
+        gridColumns: SettingsData.appLauncherGridColumns
         onAppLaunched: appDrawerPopout.close()
         onViewModeSelected: function (mode) {
             SettingsData.set("appLauncherViewMode", mode)
@@ -419,7 +419,7 @@ DankPopout {
                             id: appGrid
 
                             property int currentIndex: appLauncher.selectedIndex
-                            property int columns: 4
+                            property int columns: appLauncher.gridColumns
                             property bool adaptiveColumns: false
                             property int minCellWidth: 120
                             property int maxCellWidth: 160

quickshell/Modules/Settings/LauncherTab.qml

@@ -524,6 +524,74 @@ Item {
                 }
             }
 
+            StyledRect {
+                width: parent.width
+                height: gridColumnsSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                      Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: gridColumnsSection
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "grid_view"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Grid Columns")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    StyledText {
+                        width: parent.width
+                        text: I18n.tr("Adjust the number of columns in grid view mode.")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                    }
+
+                    Column {
+                        width: 120
+                        spacing: Theme.spacingS
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        DankSlider {
+                            width: 100
+                            height: 20
+                            minimum: 2
+                            maximum: 8
+                            value: SettingsData.appLauncherGridColumns
+                            unit: ""
+                            showValue: true
+                            wheelEnabled: false
+                            thumbOutlineColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            onSliderValueChanged: newValue => {
+                                SettingsData.set("appLauncherGridColumns", newValue)
+                            }
+                        }
+                    }
+                }
+            }
+
             StyledRect {
                 width: parent.width
                 height: recentlyUsedSection.implicitHeight + Theme.spacingL * 2

quickshell/Widgets/AppLauncherGridDelegate.qml

@@ -36,7 +36,7 @@ Rectangle {
     width: cellWidth - cellPadding
     height: cellHeight - cellPadding
     radius: Theme.cornerRadius
-    color: currentIndex === index ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: currentIndex === index ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : "transparent"
 
     Column {
         anchors.centerIn: parent