fix(ags overview): put highlight behind for dragndrop

devices/wim/config/ags/js/overview/clients.js

@@ -22,7 +22,7 @@ const IconStyle = client => `
 `;
 
 
-const Client = (client, active, clients) => {
+const Client = (client, active, clients, box) => {
     const wsName = String(client.workspace.name).replace('special:', '');
     const wsId = client.workspace.id;
     const addr = `address:${client.address}`;
@@ -35,6 +35,7 @@ const Client = (client, active, clients) => {
             ['toDestroy', false],
         ],
         child: WindowButton({
+            mainBox: box,
             address: client.address,
             onSecondaryClickRelease: () => {
                 execAsync(`hyprctl dispatch closewindow ${addr}`)
@@ -120,7 +121,7 @@ export function updateClients(box) {
                     ];
 
                     if (!newClient[0]) {
-                        newClient[0] = Client(client, active, clients);
+                        newClient[0] = Client(client, active, clients, box);
                         fixed.put(...newClient);
                     }
                     else {

devices/wim/config/ags/js/overview/dragndrop.js

@@ -1,4 +1,3 @@
-import App from 'resource:///com/github/Aylur/ags/app.js';
 import { EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
 import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
@@ -51,7 +50,7 @@ export const WorkspaceDrop = props => EventBox({
     },
 });
 
-export const WindowButton = ({ address, ...props } = {}) => Button({
+export const WindowButton = ({ address, mainBox, ...props } = {}) => Button({
     isButton: true,
     ...props,
     setup: self => {
@@ -66,8 +65,7 @@ export const WindowButton = ({ address, ...props } = {}) => Button({
         self.connect('drag-end', () => {
             self.get_parent().destroy();
 
-            const mainBox = App.getWindow('overview').getChild();
-            updateClients(mainBox.child);
+            updateClients(mainBox);
         });
     },
 });

devices/wim/config/ags/js/overview/main.js

@@ -1,7 +1,6 @@
 import App      from 'resource:///com/github/Aylur/ags/app.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import { Box, Overlay } from 'resource:///com/github/Aylur/ags/widget.js';
-import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import PopupWindow from '../misc/popup.js';
 import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
@@ -16,14 +15,18 @@ function update(box, highlight) {
     updateCurrentWorkspace(box, highlight);
 }
 
-// FIXME: can't drag in workspaces that are before the highlight
 // TODO: have a 'page' for each monitor, arrows on both sides to loop through
 export default () => {
     const highlighter = Highlighter();
 
     const mainBox = Box({
+        // do this for scss hierarchy
         className: 'overview',
+        css: 'all: unset',
+
         vertical: true,
+        vpack: 'center',
+        hpack: 'center',
         children: [
             Box({
                 vertical: true,
@@ -55,11 +58,25 @@ export default () => {
         onOpen: () => update(mainBox, highlighter),
 
         child: Overlay({
-            // FIXME: see if we can get rid of this timeout
-            setup: self => timeout(1, () => self.pass_through = true),
+            overlays: [highlighter, mainBox],
 
-            overlays: [highlighter],
-            child: mainBox,
+            child: Box({
+                className: 'overview',
+                css: `
+                    min-height: ${mainBox.get_allocated_height()}px;
+                    min-width: ${mainBox.get_allocated_width()}px;
+                `,
+            }),
+            // TODO: throttle his?
+            connections: [['get-child-position', (self, ch) => {
+                if (ch === mainBox) {
+                    self.child.setCss(`
+                        transition: min-height 0.2s ease, min-width 0.2s ease;
+                        min-height: ${mainBox.get_allocated_height()}px;
+                        min-width: ${mainBox.get_allocated_width()}px;
+                    `);
+                }
+            }]],
         }),
 
     });