feat(ags binto): move bar to 3rd monitor to fix systray

modules/ags/config/eslint.config.js

@@ -12,20 +12,11 @@ import jsdoc from 'eslint-plugin-jsdoc';
 
 
 export default tseslint.config(
+    // @ts-expect-error this works
+    eslint.configs.recommended,
+    jsdoc.configs['flat/recommended-typescript'],
+
     {
-        // @ts-expect-error this works
-        languageOptions: {
-            parserOptions: {
-                project: true,
-                tsconfigRootDir: import.meta.dirname,
-            },
-        },
-
-        extends: [
-            eslint.configs.recommended,
-            jsdoc.configs['flat/recommended-typescript'],
-        ],
-
         plugins: {
             jsdoc,
             '@stylistic': stylistic, // as typeof stylisticRules,
@@ -39,101 +30,6 @@ export default tseslint.config(
                 tags: ['param', 'arg', 'argument', 'property', 'prop'],
             }],
 
-            // Naming Conventions
-            'camelcase': 'off',
-            '@typescript-eslint/naming-convention': [
-                'error',
-                {
-                    selector: 'default',
-                    format: ['camelCase'],
-                },
-
-                // Variable names
-                {
-                    selector: 'variable',
-                    format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
-                },
-                {
-                    selector: 'variable',
-                    types: ['function'],
-                    format: ['camelCase', 'PascalCase'],
-                },
-                {
-                    selector: 'variable',
-                    modifiers: ['const'],
-                    types: ['number', 'string'],
-                    format: ['UPPER_CASE'],
-                },
-                {
-                    selector: 'variable',
-                    types: ['boolean'],
-                    format: ['PascalCase'],
-                    prefix: ['is', 'should', 'has', 'can', 'did', 'will'],
-                },
-
-                // Readonly in UPPER_CASE
-                {
-                    selector: [
-                        'classProperty',
-                        'parameterProperty',
-                        'typeProperty',
-                    ],
-                    modifiers: ['readonly'],
-                    format: ['UPPER_CASE'],
-                    leadingUnderscore: 'allow',
-                },
-
-                // Force an underscore before a private prop
-                {
-                    selector: 'memberLike',
-                    modifiers: ['private'],
-                    format: ['camelCase'],
-                    leadingUnderscore: 'require',
-                },
-
-                // Force PascalCase
-                {
-                    selector: [
-                        'typeLike',
-                        'class',
-                    ],
-                    format: ['PascalCase'],
-                },
-
-                // Don't format:
-                {
-                    selector: [
-                        'import',
-                        'objectLiteralProperty',
-                        'objectLiteralMethod',
-                        'typeProperty',
-                    ],
-                    format: null,
-                },
-                {
-                    selector: [
-                        'variable',
-                        'parameter',
-                    ],
-                    modifiers: ['unused'],
-                    format: null,
-                },
-
-                // Don't format when inside quotes
-                {
-                    selector: [
-                        'classProperty',
-                        'typeProperty',
-                        'classMethod',
-                        'typeMethod',
-                        'accessor',
-                        'enumMember',
-                    ],
-                    format: null,
-                    modifiers: ['requiresQuotes'],
-                },
-            ],
-
             // Newer settings
             '@typescript-eslint/no-extraneous-class': ['off'],
             '@typescript-eslint/no-implied-eval': ['off'],

modules/ags/config/scss/binto-widgets/bar.scss

@@ -1,27 +1,36 @@
 .bar {
-  .clock, .notif-panel {
-    padding: 4.5px 7px;
-    background-color: $bgfull;
-  }
 
-  .sys-tray {
-    menubar {
-      background-color: $bgfull;
-      padding: 2.5px;
+    .clock,
+    .notif-panel {
+        padding: 4.5px 7px;
+        background-color: $bgfull;
     }
 
-    menuitem {
-      image { color: #CBA6F7; }
-      padding: 0 2px;
+    .sys-tray {
+        menubar {
+            background-color: $bgfull;
+            padding: 2.5px;
+        }
 
-      * {
-        font-size: 25px;
-      }
+        menuitem {
+            image {
+                color: #CBA6F7;
+            }
+
+            padding: 0 2px;
+
+            * {
+                font-size: 25px;
+            }
+        }
+
+        menuitem:first-child image {
+            padding-left: 4px;
+        }
     }
-  }
 
-  .current-window {
-    padding-right: 7px;
-    background-color: $bgfull;
-  }
+    .current-window {
+        padding-right: 7px;
+        background-color: $bgfull;
+    }
 }

modules/ags/config/ts/bar/binto.ts

@@ -13,7 +13,7 @@ import SysTray from './items/systray.ts';
 const PADDING = 20;
 
 export default () => BarRevealer({
-    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Acer Technologies Acer K212HQL T3EAA0014201'),
     exclusivity: 'exclusive',
     anchor: ['bottom', 'left', 'right'],
     bar: Box({

modules/ags/config/ts/lib.ts

@@ -2,6 +2,17 @@ const Hyprland = await Service.import('hyprland');
 
 import Gdk from 'gi://Gdk?version=3.0';
 
+/* Types */
+import { Monitor } from 'types/service/hyprland';
+
+
+export const get_hyprland_monitor = (monitor: Gdk.Monitor): Monitor | undefined => {
+    const manufacturer = monitor.manufacturer?.replace(',', '');
+    const model = monitor.model?.replace(',', '');
+    const start = `${manufacturer} ${model}`;
+
+    return Hyprland.monitors.find((m) => m.description.startsWith(start));
+};
 
 export const get_hyprland_monitor_desc = (monitor: Gdk.Monitor): string => {
     const manufacturer = monitor.manufacturer?.replace(',', '');

modules/ags/config/ts/misc/popup.ts

@@ -1,6 +1,8 @@
 import Gtk from 'gi://Gtk?version=3.0';
 const Hyprland = await Service.import('hyprland');
 
+import { get_hyprland_monitor } from '../lib.ts';
+
 /* Types */
 import { Window } from 'resource:///com/github/Aylur/ags/widgets/window.js';
 import type { WindowProps } from 'types/widgets/window';
@@ -90,8 +92,8 @@ export class PopupWindow<
 
     constructor({
         transition = 'slide top',
-        on_open = () => {/**/},
-        on_close = () => {/**/},
+        on_open = () => {/**/ },
+        on_close = () => {/**/ },
 
         // Window props
         name,
@@ -143,9 +145,22 @@ export class PopupWindow<
         alloc: Gtk.Allocation,
         side = 'right' as 'left' | 'right',
     ) {
-        const width = this.get_display()
-            .get_monitor_at_point(alloc.x, alloc.y)
-            .get_geometry().width;
+        const transform = get_hyprland_monitor(
+            this.get_display().get_monitor_at_point(alloc.x, alloc.y),
+        )?.transform;
+
+        let width: number;
+
+        if (transform && (transform === 1 || transform === 3)) {
+            width = this.get_display()
+                .get_monitor_at_point(alloc.x, alloc.y)
+                .get_geometry().height;
+        }
+        else {
+            width = this.get_display()
+                .get_monitor_at_point(alloc.x, alloc.y)
+                .get_geometry().width;
+        }
 
         this.margins = [
             this.margins[0],
@@ -163,6 +178,6 @@ export class PopupWindow<
     }
 }
 
-export default <Child extends Gtk.Widget, Attr> (
+export default <Child extends Gtk.Widget, Attr>(
     props: PopupWindowProps<Child, Attr>,
 ) => new PopupWindow(props);

modules/ags/config/ts/notifications/binto.ts

@@ -11,7 +11,7 @@ export const NotifPopups = () => Window({
     name: 'notifications',
     anchor: ['bottom', 'left'],
     layer: 'overlay',
-    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Acer Technologies Acer K212HQL T3EAA0014201'),
 
     child: PopUpsWidget(),
 });
@@ -21,7 +21,7 @@ export const NotifCenter = () => PopupWindow({
     name: 'notification-center',
     anchor: ['bottom', 'right'],
     transition: 'slide bottom',
-    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Acer Technologies Acer K212HQL T3EAA0014201'),
 
     child: NotifCenterWidget(),
 });