feat: adding start of pref panel and tweaking alpha to .3 to start

.gitignore

@@ -1,3 +1,5 @@
 .idea
 node_modules
 dist
+/schemas/gschemas.compiled
+/prettyborders.zip

Makefile

@@ -6,7 +6,7 @@ DOMAIN=lucaso.io
 all: dist/extension.js
 
 node_modules: package.json
-	npm install
+	pnpm install
 
 dist/extension.js dist/prefs.js: node_modules
 	tsc
@@ -16,7 +16,7 @@ schemas/gschemas.compiled: schemas/org.gnome.shell.extensions.$(NAME).gschema.xm
 
 #
 $(NAME).zip: dist/extension.js dist/prefs.js schemas/gschemas.compiled
-	#@cp -r schemas dist/
+	@cp -r schemas dist/
 	@cp metadata.json dist/
 	@cp stylesheet.css dist/
 	@(cd dist && zip ../$(NAME).zip -9r .)
@@ -32,7 +32,6 @@ install: $(NAME).zip
 clean:
 	@rm -rf dist node_modules $(NAME).zip
 
-
 test:
 	@dbus-run-session -- gnome-shell --nested --wayland
 

extension.ts

@@ -2,6 +2,7 @@ import GLib from 'gi://GLib';
 import Gio from 'gi://Gio';
 import St from 'gi://St';
 import Meta from 'gi://Meta';
+import cairo from "cairo";
 import Shell from 'gi://Shell';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import {Extension, ExtensionMetadata} from 'resource:///org/gnome/shell/extensions/extension.js';
@@ -29,7 +30,7 @@ export default class ActiveBorderExtension extends Extension {
 
         // Initialize color.ts cycling variables
         this.colorTimeoutId = null;
-        this.currentColor = new HSLColor(0, 1, .5); // Starting hue value
+        this.currentColor = new HSLColor(0, 1, .3); // Starting hue value
     }
 
     enable() {
@@ -38,16 +39,7 @@ export default class ActiveBorderExtension extends Extension {
         this._focusSignal = global.display.connect('notify::focus-window', () => {
             console.log("Focus Changed")
             this._updateBorder(global.display.focus_window);
-        });
+        })
-        // Connect to the "showing" signal for when the overview is opened
-
-        // let grab_begin = global.display.connect("grab-op-begin", () => {
-        //     console.log("Grab Started")
-        // })
-        // let grab_end = global.display.connect("grab-op-end", () => {
-        //     console.log("Grab Ended")
-        // })
-
         // Set initial border on the current window, if there is one
         this._updateBorder(global.display.focus_window);
     }
@@ -81,7 +73,7 @@ export default class ActiveBorderExtension extends Extension {
             height: rect.height + 4,
             // Initial style with default color.ts
             // style: `border: 4px solid hsl(${this.hue}, 100%, 50%); border-radius: 5px;`,
-            style: `border: 2px solid rgba(0, 0, 0, 0.8); border-radius: 3px;`
+            // style: `border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 3px;`
         });
 
         // Add the border actor to the UI group
@@ -106,7 +98,7 @@ export default class ActiveBorderExtension extends Extension {
         if (!rect) return;
 
         this.borderActor.set_position(rect.x - 2, rect.y - 2);
-        this.borderActor.set_size(rect.width + 4, rect.height + 4);
+        this.borderActor.set_size(rect.width + 2, rect.height + 2);
     }
 
     _clearBorder() {
@@ -127,18 +119,6 @@ export default class ActiveBorderExtension extends Extension {
         }
     }
 
-    disable() {
-        console.log("DISABLED PRETTY BORDERS!")
-        // Disconnect the focus signal and remove any existing borders
-        if (this._focusSignal) {
-            global.display.disconnect(this._focusSignal);
-            this._focusSignal = null;
-        }
-
-        // Clear the border on the last focused window if it exists
-        this._clearBorder();
-        this.lastFocusedWindow = null;
-    }
 
     // Start the color.ts cycling using GLib.timeout_add
     _startColorCycle() {
@@ -155,7 +135,7 @@ export default class ActiveBorderExtension extends Extension {
 
     _getStyleRGBA() {
         let rgb = RGBColor.fromHSL(this.currentColor)
-        return `border: 3px solid rgba(${rgb.r}, ${rgb.b}, ${rgb.g}, ${rgb.a}); border-radius: 10px;`
+        return `border: 2px solid rgba(${rgb.r}, ${rgb.b}, ${rgb.g}, ${rgb.a}); border-radius: 10px;`
     }
 
     // Stop the color.ts cycling
@@ -180,4 +160,18 @@ export default class ActiveBorderExtension extends Extension {
         return true; // Continue the timeout
     }
 
+    disable() {
+        console.log("DISABLED PRETTY BORDERS!")
+        // Disconnect the focus signal and remove any existing borders
+        if (this._focusSignal) {
+            global.display.disconnect(this._focusSignal);
+            this._focusSignal = null;
+        }
+
+        // Clear the border on the last focused window if it exists
+        this._clearBorder();
+        this.lastFocusedWindow = null;
+    }
+
+
 }

package.json

@@ -18,10 +18,11 @@
   "devDependencies": {
     "eslint": "^9.14.0",
     "eslint-plugin-jsdoc": "^50.4.3",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
-  },
-  "dependencies": {
     "@girs/gjs": "^4.0.0-beta.18",
     "@girs/gnome-shell": "^47.0.0"
+  },
+
+  "dependencies": {
   }
 }

prefs.ts

@@ -0,0 +1,52 @@
+import Gtk from 'gi://Gtk';
+import Adw from 'gi://Adw';
+import Gio from 'gi://Gio';
+import { ExtensionPreferences, gettext as _ } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';
+
+export default class GnomeRectanglePreferences extends ExtensionPreferences {
+    _settings?: Gio.Settings
+
+    fillPreferencesWindow(window: Adw.PreferencesWindow): Promise<void> {
+        this._settings = this.getSettings();
+
+        const page = new Adw.PreferencesPage({
+            title: _('General'),
+            iconName: 'dialog-information-symbolic',
+        });
+
+        const animationGroup = new Adw.PreferencesGroup({
+            title: _('Animation'),
+            description: _('Configure move/resize animation'),
+        });
+        page.add(animationGroup);
+
+        const animationEnabled = new Adw.SwitchRow({
+            title: _('Enabled'),
+            subtitle: _('Wether to animate windows'),
+        });
+        animationGroup.add(animationEnabled);
+
+        const paddingGroup = new Adw.PreferencesGroup({
+            title: _('Paddings'),
+            description: _('Configure the padding between windows'),
+        });
+        page.add(paddingGroup);
+
+        const paddingInner = new Adw.SpinRow({
+            title: _('Inner'),
+            subtitle: _('Padding between windows'),
+            adjustment: new Gtk.Adjustment({
+                lower: 0,
+                upper: 1000,
+                stepIncrement: 1
+            })
+        });
+        paddingGroup.add(paddingInner);
+
+        window.add(page)
+
+        this._settings!.bind('animate', animationEnabled, 'active', Gio.SettingsBindFlags.DEFAULT);
+        this._settings!.bind('padding-inner', paddingInner, 'value', Gio.SettingsBindFlags.DEFAULT);
+        return Promise.resolve();
+    }
+}

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

@@ -1,15 +1,30 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <schemalist>
-    <schema id="org.gnome.shell.extensions.my-extension" path="/org/gnome/shell/extensions/my-extension/">
+    <schema id="org.gnome.shell.extensions.border-customizer" path="/org/gnome/shell/extensions/border-customizer/">
-        <key name="padding-inner" type="i">
+        <key name="border-color" type="s">
-            <default>8</default>
+            <default>'#FFFFFF'</default>
-            <summary>Inner padding</summary>
+            <summary>Border Color</summary>
-            <description>Padding between windows</description>
+            <description>The color of the window borders in hexadecimal format.</description>
         </key>
-        <key name="animate" type="b">
+        <key name="rainbow" type="b">
-            <default>true</default>
+            <default>false</default>
-            <summary>Animation</summary>
+            <summary>Rainbow Mode</summary>
-            <description>Whether to animate window movement/resizing</description>
+            <description>If true, the border color cycles through rainbow colors.</description>
+        </key>
+        <key name="border-thickness" type="i">
+            <default>1</default>
+            <summary>Border Thickness</summary>
+            <description>The thickness of the window borders in pixels (1-10).</description>
+        </key>
+        <key name="border-radius" type="i">
+            <default>1</default>
+            <summary>Border Radius</summary>
+            <description>The radius of the window border corners in pixels (1-20).</description>
+        </key>
+        <key name="color-morph" type="b">
+            <default>false</default>
+            <summary>ColorMorph</summary>
+            <description>If true, enables color morphing effects on borders.</description>
         </key>
     </schema>
 </schemalist>

tsconfig.json

@@ -15,7 +15,7 @@
   ],
   "files": [
     "extension.ts",
-    "color.ts"
+    "color.ts",
-//    "prefs.ts"
+    "prefs.ts"
   ],
 }