wbar: add widgets, taskview, light theme

dots/.config/quickshell/ii/assets/icons/fluent/task-view.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="63.999989"
+   height="61.62962"
+   viewBox="0 0 26.999999 26"
+   fill="none"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="Group 6.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.7640336"
+     inkscape:cx="36.628625"
+     inkscape:cy="33.794892"
+     inkscape:window-width="1340"
+     inkscape:window-height="968"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <g
+     id="g3"
+     transform="translate(0.03879728,0.03736111)">
+    <rect
+       opacity="0.9"
+       x="7.8752632"
+       width="17.187504"
+       height="14.609377"
+       rx="0.85937512"
+       fill="#ffffff"
+       id="rect1"
+       y="1.7907622"
+       style="stroke-width:0.859375" />
+    <g
+       style="mix-blend-mode:exclusion"
+       id="g2"
+       transform="matrix(0.85937512,0,0,0.85937512,1.8596377,1.7907622)">
+      <rect
+         y="9"
+         width="20"
+         height="17"
+         rx="1"
+         fill="url(#paint0_linear_505_17)"
+         id="rect2"
+         x="0"
+         style="fill:url(#paint0_linear_505_17)" />
+    </g>
+  </g>
+  <defs
+     id="defs3">
+    <linearGradient
+       id="paint0_linear_505_17"
+       x1="-2.75374e-08"
+       y1="9.2399397"
+       x2="18.808399"
+       y2="26.838499"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#717171"
+         id="stop2" />
+      <stop
+         offset="1"
+         stop-color="#4F4F4F"
+         id="stop3" />
+    </linearGradient>
+  </defs>
+</svg>

dots/.config/quickshell/ii/assets/icons/fluent/widgets.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 27.927269 27.927269"
+   fill="none"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="widgets.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.6704546"
+     inkscape:cx="40.681265"
+     inkscape:cy="19.912409"
+     inkscape:window-width="1311"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <g
+     id="g6"
+     transform="translate(1.9636345,2.9636345)">
+    <rect
+       width="24"
+       height="22"
+       rx="1"
+       fill="url(#paint0_radial_110_367)"
+       id="rect1"
+       x="0"
+       y="0"
+       style="fill:url(#paint0_radial_110_367);stroke-width:1.00015;stroke-dasharray:none" />
+    <rect
+       x="2"
+       y="2"
+       width="9"
+       height="18"
+       fill="#f6f6f6"
+       id="rect2" />
+    <rect
+       x="13"
+       y="2"
+       width="9"
+       height="10"
+       fill="#67d7fd"
+       id="rect3" />
+    <rect
+       x="13"
+       y="12"
+       width="9"
+       height="4"
+       fill="#1ba9ff"
+       id="rect4" />
+    <rect
+       x="13"
+       y="16"
+       width="9"
+       height="4"
+       fill="#0086ed"
+       id="rect5" />
+  </g>
+  <defs
+     id="defs6">
+    <radialGradient
+       id="paint0_radial_110_367"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientTransform="matrix(24,22,-24,22,0,0)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#0077D0"
+         id="stop5" />
+      <stop
+         offset="1"
+         stop-color="#16458B"
+         id="stop6" />
+    </radialGradient>
+  </defs>
+</svg>

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
+            iconName: root.iconName
-            implicitHeight: 26
-            roundToIconSize: false
-            source: `${Looks.iconsPath}/${root.iconName}-${Looks.dark ? "dark" : "light"}.svg`
-            fallback: 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 bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
-        property color bg0Border: "#404040"
+        property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
-        property color bg1: "#2E2E2E"
+        property color bg1: root.dark ? "#2E2E2E" : "#F7F7F7"
-        property color bg1Hover: "#292929"
+        property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
-        property color bg1Active: "#252525"
+        property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
-        property color bg1Border: "#333333"
+        property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
-        property color fg: "#FFFFFF"
+        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
             }
         }
     }