addition of basic bar example

basic_bar/.qmlformat.ini

@@ -0,0 +1,8 @@
+[General]
+FunctionsSpacing=true
+IndentWidth=2
+MaxColumnWidth=-1
+NewlineType=native
+NormalizeOrder=true
+ObjectsSpacing=true
+UseTabs=false

basic_bar/Containers/Left.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Layouts
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.left: parent.left
+    anchors.top: parent.top
+
+    Wid.OsText {
+    }
+
+    Wid.Workspaces {
+    }
+
+    Wid.WorkspaceName {
+    }
+  }
+}

basic_bar/Containers/Middle.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.top: parent.top
+
+    Wid.Clock {
+    }
+  }
+}

basic_bar/Containers/Right.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Pipewire
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    anchors.top: parent.top
+    layoutDirection: Qt.RightToLeft
+
+    Wid.Session {
+    }
+
+    Wid.PowerProfs {
+    }
+
+    Wid.Sound {
+    }
+
+    Wid.Sound {
+      node: Pipewire.defaultAudioSource
+    }
+
+    Wid.Battery {
+    }
+  }
+}

basic_bar/Data/Audio.qml

@@ -0,0 +1,40 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+// WARNING don't forget to track nodes with PwNodeObjectTracler
+Singleton {
+  id: root
+
+  function getIcon(node: PwNode): string {
+    return (node.isSink) ? getSinkIcon(node) : getSourceIcon(node);
+  }
+
+  function getSinkIcon(node: PwNode): string {
+    return (node.audio.muted) ? "󰝟" : (node.audio.volume > 0.5) ? "󰕾" : (node.audio.volume > 0.01) ? "󰖀" : "󰕿";
+  }
+
+  function getSourceIcon(node: PwNode): string {
+    return (node.audio.muted) ? "󰍭" : "󰍬";
+  }
+
+  function toggleMute(node: PwNode) {
+    node.audio.muted = !node.audio.muted;
+  }
+
+  function wheelAction(event: WheelEvent, node: PwNode) {
+    if (event.angleDelta.y < 0) {
+      node.audio.volume -= 0.01;
+    } else {
+      node.audio.volume += 0.01;
+    }
+
+    if (node.audio.volume > 1.3) {
+      node.audio.volume = 1.3;
+    }
+    if (node.audio.volume < 0) {
+      node.audio.volume = 0.0;
+    }
+  }
+}

basic_bar/Data/Colors.qml

@@ -0,0 +1,58 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+Singleton {
+  readonly property color background: "#121318"
+  readonly property color error: "#ffb4ab"
+  readonly property color error_container: "#93000a"
+  readonly property color inverse_on_surface: "#2f3036"
+  readonly property color inverse_primary: "#4d5c92"
+  readonly property color inverse_surface: "#e3e1e9"
+  readonly property color on_background: "#e3e1e9"
+  readonly property color on_error: "#690005"
+  readonly property color on_error_container: "#ffdad6"
+  readonly property color on_primary: "#1d2d61"
+  readonly property color on_primary_container: "#dce1ff"
+  readonly property color on_primary_fixed: "#04174b"
+  readonly property color on_primary_fixed_variant: "#354479"
+  readonly property color on_secondary: "#2b3042"
+  readonly property color on_secondary_container: "#dee1f9"
+  readonly property color on_secondary_fixed: "#161b2c"
+  readonly property color on_secondary_fixed_variant: "#424659"
+  readonly property color on_surface: "#e3e1e9"
+  readonly property color on_surface_variant: "#c6c5d0"
+  readonly property color on_tertiary: "#432740"
+  readonly property color on_tertiary_container: "#ffd7f5"
+  readonly property color on_tertiary_fixed: "#2c122a"
+  readonly property color on_tertiary_fixed_variant: "#5b3d57"
+  readonly property color outline: "#90909a"
+  readonly property color outline_variant: "#45464f"
+  readonly property color primary: "#b6c4ff"
+  readonly property color primary_container: "#354479"
+  readonly property color primary_fixed: "#dce1ff"
+  readonly property color primary_fixed_dim: "#b6c4ff"
+  readonly property color scrim: "#000000"
+  readonly property color secondary: "#c2c5dd"
+  readonly property color secondary_container: "#424659"
+  readonly property color secondary_fixed: "#dee1f9"
+  readonly property color secondary_fixed_dim: "#c2c5dd"
+  readonly property color shadow: "#000000"
+  readonly property color surface: "#121318"
+  readonly property color surface_bright: "#38393f"
+  readonly property color surface_container: "#1e1f25"
+  readonly property color surface_container_high: "#292a2f"
+  readonly property color surface_container_highest: "#34343a"
+  readonly property color surface_container_low: "#1a1b21"
+  readonly property color surface_container_lowest: "#0d0e13"
+  readonly property color surface_dim: "#121318"
+  readonly property color surface_tint: "#b6c4ff"
+  readonly property color tertiary: "#e3bada"
+  readonly property color tertiary_container: "#5b3d57"
+  readonly property color tertiary_fixed: "#ffd7f5"
+  readonly property color tertiary_fixed_dim: "#e3bada"
+
+  function withAlpha(color: color, alpha: real): color {
+    return Qt.rgba(color.r, color.g, color.b, alpha);
+  }
+}

basic_bar/Data/Fonts.qml

@@ -0,0 +1,10 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+  readonly property string caskaydia: "CaskaydiaMono Nerd"
+  readonly property string dejavuSans: "Dejavu Sans"
+  readonly property string hurricane: "Hurricane"
+  readonly property string jpKaisei: "Kaisei Decol"
+  readonly property string rye: "Rye"
+}

basic_bar/Data/Time.qml

@@ -0,0 +1,10 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+SystemClock {
+  id: clock
+
+  enabled: true
+  precision: SystemClock.Seconds
+}

basic_bar/Generics/MatIcon.qml

@@ -0,0 +1,31 @@
+// a thin wrapper for Material Symbols
+import QtQuick
+import "../Data/" as Dat
+
+Text {
+  id: root
+
+  property real fill: 0
+  property int grad: 0
+  required property string icon
+
+  font.family: "Material Symbols Rounded"
+  font.hintingPreference: Font.PreferFullHinting
+
+  // refer https://developers.google.com/fonts/docs/material_symbols
+  font.variableAxes: {
+    "FILL": root.fill,
+    "opsz": root.fontInfo.pixelSize,
+    // "GRAD": root.grad,
+    "wght": root.fontInfo.weight
+  }
+  renderType: Text.NativeRendering
+  text: root.icon
+
+  Behavior on fill {
+    NumberAnimation {
+      duration: 180
+      easing.type: Easing.InOutQuad
+    }
+  }
+}

basic_bar/Generics/MouseArea.qml

@@ -0,0 +1,34 @@
+import QtQuick
+
+MouseArea {
+  id: area
+
+  property real clickOpacity: 0.2
+  property real hoverOpacity: 0.08
+  property color layerColor: "white"
+  property NumberAnimation layerOpacityAnimation: NumberAnimation {
+    duration: 200
+    easing.type: Easing.InOutQuad
+  }
+  property int layerRadius: parent?.radius ?? 0
+  property alias layerRect: layer
+
+  anchors.fill: parent
+  hoverEnabled: true
+
+  onContainsMouseChanged: layer.opacity = (area.containsMouse) ? area.hoverOpacity : 0
+  onContainsPressChanged: layer.opacity = (area.containsPress) ? area.clickOpacity : area.hoverOpacity
+
+  Rectangle {
+    id: layer
+
+    anchors.fill: parent
+    color: area.layerColor
+    opacity: 0
+    radius: area.layerRadius
+
+    Behavior on opacity {
+      animation: area.layerOpacityAnimation
+    }
+  }
+}

basic_bar/Generics/RoundedImage.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  id: root
+
+  property alias image: rootIcon
+  property real radius
+  property string source
+
+  Image {
+    id: rootIcon
+
+    anchors.fill: parent
+    antialiasing: true
+    fillMode: Image.PreserveAspectCrop
+    mipmap: true
+    smooth: true
+    source: root.source
+    visible: false
+  }
+
+  MultiEffect {
+    id: effect
+
+    anchors.fill: rootIcon
+    antialiasing: true
+    maskEnabled: true
+    maskSource: rootIconMask
+    maskSpreadAtMin: 1.0
+    maskThresholdMax: 1.0
+    maskThresholdMin: 0.5
+    source: rootIcon
+  }
+
+  Item {
+    id: rootIconMask
+
+    antialiasing: true
+    height: rootIcon.height
+    layer.enabled: true
+    layer.smooth: true
+    smooth: true
+    visible: false
+    width: rootIcon.width
+
+    Rectangle {
+      anchors.fill: parent
+      height: this.width
+      radius: root.radius
+    }
+  }
+}

basic_bar/Generics/WaybarItem.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+
+import "../Data/" as Dat
+
+RowLayout {
+  id: root
+
+  property alias icon: icon
+  property alias text: text
+
+  anchors.centerIn: parent
+  height: parent.height ? parent.height : 1
+
+  Item {
+    id: iconContainer
+
+    Layout.fillHeight: true
+    implicitWidth: icon.width
+
+    Text {
+      id: icon
+
+      anchors.centerIn: parent
+      font.family: "Material Symbols Rounded"
+      font.pointSize: 16
+    }
+  }
+
+  Item {
+    id: textContainer
+
+    Layout.fillHeight: true
+    implicitWidth: text.width
+
+    Text {
+      id: text
+
+      anchors.centerIn: parent
+      font.family: Dat.Fonts.dejavuSans
+      font.pointSize: 11
+    }
+  }
+}