feat: adding support for multi-monitor window moving

extension.ts

@@ -4,6 +4,7 @@ import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import Gio from 'gi://Gio';
 import Shell from 'gi://Shell';
 import WindowManager from './src/wm/windowManager.js'
+import {Direction} from './src/wm/container.js'
 import {Logger} from "./src/utils/logger.js";
 
 export default class aerospike extends Extension {
@@ -37,14 +38,18 @@ export default class aerospike extends Extension {
 
     private keybindingActions(): Record<string, () => void> {
         return {
-            'move-left':          () => { Logger.info('Keybinding 1 was pressed!'); },
-            'move-right':         () => { Logger.info('Keybinding 2 was pressed!'); },
-            'join-with-left':     () => { Logger.info('Keybinding 3 was pressed!'); },
-            'join-with-right':    () => { Logger.info('Keybinding 4 was pressed!'); },
             'print-tree':         () => { this.windowManager.printTreeStructure(); },
             'toggle-orientation': () => { this.windowManager.toggleActiveContainerOrientation(); },
             'reset-ratios':       () => { this.windowManager.resetActiveContainerRatios(); },
             'toggle-tabbed':      () => { this.windowManager.toggleActiveContainerTabbed(); },
+            'focus-left':         () => { this.windowManager.focusInDirection(Direction.LEFT); },
+            'focus-right':        () => { this.windowManager.focusInDirection(Direction.RIGHT); },
+            'focus-up':           () => { this.windowManager.focusInDirection(Direction.UP); },
+            'focus-down':         () => { this.windowManager.focusInDirection(Direction.DOWN); },
+            'move-left':          () => { this.windowManager.moveInDirection(Direction.LEFT); },
+            'move-right':         () => { this.windowManager.moveInDirection(Direction.RIGHT); },
+            'move-up':            () => { this.windowManager.moveInDirection(Direction.UP); },
+            'move-down':          () => { this.windowManager.moveInDirection(Direction.DOWN); },
         };
     }
 
@@ -56,14 +61,6 @@ export default class aerospike extends Extension {
                 this.refreshKeybinding(name);
             });
         });
-
-        this.settings.connect('changed::dropdown-option', () => {
-            log(`Dropdown option changed to: ${this.settings.get_string('dropdown-option')}`);
-        });
-
-        this.settings.connect('changed::color-selection', () => {
-            log(`Color selection changed to: ${this.settings.get_string('color-selection')}`);
-        });
     }
 
     private refreshKeybinding(settingName: string) {

schemas/org.gnome.shell.extensions.aerospike.gschema.xml

@@ -1,40 +1,72 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <schemalist>
     <schema id="org.gnome.shell.extensions.aerospike" path="/org/gnome/shell/extensions/aerospike/">
-        <key name="dropdown-option" type="s">
-            <default>'option1'</default>
-            <summary>Dropdown selection</summary>
-            <description>Option selected from the dropdown menu</description>
+
+        <key name="focus-left" type="as">
+            <default><![CDATA[['<Super>h']]]></default>
+            <summary>Focus window to the left</summary>
+            <description>Move focus to the window to the left of the current window. In tabbed mode, switches to the previous tab.</description>
         </key>
 
-        <key name="color-selection" type="s">
-            <default>'rgb(255,0,0)'</default>
-            <summary>Selected color</summary>
-            <description>Color chosen from the color picker</description>
+        <key name="focus-right" type="as">
+            <default><![CDATA[['<Super>l']]]></default>
+            <summary>Focus window to the right</summary>
+            <description>Move focus to the window to the right of the current window. In tabbed mode, switches to the next tab.</description>
         </key>
 
+        <key name="focus-up" type="as">
+            <default><![CDATA[['<Super>k']]]></default>
+            <summary>Focus window above</summary>
+            <description>Move focus to the window above the current window.</description>
+        </key>
+
+        <key name="focus-down" type="as">
+            <default><![CDATA[['<Super>j']]]></default>
+            <summary>Focus window below</summary>
+            <description>Move focus to the window below the current window.</description>
+        </key>
+
+
         <key name="move-left" type="as">
-            <default><![CDATA[['<Super>1']]]></default>
-            <summary>Keybinding for action 1</summary>
-            <description>Keyboard shortcut for triggering action 1</description>
+            <default><![CDATA[['<Super><Shift>h']]]></default>
+            <summary>Move window to the left</summary>
+            <description>Move the active window one position to the left within its container</description>
         </key>
 
         <key name="move-right" type="as">
-            <default><![CDATA[['<Super>2']]]></default>
-            <summary>Keybinding for action 2</summary>
-            <description>Keyboard shortcut for triggering action 2</description>
+            <default><![CDATA[['<Super><Shift>l']]]></default>
+            <summary>Move window to the right</summary>
+            <description>Move the active window one position to the right within its container</description>
         </key>
 
-        <key name="join-with-left" type="as">
-            <default><![CDATA[['<Super>3']]]></default>
-            <summary>Keybinding for action 3</summary>
-            <description>Keyboard shortcut for triggering action 3</description>
+        <key name="move-up" type="as">
+            <default><![CDATA[['<Super><Shift>k']]]></default>
+            <summary>Move window up</summary>
+            <description>Move the active window one position up within its container</description>
         </key>
 
-        <key name="join-with-right" type="as">
-            <default><![CDATA[['<Super>4']]]></default>
-            <summary>Keybinding for action 4</summary>
-            <description>Keyboard shortcut for triggering action 4</description>
+        <key name="move-down" type="as">
+            <default><![CDATA[['<Super><Shift>j']]]></default>
+            <summary>Move window down</summary>
+            <description>Move the active window one position down within its container</description>
+        </key>
+
+        <key name="toggle-orientation" type="as">
+            <default><![CDATA[['<Super>comma']]]></default>
+            <summary>Toggle active container orientation</summary>
+            <description>Toggles the orientation of the container holding the active window between horizontal and vertical</description>
+        </key>
+
+        <key name="reset-ratios" type="as">
+            <default><![CDATA[['<Super>z']]]></default>
+            <summary>Reset container ratios to equal splits</summary>
+            <description>Resets all window size ratios in the active window's container to equal splits</description>
+        </key>
+
+        <key name="toggle-tabbed" type="as">
+            <default><![CDATA[['<Super>slash']]]></default>
+            <summary>Toggle tabbed container mode</summary>
+            <description>Toggles the active window's container between tabbed and accordion layout modes</description>
         </key>
 
         <key name="print-tree" type="as">
@@ -43,23 +75,5 @@
             <description>Prints the current tree of containers and windows per monitor to logs</description>
         </key>
 
-        <key name="toggle-orientation" type="as">
-            <default><![CDATA[['<Primary>comma']]]></default>
-            <summary>Toggle active container orientation</summary>
-            <description>Toggles the orientation of the container holding the active window between horizontal and vertical</description>
-        </key>
-
-        <key name="reset-ratios" type="as">
-            <default><![CDATA[['<Primary>z']]]></default>
-            <summary>Reset container ratios to equal splits</summary>
-            <description>Resets all window size ratios in the active window's container to equal splits</description>
-        </key>
-
-        <key name="toggle-tabbed" type="as">
-            <default><![CDATA[['<Primary>slash']]]></default>
-            <summary>Toggle tabbed container mode</summary>
-            <description>Toggles the active window's container between tabbed and accordion layout modes</description>
-        </key>
-
     </schema>
 </schemalist>

src/prefs/prefs.ts

@@ -11,160 +11,115 @@ export default class AerospikeExtensions extends ExtensionPreferences {
         // Create settings object
         const settings = this.getSettings('org.gnome.shell.extensions.aerospike');
 
-        // Create a preferences page
-        const page = new Adw.PreferencesPage({
-            title: _('Settings'),
-            icon_name: 'preferences-system-symbolic',
+        // Create keybindings page (top-level)
+        const keybindingsPage = new Adw.PreferencesPage({
+            title: _('Keybindings'),
+            icon_name: 'input-keyboard-symbolic',
         });
-        window.add(page);
+        window.add(keybindingsPage);
 
+        const keybindingMap = this.createKeybindingMap();
 
-        // Create options group
-        const optionsGroup = new Adw.PreferencesGroup({
-            title: _('Options'),
-        });
-        page.add(optionsGroup);
-
-        // Add dropdown
-        const dropdownRow = new Adw.ComboRow({
-            title: _('Select an option'),
-        });
-        optionsGroup.add(dropdownRow);
-
-        // Create dropdown model
-        const dropdownModel = new Gtk.StringList();
-        dropdownModel.append(_('Option 1'));
-        dropdownModel.append(_('Option 2'));
-        dropdownModel.append(_('Option 3'));
-        dropdownModel.append(_('Option 4'));
-
-        dropdownRow.set_model(dropdownModel);
-
-        // Set the active option based on settings
-        const currentOption = settings.get_string('dropdown-option');
-        switch (currentOption) {
-            case 'option1':
-                dropdownRow.set_selected(0);
-                break;
-            case 'option2':
-                dropdownRow.set_selected(1);
-                break;
-            case 'option3':
-                dropdownRow.set_selected(2);
-                break;
-            case 'option4':
-                dropdownRow.set_selected(3);
-                break;
-            default:
-                dropdownRow.set_selected(0);
-        }
-
-        // Connect dropdown change signal
-        dropdownRow.connect('notify::selected', () => {
-            const selected = dropdownRow.get_selected();
-            let optionValue: string;
-
-            switch (selected) {
-                case 0:
-                    optionValue = 'option1';
-                    break;
-                case 1:
-                    optionValue = 'option2';
-                    break;
-                case 2:
-                    optionValue = 'option3';
-                    break;
-                case 3:
-                    optionValue = 'option4';
-                    break;
-                default:
-                    optionValue = 'option1';
-            }
-
-            settings.set_string('dropdown-option', optionValue);
-        });
-
-        // Add color button
-        const colorRow = new Adw.ActionRow({
-            title: _('Choose a color'),
-        });
-        optionsGroup.add(colorRow);
-
-        const colorButton = new Gtk.ColorButton();
-        colorRow.add_suffix(colorButton);
-        colorRow.set_activatable_widget(colorButton);
-
-        // Set current color from settings
-        const colorStr = settings.get_string('color-selection');
-        const rgba = new Gdk.RGBA();
-        rgba.parse(colorStr);
-        colorButton.set_rgba(rgba);
-
-        // Connect color button signal
-        colorButton.connect('color-set', () => {
-            const color = colorButton.get_rgba().to_string();
-            settings.set_string('color-selection', color);
-        });
-
-        // Create keybindings group
-        const keybindingsGroup = new Adw.PreferencesGroup({
-            title: _('Keyboard Shortcuts'),
+        // Top-level Keybindings header group with syntax help
+        const keybindingsHeader = new Adw.PreferencesGroup({
+            title: _('Keybindings'),
             description: `${_("Syntax")}: <Super>h, <Shift>g, <Super><Shift>h
             ${_("Legend")}: <Super> - ${_("Windows key")}, <Primary> - ${_("Control key")}
             ${_("Delete text to unset. Press Return key to accept.")}`,
         });
-        page.add(keybindingsGroup);
+        keybindingsPage.add(keybindingsHeader);
 
-        // Add keybinding rows as EntryRows with proper mapping
-        // Use the helper function to create the map object
-        const keybindingMap = this.createKeybindingMap();
+        // --- Focus group ---
+        const focusGroup = new Adw.PreferencesGroup({
+            title: _('Focus'),
+        });
+        keybindingsPage.add(focusGroup);
 
-        keybindingsGroup.add(
+        focusGroup.add(
             new EntryRow({
-                title: _('Action 1'),
+                title: _('Focus Left'),
+                settings: settings,
+                bind: 'focus-left',
+                map: keybindingMap
+            })
+        );
+
+        focusGroup.add(
+            new EntryRow({
+                title: _('Focus Right'),
+                settings: settings,
+                bind: 'focus-right',
+                map: keybindingMap
+            })
+        );
+
+        focusGroup.add(
+            new EntryRow({
+                title: _('Focus Up'),
+                settings: settings,
+                bind: 'focus-up',
+                map: keybindingMap
+            })
+        );
+
+        focusGroup.add(
+            new EntryRow({
+                title: _('Focus Down'),
+                settings: settings,
+                bind: 'focus-down',
+                map: keybindingMap
+            })
+        );
+
+        // --- Move group ---
+        const moveGroup = new Adw.PreferencesGroup({
+            title: _('Move'),
+        });
+        keybindingsPage.add(moveGroup);
+
+        moveGroup.add(
+            new EntryRow({
+                title: _('Move Left'),
                 settings: settings,
                 bind: 'move-left',
                 map: keybindingMap
             })
         );
 
-        keybindingsGroup.add(
+        moveGroup.add(
             new EntryRow({
-                title: _('Action 2'),
+                title: _('Move Right'),
                 settings: settings,
                 bind: 'move-right',
                 map: keybindingMap
             })
         );
 
-        keybindingsGroup.add(
+        moveGroup.add(
             new EntryRow({
-                title: _('Action 3'),
+                title: _('Move Up'),
                 settings: settings,
-                bind: 'join-with-left',
+                bind: 'move-up',
                 map: keybindingMap
             })
         );
 
-        keybindingsGroup.add(
+        moveGroup.add(
             new EntryRow({
-                title: _('Action 4'),
+                title: _('Move Down'),
                 settings: settings,
-                bind: 'join-with-right',
+                bind: 'move-down',
                 map: keybindingMap
             })
         );
 
-        keybindingsGroup.add(
-            new EntryRow({
-                title: _('Print Tree Structure'),
-                settings: settings,
-                bind: 'print-tree',
-                map: keybindingMap
-            })
-        );
+        // --- Container Interactions group ---
+        const containerGroup = new Adw.PreferencesGroup({
+            title: _('Container Interactions'),
+        });
+        keybindingsPage.add(containerGroup);
 
-        keybindingsGroup.add(
+        containerGroup.add(
             new EntryRow({
                 title: _('Toggle Orientation'),
                 settings: settings,
@@ -173,7 +128,7 @@ export default class AerospikeExtensions extends ExtensionPreferences {
             })
         );
 
-        keybindingsGroup.add(
+        containerGroup.add(
             new EntryRow({
                 title: _('Reset Container Ratios to Equal'),
                 settings: settings,
@@ -182,7 +137,7 @@ export default class AerospikeExtensions extends ExtensionPreferences {
             })
         );
 
-        keybindingsGroup.add(
+        containerGroup.add(
             new EntryRow({
                 title: _('Toggle Tabbed Mode'),
                 settings: settings,
@@ -191,6 +146,21 @@ export default class AerospikeExtensions extends ExtensionPreferences {
             })
         );
 
+        // --- Debugging group ---
+        const debuggingGroup = new Adw.PreferencesGroup({
+            title: _('Debugging'),
+        });
+        keybindingsPage.add(debuggingGroup);
+
+        debuggingGroup.add(
+            new EntryRow({
+                title: _('Print Tree Structure'),
+                settings: settings,
+                bind: 'print-tree',
+                map: keybindingMap
+            })
+        );
+
     }
 
     // Helper function to create a keybinding mapping object

src/wm/container.ts

@@ -10,6 +10,13 @@ export enum Layout {
     TABBED = 2,
 }
 
+export enum Direction {
+    LEFT  = 'left',
+    RIGHT = 'right',
+    UP    = 'up',
+    DOWN  = 'down',
+}
+
 // Returns equal ratios summing exactly to 1.0, with float drift absorbed by the last slot.
 function equalRatios(n: number): number[] {
     if (n <= 0) return [];
@@ -48,7 +55,11 @@ export default class WindowContainer {
         this._splitRatios = equalRatios(this._tiledItems.length);
     }
 
-    private _addRatioForNewWindow(): void {
+    /**
+     * Proportionally shrink existing ratios to carve out space for a new item
+     * at the given index. If no index is supplied the ratio is appended at the end.
+     */
+    private _addRatioForNewWindow(index?: number): void {
         const n = this._tiledItems.length;
         if (n <= 1) {
             this._splitRatios = [1.0];
@@ -59,7 +70,10 @@ export default class WindowContainer {
         const scaled = this._splitRatios.map(r => r * scale);
         const partialSum = scaled.reduce((a, b) => a + b, 0) + newRatio;
         scaled[scaled.length - 1] += (1.0 - partialSum);
-        this._splitRatios = [...scaled, newRatio];
+
+        const insertAt = index ?? scaled.length;
+        scaled.splice(insertAt, 0, newRatio);
+        this._splitRatios = scaled;
     }
 
     private _totalDimension(): number {
@@ -161,6 +175,21 @@ export default class WindowContainer {
         return this._activeTabIndex;
     }
 
+    /**
+     * If the given window is a tab in this container, make it the active tab.
+     * Returns true if the window was found and activated.
+     */
+    focusWindowTab(windowId: number): boolean {
+        if (!this.isTabbed()) return false;
+
+        const index = this._getIndexOfWindow(windowId);
+        if (index !== -1 && index !== this._activeTabIndex) {
+            this.setActiveTab(index);
+            return true;
+        }
+        return index !== -1;
+    }
+
     hideTabBar(): void {
         this._tabBar?.hide();
     }
@@ -171,10 +200,19 @@ export default class WindowContainer {
         }
     }
 
-    addWindow(winWrap: WindowWrapper): void {
-        this._tiledItems.push(winWrap);
+    /**
+     * Add a window to this container.
+     * If `index` is omitted the window is appended at the end.
+     * A negative index (e.g. -1) is treated as "append at end".
+     */
+    addWindow(winWrap: WindowWrapper, index?: number): void {
+        const insertAt = (index === undefined || index < 0)
+            ? this._tiledItems.length
+            : Math.min(index, this._tiledItems.length);
+
+        this._tiledItems.splice(insertAt, 0, winWrap);
         this._tiledWindowLookup.set(winWrap.getWindowId(), winWrap);
-        this._addRatioForNewWindow();
+        this._addRatioForNewWindow(insertAt);
 
         if (this.isTabbed()) {
             // TODO: make it so that when tabs are added they are made the current active tab
@@ -377,6 +415,13 @@ export default class WindowContainer {
         this._tabBar.show();
     }
 
+    /**
+     * Public entry point to refresh tab titles (e.g. when a window title changes).
+     */
+    refreshTabTitles(): void {
+        this._updateTabBar();
+    }
+
     /**
      * Update tab bar state (active highlight, titles) without a full rebuild.
      */
@@ -515,4 +560,145 @@ export default class WindowContainer {
         this._resetRatios();
         this.drawWindows();
     }
+
+    // --- Directional Move (swap) ------------------------------------------------
+
+    /**
+     * Swap the window at `windowId` with its neighbour in the given direction.
+     * Returns true if the swap occurred, false if the window is already at the edge
+     * or the direction is perpendicular to the container axis.
+     */
+    swapWindowInDirection(windowId: number, direction: Direction): boolean {
+        const currentIndex = this._getIndexOfWindow(windowId);
+        if (currentIndex === -1) return false;
+
+        if (this.isTabbed()) {
+            // Tabbed: left/up = swap toward start, right/down = swap toward end
+            const delta = (direction === Direction.LEFT || direction === Direction.UP) ? -1 : 1;
+            const newIndex = currentIndex + delta;
+            if (newIndex < 0 || newIndex >= this._tiledItems.length) return false;
+
+            this._swapItems(currentIndex, newIndex);
+            this._activeTabIndex = newIndex;
+            this._updateTabBar();
+            this.drawWindows();
+            return true;
+        }
+
+        // Accordion mode — only swap along the container's axis
+        const isAlongAxis =
+            (this._orientation === Layout.ACC_HORIZONTAL && (direction === Direction.LEFT || direction === Direction.RIGHT)) ||
+            (this._orientation === Layout.ACC_VERTICAL   && (direction === Direction.UP   || direction === Direction.DOWN));
+
+        if (!isAlongAxis) return false;
+
+        const delta = (direction === Direction.LEFT || direction === Direction.UP) ? -1 : 1;
+        const newIndex = currentIndex + delta;
+        if (newIndex < 0 || newIndex >= this._tiledItems.length) return false;
+
+        this._swapItems(currentIndex, newIndex);
+        this.drawWindows();
+        return true;
+    }
+
+    /**
+     * Swap two items in `_tiledItems` and their corresponding split ratios.
+     */
+    private _swapItems(indexA: number, indexB: number): void {
+        [this._tiledItems[indexA], this._tiledItems[indexB]] =
+            [this._tiledItems[indexB], this._tiledItems[indexA]];
+        [this._splitRatios[indexA], this._splitRatios[indexB]] =
+            [this._splitRatios[indexB], this._splitRatios[indexA]];
+    }
+
+    // --- Directional Navigation ------------------------------------------------
+
+    /**
+     * Given a window inside this container and a direction, return the window ID
+     * that should receive focus, or null if the edge of the container is reached.
+     *
+     * Behaviour by layout mode:
+     *  - ACC_HORIZONTAL: left/right moves to the prev/next item; up/down → null
+     *  - ACC_VERTICAL:   up/down   moves to the prev/next item; left/right → null
+     *  - TABBED:         left/right moves to the prev/next tab;  up/down → null
+     */
+    getAdjacentWindowId(windowId: number, direction: Direction): number | null {
+        const currentIndex = this._getIndexOfWindow(windowId);
+        if (currentIndex === -1) return null;
+
+        if (this.isTabbed()) {
+            // Tabbed: left/right cycle through tabs
+            if (direction === Direction.LEFT || direction === Direction.UP) {
+                const newIndex = currentIndex - 1;
+                if (newIndex < 0) return null;
+                return this._windowIdAtIndex(newIndex);
+            }
+            if (direction === Direction.RIGHT || direction === Direction.DOWN) {
+                const newIndex = currentIndex + 1;
+                if (newIndex >= this._tiledItems.length) return null;
+                return this._windowIdAtIndex(newIndex);
+            }
+            return null;
+        }
+
+        // Accordion mode – only navigate along the container's axis
+        const isAlongAxis =
+            (this._orientation === Layout.ACC_HORIZONTAL && (direction === Direction.LEFT || direction === Direction.RIGHT)) ||
+            (this._orientation === Layout.ACC_VERTICAL   && (direction === Direction.UP   || direction === Direction.DOWN));
+
+        if (!isAlongAxis) return null;
+
+        const delta = (direction === Direction.LEFT || direction === Direction.UP) ? -1 : 1;
+        const newIndex = currentIndex + delta;
+        if (newIndex < 0 || newIndex >= this._tiledItems.length) return null;
+
+        return this._windowIdAtIndex(newIndex);
+    }
+
+    /**
+     * Return the "representative" window ID for the item at `index`.
+     * If the item is a WindowWrapper, return its ID directly.
+     * If it's a nested WindowContainer, return the first (or last) leaf window.
+     */
+    private _windowIdAtIndex(index: number): number | null {
+        const item = this._tiledItems[index];
+        if (!item) return null;
+
+        if (item instanceof WindowWrapper) {
+            return item.getWindowId();
+        }
+        if (item instanceof WindowContainer) {
+            return item._firstLeafWindowId();
+        }
+        return null;
+    }
+
+    /**
+     * Return the window ID of the first leaf window in this container (depth-first).
+     */
+    _firstLeafWindowId(): number | null {
+        for (const item of this._tiledItems) {
+            if (item instanceof WindowWrapper) return item.getWindowId();
+            if (item instanceof WindowContainer) {
+                const id = item._firstLeafWindowId();
+                if (id !== null) return id;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Return the window ID of the last leaf window in this container (depth-first from end).
+     */
+    _lastLeafWindowId(): number | null {
+        for (let i = this._tiledItems.length - 1; i >= 0; i--) {
+            const item = this._tiledItems[i];
+            if (item instanceof WindowWrapper) return item.getWindowId();
+            if (item instanceof WindowContainer) {
+                const id = item._lastLeafWindowId();
+                if (id !== null) return id;
+            }
+        }
+        return null;
+    }
 }

src/wm/monitor.ts

@@ -52,9 +52,9 @@ export default class Monitor {
         }
     }
 
-    addWindow(winWrap: WindowWrapper) {
+    addWindow(winWrap: WindowWrapper, index?: number) {
         const window_workspace = winWrap.getWindow().get_workspace().index();
-        this._workspaces[window_workspace].addWindow(winWrap);
+        this._workspaces[window_workspace].addWindow(winWrap, index);
     }
 
     tileWindows(): void {
@@ -72,6 +72,19 @@ export default class Monitor {
         this._workspaces.push(new WindowContainer(this._workArea));
     }
 
+    focusWindowTab(windowId: number): void {
+        for (const container of this._workspaces) {
+            if (container.focusWindowTab(windowId)) return;
+        }
+    }
+
+    refreshTabTitlesForWindow(winWrap: WindowWrapper): void {
+        const wsId = winWrap.getWorkspace();
+        if (wsId >= 0 && wsId < this._workspaces.length) {
+            this._workspaces[wsId].refreshTabTitles();
+        }
+    }
+
     hideTabBars(): void {
         for (const container of this._workspaces) {
             container.hideTabBar();

src/wm/tabBar.ts

@@ -1,4 +1,5 @@
 import Clutter from 'gi://Clutter';
+import Pango from 'gi://Pango';
 import St from 'gi://St';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import {Logger} from "../utils/logger.js";
@@ -25,6 +26,8 @@ export class TabBar {
             can_focus: false,
             track_hover: false,
         });
+        // Force all tabs to equal width regardless of text length
+        (this._bar.layout_manager as Clutter.BoxLayout).homogeneous = true;
     }
 
     /**
@@ -36,19 +39,22 @@ export class TabBar {
         this._buttons = [];
 
         items.forEach((item, index) => {
+            const label = new St.Label({
+                text: item.getTabLabel(),
+                style_class: 'aerospike-tab-label',
+                y_align: Clutter.ActorAlign.CENTER,
+                x_align: Clutter.ActorAlign.CENTER,
+                x_expand: true,
+            });
+            label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+
             const button = new St.Button({
                 style_class: 'aerospike-tab',
                 reactive: true,
                 can_focus: false,
                 track_hover: true,
                 x_expand: true,
-                child: new St.Label({
-                    text: item.getTabLabel(),
-                    style_class: 'aerospike-tab-label',
-                    y_align: Clutter.ActorAlign.CENTER,
-                    x_align: Clutter.ActorAlign.CENTER,
-                    x_expand: true,
-                }),
+                child: label,
             });
 
             button.connect('clicked', () => {

src/wm/window.ts

@@ -48,7 +48,13 @@ export class WindowWrapper {
     }
 
     getTabLabel(): string {
-        const appName = this._window.get_wm_class() ?? '';
+        const rawAppName = this._window.get_wm_class() ?? '';
+        // Strip reverse-domain prefix (e.g. "org.gnome.Nautilus" -> "Nautilus")
+        const lastName = rawAppName.includes('.')
+            ? (rawAppName.split('.').pop() ?? rawAppName)
+            : rawAppName;
+        // Capitalize first letter
+        const appName = lastName.charAt(0).toUpperCase() + lastName.slice(1);
         const title = this._window.get_title() ?? 'Untitled';
         if (appName && appName.toLowerCase() !== title.toLowerCase()) {
             return `${appName} | ${title}`;
@@ -108,6 +114,9 @@ export class WindowWrapper {
             this._window.connect("size-changed", () => {
                 windowManager.handleWindowPositionChanged(this);
             }),
+            this._window.connect('notify::title', () => {
+                windowManager.handleWindowTitleChanged(this);
+            }),
         );
     }
 

src/wm/windowManager.ts

@@ -5,7 +5,7 @@ import {WindowWrapper} from './window.js';
 import * as Main from "resource:///org/gnome/shell/ui/main.js";
 import {Logger} from "../utils/logger.js";
 import Monitor from "./monitor.js";
-import WindowContainer, {Layout} from "./container.js";
+import WindowContainer, {Direction, Layout} from "./container.js";
 import {Rect} from "../utils/rect.js";
 
 
@@ -22,6 +22,8 @@ export interface IWindowManager {
 
     handleWindowPositionChanged(winWrap: WindowWrapper): void;
 
+    handleWindowTitleChanged(winWrap: WindowWrapper): void;
+
     syncActiveWindow(): number | null;
 }
 
@@ -103,6 +105,7 @@ export default class WindowManager implements IWindowManager {
             }),
             global.display.connect("in-fullscreen-changed", () => {
                 Logger.log("IN FULL SCREEN CHANGED");
+                this._syncFullscreenTabBars();
             }),
         );
 
@@ -419,6 +422,11 @@ export default class WindowManager implements IWindowManager {
         this._tileMonitors();
     }
 
+    handleWindowTitleChanged(window: WindowWrapper): void {
+        const mon_id = window._window.get_monitor();
+        this._monitors.get(mon_id)?.refreshTabTitlesForWindow(window);
+    }
+
     public addWindowToMonitor(window: Meta.Window) {
         Logger.log("ADDING WINDOW TO MONITOR", window, window);
         var wrapper = new WindowWrapper(window, (winWrap) => this.handleWindowMinimized(winWrap))
@@ -434,6 +442,16 @@ export default class WindowManager implements IWindowManager {
         }
     }
 
+    private _syncFullscreenTabBars(): void {
+        for (const [monitorId, monitor] of this._monitors.entries()) {
+            if (global.display.get_monitor_in_fullscreen(monitorId)) {
+                monitor.hideTabBars();
+            } else if (!this._showingOverview) {
+                monitor.showTabBars();
+            }
+        }
+    }
+
     _tileMonitors(): void {
         this._isTiling = true;
         try {
@@ -486,6 +504,10 @@ export default class WindowManager implements IWindowManager {
         if (focusWindow) {
             this._activeWindowId = focusWindow.get_id();
             Logger.debug(`Active window changed to: ${this._activeWindowId} (${focusWindow.get_title()})`);
+
+            // If the focused window is inside a tabbed container, make it the active tab
+            const monId = focusWindow.get_monitor();
+            this._monitors.get(monId)?.focusWindowTab(this._activeWindowId);
         } else {
             this._activeWindowId = null;
             Logger.debug('No active window');
@@ -543,6 +565,203 @@ export default class WindowManager implements IWindowManager {
         }
     }
 
+    /**
+     * Move the active window in the given direction.
+     *
+     * 1. Find the container holding the active window.
+     * 2. Try to swap within the container (adjacent neighbour).
+     * 3. If already at the container edge, move the window to the
+     *    nearest monitor in that direction instead.
+     * 4. Re-tile to apply the new layout.
+     */
+    public moveInDirection(direction: Direction): void {
+        if (this._activeWindowId === null) {
+            Logger.warn("No active window, cannot move in direction");
+            return;
+        }
+
+        const container = this._findContainerForWindowAcrossMonitors(this._activeWindowId);
+        if (!container) {
+            Logger.warn("Could not find container for active window");
+            return;
+        }
+
+        const swapped = container.swapWindowInDirection(this._activeWindowId, direction);
+        if (swapped) {
+            Logger.info(`Moved window ${this._activeWindowId} ${direction}`);
+            this._tileMonitors();
+            return;
+        }
+
+        this._moveWindowCrossMonitor(this._activeWindowId, direction);
+    }
+
+    /**
+     * Move focus to the adjacent window in the given direction.
+     *
+     * 1. Find the container holding the active window.
+     * 2. Ask the container for the adjacent window in that direction.
+     * 3. If the container returns null (at the edge), try cross-monitor navigation.
+     * 4. Activate (focus) the target window.
+     */
+    public focusInDirection(direction: Direction): void {
+        if (this._activeWindowId === null) {
+            Logger.warn("No active window, cannot focus in direction");
+            return;
+        }
+
+        const container = this._findContainerForWindowAcrossMonitors(this._activeWindowId);
+        if (!container) {
+            Logger.warn("Could not find container for active window");
+            return;
+        }
+
+        const targetId = container.getAdjacentWindowId(this._activeWindowId, direction);
+        if (targetId !== null) {
+            this._activateWindowById(targetId);
+            return;
+        }
+
+        // At the edge of the container — try cross-monitor navigation
+        const crossMonitorId = this._findCrossMonitorWindow(direction);
+        if (crossMonitorId !== null) {
+            this._activateWindowById(crossMonitorId);
+        }
+    }
+
+    /**
+     * Focus a window by its ID. Finds the Meta.Window and calls activate().
+     */
+    private _activateWindowById(windowId: number): void {
+        for (const monitor of this._monitors.values()) {
+            const wrapped = monitor.getWindow(windowId);
+            if (wrapped) {
+                const metaWindow = wrapped.getWindow();
+                metaWindow.activate(global.get_current_time());
+                return;
+            }
+        }
+        Logger.warn(`_activateWindowById: window ${windowId} not found in any monitor`);
+    }
+
+    /**
+     * Find the adjacent monitor in the given direction from a current monitor.
+     * Returns the monitor ID or null if none exists in that direction.
+     */
+    private _findAdjacentMonitorId(currentMonitorId: number, direction: Direction): number | null {
+        const currentMonitor = this._monitors.get(currentMonitorId)!;
+        const currentArea = currentMonitor._workArea;
+        const currentCenterX = currentArea.x + currentArea.width / 2;
+        const currentCenterY = currentArea.y + currentArea.height / 2;
+
+        let bestMonitorId: number | null = null;
+        let bestDistance = Infinity;
+
+        for (const [monId, monitor] of this._monitors.entries()) {
+            if (monId === currentMonitorId) continue;
+
+            const area = monitor._workArea;
+            const centerX = area.x + area.width / 2;
+            const centerY = area.y + area.height / 2;
+
+            let isInDirection = false;
+            let distance = Infinity;
+
+            switch (direction) {
+                case Direction.LEFT:
+                    isInDirection = centerX < currentCenterX;
+                    distance = currentCenterX - centerX;
+                    break;
+                case Direction.RIGHT:
+                    isInDirection = centerX > currentCenterX;
+                    distance = centerX - currentCenterX;
+                    break;
+                case Direction.UP:
+                    isInDirection = centerY < currentCenterY;
+                    distance = currentCenterY - centerY;
+                    break;
+                case Direction.DOWN:
+                    isInDirection = centerY > currentCenterY;
+                    distance = centerY - currentCenterY;
+                    break;
+            }
+
+            if (isInDirection && distance < bestDistance) {
+                bestDistance = distance;
+                bestMonitorId = monId;
+            }
+        }
+
+        return bestMonitorId;
+    }
+
+    /**
+     * Return the monitor ID that contains the given window, or null.
+     */
+    private _findMonitorIdForWindow(windowId: number): number | null {
+        for (const [monId, monitor] of this._monitors.entries()) {
+            if (monitor.getWindow(windowId) !== undefined) return monId;
+        }
+        return null;
+    }
+
+    /**
+     * When at the edge of a container, find the nearest window on the adjacent
+     * monitor in the given direction.
+     *
+     * On the target monitor, picks the edge-most window:
+     *   - Navigating LEFT/UP   → last (far-edge) leaf window
+     *   - Navigating RIGHT/DOWN → first (near-edge) leaf window
+     */
+    private _findCrossMonitorWindow(direction: Direction): number | null {
+        if (this._activeWindowId === null) return null;
+
+        const currentMonitorId = this._findMonitorIdForWindow(this._activeWindowId);
+        if (currentMonitorId === null) return null;
+
+        const targetMonitorId = this._findAdjacentMonitorId(currentMonitorId, direction);
+        if (targetMonitorId === null) return null;
+
+        const targetMonitor = this._monitors.get(targetMonitorId)!;
+        const activeWorkspaceIndex = global.workspace_manager.get_active_workspace().index();
+        if (activeWorkspaceIndex >= targetMonitor._workspaces.length) return null;
+
+        const targetContainer = targetMonitor._workspaces[activeWorkspaceIndex];
+        if (targetContainer._tiledItems.length === 0) return null;
+
+        return (direction === Direction.LEFT || direction === Direction.UP)
+            ? targetContainer._lastLeafWindowId()
+            : targetContainer._firstLeafWindowId();
+    }
+
+    /**
+     * Move a window to the adjacent monitor in the given direction.
+     *
+     * The window is inserted at the "entry edge" of the target container:
+     *   - Moving RIGHT/DOWN → position 0 (near edge)
+     *   - Moving LEFT/UP    → end of the container (far edge)
+     */
+    private _moveWindowCrossMonitor(windowId: number, direction: Direction): void {
+        const currentMonitorId = this._findMonitorIdForWindow(windowId);
+        if (currentMonitorId === null) return;
+
+        const targetMonitorId = this._findAdjacentMonitorId(currentMonitorId, direction);
+        if (targetMonitorId === null) return;
+
+        const currentMonitor = this._monitors.get(currentMonitorId)!;
+        const wrapped = currentMonitor.getWindow(windowId);
+        if (!wrapped) return;
+
+        const targetMonitor = this._monitors.get(targetMonitorId)!;
+        const insertIndex = (direction === Direction.RIGHT || direction === Direction.DOWN) ? 0 : undefined;
+
+        currentMonitor.removeWindow(wrapped);
+        targetMonitor.addWindow(wrapped, insertIndex);
+
+        this._tileMonitors();
+        Logger.info(`Moved window ${windowId} to monitor ${targetMonitorId} (${direction})`);
+    }
+
     public printTreeStructure(): void {
         Logger.info("=".repeat(80));
         Logger.info("WINDOW TREE STRUCTURE");

stylesheet.css

@@ -13,6 +13,7 @@
     color: rgba(255, 255, 255, 0.5);
     font-size: 11px;
     font-weight: 400;
+    min-width: 0;
 }
 
 .aerospike-tab:hover {
@@ -28,4 +29,5 @@
 
 .aerospike-tab-label {
     font-size: 11px;
+    min-width: 0;
 }