bla

nodemon.json

@@ -1,5 +1,5 @@
 {
   "watch": ["app.ts", "style.scss", "widget/"],
-  "ext": "ts, tsx, scss",
+  "ext": "ts, tsx, scss, css",
   "exec": "ags run --gtk4 ."
 }

style.scss

@@ -1,61 +1,97 @@
 // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
-$fg-color: #{"@theme_fg_color"};
+// Colors:
+
+$fg-color: white;
+$active-color: #bdae93;
+$hover-color: #b8bb26;
+
 $bg-color: #{"@theme_bg_color"};
 $corner-size: 7;
-$notch-color: #222;
+
+* {
+  font-size: 18px;
+}
 
 window.Bar {
   background: transparent;
+  /* background: #fbf1c7; */
+  padding: 2px;
+  margin: 5px;
+  border-radius: 40px;
+  padding-left: 10px;
+
+
   color: $fg-color;
-  /* font-weight: bold; */
-  font-size: 25px;
 
   >centerbox {
     background: $bg-color;
     border-radius: 10px;
   }
 
-  button {
-    border-radius: 8px;
-    margin: 2px;
-  }
 
   .AudioSlider {
     min-width: 200px;
   }
 
-  .Workspaces {
+}
+
+.Systray {
+  color: $fg-color;
+}
+
+.Workspaces {
+  $workspace-button-size: 8px;
+  $bar-button-border-radius: 25px;
+
+  margin: 0 60px 4px 60px;
+  margin: 0;
+
+  border: 2px solid black;
+  padding: 3px;
+  border-radius: 40px;
+  transition: all 1 linear;
+  transition-delay: 1s;
+
+  button {
+    all: unset;
+    color: $fg-color;
+    transition: min-width 0.25s ease-out;
+    margin: 1em;
+    padding: $workspace-button-size;
+    margin: $workspace-button-size;
     background-color: black;
-    margin: 0 60px 10px 60px;
-    border-radius: 0 0 20px 20px;
-
-    button {
-      all: unset;
-      color: white;
-
-      &.focused {
-        color: red;
-        border-color: blue;
-      }
-
-      label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: 10px;
-        border: 1pt solid transparent;
-      }
-
-      &:hover label {
-        background-color: blue;
-        border-color: $bg-color;
-      }
-
-      &:active label {
-        background-color: green;
-        border-color: red;
-      }
+    border-radius: calc(nth($bar-button-border-radius, 1) * 1.5);
+    /* Hide non-occupied workspaces */
+    min-height: 0;
+    min-width: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    transition: 0;
 
+    &:hover {
+      color: $fg-color;
+      background-color: $fg-color;
     }
+
+    &.active,
+    &.occupied {
+
+      opacity: 1;
+      margin: 1rem;
+      padding: $workspace-button-size;
+      margin: $workspace-button-size;
+    }
+
+    &.active {
+      min-width: 2.5rem !important;
+      min-height: 0.95rem !important;
+    }
+
+    &.occupied {
+      min-height: 0.65em;
+      min-width: 0.65rem;
+    }
+
   }
 }

widget/systray.tsx

@@ -4,7 +4,7 @@ import AstalTray from "gi://AstalTray?version=0.1"
 export default function Systray() {
   const tray = AstalTray.get_default()
 
-  return <box cssClasses={["SysTray"]} >
+  return <box cssClasses={["Systray"]} >
     {
       bind(tray, "items").as(items => items.map(item => (
         <menubutton

widget/time.tsx

@@ -1,11 +1,15 @@
 import { GLib, Variable, } from "astal"
+import { App, Gtk, Gdk } from "astal/gtk4";
 
 export default function Time({ }) {
   const time = Variable<string>("").poll(1000, () => GLib.DateTime.new_now_local().format("%H:%M")!)
 
+
   return <label
     cssName="Time"
     onDestroy={() => time.drop()}
-    label={time()} />
+    label={time()}
+  />
+
 }
 

widget/workspaces.tsx

@@ -1,5 +1,39 @@
 import Hyprland from "gi://AstalHyprland"
-import { bind, } from "astal"
+import { bind, Variable } from "astal"
+import { Gtk } from "astal/gtk4"
+
+function WorkspaceButton(ws: Hyprland.Workspace) {
+  const hypr = Hyprland.get_default()
+
+  const classNames = Variable.derive(
+    [bind(hypr, "focusedWorkspace"), bind(hypr, "clients")],
+    (fws, _) => {
+      const classes = []
+
+      const active = fws.id == ws.id
+
+      active && classes.push("active")
+
+      const occupied = hypr.get_workspace(ws.id)?.get_clients()?.length > 0;
+      occupied && classes.push("occupied");
+      return classes;
+    })
+
+  const classes = classNames()
+
+  return (
+
+    <button
+      cssClasses={classes}
+      onDestroy={() => classNames.drop()}
+      // visible={classes.as(cn => cn.includes("occupied") || cn.includes("active"))}
+      valign={Gtk.Align.CENTER}
+      halign={Gtk.Align.CENTER}
+      onClicked={() => ws.focus()}>
+    </button>
+  )
+
+}
 
 export default function Workspaces() {
   const hypr = Hyprland.get_default()
@@ -10,15 +44,11 @@ export default function Workspaces() {
         .filter(ws => !(ws.id >= -99 && ws.id < -2))
         .sort((a, b) => a.id - b.id)
         .map((ws) => (
-          <button
-            onClicked={() => ws.focus()}
-            cssClasses={bind(hypr, "focusedWorkspace").as((active) =>
-              ws === active ? ["focused"] : [],
-            )}
-          >
-            {ws.id}
-          </button>
+          WorkspaceButton(ws)
         )),
     )}
   </box >
+
 }
+
+