feat: get displayed workspace client-side

packages/client-api/src/providers/glazewm/create-glazewm-provider.ts

@@ -4,6 +4,7 @@ import { GwmClient, GwmEventType, type Workspace } from 'glazewm';
 
 import { getMonitors } from '~/desktop';
 import type { GlazewmProviderConfig } from '~/user-config';
+import { getCoordinateDistance } from '~/utils';
 
 export async function createGlazewmProvider(
   _: GlazewmProviderConfig,
@@ -37,23 +38,15 @@ export async function createGlazewmProvider(
 
     // Get GlazeWM monitor that corresponds to the bar's monitor.
     const monitor = monitors.reduce((a, b) =>
-      getDistance(currentPosition, a) < getDistance(currentPosition, b)
+      getCoordinateDistance(currentPosition, a) <
+      getCoordinateDistance(currentPosition, b)
         ? a
         : b,
     );
 
     setGlazewmVariables({ workspacesOnMonitor: monitor.children });
   }
 
-  function getDistance(
-    pointA: { x: number; y: number },
-    pointB: { x: number; y: number },
-  ) {
-    return Math.sqrt(
-      Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2),
-    );
-  }
-
   return {
     get workspacesOnMonitor() {
       return glazewmVariables.workspacesOnMonitor;

packages/client-api/src/providers/komorebi/create-komorebi-provider.ts

@@ -3,8 +3,10 @@ import { createStore } from 'solid-js/store';
 
 import type { KomorebiProviderConfig } from '~/user-config';
 import { createProviderListener } from '../create-provider-listener';
+import { getMonitors } from '~/desktop';
+import { getCoordinateDistance } from '~/utils';
 
-export interface KomorebiVariables {
+export interface KomorebiProvider {
   /**
    * Workspace displayed on the current monitor.
    */
@@ -34,12 +36,18 @@ export interface KomorebiVariables {
    * Monitor that currently has focus.
    */
   focusedMonitor: KomorebiMonitor;
+
+  /**
+   * Monitor that is nearest to this Zebar window.
+   */
+  currentMonitor: KomorebiMonitor;
 }
 
 export interface KomorebiMonitor {
   id: number;
   name: string;
   deviceId: string;
+  focusedWorkspaceIndex: number;
   size: KomorebiRect;
   workAreaOffset: number | null;
   workAreaSize: KomorebiRect;
@@ -54,11 +62,16 @@ export interface KomorebiWorkspace {
   layoutFlip: KomorebiLayoutFlip | null;
   name: string;
   maximizedWindow: KomorebiWindow | null;
-  monocleWindow: KomorebiWindow | null;
-  tilingWindows: KomorebiWindow[];
+  monocleContainer: KomorebiContainer | null;
+  tilingContainers: KomorebiContainer[];
   workspacePadding: number;
 }
 
+export interface KomorebiContainer {
+  id: string;
+  windows: KomorebiWindow[];
+}
+
 export interface KomorebiWindow {
   class: string;
   exe: string;
@@ -86,30 +99,75 @@ export type KomorebiLayoutFlip = 'horizontal' | 'vertical';
 export async function createKomorebiProvider(
   config: KomorebiProviderConfig,
   owner: Owner,
-) {
+): Promise<KomorebiProvider> {
+  const { currentMonitor } = await getMonitors();
+
   const providerListener = await createProviderListener<
     KomorebiProviderConfig,
-    KomorebiVariables
+    KomorebiProvider
   >(config, owner);
 
-  const komorebiVariables = createStore({
-    workspaces: [],
-  });
-
-  createEffect(() => {
-    // const { monitors } = providerListener();
-    // @ts-ignore
-    const monitors = providerListener().monitors;
-    console.log('incoming!!!', monitors);
-    // const state = JSON.parse(monitors);
-    // console.log('state', state);
-
-    // const workspaces = state.workspaces;
-  });
+  const [komorebiVariables, setKomorebiVariables] = createStore(
+    await getVariables(),
+  );
+
+  createEffect(async () => setKomorebiVariables(await getVariables()));
+
+  async function getVariables() {
+    const state = providerListener();
+    const currentPosition = { x: currentMonitor!.x, y: currentMonitor!.y };
+
+    // Get Komorebi monitor that corresponds to the window's monitor.
+    const currentKomorebiMonitor = state.monitors.reduce((a, b) =>
+      getCoordinateDistance(currentPosition, {
+        x: a.workAreaSize.left,
+        y: a.workAreaSize.top,
+      }) <
+      getCoordinateDistance(currentPosition, {
+        x: b.workAreaSize.left,
+        y: b.workAreaSize.top,
+      })
+        ? a
+        : b,
+    );
+
+    const displayedWorkspace =
+      currentKomorebiMonitor.workspaces[
+        currentKomorebiMonitor.focusedWorkspaceIndex
+      ]!;
+
+    return {
+      displayedWorkspace,
+      focusedWorkspace: state.focusedWorkspace,
+      currentWorkspaces: currentKomorebiMonitor.workspaces,
+      allWorkspaces: state.allWorkspaces,
+      monitors: state.monitors,
+      focusedMonitor: state.focusedMonitor,
+      currentMonitor: currentKomorebiMonitor,
+    };
+  }
 
   return {
-    // get workspaces() {
-    //   return providerListener().workspaces;
-    // },
+    get displayedWorkspace() {
+      return komorebiVariables.displayedWorkspace;
+    },
+    get focusedWorkspace() {
+      return komorebiVariables.focusedWorkspace;
+    },
+    get currentWorkspaces() {
+      return komorebiVariables.currentWorkspaces;
+    },
+    get allWorkspaces() {
+      return komorebiVariables.allWorkspaces;
+    },
+    get monitors() {
+      return komorebiVariables.monitors;
+    },
+    get focusedMonitor() {
+      return komorebiVariables.focusedMonitor;
+    },
+    get currentMonitor() {
+      return komorebiVariables.currentMonitor;
+    },
   };
 }

packages/client-api/src/utils/get-coordinate-distance.ts

@@ -0,0 +1,11 @@
+/**
+ * Get distance between two points.
+ */
+export function getCoordinateDistance(
+  pointA: { x: number; y: number },
+  pointB: { x: number; y: number },
+) {
+  return Math.sqrt(
+    Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2),
+  );
+}

packages/client-api/src/utils/index.ts

@@ -4,5 +4,6 @@ export * from './clsx';
 export * from './create-getter-proxy';
 export * from './create-logger';
 export * from './create-string-scanner';
+export * from './get-coordinate-distance';
 export * from './simple-hash';
 export * from './to-css-selector';