feat: battery, refactor

quickshell/Components/NotificationArea/NotificationActions.qml

@@ -0,0 +1,53 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+
+RowLayout {
+  required property Notification modelData_
+
+  Layout.minimumHeight: 0
+  Layout.preferredHeight: modelData_.actions.length > 0 ? 30 : 0
+  visible: modelData_.actions.length > 0
+  spacing: 5
+  Repeater {
+    model: modelData_.actions
+
+    delegate: Item {
+      required property NotificationAction modelData
+
+      width: 100
+      height: 30
+
+      Rectangle {
+        anchors.fill: parent
+        color: Stylix.base00
+        radius: 5
+
+        Text {
+          text: modelData.text
+          color: Stylix.base05
+          anchors.centerIn: parent
+          font.pixelSize: 12
+
+          anchors {
+            left: parent.left
+            leftMargin: 10
+            verticalCenter: parent.verticalCenter
+          }
+        }
+
+        MouseArea {
+          anchors.fill: parent
+          onClicked: modelData.invoke()
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationArea/NotificationDisplay.qml

@@ -0,0 +1,81 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+Item {
+  id: root
+  Layout.alignment: Qt.AlignVCenter;
+  implicitWidth: 30
+  implicitHeight: parent.height
+  Rectangle {
+    anchors.centerIn: parent
+    id: rootContainer
+    color: "transparent"
+    width: 60
+    height: 30
+    radius: 50
+    RowLayout {
+      spacing: 5
+      anchors.centerIn: parent
+      Text {
+        verticalAlignment: Text.AlignVCenter
+        id: rootIcon
+        text: ""
+        color: Stylix.base05
+      }
+      Text {
+        verticalAlignment: Text.AlignVCenter
+        id: count
+        text: ""
+        font.bold: true
+        color: Stylix.base05
+      }
+    }
+  }
+  function updateDisplay() {
+    if (Notifications.list.length > 0) {
+      rootContainer.color = Stylix.base08
+      rootIcon.color = Stylix.base00
+      count.color = Stylix.base00
+      count.text = Notifications.list.length
+      rootContainer.width = 60
+      root.implicitWidth = 60
+      count.visible = true
+    } else {
+      rootContainer.width = 30
+      root.implicitWidth = 30
+      rootContainer.color = "transparent"
+      rootIcon.color = Stylix.base05
+      count.color = Stylix.base05
+      count.visible = false
+    }
+  }
+  Timer {
+    interval: 1000
+    running:  true
+    repeat: true
+    onTriggered: root.updateDisplay()
+  }
+  MouseArea {
+    id: ma
+    anchors.fill: parent
+    hoverEnabled: true
+
+    onClicked: function(mouseEvent) {
+      var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0);
+      var offset = notificationLoader.item.width / 2.0;
+      notificationLoader.item.clicky = m.x - offset;
+      notificationLoader.item.visible = !notificationLoader.item.visible
+    }
+  }
+
+  NotificationWindow {
+    id: notificationLoader
+  }
+}

quickshell/Components/NotificationArea/NotificationHeader.qml

@@ -0,0 +1,67 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+
+RowLayout {
+  required property Notification modelData_
+  IconImage {
+    function getIcon() {
+      if (modelData_.appIcon != "") {
+        return Quickshell.iconPath(modelData_.appIcon.replace("file://", ""))
+      } else {
+        return ThemeIcons.iconForAppId(modelData_.appName)
+      }
+    }
+    width: 24
+    height: 24
+    visible: source != ""
+    source: getIcon()
+  }
+  Text {
+    font.bold: true
+    elide: Text.ElideRight
+    text: modelData_.summary
+    color: Stylix.base05
+  }
+  Text {
+    id: dismiss
+    text: "󱏩"
+    color: Stylix.base08
+    font.pixelSize: 16
+
+    ToolTip {
+      id: dismissTooltip
+      visible: false
+      delay: 500
+      timeout: 1000
+      text: "Dismiss notification"
+    }
+
+    HoverHandler {
+      id: dismissHover
+      onHoveredChanged: {
+        dismissTooltip.visible = hovered
+      }
+    }
+
+    Layout.topMargin: 5
+    Layout.rightMargin: 10
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: {
+        modelData_.dismiss();
+        if (Notifications.list.length <= 0) {
+          popup.visible = false;
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationArea/NotificationImage.qml

@@ -0,0 +1,25 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+
+ClippingWrapperRectangle {
+  required property string image
+  radius: 5
+  Layout.preferredWidth: visible ? 80 : 0
+  Layout.preferredHeight: visible ? parent.height : 0
+  visible: image != ""
+  color: Stylix.base00
+  Image {
+    fillMode: Image.PreserveAspectFit
+    Layout.preferredWidth: 80
+    Layout.preferredHeight: parent.height
+    source: image.replace("file://", "")
+  }
+}

quickshell/Components/NotificationArea/NotificationItem.qml

@@ -0,0 +1,76 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+Item {
+  required property Notification modelData
+
+  function calculateHeight() {
+    if (modelData.actions.length > 0) {
+      return 150
+    } else if (modelData.image != "") {
+      return 100
+    } else {
+      return 60
+    }
+  }
+
+  function calculateBodyHeight() {
+    if (modelData.image != "" || modelData.actions.length > 0) {
+      return 40
+    } else {
+      return 20
+    }
+  }
+
+  height: calculateHeight()
+  width: 450
+
+  Rectangle {
+    id: indivNotif
+    color: Stylix.base02
+    radius: 5
+    anchors {
+      fill: parent
+      leftMargin: 5
+      rightMargin: 5
+    }
+    RowLayout {
+      anchors {
+        fill: parent
+      }
+      NotificationImage {
+        image: modelData.image
+      }
+      ColumnLayout {
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: 5
+        Layout.rightMargin: 5
+        Layout.fillWidth: true
+        NotificationHeader {
+          modelData_: modelData
+        }
+        Text {
+          font.pointSize: 10
+          wrapMode: Text.WordWrap
+          Layout.fillWidth: true
+          Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width
+          Layout.maximumHeight: calculateBodyHeight()
+          Layout.maximumWidth: indivNotif.width
+          elide: Text.ElideRight
+          text: modelData.body
+          color: Stylix.base05
+        }
+        NotificationActions {
+          modelData_: modelData
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationArea/NotificationWindow.qml

@@ -0,0 +1,58 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+LazyLoader {
+  id: notificationLoader
+
+  loading: true
+
+  PopupWindow {
+    property real clicky
+    id: wrapperPopup
+    visible: false
+    anchor.window: root.QsWindow.window
+    anchor.rect.y: parentWindow?.height ?? 0
+    anchor.rect.x: clicky
+    color: "transparent"
+
+    implicitWidth: 450
+    implicitHeight: 600
+
+    Rectangle {
+      anchors.fill: parent
+      color: Stylix.base01
+      bottomLeftRadius: 5
+      bottomRightRadius: 5
+      ColumnLayout {
+        anchors.fill: parent
+        NotificationWindowHeader {
+          Layout.topMargin: 5
+          Layout.bottomMargin: 5
+        }
+        ClippingRectangle {
+          color: "transparent"
+          Layout.alignment: Qt.AlignBottom
+          Layout.preferredWidth: parent.width
+          Layout.preferredHeight: parent.height - 34
+          ListView {
+            cacheBuffer: 30
+            anchors.fill: parent
+            id: notificationList
+            model: Notifications.list
+            spacing: 10
+            ScrollBar.vertical: ScrollBar {}
+
+            delegate: NotificationItem {}
+          }
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationArea/NotificationWindowHeader.qml

@@ -0,0 +1,54 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+RowLayout {
+  Layout.alignment: Qt.AlignHCenter
+  spacing: 10
+  Text {
+    font.bold: true
+    Layout.preferredHeight: 26
+    Layout.alignment: Qt.AlignVCenter
+    verticalAlignment: Text.AlignVCenter
+    text: "Notifications"
+    color: Stylix.base05
+    font.pixelSize: 16
+  }
+  Text {
+    Layout.preferredHeight: 26
+    Layout.alignment: Qt.AlignVCenter
+    verticalAlignment: Text.AlignBottom
+    id: clear
+    text: "󱏧"
+    color: Stylix.base08
+    font.pixelSize: 16
+    ToolTip {
+      id: clearTooltip
+      visible: false
+      delay: 500
+      timeout: 1000
+      text: "Clear notifications"
+    }
+    MouseArea {
+      anchors.fill: parent
+      onClicked: {
+        if (Notifications.list.length >= 0) {
+          Notifications.clear()
+          root.updateDisplay()
+        }
+      }
+    }
+    HoverHandler {
+      id: clearHover
+      onHoveredChanged: {
+        clearTooltip.visible = hovered
+      }
+    }
+  }
+}