nixos-configs/config/ags/js/overview/main.js

const { Window, Box, CenterBox, Icon, Revealer } = ags.Widget;
const { Hyprland, Applications } = ags.Service;
const { Gtk } = imports.gi;

import { EventBox } from '../misc/cursorbox.js';
import { PopUp } from '../misc/popup.js';

const SCALE = 0.11;
const MARGIN = 8;
const SCREEN = {
  X: 1920,
  Y: 1200,
}
const DEFAULT_SPECIAL = {
  SIZE_X: 1524,
  SIZE_Y: 908,
  POS_X: 197,
  POS_Y: 170,
};

const WorkspaceRow = className => CenterBox({
  children: [ null, Box({ className: className }), null ],
});

const OverviewWidget = Box({
  className: 'overview',
  vertical: true,
  children: [
    WorkspaceRow('normal'),
    WorkspaceRow('special'),
  ],
  connections: [
    [Hyprland, box => {
      let childI = 0;
      box._workspaces = [].concat(box.children[childI++].centerWidget.children,
                                  box.children[childI].centerWidget.children)
                          .sort((a, b) => a._id - b._id);
      box._updateWs(box);
      box._updateApps(box);
    }],
  ],
  properties: [
    ['workspaces'],

    ['updateApps', box => {
      ags.Utils.execAsync('hyprctl clients -j')
      .then(result => {
        let clients = JSON.parse(result).filter(client => client.class)

        box._workspaces.forEach(workspace => {
          let fixed = workspace.child.child.children[0];
          let toRemove = fixed.get_children();

          clients.filter(app => app.workspace.id == workspace._id).forEach(app => {
            let active = '';
            if (app.address == Hyprland.active.client.address) {
              active = 'active';
            }

            // Special workspaces that haven't been opened yet
            // return a size of 0. We need to set them to default
            // values to show the workspace properly
            if (app.size[0] === 0) {
              app.size[0] = DEFAULT_SPECIAL.SIZE_X;
              app.size[1] = DEFAULT_SPECIAL.SIZE_Y;
              app.at[0] = DEFAULT_SPECIAL.POS_X;
              app.at[1] = DEFAULT_SPECIAL.POS_Y;
            }

            let existingApp = fixed.get_children().find(ch => ch._address == app.address);
            toRemove.splice(toRemove.indexOf(existingApp), 1);

            if (existingApp) {
              fixed.move(
                existingApp,
                app.at[0] * SCALE,
                app.at[1] * SCALE,
              );
              existingApp.child.className = `window ${active}`;
              existingApp.child.style = `min-width: ${app.size[0] * SCALE - MARGIN}px;
                                         min-height: ${app.size[1] * SCALE - MARGIN}px;
                                         font-size: ${Math.min(app.size[0] * SCALE - MARGIN,
                                                        app.size[1] * SCALE - MARGIN) - 5}px;`;
            }
            else {
              fixed.put(
                Revealer({
                  transition: 'slide_right',
                  connections: [[Hyprland, rev => {
                    rev.revealChild = true;
                  }]],
                  properties: [
                    ['address', app.address],
                    ['toDestroy', false]
                  ],
                  child: Icon({
                    className: `window ${active}`,
                    style: `min-width: ${app.size[0] * SCALE - MARGIN}px;
                            min-height: ${app.size[1] * SCALE - MARGIN}px;
                            font-size: ${Math.min(app.size[0] * SCALE - MARGIN,
                                                  app.size[1] * SCALE - MARGIN) * 0.8}px;`,
                    icon: app.class,
                  }),
                }),
                app.at[0] * SCALE,
                app.at[1] * SCALE,
              );
            }
          });
          fixed.show_all();
          toRemove.forEach(ch => {
            if (ch._toDestroy) {
              ch.destroy();
            }
            else {
              ch.revealChild = false;
              ch._toDestroy = true;
            }
          });
        });
      }).catch(print);
    }],

    ['updateWs', box => {
      Hyprland.workspaces.forEach(ws => {
        let currentWs = box._workspaces.find(ch => ch._id == ws.id);
        if (!currentWs) {
          var childI = 0;
          if (ws.id < 0) {
            childI = 1;
          }

          currentWs = Revealer({
            transition: 'slide_right',
            properties: [
              ['id', ws.id],
            ],
            connections: [[Hyprland, box => {
              let active = Hyprland.active.workspace.id === box._id;
              box.child.child.toggleClassName('active', active);
              box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active;
            }]],
            child: EventBox({
              tooltipText: `Workspace: ${ws.id}`,
              child: Box({
                className: 'workspace',
                style: `min-width: ${SCREEN.X * SCALE}px;
                        min-height: ${SCREEN.Y * SCALE}px;`,
                child: ags.Widget({
                  type: Gtk.Fixed,
                }),
              }),
            }),
          });
          box.children[childI].centerWidget.add(currentWs);
        }
      });
      box.show_all();

      // Make sure the order is correct
      box._workspaces.forEach((workspace, i) => {
        workspace.get_parent().reorder_child(workspace, i)
      });
    }],
  ],
});

export const Overview = Window({
  name: 'overview',
  layer: 'overlay',
  child: PopUp({
    name: 'overview',
    transition: 'crossfade',
    child: OverviewWidget,
  }),
});