add start and search icons

dots/.config/quickshell/ii/modules/common/Config.qml

@@ -561,6 +561,7 @@ Singleton {
             property JsonObject waffles: JsonObject {
                 property JsonObject bar: JsonObject {
                     property bool bottom: true
+                    property bool leftAlignApps: true
                 }
             }
         }

dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml

@@ -0,0 +1,40 @@
+import QtQuick
+import QtQuick.Layouts
+import org.kde.kirigami as Kirigami
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+BarButton {
+    id: root
+
+    required property string iconName
+    implicitWidth: height - topInset - bottomInset + leftInset + rightInset
+
+    contentItem: Item {
+        id: contentItem
+        anchors.centerIn: root.background
+
+        implicitHeight: iconWidget.implicitHeight
+        implicitWidth: iconWidget.implicitWidth
+
+        scale: root.down ? 5/6 : 1 // If/When we do dragging, the scale is 1.25
+        Behavior on scale {
+            NumberAnimation {
+                duration: 90
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.down ? Looks.transition.easing.bezierCurve.easeIn : Looks.transition.easing.bezierCurve.easeOut
+            }
+        }
+
+        Kirigami.Icon {
+            id: iconWidget
+            anchors.centerIn: parent
+            implicitWidth: 26
+            implicitHeight: 26
+            roundToIconSize: false
+            source: `${Looks.iconsPath}/${root.iconName}-${Looks.dark ? "dark" : "light"}.svg`
+            fallback: root.iconName
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/bar/SearchButton.qml

@@ -0,0 +1,12 @@
+import QtQuick
+import QtQuick.Layouts
+import org.kde.kirigami as Kirigami
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+AppButton {
+    id: root
+
+    iconName: "system-search"
+}

dots/.config/quickshell/ii/modules/waffle/bar/StartButton.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Layouts
+import org.kde.kirigami as Kirigami
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+AppButton {
+    id: root
+
+    leftInset: 12
+    iconName: "start-here"
+}

dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml

@@ -34,10 +34,7 @@ BarButton {
             }
 
             FluentIcon {
-                icon: {
-                    print(WIcons.batteryIcon)
-                    return WIcons.batteryIcon
-                }
+                icon: WIcons.batteryIcon
             }
         }
     }

dots/.config/quickshell/ii/modules/waffle/bar/WaffleBarContent.qml

@@ -21,14 +21,28 @@ Rectangle {
         implicitHeight: 1
     }
 
-    BarGroupRow {
-        id: bloatRow
-        anchors.left: parent.left
-    }
-
     BarGroupRow {
         id: appsRow
+        spacing: 4
+        anchors.left: undefined
         anchors.horizontalCenter: parent.horizontalCenter
+
+        states: State {
+            name: "left"
+            when: Config.options.waffles.bar.leftAlignApps
+            AnchorChanges {
+                target: appsRow
+                anchors.left: parent.left
+                anchors.horizontalCenter: undefined
+            }
+        }
+
+        transitions: Transition {
+            animations: Looks.transition.anchor.createObject(this)
+        }
+
+        StartButton {}
+        SearchButton {}
     }
 
     BarGroupRow {

dots/.config/quickshell/ii/modules/waffle/looks/FluentIcon.qml

@@ -13,6 +13,7 @@ Kirigami.Icon {
     implicitHeight: implicitSize
 
     source: `${Looks.iconsPath}/${root.icon}.svg`
+    fallback: root.icon
     roundToIconSize: false
     color: Looks.colors.fg
     isMask: true

dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml

@@ -13,6 +13,7 @@ Singleton {
     property QtObject font
     property QtObject transition
     property string iconsPath: `${Directories.assetsPath}/icons/fluent`
+    property bool dark: Appearance.m3colors.darkmode
 
     property real fluentBackgroundTransparency: 0.17
     property real fluentContentTransparency: 0.3
@@ -66,6 +67,38 @@ Singleton {
             ColorAnimation {
                 duration: 80
                 easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
+            }
+        }
+
+        property Component enter: Component {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
+            }
+        }
+
+        property Component exit: Component {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeOut
+            }
+        }
+
+        property Component move: Component {
+            NumberAnimation {
+                duration: 100
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeInOut
+            }
+        }
+
+        property Component anchor: Component {
+            AnchorAnimation {
+                duration: 250
+                easing.type: Easing.BezierSpline
                 easing.bezierCurve: transition.easing.bezierCurve.easeInOut
             }
         }