fix: CSS transition on workspace buttons

1 files changed, 18 insertions, 9 deletions

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>
 }