[Yazi] Keybinds

build/helpers/generateTheme.js

@@ -1,22 +1,4 @@
-import {
+const util = require( './util' );
-    Color
-} from '../types/colours';
-import {
-    colours
-} from '../variables/colors';
-import {
-    fonts
-} from '../variables/fonts';
-import {
-    gradientMultipliers
-} from '../variables/gradients';
-import {
-    iconTheme
-} from '../variables/icons';
-import util from './util';
-import {
-    yaziThemes
-} from '../variables/yazi';
 
 const renderColourAsRGB = util.renderColourAsRGB;
 const renderColourAsRGBA = util.renderColourAsRGBA;
@@ -27,7 +9,9 @@ const renderColourAsHex = util.renderColourAsHex;
 //          │   Theme generator (returns theme as object)   │
 //          ╰───────────────────────────────────────────────╯
 // ───────────────────────────────────────────────────────────────────
-export const generateTheme = ( theme: string, wallpaper: string, lockpaper: string, palette: Color[] ) => {
+module.exports.generateTheme = (
+    theme, wallpaper, lockpaper, palette
+) => {
     return {
         'wallpaper-path': wallpaper,
         'lockpaper-path': lockpaper,
@@ -67,14 +51,30 @@ export const generateTheme = ( theme: string, wallpaper: string, lockpaper: stri
         '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-1-hex': renderColourAsHex( util.getGradientColour(
-        'colour-accent-gradient-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 2, gradientMultipliers[ theme ] ) ),
+            palette[ 0 ], 1, 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-2-hex': renderColourAsHex( util.getGradientColour(
-        'colour-accent-gradient-5-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 5, gradientMultipliers[ theme ] ) ),
+            palette[ 0 ], 2, 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-3-hex': renderColourAsHex( util.getGradientColour(
-        'colour-accent-gradient-inverse-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
+            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 ] ),
@@ -172,6 +172,316 @@ export const generateTheme = ( theme: string, wallpaper: string, lockpaper: stri
         // ┌                                               ┐
         // │           Path to this repo on disk           │
         // └                                               ┘
-        'path-to-dotfiles': __dirname.slice( 0, __dirname.length - 5 )
+        'path-to-dotfiles': __dirname.slice( 0, __dirname.length - 5 ),
     };
 };
+
+
+// ───────────────────────────────────────────────────────────────────
+//          ╭───────────────────────────────────────────────╮
+//          │               Theme definitions               │
+//          ╰───────────────────────────────────────────────╯
+// ───────────────────────────────────────────────────────────────────
+const gradientMultipliers = {
+    'nordic': 0.9,
+    'deep-dark': 0.8,
+    'material': 0.85,
+    '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-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
+        ],
+    },
+    '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
+    },
+    '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
+    },
+    '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-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
+        ]
+    }
+};
+const fonts = {
+    'primary': {
+        'nordic': 'Comfortaa',
+        'deep-dark': 'Comfortaa',
+        'material': 'Comfortaa',
+        'light': 'Adwaita Sans',
+        'bright': 'Adwaita Sans Extralight'
+    },
+    'accent': {
+        'nordic': 'Adwaita Sans',
+        'deep-dark': 'Adwaita Sans',
+        'material': 'Adwaita Sans',
+        'light': 'Cantarell',
+        'bright': 'Contarell Thin'
+    },
+    'mono': {
+        'nordic': 'Source Code Pro',
+        'deep-dark': 'Source Code Pro',
+        'material': 'Source Code Pro',
+        '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/helpers/render.js

@@ -1,67 +1,47 @@
-import chalk from 'chalk';
+const mustache = require( 'mustache' );
-import colorThief from '@janishutz/colorthief';
+const colorThief = require( '@janishutz/colorthief' );
-import fs from 'fs';
+const fs = require( 'fs' );
-import inquirer from 'inquirer';
+const path = require( 'path' );
-import mustache from 'mustache';
+const util = require( './util' );
-import path from 'path';
+const generateTheme = require( './generateTheme' );
-import util from './util';
+const chalk = require( 'chalk' ).default;
+const inquirer = require( 'inquirer' ).default;
 
-const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
+const build = ( wallpaper, lockpaper, theme ) => {
     console.log( '\n=> Extracting colours' );
     // Extract colour palette from chosen wallpaper using Color-Thief
     colorThief.getPalette( wallpaper, 20 ).then( palette => {
         palette = util.removeUselessColours( palette );
-
         // Define view options (for rendering with mustache)
         if ( theme === 'test' ) {
-            palette = [
+            palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
-                [
-                    255,
-                    0,
-                    0
-                ],
-                [
-                    0,
-                    255,
-                    0
-                ],
-                [
-                    0,
-                    0,
-                    255
-                ]
-            ];
         }
 
         console.log( 'The following colours will be used based on your wallpaper: ' );
         let col = palette[ 0 ];
-
         console.log( '  => Primary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
         col = palette[ 1 ];
         console.log( '  => Secondary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
         col = palette[ 2 ];
         console.log( '  => Tertiary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
 
-        inquirer.prompt( [ {
+        inquirer.prompt( [{
-            'type': 'confirm',
+            type: 'confirm',
-            'name': 'confirm-proceed-build',
+            name: 'confirm-proceed-build',
-            'message': 'Okay to proceed with these colours?'
+            message: 'Okay to proceed with these colours?'
         } ] ).then( answer => {
             if ( answer['confirm-proceed-build'] ) proceedWithBuild( wallpaper, lockpaper, theme, palette );
             else {
                 // Have the user pick any other of the extracted colours instead
                 let counter = -1;
-
                 const colourOptions = palette.map( c => {
                     counter++;
-
                     return {
-                        'name': chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
+                        name: chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
-                        'value': counter
+                        value: counter
-                    };
+                    }
-                } );
+                } )
-
+                inquirer.prompt( [ 
-                inquirer.prompt( [
                     {
                         'type': 'list',
                         'message': 'Pick the primary accent colour',
@@ -81,31 +61,24 @@ const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
                         'name': 'tertiary'
                     }
                 ] ).then( result => {
-                    const p = [
+                    const p = [ palette[ result.primary ], palette[ result.secondary ], palette[ result.tertiary ] ];
-                        palette[ result.primary ],
-                        palette[ result.secondary ],
-                        palette[ result.tertiary ]
-                    ];
 
                     proceedWithBuild( wallpaper, lockpaper, theme, p );
-                } )
+                } ).catch( e => {
-                    .catch( e => {
+                    console.error( e );
-                        console.error( e );
+                    process.exit( 1 );
-                        process.exit( 1 );
+                } );
-                    } );
             }
-        } )
+        } ).catch( e => {
-            .catch( e => {
-                console.error( e );
-                process.exit( 1 );
-            } );
-    } )
-        .catch( e => {
             console.error( e );
-            console.error( '\n=> Failed to load image or retrieve colour palette from it' );
             process.exit( 1 );
         } );
-};
+    } ).catch( e => {
+        console.error( e );
+        console.error( '\n=> Failed to load image or retrieve colour palette from it' );
+        process.exit( 1 );
+    } );
+}
 
 
 const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
@@ -119,15 +92,9 @@ const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
 
     // recursively index files from config directory -> Maybe add a file to each
     // directory to indicate whether or not to index files in it?
-    const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [
+    const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
-        'node_modules',
-        '@girs',
-        '.gitignore',
-        '.git',
-        'flavours'
-    ] );
 
-    for ( let index = 0; index < fileList.length; index++ ) {
+    for (let index = 0; index < fileList.length; index++) {
         try {
             render( fileList[ index ], view );
         } catch ( e ) {
@@ -138,7 +105,7 @@ const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
     util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
     util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
     render( path.join( __dirname, '/../../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
-};
+}
 
 /**
  * @param {string} templatePath - absolute path to config directory
@@ -150,19 +117,16 @@ const render = ( templatePath, view, originalDir = 'renderable', newDir = 'confi
     // Load template from disk (all can be found in <project-root>/renderable)
     // TODO: Make exclusion better plus copy other files maybe?
     const template = '' + fs.readFileSync( templatePath );
-    const outPath = path.join( templatePath.replace( originalDir, newDir ) );
+    const outPath = path.join( templatePath.replace( originalDir, newDir ) ); 
-
     console.log( '=> Rendering to ' + outPath );
-
     try {
         fs.mkdirSync( path.dirname( outPath ), {
-            'recursive': true
+            recursive: true,
         } );
     } catch ( e ) {
         console.error( e );
     }
-
     fs.writeFileSync( outPath, mustache.render( template, view ) );
-};
+}
 
 module.exports = build;

build/helpers/util.js

@@ -0,0 +1,218 @@
+const convert = require( 'color-convert' );
+
+const fs = require( 'fs' );
+
+const path = require( 'path' );
+
+/**
+ * Recursively find all files with extension in a directory
+ * @param {string} dir The directory to search. Either absolute or relative path
+ * @param {string} extension The file extension to look for
+ * @returns {string[]} returns a list of html files with their full path
+ */
+const treeWalker = (
+    dir, extension, ignoreList
+) => {
+    const ls = fs.readdirSync( dir );
+    const fileList = [];
+
+    for ( let file in ls ) {
+        if ( fs.statSync( path.join( dir, ls[ file ] ) ).isDirectory() ) {
+            // Filter ignored directories
+            if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
+                const newFiles = treeWalker(
+                    path.join( dir, ls[ file ] ), extension, ignoreList
+                );
+
+                for ( let file = 0; file < newFiles.length; file++ ) {
+                    fileList.push( newFiles[ file ] );
+                }
+            }
+        } else if ( extension == '*' || ls[ file ].includes( extension ) ) {
+            if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
+                fileList.push( path.join( dir, ls[ file ] ) );
+            }
+        }
+    }
+
+    return fileList;
+};
+
+const renderColourAsHex = colour => {
+    return '#' + convert.default.rgb.hex(
+        colour[ 0 ], colour[ 1 ], colour[ 2 ]
+    );
+};
+
+const renderColourAsRGB = colour => {
+    return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`;
+};
+
+const renderColourAsRGBA = ( colour, ambiance ) => {
+    return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`;
+};
+
+const renderColourAsRGBHex = colour => {
+    const hexCol = convert.default.rgb.hex(
+        colour[ 0 ], colour[ 1 ], colour[ 2 ]
+    );
+
+    return `rgb(${ hexCol })`.toLowerCase();
+};
+
+function decimalToHex ( decimal ) {
+    const hexValue = Math.round( decimal * 255 );
+
+    return hexValue.toString( 16 ).padStart( 2, '0' );
+}
+
+const renderColourAsRGBAHex = ( colour, ambiance ) => {
+    const hexCol = convert.default.rgb.hex(
+        colour[ 0 ], colour[ 1 ], colour[ 2 ]
+    );
+
+    return `rgba(${ hexCol }${ decimalToHex( ambiance ) })`.toLowerCase();
+};
+
+const removeUselessColours = palette => {
+    const p = [];
+
+    for ( let i = 0; i < palette.length; i++ ) {
+        const el = palette[ i ];
+        const luminance = calculateLuminance( palette[ i ] );
+
+        if ( luminance < 210 && luminance > 40 ) {
+            p.push( palette[ i ] );
+        }
+
+        for ( let j = 0; j < el.length; j++ ) {
+            if ( el[j] > 70 ) {
+                p.push( palette[ i ] );
+                break;
+            }
+        }
+    }
+
+    return p;
+};
+
+const calculateLuminance = colour => {
+    return colour[ 0 ] + colour[ 1 ] + colour[ 2 ] / 3;
+};
+
+
+/*
+ * Replace the colours with variable names
+ */
+const replacements = {
+    '#0f1011': '@bg',
+    'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
+    'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
+    '#000': '@bg_accent',
+    '#000000': '@bg_accent',
+    'rgba(0, 0, 0, 0.7)': '@bg_accent_rgba_07',
+    'rgba(0, 0, 0, 0.6)': '@bg_accent_rgba_06',
+    'rgba(0, 0, 0, 0.5)': '@bg_accent_rgba_05',
+    'rgba(0, 0, 0, 0.4)': '@bg_accent_rgba_04',
+    'rgba(0, 0, 0, 0.3)': '@bg_accent_rgba_03',
+    'rgba(0, 0, 0, 0.12)': '@bg_accent_rgba_015',
+    'rgba(0, 0, 0, 0.08)': '@bg_accent_rgba_01',
+    'rgba(9, 9, 10, 0.9)': '@bg_inactive',
+    '#80868b': '@inactive',
+    'rgba(128, 134, 139, 0.7)': '@inactive_rgba_07',
+    'rgba(128, 134, 139, 0.5)': '@inactive_rgba_05',
+    'rgba(128, 134, 139, 0.3)': '@inactive_rgba_03',
+    'rgba(128, 134, 139, 0.2)': '@inactive_rgba_02',
+    // '#555A': '@shadow_rgba',
+    // '#555': '@shadow',
+    '#387db7': '@accent',
+    'rgba(56, 125, 183, 0.5)': '@accent_rgba_05',
+    'rgba(56, 125, 183, 0.32)': '@accent_rgba_03',
+    'rgba(56, 125, 183, 0.24)': '@accent_rgba_02',
+    'rgba(56, 125, 183, 0.16)': '@accent_rgba_015',
+    'rgba(56, 125, 183, 0.12)': '@accent_rgba_011',
+    'rgba(56, 125, 183, 0.08)': '@accent_rgba_007',
+    '#1a1a1b': '@accent_gradient_5',
+    '#1f1f21': '@accent_gradient_4',
+    '#1a2530': '@accent_gradient_3',
+    '#1c2c3b': '@accent_gradient_2',
+    '#1e3040': '@accent_gradient_1',
+    '#4887bd': '@accent_gradient_inverse_1',
+    '#508dc0': '@accent_gradient_inverse_2',
+    '#5892c3': '@accent_gradient_inverse_3',
+    '#673ab7': '@accent2',
+    'rgba(103, 58, 183, 0.12)': '@accent2_rgba_015',
+    '#fff': '@fg_accent',
+    'rgba(255, 255, 255, 0.7)': '@fg_accent_rgba_07',
+    'rgba(255, 255, 255, 0.6)': '@fg_accent_rgba_06',
+    'rgba(255, 255, 255, 0.5)': '@fg_accent_rgba_05',
+    'rgba(255, 255, 255, 0.3)': '@fg_accent_rgba_03',
+    'rgba(255, 255, 255, 0.2)': '@fg_accent_rgba_02',
+    '#9e9e9e': '@fg',
+    'rgba(158, 158, 158, 0.7)': '@fg_rgba_07',
+    'rgba(158, 158, 158, 0.6)': '@fg_rgba_06',
+    'rgba(158, 158, 158, 0.5)': '@fg_rgba_05',
+    'rgba(158, 158, 158, 0.3)': '@fg_rgba_03',
+    'rgba(158, 158, 158, 0.2)': '@fg_rgba_02',
+    'rgba(158, 158, 158, 0.1168)': '@fg_rgba_01'
+};
+
+const themePreProcessor = (
+    file, replacement, out
+) => {
+    const colours = Object.keys( replacements );
+
+    let data = '' + fs.readFileSync( file );
+
+    for ( let index = 0; index < colours.length; index++ ) {
+        const colour = colours[index];
+
+        data = data.replaceAll( colour, replacements[ colour ] );
+    }
+
+    const outPath = file.replace( replacement, out );
+
+    try {
+        fs.mkdirSync( path.dirname( outPath ), {
+            'recursive': true,
+        } );
+    } catch ( e ) {
+        console.error( e );
+    }
+
+    fs.writeFileSync( outPath, data );
+};
+
+const getGradientColour = (
+    colour, index, multiplier
+) => {
+    if ( index === 0 ) {
+        return [
+            colour[ 0 ] * multiplier,
+            colour[ 1 ] * multiplier,
+            colour[ 2 ] * multiplier
+        ];
+    }
+
+    const gradient = getGradientColour(
+        colour, index - 1, multiplier
+    );
+
+    return [
+        Math.min( 255, gradient[ 0 ] * multiplier ),
+        Math.min( 255, gradient[ 1 ] * multiplier ),
+        Math.min( 255, gradient[ 2 ] * multiplier )
+    ];
+};
+
+module.exports = {
+    treeWalker,
+    renderColourAsHex,
+    renderColourAsRGB,
+    renderColourAsRGBA,
+    renderColourAsRGBHex,
+    renderColourAsRGBAHex,
+    themePreProcessor,
+    getGradientColour,
+    removeUselessColours
+};

build/package.json

@@ -1,30 +1,23 @@
 {
-    "name": "janishutz-config-build",
+  "name": "janishutz-config-build",
-    "version": "1.0.0",
+  "version": "1.0.0",
-    "description": "Build janishutz's dotfiles configs",
+  "description": "Build janishutz's dotfiles configs",
-    "repository": {
+  "repository": {
-        "type": "git",
+    "type": "git",
-        "url": "https://git.janishutz.com/janishutz/dotfiles"
+    "url": "https://git.janishutz.com/janishutz/dotfiles"
-    },
+  },
-    "license": "GPL-3.0-or-later",
+  "license": "GPL-3.0-or-later",
-    "author": "janishutz",
+  "author": "janishutz",
-    "type": "module",
+  "type": "commonjs",
-    "main": "build.js",
+  "main": "build.js",
-    "scripts": {
+  "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1"
-    },
+  },
-    "dependencies": {
+  "dependencies": {
-        "@janishutz/colorthief": "^3.0.2",
+    "@janishutz/colorthief": "^3.0.2",
-        "chalk": "^5.4.1",
+    "chalk": "^5.4.1",
-        "color-convert": "^3.0.1",
+    "color-convert": "^3.0.1",
-        "inquirer": "^12.5.0",
+    "inquirer": "^12.5.0",
-        "mustache": "^4.2.0"
+    "mustache": "^4.2.0"
-    },
+  }
-    "devDependencies": {
-        "@eslint/js": "^9.39.2",
-        "@stylistic/eslint-plugin": "^5.7.1",
-        "@types/node": "^25.2.0",
-        "eslint-plugin-vue": "^10.7.0",
-        "typescript-eslint": "^8.54.0"
-    }
 }

build/src/helpers/util.ts

@@ -1,150 +0,0 @@
-import {
-    Color
-} from '../types/colours';
-import convert from 'color-convert';
-import fs from 'fs';
-import path from 'path';
-import {
-    replacements
-} from '../variables/replacements';
-
-/**
- * Recursively find all files with extension in a directory
- * @param {string} dir The directory to search. Either absolute or relative path
- * @param {string} extension The file extension to look for
- * @returns {string[]} returns a list of html files with their full path
- */
-const treeWalker = ( dir: string, extension: string, ignoreList: string[] ): string[] => {
-    const ls = fs.readdirSync( dir );
-    const fileList = [];
-
-    for ( const file in ls ) {
-        if ( fs.statSync( path.join( dir, ls[ file ] ) ).isDirectory() ) {
-            // Filter ignored directories
-            if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
-                const newFiles = treeWalker( path.join( dir, ls[ file ] ), extension, ignoreList );
-
-                for ( let file = 0; file < newFiles.length; file++ ) {
-                    fileList.push( newFiles[ file ] );
-                }
-            }
-        } else if ( extension == '*' || ls[ file ].includes( extension ) ) {
-            if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
-                fileList.push( path.join( dir, ls[ file ] ) );
-            }
-        }
-    }
-
-    return fileList;
-};
-
-const renderColourAsHex = ( colour: Color ) => {
-    return '#' + convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
-};
-
-const renderColourAsRGB = ( colour: Color ) => {
-    return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`;
-};
-
-const renderColourAsRGBA = ( colour: Color, ambiance: number ) => {
-    return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`;
-};
-
-const renderColourAsRGBHex = ( colour: Color ) => {
-    const hexCol = convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
-
-    return `rgb(${ hexCol })`.toLowerCase();
-};
-
-function decimalToHex ( decimal: number ) {
-    const hexValue = Math.round( decimal * 255 );
-
-    return hexValue.toString( 16 ).padStart( 2, '0' );
-}
-
-const renderColourAsRGBAHex = ( colour: Color, ambiance: number ) => {
-    const hexCol = convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
-
-    return `rgba(${ hexCol }${ decimalToHex( ambiance ) })`.toLowerCase();
-};
-
-const removeUselessColours = ( palette: Color[] ) => {
-    const p = [];
-
-    for ( let i = 0; i < palette.length; i++ ) {
-        const el = palette[ i ];
-        const luminance = calculateLuminance( palette[ i ] );
-
-        if ( luminance < 210 && luminance > 40 ) {
-            p.push( palette[ i ] );
-        }
-
-        for ( let j = 0; j < el.length; j++ ) {
-            if ( el[j] > 70 ) {
-                p.push( palette[ i ] );
-                break;
-            }
-        }
-    }
-
-    return p;
-};
-
-const calculateLuminance = ( colour: Color ) => {
-    return colour[ 0 ] + colour[ 1 ] + ( colour[ 2 ] / 3 );
-};
-
-
-const themePreProcessor = ( file: string, replacement: string, out: string ) => {
-    const colours = Object.keys( replacements );
-
-    let data = '' + fs.readFileSync( file );
-
-    for ( let index = 0; index < colours.length; index++ ) {
-        const colour = colours[index];
-
-        data = data.replaceAll( colour, replacements[ colour ] );
-    }
-
-    const outPath = file.replace( replacement, out );
-
-    try {
-        fs.mkdirSync( path.dirname( outPath ), {
-            'recursive': true
-        } );
-    } catch ( e ) {
-        console.error( e );
-    }
-
-    fs.writeFileSync( outPath, data );
-};
-
-const getGradientColour = ( colour: Color, index: number, multiplier: number ): Color => {
-    if ( index === 0 ) {
-        return [
-            colour[ 0 ] * multiplier,
-            colour[ 1 ] * multiplier,
-            colour[ 2 ] * multiplier
-        ];
-    }
-
-    const gradient = getGradientColour( colour, index - 1, multiplier );
-
-    return [
-        Math.min( 255, gradient[ 0 ] * multiplier ),
-        Math.min( 255, gradient[ 1 ] * multiplier ),
-        Math.min( 255, gradient[ 2 ] * multiplier )
-    ];
-};
-
-export default {
-    treeWalker,
-    renderColourAsHex,
-    renderColourAsRGB,
-    renderColourAsRGBA,
-    renderColourAsRGBHex,
-    renderColourAsRGBAHex,
-    themePreProcessor,
-    getGradientColour,
-    removeUselessColours
-};

build/src/types/colours.d.ts

@@ -1 +0,0 @@
-export type Color = number[];

build/src/variables/colors.ts

@@ -1,266 +0,0 @@
-import {
-    Color
-} from '../types/colours';
-
-export const colours: {
-    [key: string]: {
-        [key: string]: Color
-    }
-} = {
-    '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
-        ]
-    },
-    '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
-    },
-    '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
-    },
-    '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-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
-        ]
-    }
-};

build/src/variables/fonts.ts

@@ -1,27 +0,0 @@
-export const fonts: {
-    [key: string]: {
-        [key]: string
-    }
-} = {
-    'primary': {
-        'nordic': 'Comfortaa',
-        'deep-dark': 'Comfortaa',
-        'material': 'Comfortaa',
-        'light': 'Adwaita Sans',
-        'bright': 'Adwaita Sans Extralight'
-    },
-    'accent': {
-        'nordic': 'Adwaita Sans',
-        'deep-dark': 'Adwaita Sans',
-        'material': 'Adwaita Sans',
-        'light': 'Cantarell',
-        'bright': 'Contarell Thin'
-    },
-    'mono': {
-        'nordic': 'Source Code Pro',
-        'deep-dark': 'Source Code Pro',
-        'material': 'Source Code Pro',
-        'light': 'Jetbrains Mono',
-        'bright': 'Jetbrains Mono'
-    }
-};

build/src/variables/gradients.ts

@@ -1,10 +0,0 @@
-export const gradientMultipliers: {
-    [key: string]: number
-} = {
-    'nordic': 0.9,
-    'deep-dark': 0.8,
-    'material': 0.85,
-    'light': 1.1,
-    'bright': 1.15,
-    'test': 0.75
-};

build/src/variables/icons.ts

@@ -1,9 +0,0 @@
-export const iconTheme: {
-    [key: string]: string
-} = {
-    'nordic': 'Candy',
-    'deep-dark': 'Candy',
-    'material': 'Candy',
-    'light': 'Candy',
-    'bright': 'Candy'
-};

build/src/variables/replacements.ts

@@ -1,56 +0,0 @@
-/*
- * Replace the colours with variable names
- */
-export const replacements: {
-    [key: string]: string
-} = {
-    '#0f1011': '@bg',
-    'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
-    'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
-    '#000': '@bg_accent',
-    '#000000': '@bg_accent',
-    'rgba(0, 0, 0, 0.7)': '@bg_accent_rgba_07',
-    'rgba(0, 0, 0, 0.6)': '@bg_accent_rgba_06',
-    'rgba(0, 0, 0, 0.5)': '@bg_accent_rgba_05',
-    'rgba(0, 0, 0, 0.4)': '@bg_accent_rgba_04',
-    'rgba(0, 0, 0, 0.3)': '@bg_accent_rgba_03',
-    'rgba(0, 0, 0, 0.12)': '@bg_accent_rgba_015',
-    'rgba(0, 0, 0, 0.08)': '@bg_accent_rgba_01',
-    '#80868b': '@inactive',
-    'rgba(128, 134, 139, 0.7)': '@inactive_rgba_07',
-    'rgba(128, 134, 139, 0.5)': '@inactive_rgba_05',
-    'rgba(128, 134, 139, 0.3)': '@inactive_rgba_03',
-    'rgba(128, 134, 139, 0.2)': '@inactive_rgba_02',
-    // '#555A': '@shadow_rgba',
-    // '#555': '@shadow',
-    '#387db7': '@accent',
-    'rgba(56, 125, 183, 0.5)': '@accent_rgba_05',
-    'rgba(56, 125, 183, 0.32)': '@accent_rgba_03',
-    'rgba(56, 125, 183, 0.24)': '@accent_rgba_02',
-    'rgba(56, 125, 183, 0.16)': '@accent_rgba_015',
-    'rgba(56, 125, 183, 0.12)': '@accent_rgba_011',
-    'rgba(56, 125, 183, 0.08)': '@accent_rgba_007',
-    '#1a1a1b': '@accent_gradient_5',
-    '#1f1f21': '@accent_gradient_4',
-    '#1a2530': '@accent_gradient_3',
-    '#1c2c3b': '@accent_gradient_2',
-    '#1e3040': '@accent_gradient_1',
-    '#4887bd': '@accent_gradient_inverse_1',
-    '#508dc0': '@accent_gradient_inverse_2',
-    '#5892c3': '@accent_gradient_inverse_3',
-    '#673ab7': '@accent2',
-    'rgba(103, 58, 183, 0.12)': '@accent2_rgba_015',
-    '#fff': '@fg_accent',
-    'rgba(255, 255, 255, 0.7)': '@fg_accent_rgba_07',
-    'rgba(255, 255, 255, 0.6)': '@fg_accent_rgba_06',
-    'rgba(255, 255, 255, 0.5)': '@fg_accent_rgba_05',
-    'rgba(255, 255, 255, 0.3)': '@fg_accent_rgba_03',
-    'rgba(255, 255, 255, 0.2)': '@fg_accent_rgba_02',
-    '#9e9e9e': '@fg',
-    'rgba(158, 158, 158, 0.7)': '@fg_rgba_07',
-    'rgba(158, 158, 158, 0.6)': '@fg_rgba_06',
-    'rgba(158, 158, 158, 0.5)': '@fg_rgba_05',
-    'rgba(158, 158, 158, 0.3)': '@fg_rgba_03',
-    'rgba(158, 158, 158, 0.2)': '@fg_rgba_02',
-    'rgba(158, 158, 158, 0.1168)': '@fg_rgba_01'
-};

build/src/variables/yazi.ts

@@ -1,9 +0,0 @@
-export const yaziThemes: {
-    [key: string]: string
-} = {
-    'nordic': 'tokyo-night',
-    'deep-dark': 'vscode-dark-modern',
-    'material': 'dracula',
-    'light': 'vscode-light-modern',
-    'bright': 'vscode-light-modern'
-};

config/ags/launcher/app.ts

@@ -0,0 +1,19 @@
+import { App } from "astal/gtk4"
+import style from "./style.scss"
+import Bar from "./ui/Launcher"
+
+App.start({
+    css: style,
+    main() {
+        App.get_monitors().map(Bar)
+    },
+    requestHandler(request, res) {
+        if ( request === 'open' ) {
+            res( 'ok' );
+        } else if ( request === 'close' ) {
+            res( 'ok' );
+        } else if ( request === 'toggle' ) {
+            res( 'ok' );
+        }
+    }
+})

config/ags/launcher/definitions/components.d.ts

@@ -0,0 +1,75 @@
+/*
+*               dotfiles - components.d.ts
+*
+*   Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
+*           https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+import type { UIComponent, ResultElement } from "./rendering";
+
+
+export interface App extends ResultElement {
+    /**
+     * The app start command that will be executed
+     */
+    command: string;
+}
+
+// TODO: Finish
+export interface DictionaryEntry extends ResultElement {
+    /**
+     * Execute no command
+     */
+    action: null;
+
+
+    /**
+     * The dictionary definition
+     */
+    definition: string;
+}
+
+export interface CMDOutput extends ResultElement {
+    /**
+     * Stdout from the command that was run
+     */
+    result: string;
+}
+
+export interface Calculation extends ResultElement {
+    /**
+     * THe calculation result
+     */
+    result: string;
+}
+
+
+/* ************* *
+ * UI Components *
+ * ************* */
+ 
+export interface LargeUIComponent extends UIComponent {
+    /**
+     * The number of items to display per line. Image size will automatically be scaled
+     * based on width
+     */
+    itemsPerLine: number;
+}
+
+export interface MediumUIComponent extends UIComponent {}
+
+export interface ListUIComponent extends UIComponent {}
+
+export interface DictionaryUIComponent extends UIComponent {
+    elements: DictionaryEntry[];
+}
+
+export interface CMDOutputUIComponent extends UIComponent {
+    elements: CMDOutput[];
+}
+
+export interface CalculationUIComponent extends UIComponent {
+    elements: Calculation[];
+}

config/ags/launcher/definitions/rendering.d.ts

@@ -0,0 +1,60 @@
+/*
+*               dotfiles - rendering.d.ts
+*
+*   Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
+*           https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+export interface UIComponent {
+    /**
+     * The title of the component (like a category name), shown above small divider line
+     */
+    title: string;
+
+    /**
+     * ResultElement list, made up of all elements that should be shown
+     */
+    elements: ResultElement[];
+
+    /**
+     * Choose how many elements to show before truncating (will expand when command is run)
+     */
+    truncate: number;
+
+    /**
+     * The weight of the element (determines order)
+     */
+    weight: number;
+}
+
+
+export interface ResultElement {
+    /**
+     * The name of the result element
+     */
+    name: string;
+
+    /**
+     * Path to the image to be displayed in the UI
+     */
+    img: string;
+
+    /**
+     * The weight of the element (determines order)
+     */
+    weight: number;
+
+    /**
+     * The action to be executed
+     */
+    action: Action;
+
+    /**
+     * The font size of the text (optional)
+     */
+    fontSize: number | undefined;
+}
+
+type Action = '' | null;

config/ags/launcher/helpers/fzf/dist/fzf.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fast_fuzzy_1 = require("fast-fuzzy");
+const fs_1 = __importDefault(require("fs"));
+// Get list source from args
+// ARGS: type source
+// Then we read query from stdin to not restart indexing & the like for each keystroke
+let data = [];
+if (process.argv[2] === 'fs') {
+    if (process.argv[3].includes('.json')) {
+        data = JSON.parse('' + fs_1.default.readFileSync(process.argv[3]));
+    }
+    else if (process.argv[3].includes('.txt')) {
+        data = ('' + fs_1.default.readFileSync(process.argv[3])).split(',');
+    }
+    else if (fs_1.default.statSync(process.argv[3]).isDirectory()) {
+        data = fs_1.default.readdirSync(process.argv[3]);
+    }
+}
+else if (process.argv[2] === 'arg') {
+    data = process.argv[3].split(',');
+}
+else {
+    throw new Error('Invalid argument at position 1. Can be either fs or arg, not ' + process.argv[2]);
+}
+process.stdin.on("data", (query) => {
+    // On stdin submit (which the other client will have to support) process data
+    console.log((0, fast_fuzzy_1.search)(query.toString(), data));
+});

config/ags/launcher/helpers/fzf/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "fzf",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0"
+  },
+  "dependencies": {
+    "fast-fuzzy": "^1.12.0"
+  }
+}

config/ags/launcher/helpers/fzf/src/fzf.ts

@@ -0,0 +1,27 @@
+import { search } from 'fast-fuzzy';
+import fs from 'fs';
+
+// Get list source from args
+// ARGS: type source
+// Then we read query from stdin to not restart indexing & the like for each keystroke
+
+let data: string[] = [];
+if ( process.argv[ 2 ] === 'fs' ) {
+    if ( process.argv[ 3 ].includes( '.json' ) ) {
+        data = JSON.parse( '' + fs.readFileSync( process.argv[ 3 ] ) );
+    } else if ( process.argv[ 3 ].includes( '.txt' ) ) {
+        data = ( '' + fs.readFileSync( process.argv[ 3 ] ) ).split( ',' );
+    } else if ( fs.statSync( process.argv[ 3 ] ).isDirectory() ) {
+        data = fs.readdirSync( process.argv[ 3 ] );
+    }
+} else if ( process.argv[ 2 ] === 'arg' ) {
+    data = process.argv[ 3 ].split( ',' );
+} else {
+    throw new Error( 'Invalid argument at position 1. Can be either fs or arg, not ' + process.argv[ 2 ] );
+}
+
+process.stdin.on( "data", ( query ) => {
+    // On stdin submit (which the other client will have to support) process data
+    
+    console.log( search( query.toString(), data ) );
+} );

config/ags/launcher/helpers/fzf/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "allowJs": true,
+    "target": "ES6",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": [ "./src/**/*" ],
+}

config/ags/launcher/style.scss

@@ -0,0 +1,20 @@
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{"@theme_fg_color"};
+$bg-color: #{"@theme_bg_color"};
+
+window.Bar {
+    background: transparent;
+    color: $fg-color;
+    font-weight: bold;
+
+    >centerbox {
+        background: $bg-color;
+        border-radius: 10px;
+        margin: 8px;
+    }
+
+    button {
+        border-radius: 8px;
+        margin: 2px;
+    }
+}

config/ags/launcher/ui/Launcher.tsx

@@ -0,0 +1,32 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4"
+import { Variable } from "astal"
+
+function hide() {
+    App.get_window("launcher")!.hide()
+}
+
+export default function Launcher(monitor: Gdk.Monitor) {
+    const { CENTER } = Gtk.Align
+    const width = Variable(1000)
+
+    const text = Variable("")
+
+    return <window
+        name="launcher"
+        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        keymode={Astal.Keymode.ON_DEMAND}
+        application={App}
+        onShow={(self) => {
+            text.set("")
+            width.set(self.get_current_monitor().get_width_mm())
+        }}
+        onKeyPressed={(self, keyval, keycode) => {
+            print( 'key pressed: ' + keyval + ' which has code ' + keycode );
+        }}>
+        <box>
+            
+        </box>
+
+        </window>
+}

config/ags/launcher/ui/components/calc.tsx

@@ -0,0 +1,3 @@
+export default () => {
+    return <box></box>
+}

config/ags/launcher/util/file.ts

@@ -0,0 +1,12 @@
+/*
+*               dotfiles - file.ts
+*
+*   Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
+*           https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+import { readFileAsync, writeFileAsync, monitorFile } from "astal";
+
+

config/ags/launcher/util/fzf.ts

@@ -0,0 +1,24 @@
+/*
+*               dotfiles - fzf.ts
+*
+*   Created by Janis Hutz 03/30/2025, Licensed under the GPL V3 License
+*           https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+import AstalApps from "gi://AstalApps?version=0.1"
+
+// TODO: For all astal apps, read a global colours config file
+const fzfApplication = ( query: string ) => {
+    const apps = new AstalApps.Apps()
+    return apps.fuzzy_query( query );
+}
+
+const fzfCmd = ( query: string ) => {
+
+}
+
+export default {
+    fzfApplication
+}

config/ags/launcher/util/search.ts

@@ -0,0 +1,51 @@
+/*
+*               dotfiles - search.ts
+*
+*   Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
+*           https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+import subprocessRunner from "./subprocessRunner";
+import fzf from "./fzf";
+
+const preprocess = ( input: string ) => {
+    // Find out what kind of instruction to process
+    if ( input.startsWith( ':' ) ) {
+        processCommand( input.substring( 1, input.indexOf( ' ' ) ), input.substring( input.indexOf( ' ' ) ).split( ' ' ) );
+    } else if ( input.startsWith( '!' ) ) {
+        processBang( input.substring( 1, input.indexOf( ' ' ) ), input.substring( input.indexOf( ' ' ) ) );
+    } else {
+        // Determine if entered string is calculation or not
+        // We can easily do that by asking qalc (qalculate cli) if this is fine
+        subprocessRunner.executeCommand( 'qalc "' + input + '"' ).then( out => {
+            // we get a calculation result here
+            print( out );
+            processCalculation( out );
+        } ).catch( err => {
+            processSearch( input );
+            print( err );
+        } );
+    }
+}
+
+const processSearch = ( input: string ) => {
+
+}
+
+const processCalculation = ( output: string ) => {
+
+}
+
+const processCommand = ( cmd: string, args: string[] ) => {
+
+}
+
+const processBang = ( bang: string, input: string ) => {
+
+}
+
+export default {
+    preprocess
+}

config/ags/launcher/util/subprocessRunner.ts

@@ -0,0 +1,43 @@
+/*
+ *               dotfiles - subprocessRunner.ts
+ *
+ *   Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
+ *           https://janishutz.com, development@janishutz.com
+ *
+ *
+ */
+
+import { subprocess, execAsync, Process } from "astal/process";
+
+// TODO: Get cwd and the likes to then use that to run JavaScript files with node / python with python, etc
+
+/**
+ * Run a subprocess. If you simply want to run a command that doesn't need continuous updates
+ * run executeCommand instead.
+ * @param cmd - The command to be run
+ * @param onOut - Calback function for stdout of the subprocess
+ * @param onErr - [TODO:description]
+ * @returns [TODO:return]
+ */
+const startSubProcess = (
+    cmd: string | string[],
+    onOut: (stdout: string) => void,
+    onErr: (stderr: string) => void | undefined,
+): Process => {
+    return subprocess( cmd, onOut, onErr );
+};
+
+/**
+ * Run a command. If you need continuous updates, run startSubProcess instead 
+ * @param cmd - The command to be run. Either a string or an array of strings
+ * @returns A Promise resolving to stdout of the command
+ */
+const executeCommand = (cmd: string | string[]): Promise<string> => {
+    return execAsync( cmd );
+};
+
+
+export default {
+    startSubProcess,
+    executeCommand
+}

config/ags/notifications/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+@girs/

config/ags/notifications/env.d.ts

@@ -0,0 +1,21 @@
+declare const SRC: string
+
+declare module "inline:*" {
+    const content: string
+    export default content
+}
+
+declare module "*.scss" {
+    const content: string
+    export default content
+}
+
+declare module "*.blp" {
+    const content: string
+    export default content
+}
+
+declare module "*.css" {
+    const content: string
+    export default content
+}

config/astal/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+@girs/

config/astal/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/usr/share/astal/gjs"
+    }
+}