changed the desigin of hyprlock and added new quickshell components

.config/hypr/hyprlock.conf

@@ -9,7 +9,7 @@
 # you can get started by copying this config to ~/.config/hypr/hyprlock.conf
 #
 
-$font = Cascadia Code
+$font = CaskaydiaCove Nerd Font Mono
 
 general {
     hide_cursor = false
@@ -35,26 +35,26 @@ animations {
 
 background {
     monitor =
-    path = ~/Pictures/wallpapers/frieren-beyond-journeys-end-7p-2560x1440.jpg
-    blur_passes = 3
+    path = ~/Pictures/wallpapers/evening-sky.png
+    blur_passes = 1
 }
 
 input-field {
     monitor =
-    size = 20%, 5%
-    outline_thickness = 3
+    size = 15%, 5%
+    outline_thickness = 2
     inner_color = rgba(0, 0, 0, 0.0) # no fill
 
-    outer_color = rgba(a6da95ee) rgba(b7bdf8ee) 45deg
-    check_color = rgba(00ff99ee) rgba(ff6633ee) 120deg
-    fail_color = rgba(ff6633ee) rgba(ff0066ee) 40deg
+    outer_color = #cdd6f4#rgba(a6da95ee) rgba(b7bdf8ee) 45deg
+    check_color = rgba(00ff99ee) #rgba(ff6633ee) 120deg
+    fail_color = rgba(ff6633ee) #rgba(ff0066ee) 40deg
 
     font_color = rgb(143, 143, 143)
     fade_on_empty = false
     rounding = 15
 
     font_family = $font
-    placeholder_text = password
+    placeholder_text = 
     fail_text = $PAMFAIL
 
     # uncomment to use a letter instead of a dot to indicate the typed password
@@ -65,7 +65,7 @@ input-field {
     # uncomment to use an input indicator that does not show the password length (similar to swaylock's input indicator)
     # hide_input = true
 
-    position = 0, -90
+    position = 0, -290
     halign = center
     valign = center
 }
@@ -74,12 +74,12 @@ input-field {
 label {
     monitor =
     text = $TIME # ref. https://wiki.hyprland.org/Hypr-Ecosystem/hyprlock/#variable-substitution
-    font_size = 220
+    font_size = 120
     font_family = $font
 
-    position = -30, -30
+    position = 0, -30
     halign = center
-    valign = top
+    valign = center
 }
 
 # DATE
@@ -89,7 +89,7 @@ label {
     font_size = 25
     font_family = $font
 
-    position = -30, -340
+    position = 0, -120
     halign = center
-    valign = top
+    valign = center
 }

.config/quickshell/shell.qml

@@ -0,0 +1,111 @@
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+
+PanelWindow {
+    anchors.top: true
+    anchors.left: true
+    anchors.right: true
+    implicitHeight: 38
+    //color: root.colBg
+    id: root
+    color: "transparent"
+    // Theme property
+    property color colBg: '#1e1e2e' 
+    property color colCyan: '#94e2d5'
+    property color colBlue: '#89b4fa'
+    property color colYellow: '#e0af68'
+    property color colMuted: '#313244'
+    property color coltxt: '#cdd6f4'
+    property string fontFamily: "CaskaydiaCove Nerd Font Mono"
+    property int fontSize: 18 
+    // System Data
+    property int cpuUsage: 0
+    property var lastCpuIdle: 0
+    property var lastCpuTotal: 0
+
+    Process {
+    id: cpuProc
+    command: ["sh", "-c", "head -1 /proc/stat"]
+    stdout: SplitParser {
+        onRead: data => {
+            if (!data) return
+            var p = data.trim().split(/\s+/)
+            var idle = parseInt(p[4]) + parseInt(p[5])
+            var total = p.slice(1, 8).reduce((a, b) => a + parseInt(b), 0)
+            if (lastCpuTotal > 0) {
+                cpuUsage = Math.round(100 * (1 - (idle - lastCpuIdle) / (total - lastCpuTotal)))
+            }
+            lastCpuTotal = total
+            lastCpuIdle = idle
+        }
+    }
+    Component.onCompleted: running = true
+    }
+    Timer {
+    interval: 2000        // Every 2 seconds
+    running: true         // Start immediately
+    repeat: true          // Keep going forever
+    onTriggered: cpuProc.running = true
+    }
+
+    RowLayout {
+      anchors.fill: parent
+      anchors.margins: 8
+      spacing: 3
+      Repeater {
+          model: 10
+          Text {
+            property var ws: Hyprland.workspaces.values.find(w => w.id === index + 1)
+            property bool isActive: Hyprland.focusedWorkspace?.id === (index + 1)
+            text: isActive ? "" : "" //"
+            color: isActive ? root.colCyan : (ws ? root.colBlue : root.colMuted)
+            font { pixelSize: 14; bold: true }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Hyprland.dispatch("workspace " + (index + 1))
+            }
+          }
+        }
+        Rectangle {
+            color: "transparent"
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+        Rectangle{    
+          //anchors.fill: parent
+          //color: parent.color
+          Layout.fillHeight: true
+          implicitWidth: 100
+          color: root.colBg
+          radius: 8
+          Text {
+            id: clock
+            text: Qt.formatDateTime(new Date(), "HH:mm")
+            color: root.coltxt
+            font { family: root.fontFamily; pixelSize: root.fontSize; bold: true}
+            Timer {
+                interval: 1000
+                running: true
+                repeat: true
+                onTriggered: clock.text = Qt.formatDateTime(new Date(), "HH:mm")
+            }
+        }
+      }
+      Rectangle {
+          color: "transparent"
+          Layout.fillWidth: true
+          Layout.fillHeight: true
+        }
+
+        Text {
+        text: "CPU: " + cpuUsage + "%"
+        color: root.colYellow
+        font { family: root.fontFamily; pixelSize: root.fontSize; bold: true}
+        }
+
+    }
+}

.config/waybar/config

@@ -2,7 +2,7 @@
         "layer": "top",
         "position": "top",
         "reload_style_on_change": true,
-        "modules-left": ["custom/notification","clock","custom/pacman"],
+          "modules-left": ["custom/notification","clock"],
         "modules-center": ["hyprland/workspaces"],
         "modules-right": ["network","bluetooth","pulseaudio","tray"],