feat!: Rework resize operations with resize mode

dark.css

@@ -55,3 +55,9 @@
 .pop-shell-tab-urgent {
     background: #D00;
 }
+
+.pop-shell-resize-hint {
+    background: #EDEDED;
+    padding: 12px;
+    border-radius: 32px;
+}

highcontrast.css

@@ -58,4 +58,10 @@
 
 .pop-shell-entry:indeterminate {
     font-style: italic
+}
+
+.pop-shell-resize-hint {
+    background: #EDEDED;
+    padding: 12px;
+    border-radius: 32px;
 }

keybindings/10-pop-shell-move.xml

@@ -17,13 +17,10 @@
   <KeyListEntry name="pop-monitor-right" description="Move window to rightward monitor"/>
   <KeyListEntry name="pop-monitor-up" description="Move window to upper monitor"/>
   <KeyListEntry name="tile-reject" description="Cancel changes"/>
-  <KeyListEntry name="tile-resize-left" description="Resize window smaller"/>
-  <KeyListEntry name="tile-resize-right" description="Resize window larger"/>
-  <KeyListEntry name="tile-resize-up" description="Resize window shorter"/>
-  <KeyListEntry name="tile-resize-down" description="Resize window taller"/>
   <KeyListEntry name="tile-swap-down" description="Swap window down"/>
   <KeyListEntry name="tile-swap-left" description="Swap window left"/>
   <KeyListEntry name="tile-swap-right" description="Swap window right"/>
   <KeyListEntry name="tile-swap-up" description="Swap window up"/>
   <KeyListEntry name="management-orientation" description="Change current window orientation"/>
+  <KeyListEntry name="resize-mode" description="Toggle resize mode"/>
 </KeyListEntries>

light.css

@@ -55,3 +55,9 @@
 .pop-shell-tab-urgent {
     background: #D00;
 }
+
+.pop-shell-resize-hint {
+    background: #EDEDED;
+    padding: 12px;
+    border-radius: 32px;
+}

schemas/org.gnome.shell.extensions.pop-shell.gschema.xml

@@ -178,25 +178,10 @@
             <summary>Toggle tiling orientation</summary>
         </key>
 
-        <!-- Resize in normal direction -->
-        <key type="as" name="tile-resize-left">
-            <default><![CDATA[['<Shift>Left','<Shift>KP_Left','<Shift>h']]]></default>
-            <summary>Resize window left</summary>
-        </key>
-
-        <key type="as" name="tile-resize-down">
-            <default><![CDATA[['<Shift>Down','<Shift>KP_Down','<Shift>j']]]></default>
-            <summary>Resize window down</summary>
-        </key>
-
-        <key type="as" name="tile-resize-up">
-            <default><![CDATA[['<Shift>Up','<Shift>KP_Up','<Shift>k']]]></default>
-            <summary>Resize window up</summary>
-        </key>
-
-        <key type="as" name="tile-resize-right">
-            <default><![CDATA[['<Shift>Right','<Shift>KP_Right','<Shift>l']]]></default>
-            <summary>Resize window right</summary>
+        <!-- Resize -->
+        <key type="as" name="resize-mode">
+            <default><![CDATA[['<Super>R']]]></default>
+            <summary>Toggle resize mode</summary>
         </key>
 
         <!-- Swap windows -->

src/extension.ts

@@ -1003,7 +1003,7 @@ export class Ext extends Ecs.System<ExtEvent> {
             if (!win.is_tilable(this)) {
                 return
             }
-            
+
             mon = win.meta.get_monitor()
             work = win.meta.get_workspace().index()
 

src/fork.ts

@@ -242,7 +242,7 @@ export class Fork {
 
             let region = this.area.clone();
 
-            const half = this.area.array[l] / 2;
+            const half = ~~(this.area.array[l] / 32) * 16
 
             let length;
             if (this.length_left > half - 32 && this.length_left < half + 32) {

src/keybindings.ts

@@ -16,7 +16,8 @@ export class Keybindings {
         this.ext = ext;
         this.global = {
             "activate-launcher": () => ext.window_search.open(ext),
-            "tile-enter": () => ext.tiler.enter(ext)
+            "resize-mode": () => ext.tiler.resize_mode(ext),
+            "tile-enter": () => ext.tiler.enter(ext),
         };
 
         this.window_focus = {

src/mod.d.ts

@@ -293,7 +293,7 @@ declare namespace St {
         show(): void;
     }
 
-    interface Bin extends St.Widget {
+    interface Bin extends Widget {
         // empty for now
     }
 
@@ -303,4 +303,8 @@ declare namespace St {
         get_clutter_text(): Clutter.Text;
         set_hint_text(hint: string): void;
     }
+
+    interface Icon extends Widget {
+        icon_name: string;
+    }
 }

src/stack.ts

@@ -10,7 +10,7 @@ import * as a from 'arena';
 import * as utils from 'utils';
 
 const Arena = a.Arena;
-const { St } = imports.gi;
+const { Clutter, GObject, St } = imports.gi;
 
 const ACTIVE_TAB = 'pop-shell-tab pop-shell-tab-active';
 const INACTIVE_TAB = 'pop-shell-tab pop-shell-tab-inactive';
@@ -42,6 +42,78 @@ function stack_widgets_new(): StackWidgets {
     return { tabs };
 }
 
+const ContainerButton = GObject.registerClass({
+    Signals: { 'activate': {} },
+}, class ImageButton extends St.Button {
+    _init(icon: St.Icon) {
+        super._init({
+            child: icon,
+            x_expand: true,
+            y_expand: true,
+        })
+    }
+})
+
+interface TabButton extends St.Button {
+    set_title: (title: string) => void;
+}
+
+const TabButton = GObject.registerClass({
+    Signals: { 'activate': {} },
+}, class TabButton extends St.Button {
+    _init(window: ShellWindow) {
+        const icon = window.icon(window.ext, 24)
+        icon.set_x_align(Clutter.ActorAlign.START)
+
+        const label = new St.Label({
+            y_expand: true,
+            x_align: Clutter.ActorAlign.START,
+            y_align: Clutter.ActorAlign.CENTER,
+            style: "padding-left: 8px"
+        })
+
+        label.text = window.title()
+
+        const container = new St.BoxLayout({
+            y_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        })
+
+        const close_button = new ContainerButton(new St.Icon({
+            icon_name: 'window-close-symbolic',
+            icon_size: 24,
+            y_align: Clutter.ActorAlign.CENTER,
+        }))
+
+        close_button.connect('clicked', () => {
+            window.meta.delete(global.get_current_time())
+        })
+
+        close_button.set_x_align(Clutter.ActorAlign.END)
+        close_button.set_y_align(Clutter.ActorAlign.CENTER)
+
+        container.add_actor(icon)
+        container.add_actor(label)
+        container.add_actor(close_button)
+
+        super._init({
+            child: container,
+            x_expand: true,
+            y_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        })
+
+
+        this._title = label
+    }
+
+    set_title(text: string) {
+        if (this._title) {
+            this._title.text = text
+        }
+    }
+})
+
 export class Stack {
     ext: Ext;
 
@@ -60,7 +132,7 @@ export class Stack {
 
     workspace: number;
 
-    buttons: a.Arena<St.Button> = new Arena();
+    buttons: a.Arena<TabButton> = new Arena();
 
     tabs_height: number = TAB_HEIGHT;
 
@@ -95,15 +167,9 @@ export class Stack {
         if (!this.widgets) return;
 
         const entity = window.entity;
-        const label = window.title()
         const active = Ecs.entity_eq(entity, this.active);
 
-        const button: St.Button = new St.Button({
-            label,
-            x_expand: true,
-            style_class: active ? ACTIVE_TAB : INACTIVE_TAB
-        });
-
+        const button = new TabButton(window)
         const id = this.buttons.insert(button);
 
         let tab: Tab = { active, entity, signals: [], button: id, button_signal: null };
@@ -443,7 +509,7 @@ export class Stack {
             }
 
             this.watch_signals(this.active_id, c.button, window);
-            this.buttons.get(c.button)?.set_label(window.title());
+            this.buttons.get(c.button)?.set_title(window.title());
             this.activate(window.entity);
         }
     }
@@ -598,7 +664,7 @@ export class Stack {
         this.tabs[comp].signals = [
             window.meta.connect('notify::title', () => {
                 this.window_exec(comp, entity, (window) => {
-                    this.buttons.get(button)?.set_label(window.title())
+                    this.buttons.get(button)?.set_title(window.title())
                 });
             }),