From 48074e7168bbb8d833b2d7a30175b6385cdc8745 Mon Sep 17 00:00:00 2001
From: Mora Unie Youer <mora_unie_youer@riseup.net>
Date: Sun, 2 Mar 2025 22:42:23 +0300
Subject: fix: CSS transition on workspace buttons

---
 style.scss         |  9 +++++----
 widget/bar/Bar.tsx | 27 ++++++++++++++++++---------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/style.scss b/style.scss
index 444a5da..be326a8 100644
--- a/style.scss
+++ b/style.scss
@@ -26,7 +26,7 @@ box.Workspaces {
     padding: 0;
     background: #ccc;
 
-    transition: min-width 2s ease-in-out;
+    transition: min-width .1s ease;
 
     &.active {
       min-width: 25px;
@@ -62,16 +62,17 @@ box.AudioVolume {
   }
 
   scale {
+    margin: 0;
     padding: 0;
   }
 
   trough {
-    border-radius: 15px;
-    min-height: 10px;
+    border-radius: 20px;
   }
 
   highlight {
-    border-radius: 0;
+    border-radius: 20px;
+    min-height: 10px;
   }
 
   slider {
diff --git a/widget/bar/Bar.tsx b/widget/bar/Bar.tsx
index aa96db1..41dc0e2 100644
--- a/widget/bar/Bar.tsx
+++ b/widget/bar/Bar.tsx
@@ -31,15 +31,25 @@ function focusWorkspace(idx: number) {
 
 type WorkspaceButtonArguments = {
   idx: number,
-  isActive: boolean,
-  isFocused: boolean,
+  workspaces: Variable<NiriWorkspace[]>,
 };
 
 function WorkspaceButton(args: WorkspaceButtonArguments) {
-  const classes: string[] = [];
-  args.isActive && classes.push("active");
-  args.isFocused && classes.push("focused");
-  return <button cssClasses={classes} onClicked={() => focusWorkspace(args.idx)} />
+  const classes: Variable<string[]> = Variable.derive([args.workspaces], workspaces => {
+    const classes: string[] = [];
+    const workspace = workspaces.find(v => v.idx == args.idx);
+
+    workspace !== undefined && classes.push("used");
+    workspace?.is_active && classes.push("active");
+    workspace?.is_focused && classes.push("focused");
+
+    return classes;
+  });
+
+  // TODO: this solution make me to have 9 workspace buttons no matter what
+  // I'd like to dynamically hide/show some of them, but I guess this will cause rerenders
+  // Maybe I just need to transform them in CSS
+  return <button cssClasses={classes()} onClicked={() => focusWorkspace(args.idx)} />
 }
 
 type WorkspacesArguments = {
@@ -52,10 +62,9 @@ function Workspaces(args: WorkspacesArguments) {
   const workspaces: Variable<NiriWorkspace[]> = Variable(getWorkspacesByOutput(args.connector))
     .poll(1000, () => getWorkspacesByOutput(args.connector));
 
-  // BUG: on workspace change there's no CSS transition
-  // I guess it is due to rerender here
+  const workspaceIndices = [...Array(10).keys()];
   return <box cssClasses={["Workspaces"]}>
-    {workspaces(v => v.map(workspace => <WorkspaceButton idx={workspace.idx} isActive={workspace.is_active} isFocused={workspace.is_focused} />))}
+    {workspaceIndices.map(i => <WorkspaceButton idx={i + 1} workspaces={workspaces} />)}
   </box>
 }
 
-- 
cgit v1.2.3-70-g09d2