update dock

.config/ags/config.js

@@ -11,7 +11,7 @@ import { firstRunWelcome } from './services/messages.js';
 import { Bar, BarCornerTopleft, BarCornerTopright } from './modules/bar/main.js';
 import Cheatsheet from './modules/cheatsheet/main.js';
 // import DesktopBackground from './modules/desktopbackground/main.js';
-// import Dock from './modules/dock/main.js';
+import Dock from './modules/dock/main.js';
 import Corner from './modules/screencorners/main.js';
 import Indicator from './modules/indicators/main.js';
 import Osk from './modules/onscreenkeyboard/main.js';
@@ -50,6 +50,7 @@ const Windows = () => [
     Overview(),
     forMonitors(Indicator),
     forMonitors(Cheatsheet),
+    forMonitors(Dock),
     SideLeft(),
     SideRight(),
     forMonitors(Osk),

.config/ags/modules/dock/dock.js

@@ -2,19 +2,26 @@ const { Gtk } = imports.gi;
 import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../variables.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { EventBox } = Widget;
+const { EventBox, Button } = Widget;
 
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
 const { execAsync, exec } = Utils;
 const { Box, Revealer } = Widget;
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
+import { getAllFiles, searchIcons } from './icons.js'
+import { MaterialIcon } from '../.commonwidgets/materialicon.js';
+
+const icon_files = getAllFiles("/usr/share/icons/Tela-nord-dark/scalable/apps")
 
 const pinnedApps = [
     'firefox',
     'org.gnome.Nautilus',
 ];
 
+let isPinned = false
+let cachePath = new Map()
+
 function substitute(str) {
     const subs = [
         { from: 'code-url-handler', to: 'visual-studio-code' },
@@ -34,13 +41,50 @@ function substitute(str) {
     return str;
 }
 
+function ExclusiveWindow(client) {
+    const fn = [
+        (client) => !(client !== null && client !== undefined),
+        // Jetbrains
+        (client) => client.title.includes("win"),
+        // Vscode
+        (client) => client.title === '' && client.class === ''
+    ]
+
+    for (const item of fn) { if (item(client)) { return true } }
+    return false
+}
+
 const focus = ({ address }) => Utils.execAsync(`hyprctl dispatch focuswindow address:${address}`).catch(print);
 
+const activeMonitorId = () => {
+    let monitors = JSON.parse(exec('hyprctl monitors -j'))
+    let activeMonitor = monitors.find((e) => e["focused"] === true)
+    return activeMonitor["id"]
+}
+
 const DockSeparator = (props = {}) => Box({
     ...props,
     className: 'dock-separator',
 })
 
+const PinButton = () => Widget.Button({
+    className: 'dock-app-btn',
+    tooltipText: 'Pin Dock',
+    child: Widget.Overlay({
+        child: Widget.Box({
+            homogeneous: true,
+            className: 'dock-app-icon',
+            child: MaterialIcon('Lock', 'larger')
+        }),
+        overlays: [Widget.Box({
+            class_name: 'indicator',
+            vpack: 'end',
+            hpack: 'center',
+        })],
+    }),
+    onClicked: () => isPinned = !isPinned
+})
+
 const AppButton = ({ icon, ...rest }) => Widget.Revealer({
     attribute: {
         'workspace': 0
@@ -73,14 +117,15 @@ const AppButton = ({ icon, ...rest }) => Widget.Revealer({
     })
 });
 
-const Taskbar = () => Widget.Box({
+const Taskbar = (monitor) => Widget.Box({
     className: 'dock-apps',
     attribute: {
+        monitor: monitor,
         'map': new Map(),
         'clientSortFunc': (a, b) => {
             return a.attribute.workspace > b.attribute.workspace;
         },
-        'update': (box) => {
+        'update': (box, monitor) => {
             for (let i = 0; i < Hyprland.clients.length; i++) {
                 const client = Hyprland.clients[i];
                 if (client["pid"] == -1) return;
@@ -89,8 +134,15 @@ const Taskbar = () => Widget.Box({
                     if (appClass.includes(appName.toLowerCase()))
                         return null;
                 }
+                let appClassLower = appClass.toLowerCase()
+                let path = ''
+                if (cachePath[appClassLower]) { path = cachePath[appClassLower] }
+                else {
+                    path = searchIcons(appClass.toLowerCase(), icon_files)
+                    cachePath[appClassLower] = path
+                }
                 const newButton = AppButton({
-                    icon: appClass,
+                    icon: path,
                     tooltipText: `${client.title} (${appClass})`,
                     onClicked: () => focus(client),
                 });
@@ -100,7 +152,7 @@ const Taskbar = () => Widget.Box({
             }
             box.children = Array.from(box.attribute.map.values());
         },
-        'add': (box, address) => {
+        'add': (box, address, monitor) => {
             if (!address) { // First active emit is undefined
                 box.attribute.update(box);
                 return;
@@ -108,10 +160,17 @@ const Taskbar = () => Widget.Box({
             const newClient = Hyprland.clients.find(client => {
                 return client.address == address;
             });
-            const appClass = substitute(newClient.class);
+            if (ExclusiveWindow(newClient)) { return }
-
+            let appClass = newClient.class
+            let appClassLower = appClass.toLowerCase()
+            let path = ''
+            if (cachePath[appClassLower]) { path = cachePath[appClassLower] }
+            else {
+                path = searchIcons(appClassLower, icon_files)
+                cachePath[appClassLower] = path
+            }
             const newButton = AppButton({
-                icon: appClass,
+                icon: path,
                 tooltipText: `${newClient.title} (${appClass})`,
                 onClicked: () => focus(newClient),
             })
@@ -135,8 +194,8 @@ const Taskbar = () => Widget.Box({
         },
     },
     setup: (self) => {
-        self.hook(Hyprland, (box, address) => box.attribute.add(box, address), 'client-added')
+        self.hook(Hyprland, (box, address) => box.attribute.add(box, address, self.monitor), 'client-added')
-            .hook(Hyprland, (box, address) => box.attribute.remove(box, address), 'client-removed')
+            .hook(Hyprland, (box, address) => box.attribute.remove(box, address, self.monitor), 'client-removed')
         Utils.timeout(100, () => self.attribute.update(self));
     },
 });
@@ -149,6 +208,7 @@ const PinnedApps = () => Widget.Box({
         .filter(({ app }) => app)
         .map(({ app, term = true }) => {
             const newButton = AppButton({
+                // different icon, emm...
                 icon: app.icon_name,
                 onClicked: () => {
                     for (const client of Hyprland.clients) {
@@ -177,82 +237,87 @@ const PinnedApps = () => Widget.Box({
         }),
 });
 
-export default () => {
+export default (monitor = 0) => {
     const dockContent = Box({
         className: 'dock-bg spacing-h-5',
         children: [
             PinnedApps(),
             DockSeparator(),
-            Taskbar(),
+            Taskbar(monitor),
+            PinButton(),
         ]
     })
     const dockRevealer = Revealer({
         attribute: {
             'updateShow': self => { // I only use mouse to resize. I don't care about keyboard resize if that's a thing
-                const dockSize = [
+                // const dockSize = [
-                    dockContent.get_allocated_width(),
+                //     dockContent.get_allocated_width(),
-                    dockContent.get_allocated_height()
+                //     dockContent.get_allocated_height()
-                ]
+                // ]
-                const dockAt = [
+                // const dockAt = [
-                    SCREEN_WIDTH / 2 - dockSize[0] / 2,
+                //     SCREEN_WIDTH / 2 - dockSize[0] / 2,
-                    SCREEN_HEIGHT - dockSize[1],
+                //     SCREEN_HEIGHT - dockSize[1],
-                ];
+                // ];
-                const dockLeft = dockAt[0];
+                // const dockLeft = dockAt[0];
-                const dockRight = dockAt[0] + dockSize[0];
+                // const dockRight = dockAt[0] + dockSize[0];
-                const dockTop = dockAt[1];
+                // const dockTop = dockAt[1];
-                const dockBottom = dockAt[1] + dockSize[1];
+                // const dockBottom = dockAt[1] + dockSize[1];
-
+                //
-                const currentWorkspace = Hyprland.active.workspace.id;
+                // const currentWorkspace = Hyprland.active.workspace.id;
-                var toReveal = true;
+                // var toReveal = true;
-                const hyprlandClients = JSON.parse(exec('hyprctl clients -j'));
+                // const hyprlandClients = JSON.parse(exec('hyprctl clients -j'));
-                for (const index in hyprlandClients) {
+                // for (const index in hyprlandClients) {
-                    const client = hyprlandClients[index];
+                //     const client = hyprlandClients[index];
-                    const clientLeft = client.at[0];
+                //     const clientLeft = client.at[0];
-                    const clientRight = client.at[0] + client.size[0];
+                //     const clientRight = client.at[0] + client.size[0];
-                    const clientTop = client.at[1];
+                //     const clientTop = client.at[1];
-                    const clientBottom = client.at[1] + client.size[1];
+                //     const clientBottom = client.at[1] + client.size[1];
-
+                //
-                    if (client.workspace.id == currentWorkspace) {
+                //     if (client.workspace.id == currentWorkspace) {
-                        if (
+                //         if (
-                            clientLeft < dockRight &&
+                //             // clientLeft < dockRight &&
-                            clientRight > dockLeft &&
+                //             // clientRight > dockLeft &&
-                            clientTop < dockBottom &&
+                //             // clientTop < dockBottom &&
-                            clientBottom > dockTop
+                //             // clientBottom > dockTop
-                        ) {
+                //         ) {
-                            self.revealChild = false;
+                //             self.revealChild = false;
-                            return;
+                //             return;
-                        }
+                //         }
-                    }
+                //     }
-                }
+                // }
-                self.revealChild = true;
+                // // if (currentWorkspace === client.workspace.id) {
+                // self.revealChild = true;
+                // // }
+                self.revealChild = activeMonitorId() === monitor
             }
         },
         revealChild: false,
         transition: 'slide_up',
         transitionDuration: userOptions.animations.durationLarge,
         child: dockContent,
-        // setup: (self) => self
+        setup: (self) => self
-        //     .hook(Hyprland, (self) => self.attribute.updateShow(self))
+            .hook(Hyprland, (self) => self.attribute.updateShow(self))
-        //     .hook(Hyprland.active.workspace, (self) => self.attribute.updateShow(self))
+            .hook(Hyprland.active.workspace, (self) => self.attribute.updateShow(self))
-        //     .hook(Hyprland.active.client, (self) => self.attribute.updateShow(self))
+            .hook(Hyprland.active.client, (self) => self.attribute.updateShow(self))
-        //     .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-added')
+            .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-added')
-        //     .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-removed')
+            .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-removed')
-        // ,
+        ,
     })
     return EventBox({
         onHover: () => {
             dockRevealer.revealChild = true;
         },
-        onHoverLost: () => {
+        // onHoverLost: () => {
-            if (Hyprland.active.client.attribute.class.length === 0) return;
+        //     if (Hyprland.active.client.attribute.class.length === 0) { return }
-            dockRevealer.revealChild = false;
+        //     dockRevealer.revealChild = false;
-        },
+        // },
         child: Box({
             homogeneous: true,
-            css: 'min-height: 2px;',
+            css: 'min-height: 20px;',
             children: [
                 dockRevealer,
             ]
         }),
+        setup: self => self.on("leave-notify-event", () => { if (!isPinned) dockRevealer.revealChild = false })
     })
 }

.config/ags/modules/dock/icons.js

@@ -0,0 +1,60 @@
+const { Gio, GLib } = imports.gi
+import { lookUpIcon, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
+import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
+
+const exists = (path) => Gio.File.new_for_path(path).query_exists(null);
+
+export const levenshteinDistance = (a, b) => {
+    if (!a.length) { return b.length }
+    if (!b.length) { return a.length }
+
+    let f = Array.from(new Array(a.length + 1),
+        () => new Array(b.length + 1).fill(0))
+
+    for (let i = 0; i <= b.length; i++) { f[0][i] = i; }
+    for (let i = 0; i <= a.length; i++) { f[i][0] = i; }
+
+    for (let i = 1; i <= a.length; i++) {
+        for (let j = 1; j <= b.length; j++) {
+            if (a.charAt(i - 1) === b.charAt(j - 1)) {
+                f[i][j] = f[i-1][j-1]
+            } else {
+                f[i][j] = Math.min(f[i-1][j-1], Math.min(f[i][j-1], f[i-1][j])) + 1
+            }
+        }
+    }
+
+    return f[a.length][b.length]
+}
+
+export const getAllFiles = (dir, files = []) => {
+    const file = Gio.File.new_for_path(dir);
+    const enumerator = file.enumerate_children('standard::name,standard::type',
+        Gio.FileQueryInfoFlags.NONE, null);
+
+    for (const info of enumerator) {
+        if (info.get_file_type() === Gio.FileType.DIRECTORY) {
+            files.push(getAllFiles(`${dir}/${info.get_name()}`))
+        } else {
+            files.push(`${dir}/${info.get_name()}`)
+        }
+    }
+
+    return files.flat(1);
+}
+
+export const searchIcons = (appClass, files) => {
+    let appro = 0x3f3f3f3f
+    let path = ""
+
+    for (const item of files) {
+        let score = levenshteinDistance(item.split("/").pop(), appClass)
+
+        if (score < appro) {
+            appro = score
+            path = item
+        }
+    }
+
+    return path
+}

.config/ags/modules/dock/main.js

@@ -1,11 +1,12 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Dock from './dock.js';
 
-export default () => Widget.Window({
+export default (monitor = 0) => Widget.Window({
-    name: 'dock',
+    monitor,
-    layer: 'bottom',
+    name: `dock${monitor}`,
+    layer: 'top',
     anchor: ['bottom'],
     exclusivity: 'normal',
     visible: true,
-    child: Dock(),
+    child: Dock(monitor),
 });