changes like workspace added to qs and zen as browser

config/modules/quickshell/quickshell/Bar.qml

@@ -53,12 +53,12 @@ Scope {
                     height: clockText.height
                     radius: 3.5
 
-                    color: "white"
+                    color: Colors.backgroundAlt
 
                     anchors.centerIn: parent
                     Text {
                         id: clockText
-                        // font.pointSize: 24
+                        color: Colors.textPrimary
                         text: Clock.time
                     }
                 }

config/modules/quickshell/quickshell/Colors.qml

@@ -0,0 +1,109 @@
+pragma Singleton
+import QtQuick 2.15
+
+// Gruvbox Dark — base24 QML singleton
+// Notes:
+// - This is a template for a "base24" palette. Replace the baseNN hex values
+//   with your exact base24 values if you have them.
+// - Semantic aliases (background, textPrimary, accentBlue, etc.) map to the
+//   palette entries and make QML usage easier.
+
+// "Thanks CoPilot" - Doloro
+
+QtObject {
+    id: gruvbox
+
+    // ---- Base24 palette (base00 .. base23) ----
+    // Replace these hex values with exact ones from the base24 palette if needed.
+    property color base00: "#1d2021" // darkest background
+    property color base01: "#282828"
+    property color base02: "#32302f"
+    property color base03: "#3c3836"
+    property color base04: "#504945"
+    property color base05: "#665c54"
+    property color base06: "#7c6f64"
+    property color base07: "#928374"
+    property color base08: "#bdae93"
+    property color base09: "#d5c4a1"
+    property color base10: "#ebdbb2" // main foreground
+    property color base11: "#fbf1c7"
+    property color base12: "#cc241d" // red
+    property color base13: "#d65d0e" // orange
+    property color base14: "#d79921" // yellow
+    property color base15: "#98971a" // green
+    property color base16: "#689d6a" // aqua/green
+    property color base17: "#8ec07c" // light aqua
+    property color base18: "#458588" // blue
+    property color base19: "#b16286" // purple
+    property color base20: "#a89984" // muted
+    property color base21: "#7c6f64" // subtle
+    property color base22: "#504945"
+    property color base23: "#282828" // repeat or very dark
+
+    // ---- Semantic aliases (use these in your QML components) ----
+    property color background: base00
+    property color backgroundAlt: base01
+    property color surface: base02
+    property color surfaceAlt: base03
+
+    property color textPrimary: base10
+    property color textSecondary: base06
+    property color textDisabled: base04
+    property color border: base05
+    property color muted: base20
+
+    // accents
+    property color accentRed: base12
+    property color accentOrange: base13
+    property color accentYellow: base14
+    property color accentGreen: base15
+    property color accentAqua: base16
+    property color accentLightAqua: base17
+    property color accentBlue: base18
+    property color accentPurple: base19
+
+    // Example semantic levels for UI elements
+    property color windowBackground: background
+    property color panelBackground: surface
+    property color cardBackground: surfaceAlt
+    property color primaryText: textPrimary
+    property color secondaryText: textSecondary
+    property color highlight: accentBlue
+    property color danger: accentRed
+    property color success: accentGreen
+    property color warning: accentYellow
+
+    // ---- Helper function ----
+    // Returns a color by semantic name (string). Useful for dynamic lookups.
+    function colorFor(name) {
+        switch (name) {
+        case "background":
+            return gruvbox.background;
+        case "panelBackground":
+            return gruvbox.panelBackground;
+        case "cardBackground":
+            return gruvbox.cardBackground;
+        case "primaryText":
+            return gruvbox.primaryText;
+        case "secondaryText":
+            return gruvbox.secondaryText;
+        case "highlight":
+            return gruvbox.highlight;
+        case "danger":
+            return gruvbox.danger;
+        case "success":
+            return gruvbox.success;
+        case "warning":
+            return gruvbox.warning;
+        case "accentBlue":
+            return gruvbox.accentBlue;
+        case "accentRed":
+            return gruvbox.accentRed;
+        case "accentGreen":
+            return gruvbox.accentGreen;
+        default:
+            // fallback to primary text if unknown
+            return gruvbox.textPrimary;
+        }
+    }
+}

config/modules/quickshell/quickshell/HyprlandHelpers.qml

@@ -0,0 +1,20 @@
+// Time.qml
+pragma Singleton
+
+import Quickshell
+import QtQuick
+import Quickshell.Hyprland
+
+Singleton {
+    id: root
+
+    function getHyprlandWorkspaceById(id) {
+        for (var x of Hyprland.workspaces.values) {
+            if (x.id == id) {
+                return x;
+            }
+            print(x);
+        }
+        return null;
+    }
+}

config/modules/quickshell/quickshell/Workspaces.qml

@@ -3,15 +3,57 @@ import Quickshell
 import Quickshell.Io
 import QtQuick
 import QtQuick.Layouts
+import Quickshell.Hyprland
 
 Item {
     id: root
-    width: content.width
-    height: content.height
-    Rectangle {
-        id: content
-        width: 20
+    width: row.width
+    height: row.height
+    RowLayout {
+        id: row
         height: 15
-        color: "red"
+        Repeater {
+            id: repeater
+            model: 10
+            delegate: Item {
+                id: content
+                required property int index
+                property bool focused: HyprlandHelpers.getHyprlandWorkspaceById(index + 1).focused
+                property bool exists: HyprlandHelpers.getHyprlandWorkspaceById(index + 1) ? true : false
+                state: focused && exists ? "FOCUSED" : "NOT"
+                states: [
+                    State {
+                        name: "FOCUSED"
+                        PropertyChanges {
+                            target: content
+                            width: 10
+                        }
+                    },
+                    State {
+                        name: "NOT"
+                        PropertyChanges {
+                            target: content
+                            width: 10
+                        }
+                    }
+                ]
+                height: 15
+                Rectangle {
+                    width: parent.width
+                    height: parent.height
+                    radius: 2.5
+                    color: {
+                        if (HyprlandHelpers.getHyprlandWorkspaceById(index + 1) != null) {
+                            if (HyprlandHelpers.getHyprlandWorkspaceById(index + 1).focused) {
+                                return Colors.primaryText;
+                            }
+                            return Colors.textSecondary;
+                        } else {
+                            return Colors.textDisabled;
+                        }
+                    }
+                }
+            }
+        }
     }
 }