wbar: add widgets, taskview, light theme

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

@@ -9,6 +9,7 @@ BarButton {
     id: root
 
     required property string iconName
+    property bool separateLightDark: false
     implicitWidth: height - topInset - bottomInset + leftInset + rightInset
 
     contentItem: Item {
@@ -27,14 +28,10 @@ BarButton {
             }
         }
 
-        Kirigami.Icon {
+        AppIcon {
             id: iconWidget
             anchors.centerIn: parent
-            implicitWidth: 26
-            implicitHeight: 26
-            roundToIconSize: false
-            source: `${Looks.iconsPath}/${root.iconName}-${Looks.dark ? "dark" : "light"}.svg`
-            fallback: root.iconName
+            iconName: root.iconName
         }
     }
 }

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

@@ -0,0 +1,16 @@
+import QtQuick
+import org.kde.kirigami as Kirigami
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+Kirigami.Icon {
+    id: iconWidget
+    required property string iconName
+    
+    implicitWidth: 26
+    implicitHeight: 26
+    roundToIconSize: false
+    source: `${Looks.iconsPath}/${root.iconName}${!root.separateLightDark ? "" : Looks.dark ? "-dark" : "-light"}.svg`
+    fallback: root.iconName
+}

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

@@ -9,4 +9,5 @@ AppButton {
     id: root
 
     iconName: "system-search"
+    separateLightDark: true
 }

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

@@ -8,6 +8,6 @@ import qs.modules.waffle.looks
 AppButton {
     id: root
 
-    leftInset: 12
+    leftInset: Config.options.waffles.bar.leftAlignApps ? 12 : 0
     iconName: "start-here"
 }

dots/.config/quickshell/ii/modules/waffle/bar/TaskViewButton.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: "task-view"
+}

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

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.waffle.looks
 
 Rectangle {
@@ -21,6 +22,18 @@ Rectangle {
         implicitHeight: 1
     }
 
+    BarGroupRow {
+        id: bloatRow
+        anchors.left: parent.left
+        opacity: Config.options.waffles.bar.leftAlignApps ? 0 : 1
+        visible: opacity > 0
+        Behavior on opacity {
+            animation: Looks.transition.opacity.createObject(this)
+        }
+
+        WidgetsButton {}
+    }
+
     BarGroupRow {
         id: appsRow
         spacing: 4
@@ -43,11 +56,17 @@ Rectangle {
 
         StartButton {}
         SearchButton {}
+        TaskViewButton {}
     }
 
     BarGroupRow {
         id: systemRow
         anchors.right: parent.right
+        FadeLoader {
+            Layout.fillHeight: true
+            shown: Config.options.waffles.bar.leftAlignApps
+            sourceComponent: WidgetsButton {}
+        }
         SystemButton {}
         TimeButton {}
     }

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

@@ -0,0 +1,39 @@
+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
+
+    readonly property bool expandedForm: Config.options.waffles.bar.leftAlignApps
+    leftInset: Config.options.waffles.bar.leftAlignApps ? 0 : 12
+    implicitWidth: expandedForm ? 148 : (height - topInset - bottomInset + leftInset + rightInset)
+    iconName: "widgets"
+
+    contentItem: Item {
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: root.expandedForm ? parent.left : undefined
+            horizontalCenter: root.expandedForm ? undefined : background.horizontalCenter
+        }
+        implicitHeight: row.implicitHeight
+        implicitWidth: row.implicitWidth
+        Row {
+            id: row
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: root.expandedForm ? parent.left : undefined
+                horizontalCenter: root.expandedForm ? undefined : parent.horizontalCenter
+                margins: 8
+            }
+
+            AppIcon {
+                id: iconWidget
+                iconName: root.iconName
+            }
+        }
+    }
+}

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

@@ -19,13 +19,13 @@ Singleton {
     property real fluentContentTransparency: 0.3
     colors: QtObject {
         id: colors
-        property color bg0: "#1C1C1C"
-        property color bg0Border: "#404040"
-        property color bg1: "#2E2E2E"
-        property color bg1Hover: "#292929"
-        property color bg1Active: "#252525"
-        property color bg1Border: "#333333"
-        property color fg: "#FFFFFF"
+        property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
+        property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
+        property color bg1: root.dark ? "#2E2E2E" : "#F7F7F7"
+        property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
+        property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
+        property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
+        property color fg: root.dark ? "#FFFFFF" : "#000000"
         property color brand: Appearance.m3colors.m3primary
     }
 
@@ -71,6 +71,14 @@ Singleton {
             }
         }
 
+        property Component opacity: Component {
+            NumberAnimation{
+                duration: 80
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
+            }
+        }
+
         property Component enter: Component {
             NumberAnimation {
                 duration: 250
@@ -97,9 +105,9 @@ Singleton {
 
         property Component anchor: Component {
             AnchorAnimation {
-                duration: 250
+                duration: 160
                 easing.type: Easing.BezierSpline
-                easing.bezierCurve: transition.easing.bezierCurve.easeInOut
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
             }
         }
     }