[Scripts] Fixes for vpn script

README.md

@@ -9,10 +9,10 @@ For my neovim config, see [here](https://git.janishutz.com/janishutz/nvim)
 
 ![screenshot of desktop with 2 screens](./assets/screenshot.png)
 
-I am currently working on redoing my keybinds for Hyprland, in what I call `hyprmode`:
+I am currently working on redoing my keybinds for Hyprland, in what I call `hyprvim`:
 They are going to use submaps and will be significantly different, yet still familiar.
 This will enable me to have many more keybinds with reasonable starter bindings.
-I will also update Astal to have a mode indicator if `hyprmode` is enabled.
+I will also update Astal to have a mode indicator if `hyprvim` is enabled.
 
 ## Features
 - Astal4 based Status Bar and Quick Actions menu

build/helpers/generateTheme.js

@@ -9,7 +9,9 @@ const renderColourAsHex = util.renderColourAsHex;
 //          │   Theme generator (returns theme as object)   │
 //          ╰───────────────────────────────────────────────╯
 // ───────────────────────────────────────────────────────────────────
-module.exports.generateTheme = ( theme, wallpaper, lockpaper, palette ) => {
+module.exports.generateTheme = (
+    theme, wallpaper, lockpaper, palette
+) => {
     return {
         'wallpaper-path': wallpaper,
         'lockpaper-path': lockpaper,
@@ -49,14 +51,30 @@ module.exports.generateTheme = ( theme, wallpaper, lockpaper, palette ) => {
         'colour-accent-rgba-007': renderColourAsRGBA( palette[ 0 ], 0.07 ),
         'colour-accent-hyprland': util.renderColourAsRGBAHex( palette[ 0 ], 0.8 ),
         // ───────────────────────────────────────────────────────────────────
-        'colour-accent-gradient-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 2, gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 3, gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-4-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 4, gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-5-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 5, gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-inverse-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-inverse-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
-        'colour-accent-gradient-inverse-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
+        'colour-accent-gradient-1-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 1, gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-2-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 2, gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-3-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 3, gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-4-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 4, gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-5-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 5, gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-inverse-1-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 1, 1 / gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-inverse-2-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 1, 1 / gradientMultipliers[ theme ]
+        ) ),
+        'colour-accent-gradient-inverse-3-hex': renderColourAsHex( util.getGradientColour(
+            palette[ 0 ], 1, 1 / gradientMultipliers[ theme ]
+        ) ),
 
         // ── Secondary accent ─────────────────────────────────────────────
         'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
@@ -154,9 +172,9 @@ module.exports.generateTheme = ( theme, wallpaper, lockpaper, palette ) => {
         // ┌                                               ┐
         // │           Path to this repo on disk           │
         // └                                               ┘
-        'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
-    }
-}
+        'path-to-dotfiles': __dirname.slice( 0, __dirname.length - 5 ),
+    };
+};
 
 
 // ───────────────────────────────────────────────────────────────────
@@ -171,74 +189,265 @@ const gradientMultipliers = {
     'light': 1.1,
     'bright': 1.15,
     'test': 0.75
-}
+};
 const colours = {
-    foreground: {
-        'nordic': [ 200, 220, 255 ],
-        'deep-dark': [ 230, 230, 230 ],
-        'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
-        'light': [ 40, 40, 40 ],
-        'bright': [ 0, 0, 0 ],
-        'test': [ 0, 0, 0 ],
+    'foreground': {
+        'nordic': [
+            200,
+            220,
+            255
+        ],
+        'deep-dark': [
+            230,
+            230,
+            230
+        ],
+        'material': [
+            255,
+            255,
+            255
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            40,
+            40,
+            40
+        ],
+        'bright': [
+            0,
+            0,
+            0
+        ],
+        'test': [
+            0,
+            0,
+            0
+        ],
     },
     'foreground-accent': {
-        'nordic': [ 255, 255, 255 ],
-        'deep-dark': [ 255, 255, 255 ],
-        'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
-        'light': [ 0, 0, 0 ],
-        'bright': [ 50, 50, 50 ],
-        'test': [ 0, 0, 0 ],
+        'nordic': [
+            255,
+            255,
+            255
+        ],
+        'deep-dark': [
+            255,
+            255,
+            255
+        ],
+        'material': [
+            200,
+            200,
+            200
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            0,
+            0,
+            0
+        ],
+        'bright': [
+            50,
+            50,
+            50
+        ],
+        'test': [
+            0,
+            0,
+            0
+        ],
     },
-    background: {
-        'nordic': [ 10, 10, 15 ],
-        'deep-dark': [ 20, 20, 20 ],
-        'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
-        'light': [ 230, 230, 230 ],
-        'bright': [ 255, 255, 255 ],
-        'test': [ 255, 255, 255 ],
+    'background': {
+        'nordic': [
+            10,
+            10,
+            15
+        ],
+        'deep-dark': [
+            20,
+            20,
+            20
+        ],
+        'material': [
+            30,
+            30,
+            30
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            230,
+            230,
+            230
+        ],
+        'bright': [
+            255,
+            255,
+            255
+        ],
+        'test': [
+            255,
+            255,
+            255
+        ],
     },
     'background-alternative': {
-        'nordic': [ 20, 20, 25 ],
-        'deep-dark': [ 30, 30, 30 ],
-        'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator
-        'light': [ 210, 210, 210 ],
-        'bright': [ 230, 230, 230 ],
-        'test': [ 255, 255, 0 ] // brown
+        'nordic': [
+            20,
+            20,
+            25
+        ],
+        'deep-dark': [
+            30,
+            30,
+            30
+        ],
+        'material': [
+            40,
+            40,
+            40
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            210,
+            210,
+            210
+        ],
+        'bright': [
+            230,
+            230,
+            230
+        ],
+        'test': [
+            255,
+            255,
+            0
+        ] // brown
     },
     'background-tertiary': {
-        'nordic': [ 0, 0, 0 ],
-        'deep-dark': [ 45, 45, 45 ],
-        'material': [ 0, 0, 0 ], // TODO: Will be calculated by material theme generator
-        'light': [ 180, 180, 180 ],
-        'bright': [ 200, 200, 200 ],
-        'test': [ 255, 0, 255 ] // purple
+        'nordic': [
+            0,
+            0,
+            0
+        ],
+        'deep-dark': [
+            45,
+            45,
+            45
+        ],
+        'material': [
+            0,
+            0,
+            0
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            180,
+            180,
+            180
+        ],
+        'bright': [
+            200,
+            200,
+            200
+        ],
+        'test': [
+            255,
+            0,
+            255
+        ] // purple
     },
-    shadow: {
-        'nordic': [ 0, 0, 2 ],
-        'deep-dark': [ 40, 40, 40 ],
-        'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
-        'light': [ 190, 190, 190 ],
-        'bright': [ 150, 150, 150 ],
-        'test': [ 120, 0, 0 ] // dark red
+    'shadow': {
+        'nordic': [
+            0,
+            0,
+            2
+        ],
+        'deep-dark': [
+            40,
+            40,
+            40
+        ],
+        'material': [
+            30,
+            30,
+            30
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            190,
+            190,
+            190
+        ],
+        'bright': [
+            150,
+            150,
+            150
+        ],
+        'test': [
+            120,
+            0,
+            0
+        ] // dark red
     },
-    inactive: {
-        'nordic': [ 200, 200, 200 ],
-        'deep-dark': [ 200, 200, 200 ],
-        'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
-        'light': [ 65, 65, 65 ],
-        'bright': [ 60, 60, 60 ],
-        'test': [ 150, 150, 150 ]
+    'inactive': {
+        'nordic': [
+            200,
+            200,
+            200
+        ],
+        'deep-dark': [
+            200,
+            200,
+            200
+        ],
+        'material': [
+            200,
+            200,
+            200
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            65,
+            65,
+            65
+        ],
+        'bright': [
+            60,
+            60,
+            60
+        ],
+        'test': [
+            150,
+            150,
+            150
+        ]
     },
     'inactive-background': {
-        'nordic': [ 0, 0, 0 ],
-        'deep-dark': [ 0, 0, 0 ],
-        'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
-        'light': [ 80, 80, 80 ],
-        'bright': [ 60, 60, 60 ],
-        'test': [ 60, 60, 60 ]
+        'nordic': [
+            0,
+            0,
+            0
+        ],
+        'deep-dark': [
+            0,
+            0,
+            0
+        ],
+        'material': [
+            255,
+            255,
+            255
+        ], // TODO: Will be calculated by material theme generator
+        'light': [
+            80,
+            80,
+            80
+        ],
+        'bright': [
+            60,
+            60,
+            60
+        ],
+        'test': [
+            60,
+            60,
+            60
+        ]
     }
-}
-
+};
 const fonts = {
     'primary': {
         'nordic': 'Comfortaa',
@@ -261,20 +470,18 @@ const fonts = {
         'light': 'Jetbrains Mono',
         'bright': 'Jetbrains Mono',
     }
-}
-
+};
 const iconTheme = {
     'nordic': 'Candy',
     'deep-dark': 'Candy',
     'material': 'Candy',
     'light': 'Candy',
     'bright': 'Candy'
-}
-
+};
 const yaziThemes = {
     'nordic': 'tokyo-night',
     'deep-dark': 'vscode-dark-modern',
     'material': 'dracula',
     'light': 'vscode-light-modern',
     'bright': 'vscode-light-modern',
-}
+};

build/themalizer.js

@@ -1,11 +1,14 @@
 const fs = require( 'fs' );
+
 const path = require( 'path' );
 
 const data = '' + fs.readFileSync( '/usr/share/themes/Material-Black-Blueberry/gtk-4.0/gtk.css' );
 
 let lineNumber = 1;
+
 const indexer = {};
-for (let i = 0; i < data.length; i++) {
+
+for ( let i = 0; i < data.length; i++ ) {
     const char = data[i];
 
     if ( char === '\n' ) {
@@ -13,17 +16,22 @@ for (let i = 0; i < data.length; i++) {
     } else if ( char === '#' ) {
         const extract = data.substring( i );
         const col = extract.slice( 0, extract.indexOf( '\n' ) );
+
         if ( !indexer[ col ] ) {
             indexer[ col ] = [];
         }
+
         indexer[ col ].push( lineNumber );
     } else if ( char === 'r' ) {
         const extract = data.substring( i );
+
         if ( extract.slice( 0, 3 ) === 'rgb' ) {
             const col = extract.slice( 0, extract.indexOf( '\n' ) );
+
             if ( !indexer[ col ] ) {
                 indexer[ col ] = [];
             }
+
             indexer[ col ].push( lineNumber );
         }
     }
@@ -32,7 +40,8 @@ for (let i = 0; i < data.length; i++) {
 
 // Output
 const keys = Object.keys( indexer );
-for (let i = 0; i < keys.length; i++) {
+
+for ( let i = 0; i < keys.length; i++ ) {
     const element = keys[i];
 
     if ( element.length <= 25 ) {

config/astal/app.ts

@@ -1,26 +1,31 @@
-import { App } from "astal/gtk4"
-import style from "./style.scss"
-import Bar from "./components/bar/Bar";
-import AstalHyprland from "gi://AstalHyprland?version=0.1";
-import { hyprToGdk } from "./util/hyprland";
-import Brightness from "./util/brightness";
+import {
+    App
+} from 'astal/gtk4';
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import Bar from './components/bar/Bar';
+import Brightness from './util/brightness';
+import {
+    hyprToGdk
+} from './util/hyprland';
+import style from './style.scss';
 
-App.start({
-    instanceName: "runner",
-    css: style,
-    main() {
+App.start( {
+    'instanceName': 'runner',
+    'css': style,
+    main () {
         const hypr = AstalHyprland.get_default();
         const bars = new Map<number, string>();
 
         const barCreator = ( monitor: AstalHyprland.Monitor ) => {
             const gdkMonitor = hyprToGdk( monitor );
+
             if ( gdkMonitor ) {
                 print( 'Bar added for screen ' + monitor.get_id() );
                 bars.set( monitor.get_id(), Bar.BarLauncher( gdkMonitor ) );
             }
-        }
+        };
 
-        for (const monitor of hypr.monitors) {
+        for ( const monitor of hypr.monitors ) {
             barCreator( monitor );
         }
 
@@ -30,14 +35,17 @@ App.start({
 
         hypr.connect( 'monitor-removed', ( _, monitor ) => {
             const windowName = bars.get( monitor );
+
             if ( windowName ) {
                 const win = App.get_window( windowName );
+
                 if ( win ) {
                     App.toggle_window( windowName );
                     win.set_child( null );
                     App.remove_window( win );
                     print( 'Bar removed for screen', monitor );
                 }
+
                 bars.delete( monitor );
             }
         } );
@@ -49,7 +57,7 @@ App.start({
         // }
         // Launcher();
     },
-    requestHandler(request, res) {
+    requestHandler ( request, res ) {
         const args = request.trimStart().split( ' ' );
 
         if ( args[ 0 ] === 'notifier' ) {
@@ -60,6 +68,7 @@ App.start({
         } else if ( args[ 0 ] === 'brightness' ) {
             try {
                 const brightness = Brightness.get_default();
+
                 if ( brightness.screenAvailable ) {
                     if ( args[ 1 ] === 'increase' ) {
                         brightness.screen += args.length > 1 ? parseInt( args[ 2 ] ) / 100 : 1;
@@ -70,12 +79,15 @@ App.start({
                             brightness.screen = parseInt( args[ 2 ] ) / 100;
                         } else {
                             res( 'Argument <brightness> unspecified' );
+
                             return;
                         }
                     } else {
                         res( 'Unknown command ' + args[ 1 ] );
+
                         return;
                     }
+
                     res( 'Ok' );
                 } else {
                     res( 'No controllable screen available' );
@@ -99,5 +111,4 @@ App.start({
         //     }
         // }
     },
-})
-
+} );

config/astal/components/QuickActions/QuickActions.tsx

@@ -1,44 +1,58 @@
-import { Gtk } from "astal/gtk4";
-import Power from "./modules/Power";
-import Audio from "./modules/Audio/Audio";
-import Bluetooth from "./modules/Bluetooth/Bluetooth";
-import Brightness from "./modules/Brightness/Brightness";
-import Player from "./modules/Player/Player";
-import { BatteryBox } from "./modules/Battery";
-import { exec } from "astal";
-import Network from "./modules/Networking/Network";
+import Audio from './modules/Audio/Audio';
+import {
+    BatteryBox
+} from './modules/Battery';
+import Bluetooth from './modules/Bluetooth/Bluetooth';
+import Brightness from './modules/Brightness/Brightness';
+import {
+    Gtk
+} from 'astal/gtk4';
+import Network from './modules/Networking/Network';
+import Player from './modules/Player/Player';
+import Power from './modules/Power';
+import SysTray from './modules/SysTray';
+import {
+    exec
+} from 'astal';
 
 const QuickActions = () => {
-    const popover = new Gtk.Popover({ cssClasses: ["quick-actions-wrapper"] });
-    popover.set_child(renderQuickActions());
+    const popover = new Gtk.Popover( {
+        'cssClasses': [ 'quick-actions-wrapper' ]
+    } );
+
+    popover.set_child( renderQuickActions() );
+
     return popover;
 };
 
 const renderQuickActions = () => {
-    const user = exec("/bin/sh -c whoami");
-    const profile = exec("/bin/fish -c get-profile-picture");
-    const cwd = exec("pwd");
+    const user = exec( '/bin/sh -c whoami' );
+    const profile = exec( '/bin/fish -c get-profile-picture' );
+    const cwd = exec( 'pwd' );
     const um = Power.UserMenu();
 
     return (
-        <box visible cssClasses={["quick-actions", "popover-box"]} vertical>
+        <box visible cssClasses={[
+            'quick-actions',
+            'popover-box'
+        ]} vertical>
             <centerbox
                 startWidget={
                     <button
                         onClicked={() => um.popup()}
-                        cssClasses={["stealthy-button"]}
+                        cssClasses={[ 'stealthy-button' ]}
                         child={
                             <box>
                                 {um}
                                 <Gtk.Frame
-                                    cssClasses={["avatar-icon"]}
+                                    cssClasses={[ 'avatar-icon' ]}
                                     child={
                                         <image
                                             file={
-                                                profile !== ""
+                                                profile !== ''
                                                     ? profile
-                                                    : cwd +
-                                                    "/no-avatar-icon.jpg"
+                                                    : cwd
+                                                    + '/no-avatar-icon.jpg'
                                             }
                                         ></image>
                                     }
@@ -53,6 +67,7 @@ const renderQuickActions = () => {
                         hexpand={false}
                     >
                         <BatteryBox></BatteryBox>
+                        <SysTray.SystemTray></SysTray.SystemTray>
                         <Power.Power></Power.Power>
                     </box>
                 }

config/astal/components/QuickActions/modules/Brightness/Brightness.tsx

@@ -7,6 +7,7 @@ const BrightnessModule = () => {
     const setBrightness = (value: number) => {
         brightness.screen = value;
     }
+
     return (
         <box visible={bind(brightness, 'screenAvailable')}>
             <image iconName={"brightness-high-symbolic"}></image>

config/astal/components/QuickActions/modules/Power.tsx

@@ -1,48 +1,56 @@
-import { exec } from "astal";
-import { Gtk } from "astal/gtk4";
+import {
+    exec
+} from 'astal';
+import {
+    Gtk
+} from 'astal/gtk4';
 
 const PowerMenu = (): Gtk.Popover => {
-    const popover = new Gtk.Popover({ cssClasses: ["PowerMenu"] });
+    const popover = new Gtk.Popover( {
+        'cssClasses': [ 'PowerMenu' ]
+    } );
 
     const powerMenuBox = () => {
         return (
             <box>
                 <button
-                    cssClasses={["power-button"]}
+                    cssClasses={[ 'power-button' ]}
                     child={
-                        <image iconName={"system-shutdown-symbolic"}></image>
+                        <image iconName={'system-shutdown-symbolic'}></image>
                     }
-                    onClicked={() => exec("/bin/sh -c 'shutdown now'")}
+                    onClicked={() => exec( '/bin/sh -c \'shutdown now\'' )}
                 ></button>
                 <button
-                    cssClasses={["power-button"]}
-                    child={<image iconName={"system-reboot-symbolic"}></image>}
-                    onClicked={() => exec("/bin/sh -c 'reboot'")}
+                    cssClasses={[ 'power-button' ]}
+                    child={<image iconName={'system-reboot-symbolic'}></image>}
+                    onClicked={() => exec( '/bin/sh -c \'reboot\'' )}
                 ></button>
                 <button
-                    cssClasses={["power-button"]}
-                    child={<image iconName={"system-suspend-symbolic"}></image>}
-                    onClicked={() => exec("/bin/sh -c 'systemctl suspend'")}
+                    cssClasses={[ 'power-button' ]}
+                    child={<image iconName={'system-suspend-symbolic'}></image>}
+                    onClicked={() => exec( '/bin/sh -c \'systemctl suspend\'' )}
                 ></button>
             </box>
         );
     };
 
-    popover.set_child(powerMenuBox());
+    popover.set_child( powerMenuBox() );
+
     return popover;
 };
 
 const Power = () => {
     const pm = PowerMenu();
+
     return (
         <button
             widthRequest={0}
             hexpand={false}
             vexpand={false}
-            cssClasses={["power-menu-button"]}
+            cssClasses={[ 'power-menu-button' ]}
             child={
                 <box>
-                    <image iconName={"system-shutdown-symbolic"}></image>
+                    <image iconName={'system-shutdown-symbolic'}></image>
                     {pm}
                 </box>
             }
@@ -58,24 +66,24 @@ const UserMenu = (): Gtk.Popover => {
         return (
             <box>
                 <button
-                    cssClasses={["power-button"]}
+                    cssClasses={[ 'power-button' ]}
                     child={
-                        <image iconName={"system-lock-screen-symbolic"}></image>
+                        <image iconName={'system-lock-screen-symbolic'}></image>
                     }
-                    onClicked={() => exec("/bin/sh -c 'hyprlock'")}
+                    onClicked={() => exec( '/bin/sh -c \'hyprlock\'' )}
                 ></button>
                 <button
-                    cssClasses={["power-button"]}
-                    child={<image iconName={"system-log-out-symbolic"}></image>}
-                    onClicked={() =>
-                        exec("/bin/sh -c 'hyprctl dispatch exit 0'")
+                    cssClasses={[ 'power-button' ]}
+                    child={<image iconName={'system-log-out-symbolic'}></image>}
+                    onClicked={() => exec( '/bin/sh -c \'hyprctl dispatch exit 0\'' )
                     }
                 ></button>
             </box>
         );
     };
 
-    popover.set_child(powerMenuBox());
+    popover.set_child( powerMenuBox() );
+
     return popover;
 };
 

config/astal/components/QuickActions/modules/SysTray.tsx

@@ -0,0 +1,88 @@
+import AstalTray from 'gi://AstalTray';
+import {
+    GObject
+} from 'astal';
+import {
+    Gtk
+} from 'astal/gtk4';
+
+const SYNC = GObject.BindingFlags.SYNC_CREATE;
+
+const SysTray = () => {
+    const trayBox = new Gtk.Box( {
+        'cssClasses': [ '' ]
+    } );
+    const tray = AstalTray.get_default();
+    const trayItems = new Map<string, Gtk.MenuButton>();
+    const trayAddedHandler = tray.connect( 'item-added', ( _, id ) => {
+        const item = tray.get_item( id );
+        const popover = Gtk.PopoverMenu.new_from_model( item.menu_model );
+        const icon = new Gtk.Image();
+        const button = new Gtk.MenuButton( {
+            popover,
+            'child': icon,
+            'cssClasses': [ 'tray-item' ],
+        } );
+
+        item.bind_property(
+            'gicon', icon, 'gicon', SYNC
+        );
+        popover.insert_action_group( 'dbusmenu', item.action_group );
+        item.connect( 'notify::action-group', () => {
+            popover.insert_action_group( 'dbusmenu', item.action_group );
+        } );
+
+        trayItems.set( id, button );
+        trayBox.append( button );
+    } );
+    const trayRemovedHandler = tray.connect( 'item-removed', ( _, id ) => {
+        const button = trayItems.get( id );
+
+        if ( button ) {
+            trayBox.remove( button );
+            button.run_dispose();
+            trayItems.delete( id );
+        }
+    } );
+
+    trayBox.connect( 'destroy', () => {
+        tray.disconnect( trayAddedHandler );
+        tray.disconnect( trayRemovedHandler );
+    } );
+
+    return trayBox;
+};
+
+const TrayPopover = () => {
+    const popover = new Gtk.Popover( {
+        'cssClasses': [ 'TrayPopover' ]
+    } );
+
+    popover.set_child( SysTray() );
+
+    return popover;
+};
+
+const SystemTray = () => {
+    const systray = TrayPopover();
+
+    return (
+        <button
+            widthRequest={0}
+            hexpand={false}
+            vexpand={false}
+            cssClasses={[ 'power-menu-button' ]}
+            child={
+                <box>
+                    <image iconName={'systemtray'}></image>
+                    {systray}
+                </box>
+            }
+            onClicked={() => systray.popup()}
+        />
+    );
+};
+
+export default {
+    SystemTray
+};

config/astal/components/bar/Bar.tsx

@@ -1,19 +1,30 @@
-import { App, Astal, Gdk, Gtk } from "astal/gtk4";
-import Hyprland from "./modules/Hyprland";
-import Calendar from "./modules/Calendar";
-import QuickView from "./modules/QuickView";
-import SystemInfo from "./modules/SystemInfo";
-import { CenterBox } from "astal/gtk4/widget";
+import {
+    App, Astal, Gdk, Gtk
+} from 'astal/gtk4';
+import Calendar from './modules/Calendar';
+import {
+    CenterBox
+} from 'astal/gtk4/widget';
+import Hyprland from './modules/Hyprland';
+import QuickView from './modules/QuickView';
+import SystemInfo from './modules/SystemInfo';
 
-const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } ) => {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+const Bar = ( {
+    gdkmonitor, name
+}: {
+    'gdkmonitor': Gdk.Monitor,
+    'name': string
+} ) => {
+    const {
+        TOP, LEFT, RIGHT
+    } = Astal.WindowAnchor;
 
     return (
         <window
             gdkmonitor={gdkmonitor}
-            cssClasses={["Bar"]}
+            cssClasses={[ 'Bar' ]}
             name={name}
-            namespace={"bar"}
+            namespace={'bar'}
             exclusivity={Astal.Exclusivity.EXCLUSIVE}
             anchor={TOP | LEFT | RIGHT}
             visible
@@ -26,8 +37,8 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
                             hexpand
                             halign={Gtk.Align.START}
                         >
+                            <Hyprland.ModeStatus />
                             <Calendar.Time />
-                            <SystemInfo.SystemInfo />
                             <Hyprland.Workspace />
                         </box>
                     }
@@ -36,9 +47,9 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
                         <box
                             hexpand
                             halign={Gtk.Align.END}
-                            cssClasses={["BarRight"]}
+                            cssClasses={[ 'BarRight' ]}
                         >
-                            <Hyprland.SysTray />
+                            <SystemInfo.SystemInfo />
                             <QuickView.QuickView />
                         </box>
                     }
@@ -48,21 +59,24 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
     );
 };
 
-const cliHandler = (args: string[]): string => {
-    return "Not implemented";
+const cliHandler = ( args: string[] ): string => {
+    console.debug( args );
+
+    return 'Not implemented';
 };
 
 const BarLauncher = ( monitor: Gdk.Monitor ) => {
-    const windowName = `bar-${monitor.get_connector()}`
+    const windowName = `bar-${ monitor.get_connector() }`;
+
     const createBar = () => {
-        return <Bar gdkmonitor={monitor} name={windowName}></Bar>
-    }
+        return <Bar gdkmonitor={monitor} name={windowName}></Bar>;
+    };
 
     // Actually start the bar
     createBar();
 
     return windowName;
-}
+};
 
 export default {
     BarLauncher,

config/astal/components/bar/bar.scss

@@ -12,6 +12,19 @@ window.Bar {
   /*     margin: 8px; */
   /* } */
   .mode-status {
+    color: white;
+    background-color: #00002dff;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 5px;
+    border-radius: 20px;
+    font-family: $monospace-font;
+
+    &.command-mode {
+      background-color: darkslategray;
+      color: white;
+    }
+
     &.windowing-mode {
       background-color: darkslategray;
       color: white;
@@ -85,6 +98,7 @@ window.Bar {
   .time {
     min-width: 11rem;
     padding: 3px;
+
     & button {
       box-shadow: none;
       padding: 0;

config/astal/components/bar/modules/Hyprland.tsx

@@ -1,76 +1,34 @@
-import AstalTray from "gi://AstalTray";
-import { bind, GObject } from "astal";
-import AstalHyprland from "gi://AstalHyprland";
-import { Gtk } from "astal/gtk4";
-import Pango from "gi://Pango?version=1.0";
+import {
+    bind,
+    exec,
+    readFile
+} from 'astal';
+import AstalHyprland from 'gi://AstalHyprland';
+import {
+    Gtk
+} from 'astal/gtk4';
+import Pango from 'gi://Pango?version=1.0';
 
 const hypr = AstalHyprland.get_default();
-const SYNC = GObject.BindingFlags.SYNC_CREATE;
-
-const SysTray = () => {
-    const trayBox = new Gtk.Box({ cssClasses: ["bar-button"] });
-    const tray = AstalTray.get_default();
-
-    const trayItems = new Map<string, Gtk.MenuButton>();
-    const trayAddedHandler = tray.connect("item-added", (_, id) => {
-        const item = tray.get_item(id);
-        const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
-        const icon = new Gtk.Image();
-        const button = new Gtk.MenuButton({
-            popover,
-            child: icon,
-            cssClasses: ["tray-item"],
-        });
-
-        item.bind_property("gicon", icon, "gicon", SYNC);
-        popover.insert_action_group("dbusmenu", item.action_group);
-        item.connect("notify::action-group", () => {
-            popover.insert_action_group("dbusmenu", item.action_group);
-        });
-
-        trayItems.set(id, button);
-        trayBox.append(button);
-    });
-
-    const trayRemovedHandler = tray.connect("item-removed", (_, id) => {
-        const button = trayItems.get(id);
-        if (button) {
-            trayBox.remove(button);
-            button.run_dispose();
-            trayItems.delete(id);
-        }
-    });
-
-    trayBox.connect("destroy", () => {
-        tray.disconnect(trayAddedHandler);
-        tray.disconnect(trayRemovedHandler);
-    });
-
-    return trayBox;
-};
 
 const Workspace = () => {
     return (
         <box>
-            {bind(hypr, "workspaces").as(wss =>
-                wss
-                    .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
-                    .sort((a, b) => a.id - b.id)
-                    .map(ws => (
+            {bind( hypr, 'workspaces' ).as( wss => wss
+                .filter( ws => !( ws.id >= -99 && ws.id <= -2 ) ) // filter out special workspaces
+                .sort( ( a, b ) => a.id - b.id )
+                .map( ws => (
                     <button
-                            cssClasses={bind(hypr, "focusedWorkspace").as(fw =>
-                                ws === fw
+                        cssClasses={bind( hypr, 'focusedWorkspace' ).as( fw => ws === fw
                             ? [
-                                        "focused-workspace-button",
-                                        "workspace-button",
+                                'focused-workspace-button',
+                                'workspace-button',
                             ]
-                                    : ["workspace-button"],
-                            )}
+                            : [ 'workspace-button' ], )}
                         onButtonPressed={() => ws.focus()}
-                            child={<label label={String(ws.id)}></label>}
+                        child={<label label={String( ws.id )}></label>}
                     ></button>
-                    )),
-            )}
+                ) ), )}
         </box>
     );
 };
@@ -80,15 +38,15 @@ const Workspace = () => {
  * displaying all available clients
  */
 const ActiveWindow = () => {
-    const focused = bind(hypr, "focusedClient");
+    const focused = bind( hypr, 'focusedClient' );
 
     const WindowPopover = (): Gtk.Popover => {
         // Set up boxes + Popover
         const popover = new Gtk.Popover();
-
         const popoverBox = WindowPopoverBox();
 
-        popover.set_child(popoverBox);
+        popover.set_child( popoverBox );
+
         return popover;
     };
 
@@ -98,69 +56,91 @@ const ActiveWindow = () => {
     // Return fully assembled HyprlandFocusedClient box
     // ───────────────────────────────────────────────────────────────────
     return (
-        <box visible={focused.as(Boolean)}>
+        <box visible={focused.as( Boolean )}>
             <button
                 onClicked={() => windowPopover.popup()}
-                cssClasses={["bar-button"]}
+                cssClasses={[ 'bar-button' ]}
                 child={
-                    focused.as(
-                        client =>
-                            client && (
+                    focused.as( client => client && (
                         <label
                             maxWidthChars={70}
                             ellipsize={Pango.EllipsizeMode.END}
-                                    label={bind(client, "title").as(String)} />
-                            ),
-                    )
+                            label={bind( client, 'title' ).as( String )} />
+                    ), )
                 }></button>
             {windowPopover}
         </box >
     );
 };
 
+type submaps = 'device' | 'launch' | 'workspace' | 'windowing' | 'screenshotting' | 'notifications' | '';
+
 const ModeStatus = () => {
-    const label = new Gtk.Label();
-    const map = {
-        "device": "D",
-        "launch": "L",
-        "workspace": "W",
-        "windowing": "M",
-        "screenshotting": "S",
-        "notifications": "N",
+    let isUsingHyprvim = false;
+
+    try {
+        const path = exec( 'bash -c "cd ~ && pwd"' ) + '/.config/hyprvim';
+
+        isUsingHyprvim = readFile( path ).trim() === 'y';
+    } catch ( e ) {
+        printerr( 'Failed to read hyprvim config', e );
     }
+
+    const label = new Gtk.Label();
+
+    if ( !isUsingHyprvim ) return label;
+
+    print( '==> Using hyprvim config' );
+
+    const map = {
+        'device': 'DEV',
+        'launch': 'LNC',
+        'workspace': 'WSP',
+        'windowing': 'WIN',
+        'screenshotting': 'SCS',
+        'notifications': 'NOT',
+        '': 'NRM'
+    };
+
+    label.label = map[''];
+    label.cssClasses = [ 'mode-status' ];
+
     // TODO: Possibly add popover to it that lists binds
-    hypr.connect("submap", (name: string) => {
+    hypr.connect( 'submap', ( _, name: submaps ) => {
         label.label = map[name];
-        label.cssClasses = ["mode-status", name + '-mode']
-    })
-    return 
-}
+        label.cssClasses = [
+            'mode-status',
+            name + '-mode'
+        ];
+    } );
+
+    return label;
+};
 
 const WindowPopoverBox = () => {
     return <box vertical>
-        <label label={"Available Windows"} cssClasses={['title-2']}></label>
+        <label label={'Available Windows'} cssClasses={[ 'title-2' ]}></label>
         <Gtk.Separator marginTop={5} marginBottom={5}></Gtk.Separator>
         <box vertical>
-            {bind(hypr, 'clients').as(clients => {
-                return clients.map(client => {
+            {bind( hypr, 'clients' ).as( clients => {
+                return clients.map( client => {
                     return <button child={
                         <box>
-                            <label label={bind(client, 'workspace').as(w => `(WS ${w.name})`)}></label>
-                            <label label={bind(client, 'initialClass').as(c => `[${c}]`)}></label>
-                            <label label={bind(client, 'title')}></label>
+                            <label label={bind( client, 'workspace' ).as( w => `(WS ${ w.name })` )}></label>
+                            <label label={bind( client, 'initialClass' ).as( c => `[${ c }]` )}></label>
+                            <label label={bind( client, 'title' )}></label>
                         </box>
                     }
                     onClicked={() => client.focus()}
-                    ></button>
-                })
-            })}
+                    ></button>;
+                } );
+            } )}
         </box>
-    </box>
-}
+    </box>;
+};
 
 export default {
     Workspace,
     ActiveWindow,
-    SysTray,
     ModeStatus
 };

config/astal/components/bar/modules/QuickView.tsx

@@ -1,17 +1,24 @@
-import { bind } from "astal";
-import { execAsync } from "astal";
-import AstalBattery from "gi://AstalBattery";
-import AstalBluetooth from "gi://AstalBluetooth";
-import AstalNetwork from "gi://AstalNetwork";
-import AstalWp from "gi://AstalWp";
-import { Gtk } from "astal/gtk4";
-import Brightness from "../../../util/brightness";
-import QuickActions from "../../QuickActions/QuickActions";
+import AstalBattery from 'gi://AstalBattery';
+import AstalBluetooth from 'gi://AstalBluetooth';
+import AstalNetwork from 'gi://AstalNetwork';
+import AstalWp from 'gi://AstalWp';
+import Brightness from '../../../util/brightness';
+import {
+    Gtk
+} from 'astal/gtk4';
+import QuickActions from '../../QuickActions/QuickActions';
+import {
+    bind
+} from 'astal';
+import {
+    execAsync
+} from 'astal';
 
 const STATE = AstalNetwork.DeviceState;
 
 const QuickView = () => {
     const qa = QuickActions.QuickActions();
+
     const showQuickActions = () => {
         qa.popup();
     };
@@ -19,14 +26,14 @@ const QuickView = () => {
     return (
         <button
             onClicked={() => showQuickActions()}
-            cssClasses={["quick-action-button"]}
+            cssClasses={[ 'quick-action-button' ]}
             child={
                 <box>
                     <BatteryWidget></BatteryWidget>
                     <Audio></Audio>
                     <BluetoothWidget></BluetoothWidget>
                     <NetworkWidget></NetworkWidget>
-                    <image iconName={"system-shutdown-symbolic"}></image>
+                    <image iconName={'system-shutdown-symbolic'}></image>
                     {qa}
                 </box>
             }
@@ -40,37 +47,39 @@ const NetworkWidget = () => {
     return (
         <box>
             <image
-                iconName={bind(network, "state").as(state => {
-                    if (state === AstalNetwork.State.CONNECTING) {
-                        return "chronometer-reset-symbolic";
+                iconName={bind( network, 'state' ).as( state => {
+                    if ( state === AstalNetwork.State.CONNECTING ) {
+                        return 'chronometer-reset-symbolic';
                     } else if (
-                        state === AstalNetwork.State.CONNECTED_LOCAL ||
-                        state === AstalNetwork.State.CONNECTED_SITE ||
-                        state === AstalNetwork.State.CONNECTED_GLOBAL
+                        state === AstalNetwork.State.CONNECTED_LOCAL
+                        || state === AstalNetwork.State.CONNECTED_SITE
+                        || state === AstalNetwork.State.CONNECTED_GLOBAL
                     ) {
-                        return "network-wired-activated-symbolic";
+                        return 'network-wired-activated-symbolic';
                     } else {
-                        return "paint-unknown-symbolic";
+                        return 'paint-unknown-symbolic';
                     }
-                })}
-                cssClasses={["network-widget", "quick-view-symbol"]}
-                visible={bind(network.wifi, "state").as(
-                    state => state !== STATE.ACTIVATED,
-                )}
+                } )}
+                cssClasses={[
+                    'network-widget',
+                    'quick-view-symbol'
+                ]}
+                visible={bind( network.wifi, 'state' ).as( state => state !== STATE.ACTIVATED, )}
             ></image>
             <image
-                iconName={bind(network.wifi, "state").as(state => {
-                    if (state === STATE.ACTIVATED) {
+                iconName={bind( network.wifi, 'state' ).as( state => {
+                    if ( state === STATE.ACTIVATED ) {
                         return network.wifi.iconName;
                     } else {
-                        return "";
+                        return '';
                     }
-                })}
-                tooltipText={bind(network.wifi, 'ssid')}
-                cssClasses={["network-widget", "quick-view-symbol"]}
-                visible={bind(network.wifi, "state").as(
-                    state => state === STATE.ACTIVATED,
-                )}
+                } )}
+                tooltipText={bind( network.wifi, 'ssid' )}
+                cssClasses={[
+                    'network-widget',
+                    'quick-view-symbol'
+                ]}
+                visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED, )}
             ></image>
         </box>
     );
@@ -78,44 +87,40 @@ const NetworkWidget = () => {
 
 const BluetoothWidget = () => {
     const bluetooth = AstalBluetooth.get_default();
-    const enabled = bind(bluetooth, "isPowered");
-    const connected = bind(bluetooth, "isConnected");
+    const enabled = bind( bluetooth, 'isPowered' );
+    const connected = bind( bluetooth, 'isConnected' );
 
     // For each connected BT device, render status
     return (
         <box>
-            <box visible={enabled.as(e => e)}>
+            <box visible={enabled.as( e => e )}>
                 <image
-                    iconName={"bluetooth-active-symbolic"}
-                    visible={connected.as(c => c)}
+                    iconName={'bluetooth-active-symbolic'}
+                    visible={connected.as( c => c )}
                 ></image>
                 <image
-                    iconName={"bluetooth-disconnected-symbolic"}
-                    visible={connected.as(c => !c)}
+                    iconName={'bluetooth-disconnected-symbolic'}
+                    visible={connected.as( c => !c )}
                 ></image>
             </box>
             <image
-                iconName={"bluetooth-disabled-symbolic"}
-                visible={enabled.as(e => !e)}
+                iconName={'bluetooth-disabled-symbolic'}
+                visible={enabled.as( e => !e )}
             ></image>
             <box>
-                {bind(bluetooth, "devices").as(devices => {
-                    return devices.map(device => {
+                {bind( bluetooth, 'devices' ).as( devices => {
+                    return devices.map( device => {
                         return (
                             <image
-                                iconName={bind(device, "icon").as(
-                                    icon => icon,
-                                )}
-                                visible={bind(device, "connected")}
-                                tooltipText={bind(device, "batteryPercentage").as(
-                                    n => {
-                                        return device.get_name() + ': ' + n + "%";
-                                    },
-                                )}
+                                iconName={bind( device, 'icon' ).as( icon => icon, )}
+                                visible={bind( device, 'connected' )}
+                                tooltipText={bind( device, 'batteryPercentage' ).as( n => {
+                                    return device.get_name() + ': ' + n + '%';
+                                }, )}
                             ></image>
                         );
-                    });
-                })}
+                    } );
+                } )}
             </box>
         </box>
     );
@@ -123,21 +128,25 @@ const BluetoothWidget = () => {
 
 
 let hasSentNotification = false;
+
 const BatteryWidget = () => {
     const battery = AstalBattery.get_default();
-    if (battery.get_is_present()) {
+
+    if ( battery.get_is_present() ) {
         return (
             <image
-                iconName={bind(battery, "batteryIconName").as(icon => icon)}
-                cssClasses={["quick-view-symbol"]}
-                tooltipText={bind(battery, 'percentage').as(p => {
-                    const level = Math.round(p * 100)
+                iconName={bind( battery, 'batteryIconName' ).as( icon => icon )}
+                cssClasses={[ 'quick-view-symbol' ]}
+                tooltipText={bind( battery, 'percentage' ).as( p => {
+                    const level = Math.round( p * 100 );
+
                     if ( level < 20 && !hasSentNotification ) {
                         hasSentNotification = true;
                         execAsync( 'bash -c "notify-send \'Battery level below 20%\'"' );
                     }
-                    return `Battery Level: ${level}%`
-                })}
+
+                    return `Battery Level: ${ level }%`;
+                } )}
             ></image>
         );
     } else {
@@ -148,14 +157,14 @@ const BatteryWidget = () => {
 
 const BrightnessWidget = () => {
     const brightness = Brightness.get_default();
-    const screen_brightness = bind(brightness, "screen");
+    const screen_brightness = bind( brightness, 'screen' );
 
     return (
-        <box cssClasses={["quick-view-symbol"]}>
-            <image iconName={"brightness-high-symbolic"}></image>
+        <box cssClasses={[ 'quick-view-symbol' ]}>
+            <image iconName={'brightness-high-symbolic'}></image>
             <label
-                label={screen_brightness.as(b => '' + Math.round(100 * b))}
-                visible={bind(brightness, "screenAvailable")}
+                label={screen_brightness.as( b => '' + Math.round( 100 * b ) )}
+                visible={bind( brightness, 'screenAvailable' )}
             ></label>
         </box>
     );
@@ -163,31 +172,27 @@ const BrightnessWidget = () => {
 
 const Audio = () => {
     const wireplumber = AstalWp.get_default();
-    if (wireplumber) {
+
+    if ( wireplumber ) {
         return (
             <box orientation={Gtk.Orientation.HORIZONTAL}>
                 <image
-                    iconName={bind(wireplumber.defaultSpeaker, "volumeIcon").as(
-                        icon => icon,
-                    )}
-                    cssClasses={["quick-view-symbol"]}
-                    tooltipText={bind(wireplumber.defaultSpeaker, 'volume').as(v => Math.round(100 * v) + '%')}
+                    iconName={bind( wireplumber.defaultSpeaker, 'volumeIcon' ).as( icon => icon, )}
+                    cssClasses={[ 'quick-view-symbol' ]}
+                    tooltipText={bind( wireplumber.defaultSpeaker, 'volume' ).as( v => Math.round( 100 * v ) + '%' )}
                 ></image>
                 <image
-                    iconName={bind(
-                        wireplumber.defaultMicrophone,
-                        "volumeIcon",
-                    ).as(icon => icon)}
-                    cssClasses={["quick-view-symbol"]}
-                    tooltipText={bind(wireplumber.defaultMicrophone, 'volume').as(v => Math.round(100 * v) + '%')}
+                    iconName={bind( wireplumber.defaultMicrophone,
+                        'volumeIcon', ).as( icon => icon )}
+                    cssClasses={[ 'quick-view-symbol' ]}
+                    tooltipText={bind( wireplumber.defaultMicrophone, 'volume' ).as( v => Math.round( 100 * v ) + '%' )}
                 ></image>
             </box>
         );
     } else {
-        print(
-            "[ WirePlumber ] Could not connect, Audio support in bar will be missing",
-        );
-        return <image iconName={"action-unavailable-symbolic"}></image>;
+        print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing', );
+
+        return <image iconName={'action-unavailable-symbolic'}></image>;
     }
 };
 
@@ -195,4 +200,5 @@ const Audio = () => {
 
 export default {
     QuickView,
+    BrightnessWidget
 };

config/astal/components/bar/modules/SystemInfo.tsx

@@ -1,35 +1,39 @@
-import { execAsync } from "astal";
-import { Gtk } from "astal/gtk4";
-import sysinfo from "../sysinfo";
+import {
+    Gtk
+} from 'astal/gtk4';
+import {
+    execAsync
+} from 'astal';
+import sysinfo from '../sysinfo';
 
 const info = () => {
     return (
         <box vertical>
             <label
-                label={"System Information"}
-                cssClasses={["title-2"]}
+                label={'System Information'}
+                cssClasses={[ 'title-2' ]}
             ></label>
             <Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
             <label
                 vexpand
                 halign={Gtk.Align.START}
                 hexpand
-                label={sysinfo.ramUsed(used => {
-                    return "RAM: " + used + ` (${sysinfo.ramUtil.get()}%)`;
-                })}
+                label={sysinfo.ramUsed( used => {
+                    return 'RAM: ' + used + ` (${ sysinfo.ramUtil.get() }%)`;
+                } )}
             ></label>
             <label
-                label={sysinfo.systemStats(stats => {
-                    return `CPU: ${stats.cpuTemp}, ${stats.cpuClk}
-GPU: ${stats.gpuTemp}, ${stats.gpuClk} (${stats.vram} / ${stats.availableVRAM})
-Kernel: ${stats.kernel}`;
-                })}
+                label={sysinfo.systemStats( stats => {
+                    return `CPU: ${ stats.cpuTemp }, ${ stats.cpuClk }
+GPU: ${ stats.gpuTemp }, ${ stats.gpuClk } (${ stats.vram } / ${ stats.availableVRAM })
+Kernel: ${ stats.kernel }`;
+                } )}
             ></label>
             <Gtk.Separator marginTop={10}></Gtk.Separator>
             <button
-                onClicked={() => execAsync(`/bin/sh -c "kitty --hold fish -c 'fastfetch'"`)}
+                onClicked={() => execAsync( '/bin/sh -c "kitty --hold fish -c \'fastfetch\'"' )}
                 child={
-                    <label label={"View FastFetch"}></label>
+                    <label label={'View FastFetch'}></label>
                 }></button>
         </box>
     );
@@ -38,7 +42,7 @@ Kernel: ${stats.kernel}`;
 const SystemInformationPanel = () => {
     const popover = new Gtk.Popover();
 
-    popover.set_child(info());
+    popover.set_child( info() );
 
     return popover;
 };
@@ -54,44 +58,44 @@ const SystemInfo = () => {
         sysinfo.refreshStats();
     };
 
-    if (sysinfo.enabled) {
+    if ( sysinfo.enabled ) {
         return (
             <button
                 onClicked={() => openSysInfo()}
                 child={
-                    <box tooltipText={sysinfo.ramUsed(v => v)}>
+                    <box tooltipText={sysinfo.ramUsed( v => v )}>
                         <box
                             cssClasses={[ 'quick-view-symbol' ]}
                         >
                             <image
-                                iconName={"power-profile-performance-symbolic"}
+                                iconName={'power-profile-performance-symbolic'}
                                 marginEnd={1}
                             ></image>
                             <label
-                                label={sysinfo.cpuUtil(util => util)}
+                                label={sysinfo.cpuUtil( util => util )}
                                 marginEnd={5}
                             ></label>
                         </box>
                         <box
                             cssClasses={[ 'quick-view-symbol' ]}
                         >
-                            <image iconName={"memory"}></image>
-                            <label label={sysinfo.ramUtil(util => util)}></label>
+                            <image iconName={'memory'}></image>
+                            <label label={sysinfo.ramUtil( util => util )}></label>
                         </box>
                         <box
                             cssClasses={[ 'quick-view-symbol' ]}
                         >
-                            <image iconName={"show-gpu-effects-symbolic"}></image>
-                            <label label={sysinfo.gpuUtil(util => util)}></label>
+                            <image iconName={'show-gpu-effects-symbolic'}></image>
+                            <label label={sysinfo.gpuUtil( util => util )}></label>
                         </box>
                         {panel}
                     </box>
                 }
-                cssClasses={["bar-button"]}
+                cssClasses={[ 'bar-button' ]}
             ></button>
         );
     } else {
-        return <image iconName={"action-unavailable-symbolic"}></image>;
+        return <image iconName={'action-unavailable-symbolic'}></image>;
     }
 };
 

config/astal/util/colours.scss

@@ -3,3 +3,4 @@ $bg-color: #0A0A0F;
 $accent-color: #591641;
 $accent-color-2: #97103A;
 $shadow-color: rgba(0, 0, 2, 0.3);
+$monospace-font: Source Code Pro

config/fish/config.fish

@@ -26,6 +26,7 @@ alias ff='fastfetch'
 alias p='nvimpager -p'
 alias latexdocs='zathura ~/projects/latex/docs/docs.pdf &>> /dev/null & disown'
 alias gccerr='gcc -Wall -Wextra -Wpedantic -Werror -Wmissing-prototypes -std=c99'
+alias linecount='cloc --vcs git .'
 
 # Add scripts in ~/projects/dotfiles/scripts/ to path
 fish_add_path -P ~/projects/dotfiles/scripts/

config/hypr/hyprland/general.conf

@@ -9,21 +9,18 @@ exec-once = ~/.config/hypr/xdg-portal-hyprland
 exec-once = dbus-update-activation-environment --systemd WAYLAND_DISPLAY XDG_CURRENT_DESKTOP XAUTHORITY DISPLAY
 exec-once = systemctl --user import-environment WAYLAND_DISPLAY XDG_CURRENT_DESKTOP
 exec-once = /usr/lib/polkit-gnome/polkit-gnome-authentication-agent-1
-# exec-once = waybar
 exec-once = hypridle
 exec-once = nm-applet
 exec-once = nextcloud --background
-exec-once = sleep 2 && bash -c "ags run -d ~/projects/dotfiles/config/astal/ --gtk4 >> /tmp/runner-log 2>&1"
-# exec-once = sleep 2 && bash -c "ags run -d ~/projects/active/dotfiles/config/astal/ --gtk4"
-exec-once = bash -c "ags run -d ~/projects/dotfiles/config/ags/notifications/ >> /tmp/notifier-log 2>&1"
-# exec-once = bash -c "ags run -d ~/projects/active/dotfiles/config/ags/notifications/"
+exec-once = sleep 2 && bash -c "ags run -d ~/projects/dotfiles/config/astal/ --gtk 4 >> /tmp/runner-log 2>&1"
+exec-once = bash -c "ags run -d ~/projects/dotfiles/config/ags/notifications/ --gtk 3 >> /tmp/notifier-log 2>&1"
+
 
 # ── wlhist ──────────────────────────────────────────────────────────
 exec-once = wl-paste --type text --watch cliphist store # Stores only text data
 exec-once = wl-paste --type image --watch cliphist store # Stores only image data
 
 
-exec = hyprctl setcursor oreo_spark_blue_cursors 24
 env = QT_QPA_PLATFORM,wayland
 env = QT_QPA_PLATFORM_THEME,qt6ct
 env = OLLAMA_HOST,0.0.0.0

config/hypr/hyprland/modal-binds/README.md

@@ -1,4 +1,4 @@
-# Hyprmode
+# hyprvim
 Using Vim Motions and in general vim-style commands is really neat - so why not apply to the Window Manager as well?
 
 ## Mapping

config/hypr/hyprland/modal-binds/device.conf

@@ -19,6 +19,11 @@ bind = $mainMod, D, submap, device
 submap = device
 
 
+# ── Swapescape ──────────────────────────────────────────────────────
+bind = , S, exec, fish -c "toggle-swapescape"
+bind = , S, submap, reset
+
+
 # ── FPV goggles binds ───────────────────────────────────────────────
 bind = CTRL, D, exec, hyprctl keyword monitor HDMI-A-1, 1280x720@60, 1920x0, 1, mirror, DP-1 && notify-send 'Set FPV goggles to mirror main screen' --app-name="Hyprctl"
 bind = CTRL, E, exec, hyprctl keyword monitor HDMI-A-1, 1280x720@60, 3840x0, 1 && notify-send 'Set to expand FPV goggles' --app-name="Hyprctl"

config/hypr/hyprland/modal-binds/launch.conf

@@ -2,9 +2,6 @@
 #          ╭────────────────────────────────────────────────╮
 #          │                 App launching                  │
 #          ╰────────────────────────────────────────────────╯
-bind = $mainMod SHIFT, L, exec, librewolf
-bind = $mainMod SHIFT, D, exec, vesktop
-bind = $mainMod SHIFT, Z, exec, zathura
 bind = $mainMod, Return, exec, kitty
 
 
@@ -23,26 +20,58 @@ bind = $mainMod, escape, exec, wlogout
 #          │                 Launch submap                  │
 #          ╰────────────────────────────────────────────────╯
 bind = $mainMod, X, submap, launch
-submap = launch, reset
+submap = launch
 
 
 # ── Kitty ───────────────────────────────────────────────────────────
 bind = , K, exec, kitty
+bind = , K, submap, reset
 bind = , Return, exec, kitty
+bind = , Return, submap, reset
 
 
 # ── Others ──────────────────────────────────────────────────────────
 bind = , L, exec, librewolf
+bind = , L, submap, reset
+
 bind = , E, exec, thunar
+bind = , E, submap, reset
+
 bind = , D, exec, vesktop
+bind = , D, submap, reset
+
+bind = SHIFT, B, exec, brave
+bind = SHIFT, B, submap, reset
+
+bind = , F, exec, filezilla
+bind = , F, submap, reset
+
 bind = , V, exec, vscodium
+bind = , V, submap, reset
+
 bind = , T, exec, thunderbird
+bind = , T, submap, reset
+
 bind = , H, exec, heroic
+bind = , H, submap, reset
+
 bind = , Z, exec, zathura
+bind = , Z, submap, reset
+
+bind = , B, exec, /opt/bs-manager/bs-manager
+bind = , B, submap, reset
+
+bind = , P, exec, alvr_dashboard
+bind = , P, submap, reset
+
 bind = , A, exec, notify-send 'AirPlay server starting...' --app-name="AirPlay Audio" && terminator -T "hidden-terminator" -e "systemctl start avahi-daemon && shairport-sync -a LinuxPlay"
+bind = , A, submap, reset
+
 bind = SHIFT, A, exec, notify-send 'AirPlay video server starting...' --app-name="AirPlay Video" && terminator -T "hidden-terminator" -e "systemctl start avahi-daemon && sleep 5 && uxplay -n LinuxVideoPlay -nh"
+bind = SHIFT, A, submap, reset
+
 bind = , S, exec, notify-send 'Steam is launching...' --app-name="Steam" && steam
-bind = , O, exec, terminator -e "~/projects/dotfiles/ai.sh"
+bind = , S, submap, reset
 
 
 # ── Exit submap ─────────────────────────────────────────────────────

config/hypr/hyprland/modal-binds/notifications.conf

@@ -9,10 +9,19 @@ submap = notifications
 
 
 bind = , T, exec, astal -i notifier toggle
+bind = , T, submap, reset
+
 bind = , D, exec, astal -i notifier clear-newest
+bind = , D, submap, reset
+
 bind = , C, exec, astal -i notifier clear
+bind = , C, submap, reset
+
 bind = , S, exec, astal -i notifier show
+bind = , S, submap, reset
+
 bind = , H, exec, astal -i notifier hide
+bind = , H, submap, reset
 
 
 # ── Exit submap ─────────────────────────────────────────────────────

config/hypr/hyprland/modal-binds/screenshot.conf

@@ -6,11 +6,17 @@ bind = $mainMod, S, submap, screenshotting
 submap = screenshotting
 
 bind = , Y, exec, grimblast --notify copy area
+bind = , Y, submap, reset
 bind = , C, exec, grimblast --notify copysave area
+bind = , C, submap, reset
 bind = , S, exec, grimblast --notify save area
+bind = , S, submap, reset
 bind = SHIFT, Y, exec, grimblast --notify copy screen
+bind = SHIFT, Y, submap, reset
 bind = SHIFT, C, exec, grimblast --notify copysave screen
+bind = SHIFT, C, submap, reset
 bind = SHIFT, S, exec, grimblast --notify save screen
+bind = SHIFT, S, submap, reset
 
 
 # ── Exit submap ─────────────────────────────────────────────────────

config/hypr/hyprland/mode-binds.conf

@@ -1,6 +1,7 @@
 $mainMod = SUPER
 source=./modal-binds/workspace.conf
 source=./modal-binds/launch.conf
+source=./modal-binds/notifications.conf
 source=./modal-binds/window-management.conf
 source=./modal-binds/screenshot.conf
 source=./modal-binds/device.conf

config/hypr/hyprland/windowrules.conf

@@ -1,17 +1,3 @@
-# ────────────────────────────────────────────────────────────────────
-#          ╭────────────────────────────────────────────────╮
-#          │                WORKSPACE RULES                 │
-#          ╰────────────────────────────────────────────────╯
-# ────────────────────────────────────────────────────────────────────
-
-# Display full sized (without gaps), if only window on screen
-# workspace = w[tv1], gapsout:0, gapsin:0
-# workspace = f[1], gapsout:0, gapsin:0
-# windowrule = bordersize 0, floating:0, onworkspace:w[tv1]
-# windowrule = rounding 0, floating:0, onworkspace:w[tv1]
-# windowrule = bordersize 0, floating:0, onworkspace:f[1]
-# windowrule = rounding 0, floating:0, onworkspace:f[1]
-
 $mainMod = SUPER
 
 # ────────────────────────────────────────────────────────────────────
@@ -19,16 +5,20 @@ $mainMod = SUPER
 #          │                  WINDOW RULES                  │
 #          ╰────────────────────────────────────────────────╯
 # ────────────────────────────────────────────────────────────────────
-windowrule = move 1450 50, title:^(.*)(Power menu)$
+windowrule = move 1450 50, title:(.*)Power menu$
 windowrule = workspace 2, class:evince
-windowrule = workspace 2, title:.*(Okular).*
+windowrule = workspace 2, title:.*Okular.*
 windowrule = workspace 2, class:org.pwmt.zathura
 windowrule = fullscreen, title:wlogout
 windowrule = workspace 2, class:librewolf
 windowrule = workspace 2, title:LibreWolf
-windowrule = workspace 2, title:(.*)(Discord)(.*)
+windowrule = workspace 2, title:BSManager
+windowrule = workspace 1, title:ALVR(.*)
+windowrule = workspace 2, title:(.*)Beat Saber(.*)
+windowrule = fullscreen, title:(.*)Beat Saber(.*)
+windowrule = workspace 2, title:(.*)Discord(.*)
 windowrule = workspace 3, title:^(Steam)(.*)$
-windowrule = workspace 1, title:^(.*)(VSCodium)$
+windowrule = workspace 1, title:(.*)(VSCodium)$
 windowrule = center, title:^(.*)(VSCodium)$
 windowrule = workspace 3, class:minecraft-launcher
 windowrule = tile, class:minecraft-launcher
@@ -46,6 +36,7 @@ windowrule = float, title:^(.*)hidden-terminator*(.*)$
 windowrule = float, title:^(.*)termfilechooser*(.*)$
 windowrule = size 1400 800, title:^(.*)termfilechooser*(.*)$
 windowrule = center, title:^(.*)termfilechooser*(.*)$
+windowrule = dimaround, title:^(.*)termfilechooser*(.*)$
 
 # ┌                                                ┐
 # │ Set floating windows & position them centered  │
@@ -107,6 +98,7 @@ windowrule = center, class:pavucontrol
 windowrule = float, class:file-roller
 windowrule = center, class:file-roller
 
+# idleinhibit
 windowrule = idleinhibit focus, title:^(Rocket League)(.*)$
 windowrule = fullscreen, title:^(Steam Big Picture)$
 windowrule = idleinhibit always, class:steam
@@ -116,6 +108,12 @@ windowrule = idleinhibit focus, class:supertuxkart
 windowrule = idleinhibit fullscreen, title:^(.*)(Discord)(.*)$
 windowrule = idleinhibit fullscreen, title:^(.*)(~)(.*)$
 
+# Do not screenshare bitwarden windows
+windowrule = noscreenshare, title:(.*)(Bitwarden)(.*)
+windowrule = noscreenshare, class:nm-connection-editor
+windowrule = noscreenshare, title:(.*)(secret)(.*)
+windowrule = noscreenshare, class:(.*)[aA]uthentication(.*)
+
 
 # ┌                                                ┐
 # │                  Layer rules                   │

config/hypr/hyprland_desktop.conf

@@ -20,6 +20,7 @@
 monitor=DP-1, 1920x1080@144, 0x0, 1, vrr, 2
 monitor=DP-2, 1920x1080@75, 1920x0, 1
 
+exec = hyprctl setcursor oreo_spark_blue_cursors 24
 
 source=./hyprland/binds.conf
 source=./hyprland/general.conf

config/hypr/hyprland_laptop.conf

@@ -32,7 +32,7 @@ source=./hyprland/windowrules.conf
 exec = hyprctl setcursor oreo_spark_blue_cursors 36
 env = HYPRCURSOR_THEME, Oreo_spark_blue_cursor
 env = X_CURSOR_THEME, Oreo_spark_blue_cursor
-env = XCURSOR_SIZE, 24
+env = XCURSOR_SIZE, 36
 env = ELECTRON_ENABLE_HIGHDPI_SUPPORT, 1
 env = XDG_SESSION_TYPE, wayland
 env = QT_QPA_PLATFORM, wayland

config/kitty/kitty.conf

@@ -29,3 +29,8 @@ url_prefixes file ftp ftps gemini git gopher http https irc ircs kitty mailto ne
 detect_urls yes
 show_hyperlink_targets yes
 include current-theme.conf
+
+# ┌                                                ┐
+# │                    Mappings                    │
+# └                                                ┘
+map kitty_mod+e

config/lint/latexfmt.yaml

@@ -4,6 +4,12 @@ defaultIndent: "    "
 # Limit Number of backups
 maxNumberOfBackups: 3
 
+verbatimEnvironments:
+  verbatim: 1
+  lstlisting: 1
+  minted: 1
+  code: 1
+
 indentRules:
   recall: "    "
   remarks: "    "

config/yazi/theme.toml

@@ -1,2 +1,3 @@
 [flavor]
-use = "tokyo-night"
+dark = "tokyo-night"
+light = "tokyo-night"

eslint.config.mjs

@@ -0,0 +1,724 @@
+import eslint from '@eslint/js';
+import globals from 'globals';
+import stylistic from '@stylistic/eslint-plugin';
+import tseslint from 'typescript-eslint';
+import typescript from '@typescript-eslint/eslint-plugin';
+import vue from 'eslint-plugin-vue';
+
+const style = {
+    'plugins': {
+        '@stylistic': stylistic,
+        '@stylistic/js': stylistic,
+        '@stylistic/ts': stylistic,
+    },
+    'files': [
+        '**/*.ts',
+        '**/*.js',
+        '**/*.mjs',
+        '**/*.cjs',
+        '**/*.tsx',
+        '**/*.jsx'
+    ],
+    'rules': {
+        'sort-imports': [
+            'warn',
+            {
+                'ignoreCase': false,
+                'ignoreDeclarationSort': false,
+                'ignoreMemberSort': false,
+                'memberSyntaxSortOrder': [
+                    'none',
+                    'all',
+                    'multiple',
+                    'single'
+                ],
+                'allowSeparatedGroups': false
+            }
+        ],
+        // Formatting
+        '@stylistic/array-bracket-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minItems': 2
+            }
+        ],
+        '@stylistic/array-bracket-spacing': [
+            'error',
+            'always',
+            {
+                'singleValue': true,
+                'arraysInArrays': true,
+                'objectsInArrays': true
+            }
+        ],
+        '@stylistic/array-element-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minItems': 2
+            }
+        ],
+        '@stylistic/arrow-parens': [
+            'error',
+            'as-needed'
+        ],
+        '@stylistic/arrow-spacing': [
+            'error',
+            {
+                'before': true,
+                'after': true
+            }
+        ],
+        '@stylistic/block-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/brace-style': [
+            'error',
+            '1tbs'
+        ],
+        '@stylistic/comma-spacing': [
+            'error',
+            {
+                'before': false,
+                'after': true
+            }
+        ],
+        '@stylistic/comma-style': [
+            'error',
+            'last'
+        ],
+        '@stylistic/dot-location': [
+            'error',
+            'property'
+        ],
+        '@stylistic/eol-last': [
+            'error',
+            'always'
+        ],
+        '@stylistic/function-call-spacing': [
+            'error',
+            'never'
+        ],
+        '@stylistic/function-paren-newline': [
+            'error',
+            {
+                'minItems': 3
+            }
+        ],
+        '@stylistic/function-call-argument-newline': [
+            'error',
+            'consistent'
+        ],
+        '@stylistic/implicit-arrow-linebreak': [
+            'error',
+            'beside'
+        ],
+        '@stylistic/indent': [
+            'error',
+            4
+        ],
+        '@stylistic/key-spacing': [
+            'error',
+            {
+                'beforeColon': false,
+                'afterColon': true
+            }
+        ],
+        '@stylistic/keyword-spacing': [
+            'error',
+            {
+                'before': true,
+                'after': true
+            }
+        ],
+        '@stylistic/lines-between-class-members': [
+            'error',
+            'always'
+        ],
+        '@stylistic/max-len': [
+            'warn',
+            {
+                'code': 120,
+                'comments': 140,
+                'ignoreComments': false,
+                'ignoreUrls': true,
+                'ignoreStrings': false
+            }
+        ],
+        '@stylistic/new-parens': [
+            'error',
+            'always'
+        ],
+        '@stylistic/newline-per-chained-call': [ 'error' ],
+        '@stylistic/no-extra-parens': [
+            'error',
+            'all',
+            {
+                'nestedBinaryExpressions': false,
+                'ternaryOperandBinaryExpressions': false,
+                'ignoreJSX': 'multi-line',
+                'nestedConditionalExpressions': false
+            }
+        ],
+        '@stylistic/no-extra-semi': 'error',
+        '@stylistic/no-floating-decimal': 'error',
+        '@stylistic/no-mixed-operators': 'error',
+        '@stylistic/no-mixed-spaces-and-tabs': 'error',
+        '@stylistic/no-multi-spaces': 'error',
+        '@stylistic/no-multiple-empty-lines': [
+            'error',
+            {
+                'max': 3,
+                'maxEOF': 2
+            }
+        ],
+        '@stylistic/no-tabs': 'error',
+        '@stylistic/no-trailing-spaces': 'error',
+        '@stylistic/no-whitespace-before-property': 'error',
+        '@stylistic/object-curly-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minProperties': 1
+            }
+        ],
+        '@stylistic/object-curly-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/object-property-newline': 'error',
+        '@stylistic/operator-linebreak': [
+            'error',
+            'before'
+        ],
+        '@stylistic/one-var-declaration-per-line': 'error',
+        '@stylistic/padded-blocks': [
+            'error',
+            {
+                'blocks': 'never',
+                'classes': 'always',
+                'switches': 'never',
+            }
+        ],
+
+        // Padding lines. The most in-depth part of this config
+        '@stylistic/padding-line-between-statements': [
+            'error',
+            // Variables, Constants
+            {
+                'blankLine': 'never',
+                'prev': 'var',
+                'next': 'var'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'let',
+                'next': 'let'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'const',
+                'next': 'const'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'var',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'let',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'const',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            // Import
+            {
+                'blankLine': 'never',
+                'prev': 'import',
+                'next': 'import'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'cjs-import',
+                'next': 'cjs-import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ],
+                'next': 'cjs-import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'cjs-import',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ],
+                'next': 'import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'import',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            // If
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'if'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'if',
+                'next': '*'
+            },
+            // For
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'for'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'for',
+                'next': '*'
+            },
+            // While
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'while'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'while',
+                'next': '*'
+            },
+            // Functions
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'function'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'function',
+                'next': '*'
+            },
+            // Block Statements
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'block-like'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'block-like',
+                'next': '*'
+            },
+            // Switch
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'switch'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'switch',
+                'next': '*'
+            },
+            // Try-Catch
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'try'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'try',
+                'next': '*'
+            },
+            // Throw
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'throw'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'throw',
+                'next': '*'
+            },
+            // Return
+            {
+                'blankLine': 'never',
+                'prev': 'return',
+                'next': '*'
+            },
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'return'
+            },
+            // Export
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'export'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'export',
+                'next': '*'
+            },
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'cjs-export'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'cjs-export',
+                'next': '*'
+            },
+            // Classes
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'class'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'class',
+                'next': '*'
+            },
+        ],
+        '@stylistic/quote-props': [
+            'error',
+            'always'
+        ],
+        '@stylistic/quotes': [
+            'error',
+            'single'
+        ],
+        '@stylistic/rest-spread-spacing': [
+            'error',
+            'never'
+        ],
+        '@stylistic/semi': [
+            'error',
+            'always'
+        ],
+        '@stylistic/semi-spacing': [
+            'error',
+            {
+                'before': false,
+                'after': true
+            }
+        ],
+        '@stylistic/semi-style': [
+            'error',
+            'last'
+        ],
+        '@stylistic/space-before-blocks': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-before-function-paren': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-in-parens': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-infix-ops': [
+            'error',
+            {
+                'int32Hint': false
+            }
+        ],
+        '@stylistic/space-unary-ops': 'error',
+        '@stylistic/spaced-comment': [
+            'error',
+            'always'
+        ],
+        '@stylistic/template-curly-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/switch-colon-spacing': 'error',
+        '@stylistic/wrap-iife': [
+            'error',
+            'inside'
+        ],
+        '@stylistic/wrap-regex': 'error',
+        '@stylistic/ts/type-annotation-spacing': 'error',
+    }
+};
+
+/** @type {import('eslint').Linter.Config} */
+export default tseslint.config(
+    // Base JavaScript rules
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    style,
+
+    // Vue support (including TS and JSX inside SFCs)
+    {
+        'files': [ '**/*.vue' ],
+        'languageOptions': {
+            'sourceType': 'module',
+            'ecmaVersion': 'latest',
+            'globals': globals.browser,
+            'parserOptions': {
+                'parser': tseslint.parser,
+            },
+        },
+        'plugins': {
+            'vue': vue,
+            '@stylistic': stylistic,
+            '@stylistic/js': stylistic,
+            '@stylistic/ts': stylistic,
+            '@typescript-eslint': typescript,
+        },
+        'extends': [
+            eslint.configs.recommended,
+            ...vue.configs['flat/recommended']
+        ],
+        'rules': {
+            ...typescript.configs.recommended.rules,
+            ...style.rules,
+
+            // Vue specific rules
+            '@stylistic/indent': 'off',
+            'vue/html-indent': [
+                'error',
+                4
+            ],
+            'vue/html-comment-indent': [
+                'error',
+                4
+            ],
+            'vue/script-indent': [
+                'error',
+                4,
+                {
+                    'baseIndent': 1,
+                    'switchCase': 1
+                }
+            ],
+            'vue/html-self-closing': [
+                'error',
+                {
+                    'html': {
+                        'void': 'never',
+                        'normal': 'never',
+                        'component': 'always'
+                    },
+                    'svg': 'always',
+                    'math': 'never'
+                }
+            ],
+            'vue/max-attributes-per-line': [
+                'error',
+                {
+                    'singleline': 3,
+                    'multiline': 1,
+                }
+            ],
+        },
+    },
+);

install

@@ -84,7 +84,7 @@ echo "
 ==> Installing other utilities...
 "
 sleep 2
-yay -S --noconfirm --noremovemake okular vlc nextcloud-client p7zip zip unzip noto-fonts pavucontrol light fastfetch bashtop hugo uxplay upower gdu dig nwg-look serpl fcitx5 qalculate-gtk openconnect light blueman xdg-desktop-portal-termfilechooser-hunkyburrito-git lazygit tldr
+yay -S --noconfirm --noremovemake okular vlc nextcloud-client p7zip zip unzip noto-fonts pavucontrol light fastfetch bashtop hugo uxplay upower gdu dig nwg-look serpl fcitx5 qalculate-gtk openconnect light blueman xdg-desktop-portal-termfilechooser-hunkyburrito-git lazygit tldr cloc usbutils bluez-utils bluez
 
 # LaTeX
 echo "
@@ -128,6 +128,7 @@ cd nvim
 xdg-settings set default-web-browser librewolf.desktop
 xdg-mime default org.pwmt.zathura.desktop application/pdf
 sudo systemctl disable rustdesk
+sudo systemctl enable --now systemd-timesyncd
 hyprpm update
 
 git-credential-manager configure

package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "@eslint/js": "^9.37.0",
+    "@stylistic/eslint-plugin": "^5.4.0",
+    "eslint-plugin-vue": "^10.5.1",
+    "typescript-eslint": "^8.46.1"
+  }
+}

renderable/astal/util/colours.scss

@@ -3,3 +3,4 @@ $bg-color: {{ colour-background-hex }};
 $accent-color: {{ colour-accent-hex }};
 $accent-color-2: {{ colour-accent-2-hex }};
 $shadow-color: {{ colour-shadow-rgba-03 }};
+$monospace-font: {{ font-mono }}

renderable/yazi/theme.toml

@@ -1,2 +1,3 @@
 [flavor]
-use = "{{ yazi-theme }}"
+dark = "{{ yazi-theme }}"
+light = "{{ yazi-theme }}"

scripts/convert-to-mp4

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+extension="out"
+read -p "Pick extension to convert from: " extension
+outfolder="out"
+outext="mp4"
+read -p "Output folder: " outfolder
+read -p "Output extension: " outext
+
+mkdir $outfolder
+for file in *.$extension; do
+    ffmpeg -i "$file" "$outfolder/${file%.$extension}.$outext"
+    echo "\n\n==> Conversion complete\n\n"
+done

scripts/ethz-vpn

@@ -2,11 +2,18 @@
 
 connect() {
 	read -sp $'Please enter your Encryption Password: ' encpass
-    echo " ==> Connecting"
+	echo "
+    ==> Connecting"
 	TOKEN=$(cat ~/.local/share/ethz-vpn-connect/ethzvpntoken.secret | openssl enc -aes-256-cbc -pbkdf2 -d -a -k $encpass)
 	PASSWORD=$(cat ~/.local/share/ethz-vpn-connect/ethzvpnpass.secret | openssl enc -aes-256-cbc -pbkdf2 -d -a -k $encpass)
 	USERNAME=$(cat ~/.local/share/ethz-vpn-connect/ethzvpnusername.txt)
-    echo $PASSWORD | sudo openconnect -b -u $USERNAME@student-net.ethz.ch -g student-net --useragent=AnyConnect --passwd-on-stdin --token-mode=totp --token-secret=sha1:base32:$TOKEN sslvpn.ethz.ch
+	echo $PASSWORD | sudo openconnect -b -u $USERNAME@student-net.ethz.ch -g student-net --useragent=AnyConnect --no-external-auth --passwd-on-stdin --token-mode=totp --token-secret=sha1:base32:$TOKEN sslvpn.ethz.ch
+	if [ $? -ne 0 ]; then
+		echo ' ==> Failed to connect <=='
+	else
+		echo ' ==> Connected <==
+        '
+	fi
 	encpass=""
 	PASSWORD=""
 	TOKEN=""
@@ -19,10 +26,16 @@ disconnect() {
 
 setup() {
 	echo 'You are about to overwrite your secrets. Press ctrl + C to cancel.'
-    read -p $'Please enter your ETHZ-Username: ' USERNAME
-    read -sp $'Please choose and enter your Encryption Password (will be required when launching): ' encpass
-    read -sp $'Please enter your ETHZ WLAN (= Radius) Password: ' PASSWORD
-    read -sp $'Please enter your ETHZ OTP Secret: ' TOKEN
+	read -p 'Please enter your ETHZ-Username: ' USERNAME
+	read -sp 'Please choose and enter your Encryption Password (will be required when launching): ' encpass
+	echo ""
+	read -sp 'Please enter your ETHZ WLAN (= Radius) Password: ' PASSWORD
+	echo ""
+	read -sp 'Please enter your ETHZ OTP Secret: ' TOKEN
+	echo ""
+	if [[ -d ~/.local/share/ethz-vpn-connect ]]; then
+		rm -rf ~/.local/share/ethz-vpn-connect
+	fi
 	mkdir ~/.local/share/ethz-vpn-connect
 	echo $PASSWORD | openssl enc -aes-256-cbc -pbkdf2 -a -k $encpass >~/.local/share/ethz-vpn-connect/ethzvpnpass.secret
 	echo $TOKEN | openssl enc -aes-256-cbc -pbkdf2 -a -k $encpass >~/.local/share/ethz-vpn-connect/ethzvpntoken.secret
@@ -30,7 +43,11 @@ setup() {
 	encpass=""
 	PASSWORD=""
 	TOKEN=""
-    echo $' ==> Secrets set <==\n'
+	if [ $? -ne 0 ]; then
+		echo ' ==> Failed to set secrets <=='
+	else
+		echo ' ==> Secrets set <==\n'
+	fi
 }
 
 case "$1" in

scripts/pdf-wordcount

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+echo "Word count is $(pdftotext $1 - | tr -d '.' | wc -w)"

scripts/restart-bar

@@ -8,6 +8,6 @@ echo "
 killall gjs
 killall ags
 sleep 4
-ags run -d ~/projects/dotfiles/config/astal --gtk4 & disown
+ags run -d ~/projects/dotfiles/config/astal --gtk 4 & disown
 sleep 2
-ags run -d ~/projects/dotfiles/config/ags/notifications & disown
+ags run -d ~/projects/dotfiles/config/ags/notifications --gtk 3 & disown

scripts/toggle-swapescape

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+enabled=$(hyprctl getoption input:kb_options | grep "caps:swapescape")
+if [[ $enabled == "" ]]; then
+    hyprctl keyword input:kb_options "caps:swapescape"
+    notify-send "Swapescape enabled"
+else
+    hyprctl keyword input:kb_options ""
+    notify-send "Swapescape disabled"
+fi

scripts/update-nvim

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+cd ~/projects/nvim/
+git pull
+./nvim-install.sh

setup

@@ -28,7 +28,6 @@ trap 'echo -e "\nCaught Ctrl+C, exiting..."; exit 130' SIGINT
 # Read platform to install on (only if no platform file present in ~/.config/)
 platform=""
 if [[ -f ~/.config/platform ]]; then
-    echo "Config type already selected, skipping"
     platform=$(cat ~/.config/platform)
 else
     read -p "Choose the configs to install, Laptop or Desktop (l/D): " platform
@@ -55,19 +54,18 @@ else
 fi
 
 # ────────────────────────────────────────────────────────────────────
-# Hyprmode config
-hyprmode=""
-if [[ -f ~/.config/hyprmode ]]; then
-    echo "Hyprmode config already specified, skipping"
-    platform=$(cat ~/.config/hyprmode)
+# hyprvim config
+hyprvim=""
+if [[ -f ~/.config/hyprvim ]]; then
+    hyprvim=$(cat ~/.config/hyprvim)
 else
-    read -p "Would you like to use Hyprmode? (Y/n) " hyprmode
+    read -p "Would you like to use hyprvim? (Y/n) " hyprvim
 fi
-hyprmode=$(echo "$hyprmode" | tr '[:upper:]' '[:lower:]')
-if [[ "$hyprmode" == "" ]]; then
-    hyprmode="y"
+hyprvim=$(echo "$hyprvim" | tr '[:upper:]' '[:lower:]')
+if [[ "$hyprvim" == "" ]]; then
+    hyprvim="y"
 fi
-echo "$hyprmode" >~/.config/hyprmode
+echo "$hyprvim" >~/.config/hyprvim
 
 # ────────────────────────────────────────────────────────────────────
 echo "=> Moving configs to correct destinations"
@@ -81,19 +79,19 @@ cp -r ./config/xdg-desktop-portal/ ~/.config/
 
 # Depending on platform, remove one or the other config and rename remaining one
 if [[ "$platform" == "d" ]]; then
-    echo "Running on desktop"
+    echo "==> Running on desktop"
     cp -f ~/.config/hypr/hyprland_desktop.conf ~/.config/hypr/hyprland.conf
 else
-    echo "Running on laptop"
+    echo "==> Running on laptop"
     cp -f ~/.config/hypr/hyprland_laptop.conf ~/.config/hypr/hyprland.conf
 fi
 
-# Enable or disable "Hyprmode" (using hyprland with vim-inspired modes)
-if [[ "$hyprmode" == "y" ]]; then
-    echo "Enabling hyprmode"
+# Enable or disable "hyprvim" (using hyprland with vim-inspired modes)
+if [[ "$hyprvim" == "y" ]]; then
+    echo "==> Enabling hyprvim"
     mv -f ~/.config/hypr/hyprland/mode-binds.conf ~/.config/hypr/hyprland/binds.conf
 else
-    echo "Disabling hyprmode"
+    echo "==> Disabling hyprvim"
     rm -rf ~/.config/hypr/hyprland/modal-binds
     rm ~/.config/hypr/hyprland/mode-binds.conf
 fi
@@ -114,6 +112,7 @@ cp ./config/lint/indentconfig.yaml ~/.indentconfig.yaml
 echo "
     => Installing yazi plugins
 "
+rm -rf ~/.config/yazi/plugins/*
 ya pkg upgrade
 
 if [[ "$restart" == "y" ]]; then