fix: get rid of slightly jank looking resize logic

flake.nix

@@ -15,9 +15,9 @@
       (system: fn system nixpkgs.legacyPackages.${system});
   in {
     packages = forEachSystem (system: pkgs: rec {
-      default = minmat;
+      default = dots;
-      minmat = pkgs.stdenv.mkDerivation {
+      dots = pkgs.stdenv.mkDerivation {
-        pname = "minmat";
+        pname = "dots";
         version = "0.1.0";
         src = ./shell;
 

shell/bar/Bar.qml

@@ -74,12 +74,9 @@ Variants {
                 }
 
                 // VolumeIndicator {
-                //     id: volumeIndicator
+                //     bar: root
-                //     popup: root.popup
                 //     Layout.preferredWidth: this.height
                 //     Layout.fillHeight: true
-                //     Layout.topMargin: 2
-                //     Layout.bottomMargin: 2
                 // }
 
                 PowerMenu {

shell/bar/systray/SysTray.qml

@@ -5,8 +5,8 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.SystemTray
-import "../../widgets"
+import qs.bar
-import ".."
+import qs.widgets
 
 // TODO:
 // 1. Get rid of leftItem/rightItem properties on menu

shell/bar/volume/DeviceMixer.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.Pipewire
-import "../../widgets/" as Widgets
+import Quickshell.Widgets
-import "../.."
+import qs
+import qs.widgets
 
 ColumnLayout {
     id: root
@@ -22,11 +23,11 @@ ColumnLayout {
         sourceComponent: VolumeCard {
             id: sinkCard
             node: sinkLoader.sink
-            button: Widgets.FontIconButton {
+            button: StyledMouseArea {
-                hoverEnabled: false
+                property bool checked: !sinkCard.node.audio.muted
-                iconName: sinkCard.node.audio.muted ? "volume_off" : "volume_up"
+
-                checked: !sinkCard.node.audio.muted
+                // IconImage {}
-                inactiveColor: ShellSettings.colors["surface_container_highest"]
+
                 onClicked: {
                     sinkCard.node.audio.muted = !sinkCard.node.audio.muted;
                 }
@@ -48,11 +49,11 @@ ColumnLayout {
         sourceComponent: VolumeCard {
             id: sourceCard
             node: sourceLoader.source
-            button: Widgets.FontIconButton {
+            button: StyledMouseArea {
-                hoverEnabled: false
+                property bool checked: !sourceCard.node.audio.muted
-                iconName: sourceCard.node.audio.muted ? "mic_off" : "mic"
+
-                checked: !sourceCard.node.audio.muted
+                // IconImage {}
-                inactiveColor: ShellSettings.colors["surface_container_highest"]
+
                 onClicked: {
                     sourceCard.node.audio.muted = !sourceCard.node.audio.muted;
                 }

shell/bar/volume/VolumeCard.qml

@@ -1,20 +1,33 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import Quickshell.Widgets
 import Quickshell.Services.Pipewire
-import "../../widgets/" as Widgets
+import qs
-import "../.."
+import qs.widgets
 
-WrapperRectangle {
+Loader {
     id: root
-    color: ShellSettings.colors["surface_container"]
+    active: node !== null
-    radius: width / 2
-    margin: 6
 
     required property PwNode node
-    property string text
+
-    property Component button 
+    sourceComponent: WrapperRectangle {
-    property Component icon 
+        id: comp
+        color: ShellSettings.colors.surface_container_translucent
+        radius: 12 
+        margin: 6
+
+        border {
+            width: 1
+            color: ShellSettings.colors.active_translucent
+        }
+
+        // property string text
+        // property Component button
+        // property Component icon
 
         PwObjectTracker {
             id: tracker
@@ -22,10 +35,10 @@ WrapperRectangle {
         }
 
         RowLayout {
-        Widgets.MaterialSlider {
+            Slider {
                 value: root.node.audio.volume ?? 0
-            text: root.text
+                // text: root.text
-            icon: root.icon
+                // icon: root.icon
 
                 onValueChanged: {
                     // only allow changes when the node is ready other wise you will combust
@@ -39,12 +52,29 @@ WrapperRectangle {
                 Layout.fillHeight: true
             }
 
-        Loader {
+            // Loader {
-            id: buttonLoader
+            //     id: buttonLoader
-            sourceComponent: root.button
+            //     sourceComponent: root.button
+            //
+            //     Layout.preferredWidth: this.height
+            //     Layout.fillHeight: true
+            // }
+        }
+    }
 
-            Layout.preferredWidth: this.height
+    // sourceComponent: VolumeCard {
-            Layout.fillHeight: true
+    //     id: sinkCard
-        }
+    //     node: sinkLoader.sink
-    }
+    //     button: StyledMouseArea {
+    //         property bool checked: !sinkCard.node.audio.muted
+    //
+    //         // IconImage {}
+    //
+    //         onClicked: {
+    //             sinkCard.node.audio.muted = !sinkCard.node.audio.muted;
+    //         }
+    //     }
+    //
+    //     anchors.fill: parent
+    // }
 }

shell/bar/volume/VolumeControl.qml

@@ -3,32 +3,34 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Widgets
-import "../../widgets/" as Widgets
+import qs.widgets
-
-WrapperItem {
-    id: root
-    visible: false
-
-    ColumnLayout {
-        spacing: 10
-
-        Widgets.TabBar {
-            id: tabBar
-            model: ["headphones", "tune"]
-            Layout.fillWidth: true
-            Layout.preferredHeight: 35
-        }
-
-        StackLayout {
-            id: page
-            currentIndex: tabBar.currentIndex
-            Layout.fillWidth: true
-            Layout.preferredHeight: currentItem ? currentItem.implicitHeight : 0
-
-            readonly property Item currentItem: children[currentIndex]
 
 DeviceMixer {}
-            ApplicationMixer {}
+
-        }
+// WrapperItem {
-    }
+//     id: root
-}
+//
+//     ColumnLayout {
+//         spacing: 10
+//
+//         // TabBar {
+//         //     id: tabBar
+//         //     model: ["headphones", "tune"]
+//         //     Layout.fillWidth: true
+//         //     Layout.preferredHeight: 35
+//         // }
+//
+//
+//         // StackLayout {
+//         //     id: page
+//         //     currentIndex: tabBar.currentIndex
+//         //     Layout.fillWidth: true
+//         //     Layout.preferredHeight: currentItem ? currentItem.implicitHeight : 0
+//         //
+//         //     readonly property Item currentItem: children[currentIndex]
+//         //
+//         //     DeviceMixer {}
+//         //     ApplicationMixer {}
+//         // }
+//     }
+// }

shell/bar/volume/VolumeIndicator.qml

@@ -1,27 +1,65 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
-import "../../widgets/" as Widgets
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import qs.widgets
+import qs.bar
 
-Item {
+StyledMouseArea {
     id: root
+    onClicked: showMenu = !showMenu
 
-    required property var popup
+    required property var bar
+    property bool showMenu: false
 
-    Widgets.FontIconButton {
+    IconImage {
-        id: button
+        id: icon
-        iconName: "volume_up"
+        source: "root:resources/volume/volume-full.svg"
-        anchors.fill: parent
-        onClicked: {
-            if (root.popup.content == volumeMenu) {
-                root.popup.hide();
-                return;
-            }
 
-            root.popup.set(this, volumeMenu);
+        anchors {
-            root.popup.show();
+            fill: parent
+            margins: 2
         }
     }
 
-    VolumeControl {
+    property PopupItem menu: PopupItem {
-        id: volumeMenu
+        id: menu
+        owner: root
+        popup: root.bar.popup
+        show: root.showMenu
+        onClosed: root.showMenu = false
+
+        implicitWidth: 300
+        implicitHeight: container.implicitHeight + (2 * 8)
+
+        // implicitWidth: volumeMenu.implicitWidth
+        // implicitHeight: volumeMenu.implicitHeight
+
+        // VolumeControl {
+        //     id: volumeMenu
+        // }
+
+        ColumnLayout {
+            id: container
+
+            anchors {
+                fill: parent
+                margins: 8
+            }
+
+            VolumeCard {
+                node: Pipewire.defaultAudioSink
+                Layout.fillWidth: true
+                Layout.preferredHeight: 45
+            }
+
+            VolumeCard {
+                node: Pipewire.defaultAudioSource
+                Layout.fillWidth: true
+                Layout.preferredHeight: 45
+            }
+        }
     }
 }

shell/launcher/Controller.qml

@@ -7,7 +7,8 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
 import Quickshell.Widgets
-import ".."
+import qs
+import qs.widgets
 
 Singleton {
     PersistentProperties {
@@ -33,46 +34,50 @@ Singleton {
 
     LazyLoader {
         id: loader
-        activeAsync: persist.launcherOpen
+        // activeAsync: persist.launcherOpen
+        active: persist.launcherOpen
 
         PanelWindow {
-            implicitWidth: 500
-            implicitHeight: 7 + searchContainer.implicitHeight + list.topMargin * 2 + list.delegateHeight * 10
             color: "transparent"
+            exclusiveZone: 0
             WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
             // WlrLayershell.namespace: "shell:launcher"
 
-            Rectangle {
+            anchors {
-                id: container
+                top: true
-                color: ShellSettings.colors.surface_translucent
+                bottom: true
+                left: true
+                right: true
+            }
+
+            WrapperRectangle {
+                clip: true
                 radius: 12
+                color: ShellSettings.colors.surface_translucent
+                margin: 6
+
+                border {
+                    width: 1
+                    color: ShellSettings.colors.active_translucent
+                }
 
                 anchors {
-                    fill: parent
+                    horizontalCenter: parent.horizontalCenter
-                    margins: 10
+                    top: parent.top
-                }
+                    topMargin: screen.height / 2.75
-
-                Behavior on height {
-                    NumberAnimation {
-                        duration: 200
-                        easing.type: Easing.OutCubic
-                    }
                 }
 
                 ColumnLayout {
-                    anchors.fill: parent
+                    id: column
-                    anchors.margins: 7
+                    anchors.centerIn: parent
-                    anchors.topMargin: 10
-                    anchors.bottomMargin: 0
-                    spacing: 0
 
-                    Rectangle {
+                    StyledRectangle {
                         id: searchContainer
-                        Layout.fillWidth: true
                         implicitHeight: searchbox.implicitHeight + 15
                         radius: 6
-                        color: ShellSettings.colors.surface_container_translucent
+
-                        border.color: ShellSettings.colors.border_translucent
+                        // Width is largely determined by size of the searchContainer
+                        Layout.preferredWidth: 500
 
                         RowLayout {
                             id: searchbox
@@ -81,8 +86,8 @@ Singleton {
 
                             TextInput {
                                 id: search
-                                Layout.fillWidth: true
                                 color: ShellSettings.colors.highlight
+                                Layout.fillWidth: true
 
                                 focus: true
                                 Keys.forwardTo: [list]
@@ -115,14 +120,33 @@ Singleton {
 
                     ListView {
                         id: list
-                        Layout.fillWidth: true
+                        visible: Layout.preferredHeight > 1
-                        Layout.fillHeight: true
                         clip: true
                         cacheBuffer: 0 // works around QTBUG-131106
                         //reuseItems: true
+
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: Math.min(matchesLength * delegateHeight, 500)
+
+                        Behavior on Layout.preferredHeight {
+                            NumberAnimation {
+                                duration: 200
+                                easing.type: Easing.OutCubic
+                            }
+                        }
+
+                        property var matchesLength: model.values.length
+
                         model: ScriptModel {
-                            values: DesktopEntries.applications.values.map(object => {
+                            values: {
                                 const stxt = search.text.toLowerCase();
+
+                                if (stxt === '')
+                                    return [];
+
+                                return DesktopEntries.applications.values.map(object => {
+                                    // const stxt = search.text.toLowerCase();
+
                                     const ntxt = object.name.toLowerCase();
                                     let si = 0;
                                     let ni = 0;
@@ -198,14 +222,12 @@ Singleton {
                                         return s;
 
                                     return a.object.name.localeCompare(b.object.name);
-                            }).map(entry => entry.object)
+                                }).map(entry => entry.object);
+                            }
 
                             onValuesChanged: list.currentIndex = 0
                         }
 
-                        topMargin: 7
-                        bottomMargin: list.count == 0 ? 0 : 7
-
                         add: Transition {
                             NumberAnimation {
                                 property: "opacity"
@@ -271,6 +293,7 @@ Singleton {
                         readonly property real delegateHeight: 44
 
                         delegate: MouseArea {
+                            id: entryMouseArea
                             required property DesktopEntry modelData
 
                             implicitHeight: list.delegateHeight
@@ -283,6 +306,7 @@ Singleton {
 
                             RowLayout {
                                 id: delegateLayout
+
                                 anchors {
                                     verticalCenter: parent.verticalCenter
                                     left: parent.left
@@ -293,10 +317,11 @@ Singleton {
                                     Layout.alignment: Qt.AlignVCenter
                                     asynchronous: true
                                     implicitSize: 30
-                                    source: Quickshell.iconPath(modelData.icon)
+                                    source: Quickshell.iconPath(entryMouseArea.modelData.icon)
                                 }
+
                                 Text {
-                                    text: modelData.name
+                                    text: entryMouseArea.modelData.name
                                     color: ShellSettings.colors.active
                                     Layout.alignment: Qt.AlignVCenter
                                 }

shell/notifications/ActiveToast.qml

@@ -114,8 +114,8 @@ Item {
                             font.bold: true
                             elide: Text.ElideRight
                             maximumLineCount: 1
-                            Layout.preferredWidth: implicitWidth
+                            // Layout.preferredWidth: implicitWidth
-                            Layout.maximumWidth: topRow.width * 0.3
+                            // Layout.maximumWidth: topRow.width * 0.3
                         }
 
                         Text {

shell/notifications/Controller.qml

@@ -39,7 +39,7 @@ Scope {
             onVisibleCountChanged: visible = visibleCount != 0
 
             color: "transparent"
-            implicitWidth: 525
+            implicitWidth: 500 
             visible: false
             exclusionMode: ExclusionMode.Normal
 

shell/resources/volume/volume-full.svg

@@ -1,15 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 -32 576 576" xmlns="http://www.w3.org/2000/svg">
-  <title>volume-up-solid</title>
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-  <g id="Layer_2" data-name="Layer 2">
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-    <g id="invisible_box" data-name="invisible box">
+
<g id="SVGRepo_iconCarrier">
-      <rect width="48" height="48" fill="none"/>
+
<path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"/>
-    </g>
-    <g id="icons_Q2" data-name="icons Q2">
-      <path d="M29,4a.9.9,0,0,0-.7.3L16.7,15H8a2,2,0,0,0-2,2V31a2,2,0,0,0,2,2h8.7L28.3,43.7a.9.9,0,0,0,.7.3,1,1,0,0,0,1-1V5a1,1,0,0,0-1-1Z" fill="white"/>
-      <path d="M36,42a2.1,2.1,0,0,1-1.6-.8,2,2,0,0,1,.4-2.8,18,18,0,0,0,0-28.8,2,2,0,1,1,2.4-3.2A22.4,22.4,0,0,1,46,24a22.4,22.4,0,0,1-8.8,17.6A1.7,1.7,0,0,1,36,42Z" fill="white"/>
-      <path d="M34,15.5v17a.5.5,0,0,0,.9.3,14,14,0,0,0,0-17.6A.5.5,0,0,0,34,15.5Z" fill="white"/>
-    </g>
 
</g>
 
</svg>

shell/resources/volume/volume-mute.svg

@@ -1,16 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <title>volume-off-solid</title>
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-  <g id="Layer_2" data-name="Layer 2">
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-    <g id="invisible_box" data-name="invisible box">
+
<g id="SVGRepo_iconCarrier">
-      <rect width="48" height="48" fill="none"/>
+
<path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"/>
-    </g>
-    <g id="icons_Q2" data-name="icons Q2">
-      <g>
-        <path d="M30,22.2V5a1,1,0,0,0-1-1,1.1,1.1,0,0,0-.7.3l-8.4,7.8Z" fill="white"/>
-        <path d="M40.4,38.6l-32-32A2,2,0,0,0,5.6,9.4L11.2,15H8a2,2,0,0,0-2,2V31a2,2,0,0,0,2,2h8.7L28.3,43.7a1.1,1.1,0,0,0,.7.3,1,1,0,0,0,1-1V33.8l7.6,7.6a1.9,1.9,0,0,0,2.8,0A1.9,1.9,0,0,0,40.4,38.6Z" fill="white"/>
-      </g>
-    </g>
 
</g>
 
</svg>