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
   }
+
+  Item {
+    Layout.alignment: Qt.AlignVCenter;
+    implicitWidth: 300
+    height: parent.height
     Text {
+      anchors {
+        centerIn: parent
+      }
+      verticalAlignment: Text.AlignVCenter;
+      width: parent.width
       text: title
-    color: Settings.defaultFg
+      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
     }

quickshell/DataSources/Settings.qml

@@ -1,97 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import Quickshell
-import Quickshell.Io
-
-Singleton {
-  id: root
-  readonly property Scheme scheme: Scheme {}
-
-  readonly property color base00: scheme.base00
-  readonly property color base01: scheme.base01
-  readonly property color base02: scheme.base02
-  readonly property color base03: scheme.base03
-  readonly property color base04: scheme.base04
-  readonly property color base05: scheme.base05
-  readonly property color base06: scheme.base06
-  readonly property color base07: scheme.base07
-  readonly property color base08: scheme.base08
-  readonly property color base09: scheme.base09
-  readonly property color base0A: scheme.base0A
-  readonly property color base0B: scheme.base0B
-  readonly property color base0C: scheme.base0C
-  readonly property color base0D: scheme.base0D
-  readonly property color base0E: scheme.base0E
-  readonly property color base0F: scheme.base0F
-  readonly property color defaultBg: scheme.defaultBg
-  readonly property color lighterBg: scheme.lighterBg
-  readonly property color selectionBg: scheme.selectionBg
-  readonly property color comments: scheme.comments
-  readonly property color darkFg: scheme.darkFg
-  readonly property color defaultFg: scheme.defaultFg
-  readonly property color lightFg: scheme.lightFg
-  readonly property color lightBg: scheme.lightBg
-  readonly property color variable: scheme.variable
-  readonly property color integer: scheme.integer
-  readonly property color classy: scheme.classy
-  readonly property color stringy: scheme.stringy
-  readonly property color support: scheme.support
-  readonly property color functiony: scheme.functiony
-  readonly property color keyword: scheme.keyword
-  readonly property color deprecated: scheme.deprecated
-
-  function load(data: string): void {
-    const colours = scheme;
-    const scheme_json = JSON.parse(data);
-
-    for (const [name, colour] of Object.entries(scheme_json)) {
-      colours[name] = colour
-    }
-  }
-
-  FileView {
-    path: "./stylix.json"
-    blockLoading: true
-    watchChanges: true
-    onFileChanged: reload()
-    onLoaded: root.load(text(), false)
-  }
-  component Scheme: QtObject {
-    property string author: ""
-    property string scheme: ""
-    property string slug: ""
-    property color base00: "#000000"
-    property color base01: "#000000"
-    property color base02: "#000000"
-    property color base03: "#000000"
-    property color base04: "#000000"
-    property color base05: "#000000"
-    property color base06: "#000000"
-    property color base07: "#000000"
-    property color base08: "#000000"
-    property color base09: "#000000"
-    property color base0A: "#000000"
-    property color base0B: "#000000"
-    property color base0C: "#000000"
-    property color base0D: "#000000"
-    property color base0E: "#000000"
-    property color base0F: "#000000"
-    property color defaultBg: "#000000"
-    property color lighterBg: "#000000"
-    property color selectionBg: "#000000"
-    property color comments: "#000000"
-    property color darkFg: "#000000"
-    property color defaultFg: "#000000"
-    property color lightFg: "#000000"
-    property color lightBg: "#000000"
-    property color variable: "#000000"
-    property color integer: "#000000"
-    property color classy: "#000000"
-    property color stringy: "#000000"
-    property color support: "#000000"
-    property color functiony: "#000000"
-    property color keyword: "#000000"
-    property color deprecated: "#000000"
-  }
-}

quickshell/DataSources/Stylix.qml

@@ -0,0 +1,61 @@
+// https://codeberg.org/permafrozen/shell/src/commit/82d34e9816ba23971d4a007a6a178d952a8cc6bf/src/utils/Theme.qml
+pragma ComponentBehavior: Bound
+pragma Singleton
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+    id: root
+
+    // Assign Properties from the read in palette.json (stylix generated file)
+    readonly property color base00: json.base00 ? `#${json.base00}` : "#000000"
+    readonly property color base01: json.base01 ? `#${json.base01}` : "#000000"
+    readonly property color base02: json.base02 ? `#${json.base02}` : "#000000"
+    readonly property color base03: json.base03 ? `#${json.base03}` : "#000000"
+    readonly property color base04: json.base04 ? `#${json.base04}` : "#000000"
+    readonly property color base05: json.base05 ? `#${json.base05}` : "#000000"
+    readonly property color base06: json.base06 ? `#${json.base06}` : "#000000"
+    readonly property color base07: json.base07 ? `#${json.base07}` : "#000000"
+    readonly property color base08: json.base08 ? `#${json.base08}` : "#000000"
+    readonly property color base09: json.base09 ? `#${json.base09}` : "#000000"
+    readonly property color base0A: json.base0A ? `#${json.base0A}` : "#000000"
+    readonly property color base0B: json.base0B ? `#${json.base0B}` : "#000000"
+    readonly property color base0C: json.base0C ? `#${json.base0C}` : "#000000"
+    readonly property color base0D: json.base0D ? `#${json.base0D}` : "#000000"
+    readonly property color base0E: json.base0E ? `#${json.base0E}` : "#000000"
+    readonly property color base0F: json.base0F ? `#${json.base0F}` : "#000000"
+    readonly property string author: json.author ? json.author : ""
+    readonly property string scheme: json.scheme ? json.scheme : ""
+    readonly property string slug: json.slug ? json.slug : ""
+
+    FileView {
+        path: `${Quickshell.env("HOME")}/.config/stylix/palette.json`
+        watchChanges: true
+        blockLoading: true
+        onFileChanged: reload()
+
+        JsonAdapter {
+            id: json
+            property string base00
+            property string base01
+            property string base02
+            property string base03
+            property string base04
+            property string base05
+            property string base06
+            property string base07
+            property string base08
+            property string base09
+            property string base0A
+            property string base0B
+            property string base0C
+            property string base0D
+            property string base0E
+            property string base0F
+            property string author
+            property string scheme
+            property string slug
+        }
+    }
+}

quickshell/Modules/Bar.qml

@@ -35,7 +35,7 @@ Scope {
         id: bar
         anchors.fill: parent
         radius: 10
-        color: Settings.defaultBg
+        color: Stylix.base00
 
         RowLayout {
           anchors {
@@ -70,7 +70,7 @@ Scope {
 
           spacing: 15
 
-          SystemTray {}
+          SystemTrayWrapper {}
           Clock {}
           DistroIcon {}
         }