ig this works

config/quickshell/Workspaces.qml

@@ -3,9 +3,32 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
 
-Repeater {
+ListView {
-    id: repeater
+    id: workspaceList
+    property var workspaceArray: Array.from({ length: 10}, (_, i) => ({
+	id: i + 1,
+	text: i + 1,
+	visible: Hyprland.workspaces.values.some(e => e.id === i + 1),
+	active: Hyprland.focusedMonitor.activeWorkspace.id === i + 1
+    }))
 
-    model: Hyprland.workspaces.values.map(ws => ws.id)
+    model: workspaceArray
-    property list<HyprlandWorkspace> workspaces: HyprlandIO.sortedworkspaces
+    anchors.top: parent.top
+    anchors.centerIn: parent
+    height: 500
+    width: 60
+    spacing: 2
+    delegate: Item {
+	width: Math.max((modelData.active) ? 50 : 40, 50)
+	height: 10
+	Rectangle {
+	    id: workspace
+	    width: (modelData.active) ? 50 : 40
+	    height: 10
+	    radius: height / 2
+	    border.width: 1
+	    border.color: (modelData.active) ? "#FFF8C8DC" : (modelData.visible) ? "#3399FF" : "#FFFFFF"
+            anchors.centerIn: parent
+	}
+    }
 }

config/quickshell/shell.qml

@@ -17,47 +17,63 @@ ShellRoot {
     PanelWindow {
 	property var modelData
 	
+        property var workspaceArray: Array.from({ length: 10 }, (_, i) => ({
+            id: i + 1,
+            text: i + 1,
+            visible: Hyprland.workspaces.values.some(e => e.id === i + 1),
+            active: Hyprland.focusedMonitor.activeWorkspace.id === i + 1 
+        }))
+
+
+      width: 70
+      color: "#222222"
       screen: modelData
 
       anchors {
+	  top: true;
           bottom: true;
           left: true;
-          right: true;
+          /* right: true; */
       }
 
 	height: 30;
 
 	// left
 	RowLayout {
-	    anchors.left: parent.left
+	    /* anchors.left: parent.left */
 	    anchors.top: parent.top
-	    anchors.bottom: parent.bottom
+	    /* anchors.bottom: parent.bottom */
+	    anchors.topMargin: 5;
 	    spacing: 5
 
+	    Workspaces {}
+
 	    Text {
-		text: "Proprety in Egypt"
+		text: "hi"
 	    }
 	}
 
 	// Center
 	RowLayout {
 	    anchors.centerIn: parent
-	    Text {
+	/*     Text { */
-        // now just time instead of root.time
+	/* 	color: "#FFFFFF" */
-                text: time
+        /* // now just time instead of root.time */
-            }
+        /*         text: time */
+        /*     } */
 
 	}
 	
 	// right
 	RowLayout {
-	    anchors.right: parent.right
+	    /* anchors.right: parent.right */
-	    anchors.top: parent.top
+	    /* anchors.top: parent.top */
 	    anchors.bottom: parent.bottom
 	    spacing: 5
 
 	    Text {
-		text: "Right side"
+		color: "#FFFFFF"
+		text: "Right"
 	    }
 	}