feat: wheee

quickshell/Components/Clock.qml

@@ -5,7 +5,7 @@ import "root:/DataSources"
 Text {
     id: clock
     font.pointSize: 13
-    color: Settings.variable
+    color: Stylix.base0F
     Layout.alignment: Qt.AlignCenter
 
     text: Time.time

quickshell/Components/FocusedWindow.qml

@@ -7,22 +7,13 @@ import "root:/Helpers"
 
 RowLayout {
   id: root
-  property string title: get_text()
+  property string title: niri.focusedWindow?.title ?? ""
   property string icon_path: get_icon()
   property string app_id: get_app_id()
 
   function get_app_id() {
     var app_id = niri.focusedWindow?.appId;
-    return app_id
-  }
-
-  function get_text() {
-    var full_title = niri.focusedWindow?.title ?? "";
-    var shortened_title = full_title.substring(0, 20);
-    if (full_title.length > 20) {
-      shortened_title += "…"
-    }
-    return shortened_title
+    return app_id ?? ""
   }
 
   function get_icon() {
@@ -32,18 +23,30 @@ RowLayout {
     }
   }
 
+  visible: title != ""
   spacing: 10
 
   Image {
-    anchors.verticalCenter: parent.verticalCenter
+    Layout.alignment: Qt.AlignVCenter;
     source: icon_path
-    visible: title != ""
     sourceSize.width: 24
     sourceSize.height: 24
     smooth: true
   }
-  Text {
-    text: title
-    color: Settings.defaultFg
+
+  Item {
+    Layout.alignment: Qt.AlignVCenter;
+    implicitWidth: 300
+    height: parent.height
+    Text {
+      anchors {
+        centerIn: parent
+      }
+      verticalAlignment: Text.AlignVCenter;
+      width: parent.width
+      text: title
+      color: Stylix.base05
+      elide: Text.ElideRight
+    }
   }
 }

quickshell/Components/SystemTray.qml

@@ -9,15 +9,16 @@ import "root:/DataSources"
 RowLayout {
   id: systray
 
+  anchors.centerIn: parent
   Layout.alignment: Qt.AlignCenter
+  property string openItemId
 
   Repeater {
     model: SystemTray.items
 
     delegate: Item {
-      id: delagate
+      id: delegateItem
       required property SystemTrayItem modelData
-      property var openItem
 
       width: 24
       height: 24
@@ -30,10 +31,21 @@ RowLayout {
       }
 
       MouseArea {
+        id: ma
         anchors.fill: parent
         hoverEnabled: true
 
-        onClicked: popupLoader.item.visible = !popupLoader.item.visible
+        onClicked: function(mouseEvent) {
+          var m = delegateItem.QsWindow.mapFromItem(delegateItem, mouseEvent.x, mouseEvent.y);
+          var offset = popupLoader.item.width / 2.0;
+          popupLoader.clicky = m.x - offset;
+          if (openItemId == modelData.id) {
+            openItemId = null
+          } else {
+            openItemId = modelData.id
+          }
+          //popupLoader.item.visible = !popupLoader.item.visible
+        }
       }
 
       QsMenuOpener {
@@ -44,22 +56,27 @@ RowLayout {
       LazyLoader {
         id: popupLoader
 
+        property real clicky
+
         loading: true
 
         PopupWindow {
           id: popup
-          anchor.window: delagate.QsWindow.window
-          anchor.rect.x: parentWindow.width * 1.15
-          anchor.rect.y: parentWindow.height / 1.25
+          anchor.window: delegateItem.QsWindow.window
+          anchor.rect.x: popupLoader.clicky
+          anchor.rect.y: if (visible) { parentWindow.height } else { systray.height }
 
+          visible: openItemId == modelData.id
           color: "transparent"
 
-          implicitWidth: 200
-          implicitHeight: 200
+          property real childHeight: 5
+
+          implicitWidth: 300
+          implicitHeight: childHeight
 
           Rectangle {
             anchors.fill: parent
-            color: Settings.colors.background
+            color: Stylix.base02
             radius: 5
           }
 
@@ -79,43 +96,23 @@ RowLayout {
 
             ScrollBar.horizontal: ScrollBar {}
 
-            delegate: Item {
+            delegate: Loader {
               required property QsMenuHandle modelData
+              id: trayItemLoader
 
               width: parent.width
-              height: 40
 
-              Rectangle {
-                anchors {
-                  fill: parent
-                  leftMargin: 5
-                  rightMargin: 5
-                }
-
-                color: Settings.colors.backgroundLighter
-                radius: 5
-
-                Text {
-                  anchors.centerIn: parent
-                  text: modelData.text
-                  color: Settings.colors.foreground
-                  font.pointSize: 12
-                }
-
-                MouseArea {
-                  anchors.fill: parent
-                  hoverEnabled: true
-
-                  onClicked: mouse => {
-                    modelData.triggered();
-                    // TODO: moar
-                    var idx = ObjectModel.indexOf(modelData);
-                    if (openItem && openItem.idx != idx) {
-
-                    }
-                    popup.visible = false;
-                  }
+              Component.onCompleted: {
+                if (modelData.text != null && modelData.text != "") {
+                  trayItemLoader.setSource("SystemTrayButton.qml", {
+                    "modelData": modelData,
+                  })
+                  childHeight += 30
+                } else {
+                  trayItemLoader.setSource("SystemTraySeparator.qml", {})
+                  childHeight += 2
                 }
+                childHeight += 5
               }
             }
           }

quickshell/Components/SystemTrayButton.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import QtQuick.Controls
+import Quickshell.Widgets
+import Quickshell.Services.SystemTray
+import "root:/DataSources"
+
+Item {
+  required property QsMenuHandle modelData
+
+  width: parent.width
+  height: 30
+
+  property real text_point_size: 12
+  property real length: width / text_point_size
+
+  Rectangle {
+    anchors {
+      fill: parent
+      leftMargin: 10
+      rightMargin: 10
+    }
+
+    color: Stylix.base01
+    radius: 5
+
+    Text {
+      anchors {
+        centerIn: parent
+      }
+      width: parent.width - 10
+      horizontalAlignment: Text.AlignHCenter
+      text: modelData?.text ?? ""
+      color: Stylix.base05
+      font.pointSize: text_point_size
+      elide: Text.ElideRight
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      hoverEnabled: true
+
+      onClicked: mouse => {
+        modelData.triggered();
+        popup.visible = false;
+      }
+    }
+  }
+}

quickshell/Components/SystemTraySeparator.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import QtQuick.Controls
+import Quickshell.Widgets
+import Quickshell.Services.SystemTray
+import "root:/DataSources"
+
+Item {
+  width: parent.width
+  height: 2
+
+  Rectangle {
+    anchors {
+      fill: parent
+      leftMargin: 5
+      rightMargin: 5
+    }
+    color: Stylix.base00
+    radius: 5
+  }
+}

quickshell/Components/SystemTrayWrapper.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import "root:/DataSources"
+
+Item {
+  id: root
+  Layout.alignment: Qt.AlignVCenter;
+  implicitWidth: 25
+  implicitHeight: parent.height
+  Text {
+    id: texty
+    anchors.centerIn: parent
+    text: ""
+    color: Stylix.base05
+  }
+  MouseArea {
+    id: ma
+    anchors.fill: parent
+    hoverEnabled: true
+
+    onClicked: function(mouseEvent) {
+      var m = root.QsWindow.mapFromItem(ma, mouseEvent.x, mouseEvent.y);
+      var offset = wrapperPopup.width / 2.0;
+      wrapperPopup.clicky = m.x - offset;
+      wrapperPopup.visible = !wrapperPopup.visible
+    }
+  }
+  PopupWindow {
+    property real clicky
+    id: wrapperPopup
+    anchor.window: root.QsWindow.window
+    anchor.rect.y: parentWindow.height
+    anchor.rect.x: clicky
+    width: systray.width + 10
+    height: systray.height + 10
+    Rectangle {
+      anchors.fill: parent
+      color: Stylix.base01
+      SystemTray {
+        id: systray
+      }
+    }
+  }
+}

quickshell/Components/WorkspaceButton.qml

@@ -31,32 +31,37 @@ Item {
 
   function get_color() {
     if (modelData.isUrgent) {
-      return Settings.base0F
+      return [Stylix.base08, Stylix.base00]
     }
     if (modelData.isFocused) {
-      return Settings.base0E
+      return [Stylix.base0F, Stylix.base00]
     }
     if (modelData.isActive) {
-      return Settings.base0C
+      return [Stylix.base0C, Stylix.base00]
     }
     if (modelData.activeWindowId > 0) {
-      return Settings.base0F
+      return [Stylix.base0D, Stylix.base00]
     }
-    return Settings.lighterBg
+    return [Stylix.base02, Stylix.base04]
   }
 
+  property var colors: get_color()
+  property color bg: root.colors[0]
+  property color fg: root.colors[1]
+
   visible: isVisible
   implicitHeight: 25
   implicitWidth: gen_width()
 
   Rectangle {
     anchors.fill: parent
-    color: get_color()
+    color: bg
     radius: 5
 
     Text {
       anchors.centerIn: parent
-      color: Settings.defaultBg
+      verticalAlignment: Text.AlignVCenter;
+      color: fg
       text: gen_text()
       font.pixelSize: 20
     }