Bump to version 65.2

Bump to version 56.11
Updated French translations based on contribution from Zac0511
2025-02-27 15:46:57 +00:00 · 2024-10-20 18:00:25 +01:00 · 2024-10-20 17:55:55 +01:00 · 2024-09-09 17:46:17 +01:00 · 2024-09-03 14:08:20 +01:00
65 changed files with 32931 additions and 21384 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,4 @@ gschemas.compiled
 zorin-taskbar@zorinos.com*.zip
 *.mo
 po/zorin-taskbar.pot
-Settings.ui.h
+ui/*.ui.h
--- a/26
+++ b/26
@@ -2,7 +2,9 @@

 UUID = zorin-taskbar@zorinos.com
 BASE_MODULES = extension.js stylesheet.css metadata.json COPYING README.md
-EXTRA_MODULES = appIcons.js convenience.js panel.js panelManager.js proximity.js intellihide.js progress.js panelPositions.js panelStyle.js overview.js taskbar.js transparency.js windowPreview.js prefs.js utils.js Settings.ui
+EXTRA_MODULES = appIcons.js panel.js panelManager.js proximity.js intellihide.js progress.js panelPositions.js panelSettings.js panelStyle.js overview.js taskbar.js transparency.js windowPreview.js prefs.js utils.js desktopIconsIntegration.js
+UI_MODULES = ui/BoxDynamicOpacityOptions.ui ui/BoxGroupAppsOptions.ui ui/BoxIntellihideOptions.ui ui/BoxMiddleClickOptions.ui ui/BoxOverlayShortcut.ui ui/BoxShowDateMenuOptions.ui ui/BoxShowDesktopOptions.ui ui/BoxWindowPreviewOptions.ui ui/SettingsAction.ui ui/SettingsBehavior.ui ui/SettingsPosition.ui ui/SettingsStyle.ui
+
 EXTRA_IMAGES = show-desktop-symbolic.svg

 TOLOCALIZE =  prefs.js appIcons.js
@@ -18,7 +20,7 @@ INSTALLNAME = zorin-taskbar@zorinos.com
 # in the metadata and in the generated zip-file.
 ifdef VERSION
 else
-	VERSION = 40
+	VERSION = 65
 endif

 ifdef TARGET
@@ -44,11 +46,17 @@ mergepo: potfile
 		msgmerge -U $$l ./po/zorin-taskbar.pot; \
 	done;

-./po/zorin-taskbar.pot: $(TOLOCALIZE) Settings.ui
+./po/zorin-taskbar.pot: $(TOLOCALIZE)
 	mkdir -p po
-	xgettext -k_ -kN_ -o po/zorin-taskbar.pot --package-name "Zorin Taskbar" $(TOLOCALIZE)
-	intltool-extract --type=gettext/glade Settings.ui
-	xgettext -k_ -kN_ --join-existing -o po/zorin-taskbar.pot Settings.ui.h
+	xgettext -k_ -kN_ -o po/zorin-taskbar.pot --package-name "Zorin Taskbar" $(TOLOCALIZE) --from-code=UTF-8
+	
+	for l in $(UI_MODULES) ; do \
+		intltool-extract --type=gettext/glade $$l; \
+		xgettext -k_ -kN_ -o po/zorin-taskbar.pot $$l.h --join-existing --from-code=UTF-8; \
+		rm -rf $$l.h; \
+	done;
+
+	sed -i -e 's/&\#10;/\\n/g' po/zorin-taskbar.pot

 ./po/%.mo: ./po/%.po
 	msgfmt -c $< -o $@
@@ -72,10 +80,8 @@ _build: all
 	-rm -fR ./_build
 	mkdir -p _build
 	cp $(BASE_MODULES) $(EXTRA_MODULES) _build
-
-ifeq ($(TARGET),ego)
-	find _build -name '*.js' -exec sed -i '/\/\/!start-update/,/\/\/!end-update/d' {} +
-endif
+	mkdir -p _build/ui
+	cp $(UI_MODULES) _build/ui

 	mkdir -p _build/img
 	cd img ; cp $(EXTRA_IMAGES) ../_build/img/
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
 # Zorin Taskbar
 The official taskbar for Zorin OS.

-Based on the [Dash to Panel](https://github.com/home-sweet-gnome/dash-to-panel) Gnome Shell extension and the [Dash to Dock](https://github.com/micheleg/dash-to-dock) extension by micheleg.
+Re-based on the [Dash to Panel](https://github.com/home-sweet-gnome/dash-to-panel) GNOME Shell extension. Dash to Panel was initially based on the original version of Zorin Taskbar from 2016, with some code derived from the [Dash to Dock](https://github.com/micheleg/dash-to-dock) extension by micheleg.
--- a/Settings.ui
+++ b/Settings.ui
--- a/appIcons.js
+++ b/appIcons.js
--- a/convenience.js
+++ b/convenience.js
@@ -1,89 +0,0 @@
-/*
- * This file is part of the Zorin Taskbar extension for Zorin OS.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- *
- * Credits:
- * This file is based on code from the Dash to Dock extension by micheleg
- * and code from the Dash to Panel extension
- * Some code was also adapted from the upstream Gnome Shell source code.
- */
-
-const Config = imports.misc.config;
-const ExtensionUtils = imports.misc.extensionUtils;
-const Gettext = imports.gettext;
-const Gio = imports.gi.Gio;
-
-/**
- * initTranslations:
- * @domain: (optional): the gettext domain to use
- *
- * Initialize Gettext to load translations from extensionsdir/locale.
- * If @domain is not provided, it will be taken from metadata['gettext-domain']
- */
-function initTranslations(domain) {
-    let extension = ExtensionUtils.getCurrentExtension();
-
-    domain = domain || extension.metadata['gettext-domain'];
-
-    // Check if this extension was built with "make zip-file", and thus
-    // has the locale files in a subfolder
-    // otherwise assume that extension has been installed in the
-    // same prefix as gnome-shell
-    let localeDir = extension.dir.get_child('locale');
-    if (localeDir.query_exists(null))
-        Gettext.bindtextdomain(domain, localeDir.get_path());
-    else
-        Gettext.bindtextdomain(domain, Config.LOCALEDIR);
-}
-
-/**
- * getSettings:
- * @schema: (optional): the GSettings schema id
- *
- * Builds and return a GSettings schema for @schema, using schema files
- * in extensionsdir/schemas. If @schema is not provided, it is taken from
- * metadata['settings-schema'].
- */
-function getSettings(schema) {
-    let extension = ExtensionUtils.getCurrentExtension();
-
-    schema = schema || extension.metadata['settings-schema'];
-
-    const GioSSS = Gio.SettingsSchemaSource;
-
-    // Check if this extension was built with "make zip-file", and thus
-    // has the schema files in a subfolder
-    // otherwise assume that extension has been installed in the
-    // same prefix as gnome-shell (and therefore schemas are available
-    // in the standard folders)
-    let schemaDir = extension.dir.get_child('schemas');
-    let schemaSource;
-    if (schemaDir.query_exists(null))
-        schemaSource = GioSSS.new_from_directory(schemaDir.get_path(),
-                                                 GioSSS.get_default(),
-                                                 false);
-    else
-        schemaSource = GioSSS.get_default();
-
-    let schemaObj = schemaSource.lookup(schema, true);
-    if (!schemaObj)
-        throw new Error('Schema ' + schema + ' could not be found for extension '
-                        + extension.metadata.uuid + '. Please check your installation.');
-
-    return new Gio.Settings({
-        settings_schema: schemaObj
-    });
-}
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,126 @@
+gnome-shell-extension-zorin-taskbar (65.2) noble; urgency=medium
+
+  * Separated floating rounded theme from intellihide as an independent
+    styling option
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Thu, 27 Feb 2025 13:57:03 +0000
+
+gnome-shell-extension-zorin-taskbar (65.1) noble; urgency=medium
+
+  * Fixed various bugs
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 26 Feb 2025 12:20:34 +0000
+
+gnome-shell-extension-zorin-taskbar (65) noble; urgency=medium
+
+  * Re-based on upstream version 65
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Tue, 25 Feb 2025 22:29:43 +0000
+
+gnome-shell-extension-zorin-taskbar (56.11) jammy; urgency=medium
+
+  * Updated French translations
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sun, 20 Oct 2024 17:58:19 +0100
+
+gnome-shell-extension-zorin-taskbar (56.10) jammy; urgency=medium
+
+  * Bug fix for window previews
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Mon, 09 Sep 2024 17:44:12 +0100
+
+gnome-shell-extension-zorin-taskbar (56.9) jammy; urgency=medium
+
+  * Increased window preview leave timeout to 250ms
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Tue, 03 Sep 2024 14:04:19 +0100
+
+gnome-shell-extension-zorin-taskbar (56.8) jammy; urgency=medium
+
+  * Fixed barrier code
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Mon, 12 Aug 2024 23:38:18 +0100
+
+gnome-shell-extension-zorin-taskbar (56.7) jammy; urgency=medium
+
+  * Added link to Application Switching settings to set workspace and
+    monitor isolation behaviour
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 15 May 2024 19:21:08 +0100
+
+gnome-shell-extension-zorin-taskbar (56.6) jammy; urgency=medium
+
+  * Correctly handle desktop icons when calculating proximity
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Tue, 27 Feb 2024 20:11:37 +0000
+
+gnome-shell-extension-zorin-taskbar (56.5) jammy; urgency=medium
+
+  * Fixed show desktop functionality
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 13 Dec 2023 17:22:08 +0000
+
+gnome-shell-extension-zorin-taskbar (56.4) jammy; urgency=medium
+
+  * Fixed regression with shortcuts overlay
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 13 Dec 2023 16:21:07 +0000
+
+gnome-shell-extension-zorin-taskbar (56.3) jammy; urgency=medium
+
+  * Adjusted shortcut-num-keys default setting
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Tue, 12 Dec 2023 22:21:55 +0000
+
+gnome-shell-extension-zorin-taskbar (56.2) jammy; urgency=medium
+
+  * Fixed floating theme centering bug
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sun, 10 Dec 2023 18:41:12 +0000
+
+gnome-shell-extension-zorin-taskbar (56.1) jammy; urgency=medium
+
+  * Moved isolate settings to GNOME Control Center
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sat, 18 Nov 2023 19:23:50 +0000
+
+gnome-shell-extension-zorin-taskbar (56.0.2) jammy; urgency=medium
+
+  * Removed blue background on favorite apps when dragging app icons
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 01 Nov 2023 12:39:55 +0000
+
+gnome-shell-extension-zorin-taskbar (56.0.1) jammy; urgency=medium
+
+  * Corrected Makefile
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 31 May 2023 01:23:02 +0100
+
+gnome-shell-extension-zorin-taskbar (56) jammy; urgency=medium
+
+  * Re-based on upstream version 56 as at commit
+    9274982189f2d5306afaf29f274d007f0cd12d48
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Wed, 31 May 2023 00:14:18 +0100
+
+gnome-shell-extension-zorin-taskbar (40.23) focal; urgency=medium
+
+  * Changed default window preview size to 200px
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sat, 16 Oct 2021 12:44:27 +0100
+
+gnome-shell-extension-zorin-taskbar (40.22) focal; urgency=medium
+
+  * Fixed Spanish translations
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sun, 22 Aug 2021 16:45:29 +0100
+
+gnome-shell-extension-zorin-taskbar (40.21) focal; urgency=medium
+
+  * Updated Spanish translations
+
+ -- Artyom Zorin <azorin@zoringroup.com>  Sun, 22 Aug 2021 15:49:06 +0100
+
 gnome-shell-extension-zorin-taskbar (40.20) focal; urgency=medium

  * Corrected translation string
--- a/debian/control
+++ b/debian/control
@@ -2,12 +2,12 @@ Source: gnome-shell-extension-zorin-taskbar
 Section: gnome
 Priority: optional
 Maintainer: Artyom Zorin <azorin@zoringroup.com>
-Build-Depends: debhelper-compat (= 12), libglib2.0-bin, zip
-Standards-Version: 4.5.0
+Build-Depends: debhelper-compat (= 13), libglib2.0-bin, zip
+Standards-Version: 4.6.0
 Rules-Requires-Root: no

 Package: gnome-shell-extension-zorin-taskbar
 Architecture: all
-Depends: ${misc:Depends}, gnome-shell (>= 3.18)
+Depends: ${misc:Depends}, gnome-shell (>= 46), gnome-shell (<< 48~)
 Description: Zorin Taskbar extension
- A taskbar extension for the Zorin Desktop environment.
+ A taskbar extension for the Zorin OS desktop.
--- a/debian/copyright
+++ b/debian/copyright
@@ -2,8 +2,8 @@ Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
 Upstream-Name: gnome-shell-extension-zorin-taskbar

 Files: *
-Copyright: 2016-2020, Jason DeRose (https://github.com/jderose9)
-           2016-2020, Zorin OS Technologies Ltd.
+Copyright: 2016-2025, Jason DeRose (https://github.com/jderose9)
+           2016-2025, Zorin OS Technologies Ltd.
 License: GPL-2+

 Files: po/cs.po
@@ -52,8 +52,12 @@ Files: po/tr.po
 Copyright: 2018 Serdar Sağlam <teknomobil@yandex.com>
 License: GPL-2+

+Files: po/sk.po
+Copyright: 2021 Jose Riha <jose1711@gmail.com>
+License: GPL-2+
+
 Files: debian/*
-Copyright: 2017-2020 Jonathan Carter <jcc@debian.org>
+Copyright: 2017-2021 Jonathan Carter <jcc@debian.org>
 License: GPL-2+

 License: GPL-2+
--- a/desktopIconsIntegration.js
+++ b/desktopIconsIntegration.js
@@ -0,0 +1,165 @@
+/*
+ * The code in this file is distributed under a "1-clause BSD license",
+ * which makes it compatible with GPLv2 and GPLv3 too, and others.
+ *
+ * License text:
+ *
+ * Copyright (C) 2021 Sergio Costas (rastersoft@gmail.com)
+ *
+ * Redistribution and use in source and binary forms, with or without modification,
+ * are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/*******************************************************************************
+ * Integration class
+ *
+ * This class must be added to other extensions in order to integrate
+ * them with Desktop Icons NG. It allows an extension to notify how much margin
+ * it uses in each side of each monitor.
+ *
+ * DON'T SEND PATCHES TO THIS FILE TO THE EXTENSION MAINTAINER. SEND THEM TO
+ * DESKTOP ICONS NG MAINTAINER: https://gitlab.com/rastersoft/desktop-icons-ng
+ *
+ * In the *enable()* function, create a *DesktopIconsUsableAreaClass()*
+ * object with
+ *
+ *     new DesktopIconsIntegration.DesktopIconsUsableAreaClass(object);
+ *
+ * Now, in the *disable()* function just call to the *destroy()* method before
+ * nullifying the pointer. You must create a new object in enable() the next
+ * time the extension is enabled.
+ *
+ * In your code, every time you change the margins, you should call first to
+ * *resetMargins()* method to clear the current margins, and then call to
+ * *setMargins(...)* method as many times as you need to set the margins in each
+ * monitor. You don't need to call it for all the monitors, only for those where
+ * you are painting something. If you don't set values for a monitor, they will
+ * be considered zero.
+ *
+ * The margins values are relative to the monitor border.
+ *
+ *******************************************************************************/
+
+import GLib from 'gi://GLib';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import * as ExtensionUtils from 'resource:///org/gnome/shell/misc/extensionUtils.js';
+import {Extension} from 'resource:///org/gnome/shell/extensions/extension.js';
+
+const IDENTIFIER_UUID = "130cbc66-235c-4bd6-8571-98d2d8bba5e2";
+
+export class DesktopIconsUsableAreaClass {
+    _checkIfExtensionIsEnabled(extension) {
+        return (extension?.state === ExtensionUtils.ExtensionState.ENABLED) ||
+               (extension?.state === ExtensionUtils.ExtensionState.ACTIVE);
+    }
+
+    constructor() {
+        const Me = Extension.lookupByURL(import.meta.url);
+        this._UUID = Me.uuid;
+        this._extensionManager = Main.extensionManager;
+        this._timedMarginsID = 0;
+        this._margins = {};
+        this._emID = this._extensionManager.connect('extension-state-changed', (_obj, extension) => {
+            if (!extension)
+                return;
+
+            // If an extension is being enabled and lacks the DesktopIconsUsableArea object, we can avoid launching a refresh
+            if (this._checkIfExtensionIsEnabled(extension)) {
+                this._sendMarginsToExtension(extension);
+                return;
+            }
+            // if the extension is being disabled, we must do a full refresh, because if there were other extensions originally
+            // loaded after that extension, those extensions will be disabled and enabled again without notification
+            this._changedMargins();
+        });
+    }
+
+    /**
+     * Sets or updates the top, bottom, left and right margins for a
+     * monitor. Values are measured from the monitor border (and NOT from
+     * the workspace border).
+     *
+     * @param {int} monitor Monitor number to which set the margins.
+     *                      A negative value means "the primary monitor".
+     * @param {int} top Top margin in pixels
+     * @param {int} bottom Bottom margin in pixels
+     * @param {int} left Left margin in pixels
+     * @param {int} right Right margin in pixels
+     */
+    setMargins(monitor, top, bottom, left, right) {
+        this._margins[monitor] = {
+            'top': top,
+            'bottom': bottom,
+            'left': left,
+            'right': right
+        };
+        this._changedMargins();
+    }
+
+    /**
+     * Clears the current margins. Must be called before configuring the monitors
+     * margins with setMargins().
+     */
+    resetMargins() {
+        this._margins = {};
+        this._changedMargins();
+    }
+
+    /**
+     * Disconnects all the signals and removes the margins.
+     */
+    destroy() {
+        if (this._emID) {
+            this._extensionManager.disconnect(this._emID);
+            this._emID = 0;
+        }
+        if (this._timedMarginsID) {
+            GLib.source_remove(this._timedMarginsID);
+            this._timedMarginsID = 0;
+        }
+        this._margins = null;
+        this._changedMargins();
+    }
+
+    _changedMargins() {
+        if (this._timedMarginsID) {
+            GLib.source_remove(this._timedMarginsID);
+        }
+        this._timedMarginsID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, ()=> {
+            this._sendMarginsToAll();
+            this._timedMarginsID = 0;
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    _sendMarginsToAll() {
+        this._extensionManager.getUuids().forEach(uuid =>
+            this._sendMarginsToExtension(this._extensionManager.lookup(uuid)));
+    }
+
+    _sendMarginsToExtension(extension) {
+        // check that the extension is an extension that has the logic to accept
+        // working margins
+        if (!this._checkIfExtensionIsEnabled(extension))
+            return;
+
+        const usableArea = extension?.stateObj?.DesktopIconsUsableArea;
+        if (usableArea?.uuid === IDENTIFIER_UUID)
+            usableArea.setMarginsForExtension(this._UUID, this._margins);
+    }
+}
--- a/extension.js
+++ b/extension.js
@@ -17,124 +17,116 @@
 */


-const Main = imports.ui.main;
-const Meta = imports.gi.Meta;
-const Gio = imports.gi.Gio;
-const GLib = imports.gi.GLib;
-const Lang = imports.lang;
-const Shell = imports.gi.Shell;
-const St = imports.gi.St;
-const WindowManager = imports.ui.windowManager;
-const ExtensionUtils = imports.misc.extensionUtils;
-const Mainloop = imports.mainloop;
-const Signals = imports.signals;
+import Gio from 'gi://Gio';
+
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import {EventEmitter} from 'resource:///org/gnome/shell/misc/signals.js';
+import {Extension, gettext as _} from 'resource:///org/gnome/shell/extensions/extension.js';
+
+import * as  PanelManager from './panelManager.js';
+import * as AppIcons from './appIcons.js';

-const Me = ExtensionUtils.getCurrentExtension();
-const Convenience = Me.imports.convenience;
-const PanelManager = Me.imports.panelManager;
-const Utils = Me.imports.utils;

 const ZORIN_DASH_UUID = 'zorin-dash@zorinos.com';

 let panelManager;
-let oldDash;
 let extensionChangedHandler;
+let startupCompleteHandler;
 let disabledZorinDash;
-let extensionSystem = (Main.extensionManager || imports.ui.extensionSystem);
+let extensionSystem = Main.extensionManager;

-function init() {
-    Convenience.initTranslations(Utils.TRANSLATION_DOMAIN);
-    
-    //create an object that persists until gnome-shell is restarted, even if the extension is disabled
-    Me.persistentStorage = {};
-}
+export let DTP_EXTENSION = null;
+export let SETTINGS = null;
+export let DESKTOPSETTINGS = null;
+export let TERMINALSETTINGS = null;
+export let PERSISTENTSTORAGE = null;
+export let EXTENSION_UUID = null;
+export let EXTENSION_PATH = null;

-function enable() {
-    // The Zorin Dash extension might get enabled after this extension
-    extensionChangedHandler = extensionSystem.connect('extension-state-changed', (data, extension) => {
-        if (extension.uuid === ZORIN_DASH_UUID && extension.state === 1) {
-            _enable();
-        }
-    });
+export default class ZorinTaskbarExtension extends Extension {
+    constructor(metadata) {
+        super(metadata);

-    //create a global object that can emit signals and conveniently expose functionalities to other extensions 
-    global.zorinTaskbar = {};
-    Signals.addSignalMethods(global.zorinTaskbar);
-    
-    _enable();
-}
-
-function _enable() {
-    let zorinDash = Main.extensionManager ?
-                     Main.extensionManager.lookup(ZORIN_DASH_UUID) : //gnome-shell >= 3.33.4
-                     ExtensionUtils.extensions[ZORIN_DASH_UUID];
-
-    if (zorinDash && zorinDash.stateObj && zorinDash.stateObj.dockManager) {
-        // Disable Zorin Dash
-        let extensionOrder = (extensionSystem.extensionOrder || extensionSystem._extensionOrder);
-
-        Utils.getStageTheme().get_theme().unload_stylesheet(zorinDash.stylesheet);
-        zorinDash.stateObj.disable();
-        disabledZorinDash = true;
-        zorinDash.state = 2; //ExtensionState.DISABLED
-        extensionOrder.splice(extensionOrder.indexOf(ZORIN_DASH_UUID), 1);
-
-        //reset to prevent conflicts with the zorin-dash
-        if (panelManager) {
-            disable(true);
-        }
+        this._realHasOverview = Main.sessionMode.hasOverview;
+        
+        //create an object that persists until gnome-shell is restarted, even if the extension is disabled
+        PERSISTENTSTORAGE = {};
    }

-    if (panelManager) return; //already initialized
+    enable() {
+        DTP_EXTENSION = this;

-    Me.settings = Convenience.getSettings('org.gnome.shell.extensions.zorin-taskbar');
-    Me.desktopSettings = Convenience.getSettings('org.gnome.desktop.interface');
+        // The Zorin Dash extension might get enabled after this extension
+        extensionChangedHandler = extensionSystem.connect('extension-state-changed', (data, extension) => {
+            if (extension.uuid === ZORIN_DASH_UUID && extension.state === 1) {
+                _enable(this);
+            }
+        });

-    panelManager = new PanelManager.dtpPanelManager();
+        //create a global object that can emit signals and conveniently expose functionalities to other extensions 
+        global.zorinTaskbar = new EventEmitter();
+        
+        _enable(this);
+    }
+
+    disable(reset = false) {
+        panelManager.disable();
+
+        DTP_EXTENSION = null;
+        SETTINGS = null;
+        DESKTOPSETTINGS = null;
+        TERMINALSETTINGS = null;
+        panelManager = null;
+
+        if (!reset) {
+            extensionSystem.disconnect(extensionChangedHandler);
+
+            if (disabledZorinDash) {
+                disabledZorinDash = false;
+                extensionSystem.enableExtension(ZORIN_DASH_UUID);
+            }
+
+            delete global.zorinTaskbar;
+
+            AppIcons.resetRecentlyClickedApp();
+        }
+
+        if (startupCompleteHandler) {
+            Main.layoutManager.disconnect(startupCompleteHandler);
+            startupCompleteHandler = null;
+        }
+
+        Main.sessionMode.hasOverview = this._realHasOverview;
+    }
+}
+
+function _enable(extension) {
+    let enabled = global.settings.get_strv('enabled-extensions');
+
+    if (enabled?.indexOf(ZORIN_DASH_UUID) >= 0) {
+        disabledZorinDash = true;
+        extensionSystem.disableExtension(ZORIN_DASH_UUID);
+    }
+
+    if (panelManager)
+        return panelManager.toggleDash(); // already initialized but Zorin Dash restored the original dash on disable
+
+    SETTINGS = extension.getSettings('org.gnome.shell.extensions.zorin-taskbar');
+    DESKTOPSETTINGS = new Gio.Settings({schema_id: 'org.gnome.desktop.interface'});
+    TERMINALSETTINGS = new Gio.Settings({schema_id: 'org.gnome.desktop.default-applications.terminal'})
+    EXTENSION_UUID = extension.uuid
+    EXTENSION_PATH = extension.path
+
+    Main.layoutManager.startInOverview = false;
+
+    if (Main.layoutManager._startingUp) {
+        Main.sessionMode.hasOverview = false;
+        startupCompleteHandler = Main.layoutManager.connect('startup-complete', () => {
+            Main.sessionMode.hasOverview = extension._realHasOverview
+        });
+    }
+
+    panelManager = new PanelManager.PanelManager();

    panelManager.enable();
-    
-    Utils.removeKeybinding('open-application-menu');
-    Utils.addKeybinding(
-        'open-application-menu',
-        new Gio.Settings({ schema_id: WindowManager.SHELL_KEYBINDINGS_SCHEMA }),
-        Lang.bind(this, function() {
-            panelManager.primaryPanel.taskbar.popupFocusedAppSecondaryMenu();
-        }),
-        Shell.ActionMode.NORMAL | Shell.ActionMode.POPUP
-    );
-
-    // Pretend I'm the dash: meant to make appgrd swarm animation come from the
-    // right position of the appShowButton.
-    oldDash = Main.overview._dash;
-    Main.overview._dash = panelManager.primaryPanel.taskbar;
-}
-
-function disable(reset) {
-    panelManager.disable();
-    Main.overview._dash = oldDash;
-    Me.settings.run_dispose();
-    Me.desktopSettings.run_dispose();
-
-    delete Me.settings;
-    oldDash = null;
-    panelManager = null;
-    
-    Utils.removeKeybinding('open-application-menu');
-    Utils.addKeybinding(
-        'open-application-menu',
-        new Gio.Settings({ schema_id: WindowManager.SHELL_KEYBINDINGS_SCHEMA }),
-        Lang.bind(Main.wm, Main.wm._toggleAppMenu),
-        Shell.ActionMode.NORMAL | Shell.ActionMode.POPUP
-    );
-
-    if (!reset) {
-        extensionSystem.disconnect(extensionChangedHandler);
-        delete global.zorinTaskbar;
-
-        // Re-enable Zorin Dash if it was disabled by Zorin Taskbar
-        if (disabledZorinDash && Main.sessionMode.allowExtensions) {
-            (extensionSystem._callExtensionEnable || extensionSystem.enableExtension).call(extensionSystem, ZORIN_DASH_UUID);
-        }
-    }
 }
--- a/intellihide.js
+++ b/intellihide.js
@@ -18,22 +18,20 @@
 * This file is based on code from the Dash to Panel extension
 */

-const Lang = imports.lang;
-const Clutter = imports.gi.Clutter;
-const Meta = imports.gi.Meta;
-const Shell = imports.gi.Shell;
-const St = imports.gi.St;
+import Clutter from 'gi://Clutter';
+import Meta from 'gi://Meta';
+import Shell from 'gi://Shell';
+import St from 'gi://St';

-var GrabHelper = imports.ui.grabHelper;
-const Layout = imports.ui.layout;
-const Main = imports.ui.main;
-const OverviewControls = imports.ui.overviewControls;
-const PointerWatcher = imports.ui.pointerWatcher;
+import * as GrabHelper from 'resource:///org/gnome/shell/ui/grabHelper.js';
+import * as Layout from 'resource:///org/gnome/shell/ui/layout.js';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import * as OverviewControls from 'resource:///org/gnome/shell/ui/overviewControls.js';
+import * as PointerWatcher from 'resource:///org/gnome/shell/ui/pointerWatcher.js';

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Panel = Me.imports.panel;
-const Proximity = Me.imports.proximity;
-const Utils = Me.imports.utils;
+import * as Proximity from './proximity.js';
+import * as Utils from './utils.js';
+import {SETTINGS} from './extension.js';

 var INTELLIHIDE_PRESSURE_THRESHOLD = 100;
 var INTELLIHIDE_PRESSURE_TIME = 1000;
@@ -51,20 +49,18 @@ const MIN_UPDATE_MS = 250;
 const T1 = 'checkGrabTimeout';
 const T2 = 'limitUpdateTimeout';
 const T3 = 'postAnimateTimeout';
-const T4 = 'panelBoxClipTimeout';

-var SIDE_CONTROLS_ANIMATION_TIME = OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / (OverviewControls.SIDE_CONTROLS_ANIMATION_TIME > 1 ? 1000 : 1);
+const SIDE_CONTROLS_ANIMATION_TIME = OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / (OverviewControls.SIDE_CONTROLS_ANIMATION_TIME > 1 ? 1000 : 1);

-var Hold = {
+export const Hold = {
    NONE: 0,
    TEMPORARY: 1,
    PERMANENT: 2
 };

-var Intellihide = Utils.defineClass({
-    Name: 'ZorinTaskbar.Intellihide',
+export const Intellihide = class {

-    _init: function(dtpPanel) {
+    constructor(dtpPanel) {
        this._dtpPanel = dtpPanel;
        this._panelBox = dtpPanel.panelBox;
        this._panelManager = dtpPanel.panelManager;
@@ -74,14 +70,14 @@ var Intellihide = Utils.defineClass({
        this._signalsHandler = new Utils.GlobalSignalsHandler();
        this._timeoutsHandler = new Utils.TimeoutsHandler();

-        this._intellihideChangedId = Me.settings.connect('changed::intellihide', () => this._changeEnabledStatus());
-        this._intellihideOnlySecondaryChangedId = Me.settings.connect('changed::intellihide-only-secondary', () => this._changeEnabledStatus());
+        this._intellihideChangedId = SETTINGS.connect('changed::intellihide', () => this._changeEnabledStatus());
+        this._intellihideOnlySecondaryChangedId = SETTINGS.connect('changed::intellihide-only-secondary', () => this._changeEnabledStatus());

        this.enabled = false;
        this._changeEnabledStatus();
-    },
+    }

-    enable: function() {
+    enable() {
        this.enabled = true;
        this._monitor = this._dtpPanel.monitor;
        this._animationDestination = -1;
@@ -96,10 +92,11 @@ var Intellihide = Utils.defineClass({
        this._setTrackPanel(true);
        this._bindGeneralSignals();

-        if (Me.settings.get_boolean('intellihide-hide-from-windows')) {
+        if (SETTINGS.get_boolean('intellihide-hide-from-windows')) {
            this._proximityWatchId = this._proximityManager.createWatch(
-                this._panelBox.get_parent(), 
-                Proximity.Mode[Me.settings.get_string('intellihide-behaviour')], 
+                this._panelBox.get_parent(),
+                this._dtpPanel.monitor.index,
+                Proximity.Mode[SETTINGS.get_string('intellihide-behaviour')], 
                0, 0,
                overlap => { 
                    this._windowOverlap = overlap;
@@ -110,10 +107,9 @@ var Intellihide = Utils.defineClass({

        this._setRevealMechanism();
        this._queueUpdatePanelPosition();
-        this._toggleFloatingRoundedTheme();
-    },
+    }

-    disable: function(reset) {
+    disable(reset) {
        if (this._proximityWatchId) {
            this._proximityManager.removeWatch(this._proximityWatchId);
        }
@@ -128,86 +124,64 @@ var Intellihide = Utils.defineClass({
        this._revealPanel(!reset);
        
        this.enabled = false;
+    }

-        if (this._panelBox.has_style_class_name('floating')) {
-            this._panelBox.remove_style_class_name('floating');
-            
-            this._resetPanelGeometry();
-        }
-    },
-
-    destroy: function() {
-        Me.settings.disconnect(this._intellihideChangedId);
-        Me.settings.disconnect(this._intellihideOnlySecondaryChangedId);
+    destroy() {
+        SETTINGS.disconnect(this._intellihideChangedId);
+        SETTINGS.disconnect(this._intellihideOnlySecondaryChangedId);
        
        if (this.enabled) {
            this.disable();
        }
-    },
+    }

-    toggle: function() {
+    toggle() {
        this[this._holdStatus & Hold.PERMANENT ? 'release' : 'revealAndHold'](Hold.PERMANENT);
-    },
+    }

-    revealAndHold: function(holdStatus) {
+    revealAndHold(holdStatus) {
        if (this.enabled && !this._holdStatus) {
            this._revealPanel();
        }
        
        this._holdStatus |= holdStatus;
-    },
+    }

-    release: function(holdStatus) {
+    release(holdStatus) {
        this._holdStatus -= holdStatus;

        if (this.enabled && !this._holdStatus) {
            this._queueUpdatePanelPosition();
        }
-    },
+    }

-    reset: function() {
+    reset() {
        this.disable(true);
        this.enable();
-    },
-    
-    _toggleFloatingRoundedTheme: function() {
-        if (Me.settings.get_boolean('intellihide-floating-rounded-theme')) {
-            if (!this._panelBox.has_style_class_name('floating'))
-                this._panelBox.add_style_class_name('floating');
-        } else {
-            if (this._panelBox.has_style_class_name('floating'))
-                this._panelBox.remove_style_class_name('floating');
-        }
-        
-        this._resetPanelGeometry();
-    },
-    
-    _resetPanelGeometry: function() {
-        this._dtpPanel.geom = this._dtpPanel.getGeometry();
-        this._dtpPanel._setPanelGhostSize();
-        this._dtpPanel._setPanelPosition();
-        this._dtpPanel.dynamicTransparency.updateExternalStyle();
-    },
+    }

-    _changeEnabledStatus: function() {
-        let intellihide = Me.settings.get_boolean('intellihide');
-        let onlySecondary = Me.settings.get_boolean('intellihide-only-secondary');
+    _changeEnabledStatus() {
+        let intellihide = SETTINGS.get_boolean('intellihide');
+        let onlySecondary = SETTINGS.get_boolean('intellihide-only-secondary');
        let enabled = intellihide && !(this._dtpPanel.isPrimary && onlySecondary);

        if (this.enabled !== enabled) {
            this[enabled ? 'enable' : 'disable']();
        }
-    },
+    }

-    _bindGeneralSignals: function() {
+    _bindGeneralSignals() {
        this._signalsHandler.add(
            [
                this._dtpPanel.taskbar,
-                'menu-closed',
-                () => this._panelBox.sync_hover()
+                ['menu-closed', 'end-drag'],
+                () => {
+                    this._panelBox.sync_hover();
+                    this._onHoverChanged();
+                }
            ],
            [
-                Me.settings, 
+                SETTINGS, 
                [
                    'changed::intellihide-use-pressure',
                    'changed::intellihide-hide-from-windows',
@@ -215,13 +189,6 @@ var Intellihide = Utils.defineClass({
                ],
                () => this.reset()
            ],
-            [
-                Me.settings,
-                [
-                    'changed::intellihide-floating-rounded-theme'
-                ],
-                () => this._toggleFloatingRoundedTheme()
-            ],
            [
                this._panelBox,
                'notify::hover',
@@ -241,17 +208,24 @@ var Intellihide = Utils.defineClass({
                () => this._queueUpdatePanelPosition()
            ]
        );
-    },

-    _onHoverChanged: function() {
+        if (Meta.is_wayland_compositor()) {
+            this._signalsHandler.add([
+                this._panelBox,
+                'notify::visible', 
+                () => Utils.setDisplayUnredirect(!this._panelBox.visible)
+            ]);
+        }
+    }
+
+    _onHoverChanged() {
        this._hoveredOut = !this._panelBox.hover;
        this._queueUpdatePanelPosition();
-    },
+    }
+
+    _setTrackPanel(enable) {
+        let actorData = Utils.getTrackedActorData(this._panelBox)

-    _setTrackPanel: function(enable) {
-        let trackedIndex = Main.layoutManager._findActor(this._panelBox);
-        let actorData = Main.layoutManager._trackedActors[trackedIndex]
-            
        actorData.affectsStruts = !enable;
        actorData.trackFullscreen = !enable;

@@ -260,14 +234,16 @@ var Intellihide = Utils.defineClass({
        this._panelBox.visible = enable ? enable : this._panelBox.visible;
        
        Main.layoutManager._queueUpdateRegions();
-    },
+    }

-    _setRevealMechanism: function() {
-        if (global.display.supports_extended_barriers() && Me.settings.get_boolean('intellihide-use-pressure')) {
+    _setRevealMechanism() {
+        let barriers = Meta.BackendCapabilities.BARRIERS
+
+        if ((global.backend.capabilities & barriers) === barriers && SETTINGS.get_boolean('intellihide-use-pressure')) {
            this._edgeBarrier = this._createBarrier();
            this._pressureBarrier = new Layout.PressureBarrier(
                INTELLIHIDE_PRESSURE_THRESHOLD,
-                INTELLIHIDE_PRESSURE_TIME, 
+                INTELLIHIDE_PRESSURE_TIME,
                Shell.ActionMode.NORMAL
            );
            this._pressureBarrier.addBarrier(this._edgeBarrier);
@@ -276,9 +252,9 @@ var Intellihide = Utils.defineClass({
            this._pointerWatch = PointerWatcher.getPointerWatcher()
                                               .addWatch(CHECK_POINTER_MS, (x, y) => this._checkMousePointer(x, y));
        }
-    },
+    }

-    _removeRevealMechanism: function() {
+    _removeRevealMechanism() {
        if (this._pointerWatch) {
            PointerWatcher.getPointerWatcher()._removeWatch(this._pointerWatch);
        }
@@ -286,12 +262,14 @@ var Intellihide = Utils.defineClass({
        if (this._pressureBarrier) {
            this._pressureBarrier.destroy();
            this._edgeBarrier.destroy();
-        }
-    },

-    _createBarrier: function() {
+            this._pressureBarrier = 0;
+        }
+    }
+
+    _createBarrier() {
        let position = this._dtpPanel.geom.position;
-        let opts = { display: global.display };
+        let opts = { backend: global.backend };

        if (this._dtpPanel.checkIfVertical()) {
            opts.y1 = this._monitor.y;
@@ -316,9 +294,9 @@ var Intellihide = Utils.defineClass({
        }

        return new Meta.Barrier(opts);
-    },
+    }

-    _checkMousePointer: function(x, y) {
+    _checkMousePointer(x, y) {
        let position = this._dtpPanel.geom.position;

        if (!this._panelBox.hover && !Main.overview.visible &&
@@ -330,9 +308,9 @@ var Intellihide = Utils.defineClass({
             (y >= this._monitor.y && y < this._monitor.y + this._monitor.height))) {
            this._queueUpdatePanelPosition(true);
        }
-    },
+    }

-    _queueUpdatePanelPosition: function(fromRevealMechanism) {
+    _queueUpdatePanelPosition(fromRevealMechanism) {
        if (!fromRevealMechanism && this._timeoutsHandler.getId(T2) && !Main.overview.visible) {
            //unless this is a mouse interaction or entering/leaving the overview, limit the number
            //of updates, but remember to update again when the limit timeout is reached
@@ -341,18 +319,18 @@ var Intellihide = Utils.defineClass({
            this._checkIfShouldBeVisible(fromRevealMechanism) ? this._revealPanel() : this._hidePanel();
            this._timeoutsHandler.add([T2, MIN_UPDATE_MS, () => this._endLimitUpdate()]);
        }
-    },
+    }

-    _endLimitUpdate: function() {
+    _endLimitUpdate() {
        if (this._pendingUpdate) {
            this._pendingUpdate = false;
            this._queueUpdatePanelPosition();
        }
-    },
+    }

-    _checkIfShouldBeVisible: function(fromRevealMechanism) {
+    _checkIfShouldBeVisible(fromRevealMechanism) {
        if (Main.overview.visibleTarget || this._dtpPanel.taskbar.previewMenu.opened || 
-            this._panelBox.get_hover() || this._checkIfGrab()) {
+            this._dtpPanel.taskbar._dragMonitor || this._panelBox.get_hover() || this._checkIfGrab()) {
            return true;
        }

@@ -361,46 +339,61 @@ var Intellihide = Utils.defineClass({
            
            //the user is trying to reveal the panel
            if (this._monitor.inFullscreen && !mouseBtnIsPressed) {
-                return Me.settings.get_boolean('intellihide-show-in-fullscreen');
+                return SETTINGS.get_boolean('intellihide-show-in-fullscreen');
            }

            return !mouseBtnIsPressed;
        }

-        if (!Me.settings.get_boolean('intellihide-hide-from-windows')) {
+        if (!SETTINGS.get_boolean('intellihide-hide-from-windows')) {
            return this._panelBox.hover;
        }

        return !this._windowOverlap;
-    },
+    }

-    _checkIfGrab: function() {
-        if (GrabHelper._grabHelperStack.some(gh => gh._owner == this._dtpPanel.panel.actor)) {
+    _checkIfGrab() {
+        let isGrab 
+        
+        if (GrabHelper._grabHelperStack)
+            // gnome-shell < 42
+            isGrab = GrabHelper._grabHelperStack.some(gh => gh._owner == this._dtpPanel.panel)
+        else if (global.stage.get_grab_actor) {
+            // gnome-shell >= 42
+            let grabActor = global.stage.get_grab_actor()
+            let sourceActor = grabActor?._sourceActor || grabActor
+
+            isGrab = sourceActor && 
+                     (sourceActor == Main.layoutManager.dummyCursor || 
+                      this._dtpPanel.statusArea.quickSettings?.menu.actor.contains(sourceActor) || 
+                      this._dtpPanel.panel.contains(sourceActor))
+        }
+
+        if (isGrab)
            //there currently is a grab on a child of the panel, check again soon to catch its release
            this._timeoutsHandler.add([T1, CHECK_GRAB_MS, () => this._queueUpdatePanelPosition()]);

-            return true;
-        }
-    },
+        return isGrab;
+    }

-    _revealPanel: function(immediate) {
+    _revealPanel(immediate) {
        if (!this._panelBox.visible) {
            this._panelBox.visible = true;
            this._dtpPanel.taskbar._shownInitially = false;
        }

        this._animatePanel(0, immediate);
-    },
+    }

-    _hidePanel: function(immediate) {
+    _hidePanel(immediate) {
        let position = this._dtpPanel.geom.position;
        let size = this._panelBox[position == St.Side.LEFT || position == St.Side.RIGHT ? 'width' : 'height']; 
        let coefficient = position == St.Side.TOP || position == St.Side.LEFT ? -1 : 1;

        this._animatePanel(size * coefficient, immediate);
-    },
+    }

-    _animatePanel: function(destination, immediate) {
+    _animatePanel(destination, immediate) {
        let animating = Utils.isAnimating(this._panelBox, this._translationProp);

        if (!((animating && destination === this._animationDestination) || 
@@ -437,5 +430,5 @@ var Intellihide = Utils.defineClass({
        }

        this._hoveredOut = false;
-    },
-});
+    }
+}
--- a/metadata.json
+++ b/metadata.json
@@ -1,9 +1,9 @@
 {
-"extension-id": "zorin-taskbar",
-"uuid": "zorin-taskbar@zorinos.com",
-"name": "Zorin Taskbar",
-"description": "A taskbar extension for the Zorin Desktop environment.",
-"shell-version": [ "3.18", "3.20", "3.22", "3.24", "3.26", "3.28", "3.30", "3.32", "3.34", "3.36", "3.38" ],
-"gettext-domain": "zorin-taskbar",
-"version": 9999
+  "extension-id": "zorin-taskbar",
+  "uuid": "zorin-taskbar@zorinos.com",
+  "name": "Zorin Taskbar",
+  "description": "A taskbar extension for the Zorin OS desktop.",
+  "shell-version": [ "46", "47" ],
+  "gettext-domain": "zorin-taskbar",
+  "version": 65
 }
--- a/overview.js
+++ b/overview.js
@@ -20,108 +20,131 @@
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Intellihide = Me.imports.intellihide;
-const Utils = Me.imports.utils;
+import * as Intellihide from './intellihide.js';
+import * as Utils from './utils.js';

-const Clutter = imports.gi.Clutter;
-const Lang = imports.lang;
-const Main = imports.ui.main;
-const Shell = imports.gi.Shell;
-const Gtk = imports.gi.Gtk;
-const Gdk = imports.gi.Gdk;
-const Gio = imports.gi.Gio;
-const Mainloop = imports.mainloop;
-const IconGrid = imports.ui.iconGrid;
-const ViewSelector = imports.ui.viewSelector;
-
-const Meta = imports.gi.Meta;
+import Clutter from 'gi://Clutter';
+import Gio from 'gi://Gio';
+import Shell from 'gi://Shell';
+import St from 'gi://St';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import * as WindowManager from 'resource:///org/gnome/shell/ui/windowManager.js';
+import {WindowPreview} from 'resource:///org/gnome/shell/ui/windowPreview.js';
+import {InjectionManager} from 'resource:///org/gnome/shell/extensions/extension.js';
+import {SETTINGS} from './extension.js';

 const GS_HOTKEYS_KEY = 'switch-to-application-';
 const OVERLAY_TIMEOUT = 750;
 const SHORTCUT_TIMEOUT = 2000;

+// When the dash is shown, workspace window preview bottom labels go over it (default
+// gnome-shell behavior), but when the extension hides the dash, leave some space
+// so those labels don't go over a bottom panel
+const LABEL_MARGIN = 60;
+
 //timeout names
 const T1 = 'swipeEndTimeout';
+const T2 = 'numberOverlayTimeout';

-var dtpOverview = Utils.defineClass({
-    Name: 'ZorinTaskbar.Overview',
+export const Overview = class {

-    _init: function() {
+    constructor() {
+        this._injectionManager = new InjectionManager();
        this._numHotkeys = 10;
-        this._timeoutsHandler = new Utils.TimeoutsHandler();
-    },
+    }

-    enable : function(panel) {
-        this._panel = panel;
-        this.taskbar = panel.taskbar;
+    enable (primaryPanel) {
+        this._panel = primaryPanel;
+        this.taskbar = primaryPanel.taskbar;

        this._injectionsHandler = new Utils.InjectionsHandler();
        this._signalsHandler = new Utils.GlobalSignalsHandler();
+        this._timeoutsHandler = new Utils.TimeoutsHandler();

        this._optionalWorkspaceIsolation();
        this._optionalHotKeys();
        this._optionalNumberOverlay();
-        this._toggleDash();
-    },

-    disable: function () {
+        this.toggleDash();
+        this._adaptAlloc();
+
+        this._signalsHandler.add([
+            SETTINGS,
+            [
+                'changed::panel-sizes'
+            ], 
+            () => this.toggleDash()
+        ]);
+    }
+
+    disable() {
        this._signalsHandler.destroy();
        this._injectionsHandler.destroy();
-        
-        this._toggleDash(true);
+        this._timeoutsHandler.destroy();
+        this._injectionManager.clear();
+
+        this.toggleDash(true);

        // Remove key bindings
        this._disableHotKeys();
        this._disableExtraShortcut();
-    },
-
-    _toggleDash: function(visible) {
-        // To hide the dash, set its width to 1, so it's almost not taken into account by code
-        // calculaing the reserved space in the overview. The reason to keep it at 1 is
-        // to allow its visibility change to trigger an allocaion of the appGrid which
-        // in turn is triggergin the appsIcon spring animation, required when no other
-        // actors has this effect, i.e in horizontal mode and without the workspaceThumnails
-        // 1 static workspace only)
+    }

+    toggleDash(visible) {
        if (visible === undefined) {
            visible = false;
        }

        let visibilityFunc = visible ? 'show' : 'hide';
-        let width = visible ? -1 : 1;
-        let overviewControls = Main.overview._overview._controls || Main.overview._controls;
+        let height = visible ? -1 : LABEL_MARGIN * Utils.getScaleFactor();
+        let overviewControls = Main.overview._overview._controls;

-        overviewControls.dash.actor[visibilityFunc]();
-        overviewControls.dash.actor.set_width(width);
+        overviewControls.dash[visibilityFunc]();
+        overviewControls.dash.set_height(height);
+    }

-        // This force the recalculation of the icon size
-        overviewControls.dash._maxHeight = -1;
-    },
+    _adaptAlloc() {
+        let overviewControls = Main.overview._overview._controls
+
+        this._injectionManager.overrideMethod(Object.getPrototypeOf(overviewControls), 'vfunc_allocate', 
+            (originalAllocate) => 
+                (box) => {
+                    let focusedPanel = this._panel.panelManager.focusedMonitorPanel
+                    
+                    if (focusedPanel) {
+                        let position = focusedPanel.geom.position
+                        let isBottom = position == St.Side.BOTTOM
+
+                        if (focusedPanel.intellihide?.enabled) {
+                            // Panel intellihide is enabled (struts aren't taken into account on overview allocation),
+                            // dynamically modify the overview box to follow the reveal/hide animation
+                            let { transitioning, finalState, progress } = overviewControls._stateAdjustment.getStateTransitionParams()
+                            let size = focusedPanel.geom[focusedPanel.checkIfVertical() ? 'w' : 'h'] * 
+                                    (transitioning ? Math.abs((finalState != 0 ? 0 : 1) - progress) : 1)
+
+                            if (isBottom || position == St.Side.RIGHT)
+                                box[focusedPanel.fixedCoord.c2] -= size
+                            else
+                                box[focusedPanel.fixedCoord.c1] += size
+                        } else if (isBottom)
+                            // The default overview allocation is very good and takes into account external 
+                            // struts, everywhere but the bottom where the dash is usually fixed anyway.
+                            // If there is a bottom panel under the dash location, give it some space here
+                            box.y2 -= focusedPanel.geom.h
+                    }
+                    
+                    originalAllocate.call(overviewControls, box)
+                }
+        );
+    }

    /**
     * Isolate overview to open new windows for inactive apps
     */
-    _optionalWorkspaceIsolation: function() {
+    _optionalWorkspaceIsolation() {
        let label = 'optionalWorkspaceIsolation';
        
-        this._signalsHandler.add([
-            Me.settings,
-            'changed::isolate-workspaces',
-            Lang.bind(this, function() {
-                this._panel.panelManager.allPanels.forEach(p => p.taskbar.resetAppIcons());
-
-                if (Me.settings.get_boolean('isolate-workspaces'))
-                    Lang.bind(this, enable)();
-                else
-                    Lang.bind(this, disable)();
-            })
-        ]);
-
-        if (Me.settings.get_boolean('isolate-workspaces'))
-            Lang.bind(this, enable)();
-
-        function enable() {
+        let enable = () => {
            this._injectionsHandler.removeWithLabel(label);

            this._injectionsHandler.addWithLabel(label, [
@@ -139,7 +162,7 @@ var dtpOverview = Utils.defineClass({
            ]);
        }

-        function disable() {
+        let disable = () => {
            this._signalsHandler.removeWithLabel(label);
            this._injectionsHandler.removeWithLabel(label);
        }
@@ -156,15 +179,31 @@ var dtpOverview = Utils.defineClass({
            
            return this.open_new_window(-1);
        }
-    },
+
+        this._signalsHandler.add([
+            SETTINGS,
+            'changed::isolate-workspaces',
+            () => {
+                this._panel.panelManager.allPanels.forEach(p => p.taskbar.resetAppIcons());
+
+                if (SETTINGS.get_boolean('isolate-workspaces'))
+                    enable();
+                else
+                    disable();
+            }
+        ]);
+
+        if (SETTINGS.get_boolean('isolate-workspaces'))
+            enable();
+    }

    // Hotkeys
-    _activateApp: function(appIndex) {
+    _activateApp(appIndex, modifiers) {
        let seenApps = {};
        let apps = [];
        
-        this.taskbar._getAppIcons().forEach(function(appIcon) {
-            if (!seenApps[appIcon.app]) {
+        this.taskbar._getAppIcons().forEach(appIcon => {
+            if (!seenApps[appIcon.app] || this.taskbar.allowSplitApps) {
                apps.push(appIcon);
            }

@@ -178,8 +217,8 @@ var dtpOverview = Utils.defineClass({
            let seenAppCount = seenApps[appIcon.app];
            let windowCount = appIcon.window || appIcon._hotkeysCycle ? seenAppCount : appIcon._nWindows;

-            if (Me.settings.get_boolean('shortcut-previews') && windowCount > 1 && 
-                !(Clutter.get_current_event().get_state() & ~(Clutter.ModifierType.MOD1_MASK | Clutter.ModifierType.MOD4_MASK))) { //ignore the alt (MOD1_MASK) and super key (MOD4_MASK)
+            if (SETTINGS.get_boolean('shortcut-previews') && windowCount > 1 && 
+                !(modifiers & ~(Clutter.ModifierType.MOD1_MASK | Clutter.ModifierType.SUPER_MASK))) { //ignore the alt (MOD1_MASK) and super key (SUPER_MASK)
                if (this._hotkeyPreviewCycleInfo && this._hotkeyPreviewCycleInfo.appIcon != appIcon) {
                    this._endHotkeyPreviewCycle();
                }
@@ -188,7 +227,7 @@ var dtpOverview = Utils.defineClass({
                    this._hotkeyPreviewCycleInfo = {
                        appIcon: appIcon,
                        currentWindow: appIcon.window,
-                        keyFocusOutId: appIcon.actor.connect('key-focus-out', () => appIcon.actor.grab_key_focus()),
+                        keyFocusOutId: appIcon.connect('key-focus-out', () => appIcon.grab_key_focus()),
                        capturedEventId: global.stage.connect('captured-event', (actor, e) => {
                            if (e.type() == Clutter.EventType.KEY_RELEASE && e.get_key_symbol() == (Clutter.KEY_Super_L || Clutter.Super_L)) {
                                this._endHotkeyPreviewCycle(true);
@@ -200,8 +239,8 @@ var dtpOverview = Utils.defineClass({

                    appIcon._hotkeysCycle = appIcon.window;
                    appIcon.window = null;
-                    appIcon._previewMenu.open(appIcon);
-                    appIcon.actor.grab_key_focus();
+                    appIcon._previewMenu.open(appIcon, true);
+                    appIcon.grab_key_focus();
                }
                
                appIcon._previewMenu.focusNext();
@@ -209,49 +248,50 @@ var dtpOverview = Utils.defineClass({
                // Activate with button = 1, i.e. same as left click
                let button = 1;
                this._endHotkeyPreviewCycle();
-                appIcon.activate(button, true);
+                appIcon.activate(button, modifiers, !this.taskbar.allowSplitApps);
            }
        }
-    },
+    }

-    _endHotkeyPreviewCycle: function(focusWindow) {
+    _endHotkeyPreviewCycle(focusWindow) {
        if (this._hotkeyPreviewCycleInfo) {
            global.stage.disconnect(this._hotkeyPreviewCycleInfo.capturedEventId);
-            this._hotkeyPreviewCycleInfo.appIcon.actor.disconnect(this._hotkeyPreviewCycleInfo.keyFocusOutId);
+            this._hotkeyPreviewCycleInfo.appIcon.disconnect(this._hotkeyPreviewCycleInfo.keyFocusOutId);

            if (focusWindow) {
                this._hotkeyPreviewCycleInfo.appIcon._previewMenu.activateFocused();
-            }
+            } else
+                this._hotkeyPreviewCycleInfo.appIcon._previewMenu.close()

            this._hotkeyPreviewCycleInfo.appIcon.window = this._hotkeyPreviewCycleInfo.currentWindow;
            delete this._hotkeyPreviewCycleInfo.appIcon._hotkeysCycle;
            this._hotkeyPreviewCycleInfo = 0;
        }
-    },
+    }

-    _optionalHotKeys: function() {
+    _optionalHotKeys() {
        this._hotKeysEnabled = false;
-        if (Me.settings.get_boolean('hot-keys'))
+        if (SETTINGS.get_boolean('hot-keys'))
            this._enableHotKeys();

        this._signalsHandler.add([
-            Me.settings,
+            SETTINGS,
            'changed::hot-keys',
-            Lang.bind(this, function() {
-                    if (Me.settings.get_boolean('hot-keys'))
-                        Lang.bind(this, this._enableHotKeys)();
-                    else
-                        Lang.bind(this, this._disableHotKeys)();
-            })
+            () => {
+                if (SETTINGS.get_boolean('hot-keys'))
+                    this._enableHotKeys();
+                else
+                    this._disableHotKeys();
+            }
        ]);
-    },
+    }

-    _resetHotkeys: function() {
+    _resetHotkeys() {
        this._disableHotKeys();
        this._enableHotKeys();
-    },
+    }

-    _enableHotKeys: function() {
+    _enableHotKeys() {
        if (this._hotKeysEnabled)
            return;

@@ -263,9 +303,13 @@ var dtpOverview = Utils.defineClass({
        }

        // Setup keyboard bindings for taskbar elements
-        let shortcutNumKeys = Me.settings.get_string('shortcut-num-keys');
+        let shortcutNumKeys = SETTINGS.get_string('shortcut-num-keys');
        let bothNumKeys = shortcutNumKeys == 'BOTH';
        let keys = [];
+        let prefixModifiers = Clutter.ModifierType.SUPER_MASK
+
+        if (SETTINGS.get_string('hotkey-prefix-text') == 'SuperAlt')
+            prefixModifiers |= Clutter.ModifierType.MOD1_MASK
        
        if (bothNumKeys || shortcutNumKeys == 'NUM_ROW') {
            keys.push('app-hotkey-', 'app-shift-hotkey-', 'app-ctrl-hotkey-'); // Regular numbers
@@ -276,20 +320,27 @@ var dtpOverview = Utils.defineClass({
        }

        keys.forEach( function(key) {
+            let modifiers = prefixModifiers
+            
+            // for some reason, in gnome-shell >= 40 Clutter.get_current_event() is now empty
+            // for keyboard events. Create here the modifiers that are needed in appicon.activate 
+            modifiers |= (key.indexOf('-shift-') >= 0 ? Clutter.ModifierType.SHIFT_MASK : 0)
+            modifiers |= (key.indexOf('-ctrl-') >= 0 ? Clutter.ModifierType.CONTROL_MASK : 0)
+
            for (let i = 0; i < this._numHotkeys; i++) {
                let appNum = i;

-                Utils.addKeybinding(key + (i + 1), Me.settings, () => this._activateApp(appNum));
+                Utils.addKeybinding(key + (i + 1), SETTINGS, () => this._activateApp(appNum, modifiers));
            }
        }, this);

        this._hotKeysEnabled = true;

-        if (Me.settings.get_string('hotkeys-overlay-combo') === 'ALWAYS')
+        if (SETTINGS.get_string('hotkeys-overlay-combo') === 'ALWAYS')
            this.taskbar.toggleNumberOverlay(true);
-    },
+    }

-    _disableHotKeys: function() {
+    _disableHotKeys() {
        if (!this._hotKeysEnabled)
            return;

@@ -302,7 +353,7 @@ var dtpOverview = Utils.defineClass({
        }, this);
        
        if (Main.wm._switchToApplication) {
-            let gsSettings = new Gio.Settings({ schema_id: imports.ui.windowManager.SHELL_KEYBINDINGS_SCHEMA });
+            let gsSettings = new Gio.Settings({ schema_id: WindowManager.SHELL_KEYBINDINGS_SCHEMA });

            for (let i = 1; i < 10; ++i) {
                Utils.addKeybinding(GS_HOTKEYS_KEY + i, gsSettings, Main.wm._switchToApplication.bind(Main.wm));
@@ -312,61 +363,56 @@ var dtpOverview = Utils.defineClass({
        this._hotKeysEnabled = false;

        this.taskbar.toggleNumberOverlay(false);
-    },
+    }

-    _optionalNumberOverlay: function() {
+    _optionalNumberOverlay() {
        // Enable extra shortcut
-        if (Me.settings.get_boolean('hot-keys'))
+        if (SETTINGS.get_boolean('hot-keys'))
            this._enableExtraShortcut();

        this._signalsHandler.add([
-            Me.settings,
+            SETTINGS,
            'changed::hot-keys',
-            Lang.bind(this, this._checkHotkeysOptions)
+            this._checkHotkeysOptions.bind(this)
        ], [
-            Me.settings,
+            SETTINGS,
            'changed::hotkeys-overlay-combo',
-            Lang.bind(this, function() {
-                if (Me.settings.get_boolean('hot-keys') && Me.settings.get_string('hotkeys-overlay-combo') === 'ALWAYS')
+            () => {
+                if (SETTINGS.get_boolean('hot-keys') && SETTINGS.get_string('hotkeys-overlay-combo') === 'ALWAYS')
                    this.taskbar.toggleNumberOverlay(true);
                else
                    this.taskbar.toggleNumberOverlay(false);
-            })
+            }
        ], [
-            Me.settings,
+            SETTINGS,
            'changed::shortcut-num-keys',
            () =>  this._resetHotkeys()
        ]);
-    },
+    }

-    _checkHotkeysOptions: function() {
-        if (Me.settings.get_boolean('hot-keys'))
+    _checkHotkeysOptions() {
+        if (SETTINGS.get_boolean('hot-keys'))
            this._enableExtraShortcut();
        else
            this._disableExtraShortcut();
-    },
+    }

-    _enableExtraShortcut: function() {
-        Utils.addKeybinding('shortcut', Me.settings, () => this._showOverlay(true));
-    },
+    _enableExtraShortcut() {
+        Utils.addKeybinding('shortcut', SETTINGS, () => this._showOverlay(true));
+    }

-    _disableExtraShortcut: function() {
+    _disableExtraShortcut() {
        Utils.removeKeybinding('shortcut');
-    },
+    }

-    _showOverlay: function(overlayFromShortcut) {
+    _showOverlay(overlayFromShortcut) {
        //wait for intellihide timeout initialization
        if (!this._panel.intellihide) {
            return;
        }

        // Restart the counting if the shortcut is pressed again
-        if (this._numberOverlayTimeoutId) {
-            Mainloop.source_remove(this._numberOverlayTimeoutId);
-            this._numberOverlayTimeoutId = 0;
-        }
-
-        let hotkey_option = Me.settings.get_string('hotkeys-overlay-combo');
+        let hotkey_option = SETTINGS.get_string('hotkeys-overlay-combo');

        if (hotkey_option === 'NEVER')
            return;
@@ -383,14 +429,27 @@ var dtpOverview = Utils.defineClass({
        }

        // Hide the overlay/dock after the timeout
-        this._numberOverlayTimeoutId = Mainloop.timeout_add(timeout, Lang.bind(this, function() {
-            this._numberOverlayTimeoutId = 0;
-            
+        this._timeoutsHandler.add([T2, timeout, () => {
            if (hotkey_option != 'ALWAYS') {
                this.taskbar.toggleNumberOverlay(false);
            }
            
            this._panel.intellihide.release(Intellihide.Hold.TEMPORARY);
-        }));
+        }]);
    }
-});
+
+    _onSwipeBegin() {
+        this._swiping = true;
+        return true;
+    }
+
+    _onSwipeEnd() {
+        this._timeoutsHandler.add([
+            T1,
+            0, 
+            () => this._swiping = false
+        ]);
+        return true;
+    }
+
+}
--- a/panel.js
+++ b/panel.js
--- a/panelManager.js
+++ b/panelManager.js
@@ -27,63 +27,54 @@
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Overview = Me.imports.overview;
-const Panel = Me.imports.panel;
-const Pos = Me.imports.panelPositions;
-const Proximity = Me.imports.proximity;
-const Taskbar = Me.imports.taskbar;
-const Utils = Me.imports.utils;
+import * as Overview from './overview.js';
+import * as Panel from './panel.js';
+import * as PanelSettings from './panelSettings.js';
+import * as Proximity from './proximity.js';
+import * as Utils from './utils.js';
+import * as DesktopIconsIntegration from './desktopIconsIntegration.js';

-const Config = imports.misc.config;
-const Lang = imports.lang;
-const Gi = imports._gi;
-const GLib = imports.gi.GLib;
-const Clutter = imports.gi.Clutter;
-const Meta = imports.gi.Meta;
-const Shell = imports.gi.Shell;
-const St = imports.gi.St;
+import GLib from 'gi://GLib';
+import GObject from 'gi://GObject';
+import Clutter from 'gi://Clutter';
+import Meta from 'gi://Meta';
+import Shell from 'gi://Shell';
+import St from 'gi://St';

-const AppDisplay = imports.ui.appDisplay;
-const BoxPointer = imports.ui.boxpointer;
-const Dash = imports.ui.dash;
-const IconGrid = imports.ui.iconGrid;
-const LookingGlass = imports.ui.lookingGlass;
-const Main = imports.ui.main;
-const PanelMenu = imports.ui.panelMenu;
-const Layout = imports.ui.layout;
-const WM = imports.ui.windowManager;
-const WorkspacesView = imports.ui.workspacesView;
+import * as BoxPointer from 'resource:///org/gnome/shell/ui/boxpointer.js';
+import * as LookingGlass from 'resource:///org/gnome/shell/ui/lookingGlass.js';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
+import * as Layout from 'resource:///org/gnome/shell/ui/layout.js';
+import {InjectionManager} from 'resource:///org/gnome/shell/extensions/extension.js';
+import {SETTINGS} from './extension.js';
+import {SecondaryMonitorDisplay, WorkspacesView} from 'resource:///org/gnome/shell/ui/workspacesView.js';

-var dtpPanelManager = Utils.defineClass({
-    Name: 'ZorinTaskbar.PanelManager',

-    _init: function() {
-        this.overview = new Overview.dtpOverview();
+export const PanelManager = class {
+
+    constructor() {
+        this.overview = new Overview.Overview();
        this.panelsElementPositions = {};
+        this._injectionManager = new InjectionManager();

        this._saveMonitors();
+    }

-        Utils.getAppDisplayViews().forEach(v => {
-            Utils.wrapActor(v.view);
-            Utils.wrapActor(v.view._grid);
-        });
-    },
-
-    enable: function(reset) {       
-        this.panelPositions = Pos.getSettingsPositions(Me.settings, 'panel-positions');
+    enable(reset) {
+        this.allPanels = [];
        this.dtpPrimaryMonitor = Main.layoutManager.primaryMonitor; // The real primary monitor should always have the main panel
        this.proximityManager = new Proximity.ProximityManager();

-        Utils.wrapActor(Main.panel);
-        Utils.wrapActor(Main.overview.dash || 0);
+        if (this.dtpPrimaryMonitor) {
+            this.primaryPanel = this._createPanel(this.dtpPrimaryMonitor, SETTINGS.get_boolean('stockgs-keep-top-panel'));
+            this.allPanels.push(this.primaryPanel);
+            this.overview.enable(this.primaryPanel);

-        this.primaryPanel = this._createPanel(this.dtpPrimaryMonitor, false);
-        this.allPanels = [ this.primaryPanel ];
-        
-        this.overview.enable(this.primaryPanel);
+            this.setFocusedMonitor(this.dtpPrimaryMonitor);
+        }

-        if (Me.settings.get_boolean('multi-monitors')) {
+        if (SETTINGS.get_boolean('multi-monitors')) {
            Main.layoutManager.monitors.filter(m => m != this.dtpPrimaryMonitor).forEach(m => {
                this.allPanels.push(this._createPanel(m, true));
            });
@@ -106,11 +97,12 @@ var dtpPanelManager = Utils.defineClass({
            p.taskbar.iconAnimator.start();
        });

+        this._setDesktopIconsMargins();
        //in 3.32, BoxPointer now inherits St.Widget
        if (BoxPointer.BoxPointer.prototype.vfunc_get_preferred_height) {
            let panelManager = this;

-            Utils.hookVfunc(BoxPointer.BoxPointer.prototype, 'get_preferred_height', function(forWidth) {
+            this._injectionManager.overrideMethod(BoxPointer.BoxPointer.prototype, 'vfunc_get_preferred_height', () => function(forWidth) {
                let alloc = { min_size: 0, natural_size: 0 };
                
                [alloc.min_size, alloc.natural_size] = this.vfunc_get_preferred_height(forWidth);
@@ -120,23 +112,10 @@ var dtpPanelManager = Utils.defineClass({
        }

        this._updatePanelElementPositions();
-        this.setFocusedMonitor(this.dtpPrimaryMonitor);
-        
-        if (this.primaryPanel.checkIfVertical()) {
-            Main.wm._getPositionForDirection = newGetPositionForDirection;
-        }
        
        if (reset) return;

-        this._oldViewSelectorAnimateIn = Main.overview.viewSelector._animateIn;
-        Main.overview.viewSelector._animateIn = Lang.bind(this.primaryPanel, newViewSelectorAnimateIn);
-        this._oldViewSelectorAnimateOut = Main.overview.viewSelector._animateOut;
-        Main.overview.viewSelector._animateOut = Lang.bind(this.primaryPanel, newViewSelectorAnimateOut);
-
-        if (Config.PACKAGE_VERSION > '3.35.1') {
-            this._oldDoSpringAnimation = AppDisplay.BaseAppView.prototype._doSpringAnimation;
-            AppDisplay.BaseAppView.prototype._doSpringAnimation = newDoSpringAnimation;
-        }
+        this._desktopIconsUsableArea = new DesktopIconsIntegration.DesktopIconsUsableAreaClass();

        this._oldUpdatePanelBarrier = Main.layoutManager._updatePanelBarrier;
        Main.layoutManager._updatePanelBarrier = (panel) => {
@@ -147,32 +126,18 @@ var dtpPanelManager = Utils.defineClass({
        Main.layoutManager._updatePanelBarrier();

        this._oldUpdateHotCorners = Main.layoutManager._updateHotCorners;
-        Main.layoutManager._updateHotCorners = Lang.bind(Main.layoutManager, newUpdateHotCorners);
+        Main.layoutManager._updateHotCorners = newUpdateHotCorners.bind(Main.layoutManager);
        Main.layoutManager._updateHotCorners();

        if (Main.layoutManager._interfaceSettings) {
            this._enableHotCornersId = Main.layoutManager._interfaceSettings.connect('changed::enable-hot-corners', () => Main.layoutManager._updateHotCorners());
        }

-        this._oldOverviewRelayout = Main.overview._relayout;
-        Main.overview._relayout = Lang.bind(Main.overview, this._newOverviewRelayout);
+        this._oldUpdateWorkspacesViews = Main.overview._overview._controls._workspacesDisplay._updateWorkspacesViews;
+        Main.overview._overview._controls._workspacesDisplay._updateWorkspacesViews = this._newUpdateWorkspacesViews.bind(Main.overview._overview._controls._workspacesDisplay);

-        this._oldUpdateWorkspacesViews = Main.overview.viewSelector._workspacesDisplay._updateWorkspacesViews;
-        Main.overview.viewSelector._workspacesDisplay._updateWorkspacesViews = Lang.bind(Main.overview.viewSelector._workspacesDisplay, this._newUpdateWorkspacesViews);
-
-        this._oldGetShowAppsButton = Main.overview.getShowAppsButton;
-        Main.overview.getShowAppsButton = this._newGetShowAppsButton.bind(this);
-
-        this._needsDashItemContainerAllocate = !Dash.DashItemContainer.prototype.hasOwnProperty('vfunc_allocate');
-
-        if (this._needsDashItemContainerAllocate) {
-            Utils.hookVfunc(Dash.DashItemContainer.prototype, 'allocate', this._newDashItemContainerAllocate);
-        }
-            
-        // Since Gnome 3.8 dragging an app without having opened the overview before cause the attemp to
-        //animate a null target since some variables are not initialized when the viewSelector is created
-        if(Main.overview.viewSelector._activePage == null)
-            Main.overview.viewSelector._activePage = Main.overview.viewSelector._workspacesPage;
+        this._oldSetPrimaryWorkspaceVisible = Main.overview._overview._controls._workspacesDisplay.setPrimaryWorkspaceVisible
+        Main.overview._overview._controls._workspacesDisplay.setPrimaryWorkspaceVisible = this._newSetPrimaryWorkspaceVisible.bind(Main.overview._overview._controls._workspacesDisplay);

        LookingGlass.LookingGlass.prototype._oldResize = LookingGlass.LookingGlass.prototype._resize;
        LookingGlass.LookingGlass.prototype._resize = _newLookingGlassResize;
@@ -182,74 +147,40 @@ var dtpPanelManager = Utils.defineClass({

        this._signalsHandler = new Utils.GlobalSignalsHandler();

-        if (Config.PACKAGE_VERSION > '3.35.9') {
-            let currentAppsView;
-
-            this._oldAnimateIconPosition = IconGrid.animateIconPosition;
-            IconGrid.animateIconPosition = newAnimateIconPosition.bind(this);
-
-            this._signalsHandler.add(
-                [
-                    Utils.DisplayWrapper.getScreen(),
-                    'window-entered-monitor',
-                    () => this._needsIconAllocate = 1
-                ]
-            );
-
-            Utils.getAppDisplayViews().forEach(v => {
-                if (!v.control || v.control.has_style_pseudo_class('checked')) {
-                    currentAppsView = v;
-                }
-
-                if (v.control) {
-                    this._signalsHandler.add(
-                        [
-                            v.control, 
-                            'clicked', 
-                            () => {
-                                this._needsIconAllocate = currentAppsView != v;
-                                currentAppsView = v;
-                            }
-                        ]
-                    );
-                }
-
-                this._signalsHandler.add(
-                    [
-                        v.view, 
-                        'notify::visible', 
-                        () => this._needsIconAllocate = !(currentAppsView != v && !v.view.visible)
-                    ],
-                    [
-                        v.view._grid, 
-                        'animation-done', 
-                        () => this._needsIconAllocate = 0
-                    ]
-                );
-            });
-        }
-
        //listen settings
        this._signalsHandler.add(
            [
-                Me.settings,
+                SETTINGS,
                [
                    'changed::multi-monitors',
                    'changed::isolate-monitors',
-                    'changed::panel-positions'
+                    'changed::panel-positions',
+                    'changed::panel-lengths',
+                    'changed::panel-anchors',
+                    'changed::stockgs-keep-top-panel'
                ],
                () => this._reset()
            ],
            [
-                Me.settings,
+                SETTINGS,
                'changed::panel-element-positions',
                () => this._updatePanelElementPositions()
            ],
            [
-                Me.settings,
+                SETTINGS,
                'changed::intellihide-key-toggle-text',
                () => this._setKeyBindings(true)
            ],
+            [
+                SETTINGS,
+                'changed::panel-sizes',
+                () => {
+                    GLib.idle_add(GLib.PRIORITY_LOW, () => {
+                        this._setDesktopIconsMargins();
+                        return GLib.SOURCE_REMOVE;
+                    });
+                }
+            ],
            [
                Utils.DisplayWrapper.getMonitorManager(),
                'monitors-changed', 
@@ -263,19 +194,31 @@ var dtpPanelManager = Utils.defineClass({
        );

        Panel.panelBoxes.forEach(c => this._signalsHandler.add(
-            [Main.panel[c], 'actor-added', (parent, child) => this._adjustPanelMenuButton(this._getPanelMenuButton(child), this.primaryPanel.monitor, this.primaryPanel.getPosition())]
+            [
+                Main.panel[c], 
+                'child-added', 
+                (parent, child) => {
+                    this.primaryPanel &&
+                    child instanceof St.Bin && 
+                    this._adjustPanelMenuButton(this._getPanelMenuButton(child.get_first_child()), this.primaryPanel.monitor, this.primaryPanel.getPosition())
+                }
+            ]
        ));

        this._setKeyBindings(true);
-    },

-    disable: function(reset) {
-        this.overview.disable();
+        // keep GS overview.js from blowing away custom panel styles
+        if(!SETTINGS.get_boolean('stockgs-keep-top-panel'))
+            Object.defineProperty(Main.panel, "style", {configurable: true, set(v) {}});
+    }
+
+    disable(reset) {
+        this.primaryPanel && this.overview.disable();
        this.proximityManager.destroy();

        this.allPanels.forEach(p => {
            p.taskbar.iconAnimator.pause();
-            
+
            this._findPanelMenuButtons(p.panelBox).forEach(pmb => {
                if (pmb.menu._boxPointer._dtpGetPreferredHeightId) {
                    pmb.menu._boxPointer._container.disconnect(pmb.menu._boxPointer._dtpGetPreferredHeightId);
@@ -299,8 +242,8 @@ var dtpPanelManager = Utils.defineClass({
                p.panelBox.destroy();
            } else {
                p.panelBox.remove_child(p);
-                p.remove_child(p.panel.actor);
-                p.panelBox.add(p.panel.actor);
+                p.remove_child(p.panel);
+                p.panelBox.add_child(p.panel);

                p.panelBox.set_position(clipContainer.x, clipContainer.y);

@@ -309,11 +252,7 @@ var dtpPanelManager = Utils.defineClass({
            }
        });

-        if (BoxPointer.BoxPointer.prototype.vfunc_get_preferred_height) {
-            Utils.hookVfunc(BoxPointer.BoxPointer.prototype, 'get_preferred_height', BoxPointer.BoxPointer.prototype.vfunc_get_preferred_height);
-        }
-
-        delete Main.wm._getPositionForDirection;
+        this._injectionManager.clear();

        if (Main.layoutManager.primaryMonitor) {
            Main.layoutManager.panelBox.set_position(Main.layoutManager.primaryMonitor.x, Main.layoutManager.primaryMonitor.y);
@@ -336,67 +275,119 @@ var dtpPanelManager = Utils.defineClass({
        Main.layoutManager._updatePanelBarrier = this._oldUpdatePanelBarrier;
        Main.layoutManager._updatePanelBarrier();

-        Main.overview.viewSelector._animateIn = this._oldViewSelectorAnimateIn;
-        Main.overview.viewSelector._animateOut = this._oldViewSelectorAnimateOut;
-
-        Main.overview._relayout = this._oldOverviewRelayout;
-        Main.overview._relayout();
-
-        Main.overview.viewSelector._workspacesDisplay._updateWorkspacesViews = this._oldUpdateWorkspacesViews;
-
-        Utils.getPanelGhost().set_size(-1, -1);
-
-        if (this._needsDashItemContainerAllocate) {
-            Utils.hookVfunc(Dash.DashItemContainer.prototype, 'allocate', function(box, flags) { this.vfunc_allocate(box, flags); });
-        }
-
-        if (this._oldDoSpringAnimation) {
-            AppDisplay.BaseAppView.prototype._doSpringAnimation = this._oldDoSpringAnimation;
-        }
-
-        if (this._oldAnimateIconPosition) {
-            IconGrid.animateIconPosition = this._oldAnimateIconPosition;
-        }
+        Main.overview._overview._controls._workspacesDisplay._updateWorkspacesViews = this._oldUpdateWorkspacesViews;
+        Main.overview._overview._controls._workspacesDisplay.setPrimaryWorkspaceVisible = this._oldSetPrimaryWorkspaceVisible;

        LookingGlass.LookingGlass.prototype._resize = LookingGlass.LookingGlass.prototype._oldResize;
        delete LookingGlass.LookingGlass.prototype._oldResize;

        LookingGlass.LookingGlass.prototype.open = LookingGlass.LookingGlass.prototype._oldOpen;
        delete LookingGlass.LookingGlass.prototype._oldOpen
-    },

-    setFocusedMonitor: function(monitor, ignoreRelayout) {
-        this._needsIconAllocate = 1;
-        
+        delete Main.panel.style;
+        this._desktopIconsUsableArea.destroy();
+        this._desktopIconsUsableArea = null;
+    }
+
+    toggleDash() {
+        this.overview.toggleDash();
+    }
+
+    _setDesktopIconsMargins() {
+        this._desktopIconsUsableArea?.resetMargins();
+        this.allPanels.forEach(p => {
+            switch(p.geom.position) {
+                case St.Side.TOP:
+                    this._desktopIconsUsableArea?.setMargins(p.monitor.index, p.geom.h, 0, 0, 0);
+                    break;
+                case St.Side.BOTTOM:
+                    this._desktopIconsUsableArea?.setMargins(p.monitor.index, 0, p.geom.h, 0, 0);
+                    break;
+                case St.Side.LEFT:
+                    this._desktopIconsUsableArea?.setMargins(p.monitor.index, 0, 0, p.geom.w, 0);
+                    break;
+                case St.Side.RIGHT:
+                    this._desktopIconsUsableArea?.setMargins(p.monitor.index, 0, 0, 0, p.geom.w);
+                    break;
+            }
+        });
+    }
+
+    setFocusedMonitor(monitor) {
+        this.focusedMonitorPanel = this.allPanels.find(p => p.monitor == monitor)
+
        if (!this.checkIfFocusedMonitor(monitor)) {
-            Main.overview.viewSelector._workspacesDisplay._primaryIndex = monitor.index;
-            
            Main.overview._overview.clear_constraints();
            Main.overview._overview.add_constraint(new Layout.MonitorConstraint({ index: monitor.index }));
-            
-            if (ignoreRelayout) return;

-            this._newOverviewRelayout.call(Main.overview);
+            Main.overview._overview._controls._workspacesDisplay._primaryIndex = monitor.index;
        }
-    },
+    }

-    _saveMonitors: function() {
+    _newSetPrimaryWorkspaceVisible(visible) {
+        if (this._primaryVisible === visible)
+            return;
+
+        this._primaryVisible = visible;
+
+        const primaryIndex = Main.overview._overview._controls._workspacesDisplay._primaryIndex;
+        const primaryWorkspace = this._workspacesViews[primaryIndex];
+        if (primaryWorkspace)
+            primaryWorkspace.visible = visible;
+    }
+
+    _newUpdateWorkspacesViews() {
+        for (let i = 0; i < this._workspacesViews.length; i++)
+            this._workspacesViews[i].destroy();
+
+        this._workspacesViews = [];
+        let monitors = Main.layoutManager.monitors;
+        for (let i = 0; i < monitors.length; i++) {
+            let view;
+            if (i === this._primaryIndex) {
+                view = new WorkspacesView(i,
+                    this._controls,
+                    this._scrollAdjustment,
+                    this._fitModeAdjustment,
+                    this._overviewAdjustment);
+
+                view.visible = this._primaryVisible;
+                this.bind_property('opacity', view, 'opacity', GObject.BindingFlags.SYNC_CREATE);
+                this.add_child(view);
+            } else {
+                // No idea why atm, but we need the import at the top of this file and to use the
+                // full imports ns here, otherwise SecondaryMonitorDisplay can't be used ¯\_(ツ)_/¯
+                view = new SecondaryMonitorDisplay(i,
+                    this._controls,
+                    this._scrollAdjustment,
+                    this._fitModeAdjustment,
+                    this._overviewAdjustment);
+                Main.layoutManager.overviewGroup.add_child(view);
+            }
+
+            this._workspacesViews.push(view);
+        }
+    }
+
+    _saveMonitors() {
        //Mutter meta_monitor_manager_get_primary_monitor (global.display.get_primary_monitor()) doesn't return the same
        //monitor as GDK gdk_screen_get_primary_monitor (imports.gi.Gdk.Screen.get_default().get_primary_monitor()).
        //Since the Mutter function is what's used in gnome-shell and we can't access it from the settings dialog, store 
        //the monitors information in a setting so we can use the same monitor indexes as the ones in gnome-shell
+        let keyMonitors = 'available-monitors';
        let primaryIndex = Main.layoutManager.primaryIndex;
-        let monitors = [primaryIndex];
+        let newMonitors = [primaryIndex];

-        Main.layoutManager.monitors.filter(m => m.index != primaryIndex).forEach(m => monitors.push(m.index));
-        Me.settings.set_value('available-monitors', new GLib.Variant('ai', monitors));
-    },
+        Main.layoutManager.monitors.filter(m => m.index != primaryIndex).forEach(m => newMonitors.push(m.index));
+        
+        SETTINGS.set_value(keyMonitors, new GLib.Variant('ai', newMonitors));
+    }

-    checkIfFocusedMonitor: function(monitor) {
-        return Main.overview.viewSelector._workspacesDisplay._primaryIndex == monitor.index;
-    },
+    checkIfFocusedMonitor(monitor) {
+        return Main.overview._overview._controls._workspacesDisplay._primaryIndex == monitor.index;
+    }

-    _createPanel: function(monitor, isStandalone) {
+    _createPanel(monitor, isStandalone) {
        let panelBox;
        let panel;
        let clipContainer = new Clutter.Actor();
@@ -406,7 +397,7 @@ var dtpPanelManager = Utils.defineClass({
        } else {
            panelBox = Main.layoutManager.panelBox;
            Main.layoutManager._untrackActor(panelBox);
-            panelBox.remove_child(Main.panel.actor);
+            panelBox.remove_child(Main.panel);
            Main.layoutManager.removeChrome(panelBox);
        }

@@ -414,8 +405,8 @@ var dtpPanelManager = Utils.defineClass({
        clipContainer.add_child(panelBox);
        Main.layoutManager.trackChrome(panelBox, { trackFullscreen: true, affectsStruts: true, affectsInputRegion: true });
        
-        panel = new Panel.dtpPanel(this, monitor, panelBox, isStandalone);
-        panelBox.add(panel);
+        panel = new Panel.Panel(this, monitor, panelBox, isStandalone);
+        panelBox.add_child(panel);
        panel.enable();

        panelBox.visible = true;
@@ -425,24 +416,23 @@ var dtpPanelManager = Utils.defineClass({
        panelBox.set_position(0, 0);

        return panel;
-    },
+    }

-    _reset: function() {
+    _reset() {
        this.disable(true);
        this.allPanels = [];
        this.enable(true);
-    },
+    }

-    _updatePanelElementPositions: function() {
-        this.panelsElementPositions = Pos.getSettingsPositions(Me.settings, 'panel-element-positions');
+    _updatePanelElementPositions() {
+        this.panelsElementPositions = PanelSettings.getSettingsJson(SETTINGS, 'panel-element-positions');
        this.allPanels.forEach(p => p.updateElementPositions());
-    },
+    }

-    _adjustPanelMenuButton: function(button, monitor, arrowSide) {
+    _adjustPanelMenuButton(button, monitor, arrowSide) {
        if (button) {
-            Utils.wrapActor(button);
            button.menu._boxPointer._dtpSourceActor = button.menu._boxPointer.sourceActor;
-            button.menu._boxPointer.sourceActor = button.actor;
+            button.menu._boxPointer.sourceActor = button;
            button.menu._boxPointer._userArrowSide = arrowSide;
            button.menu._boxPointer._dtpInPanel = 1;

@@ -452,10 +442,10 @@ var dtpPanelManager = Utils.defineClass({
                });
            }
        }
-    },
+    }

-    _getBoxPointerPreferredHeight: function(boxPointer, alloc, monitor) {
-        if (boxPointer._dtpInPanel && boxPointer.sourceActor && Me.settings.get_boolean('intellihide')) {
+    _getBoxPointerPreferredHeight(boxPointer, alloc, monitor) {
+        if (boxPointer._dtpInPanel && boxPointer.sourceActor && SETTINGS.get_boolean('intellihide')) {
            monitor = monitor || Main.layoutManager.findMonitorForActor(boxPointer.sourceActor);
            let panel = Utils.find(global.zorinTaskbar.panels, p => p.monitor == monitor);
            let excess = alloc.natural_size + panel.dtpSize + 10 - monitor.height; // 10 is arbitrary
@@ -466,9 +456,9 @@ var dtpPanelManager = Utils.defineClass({
        }

        return [alloc.min_size, alloc.natural_size];
-    },
+    }

-    _findPanelMenuButtons: function(container) {
+    _findPanelMenuButtons(container) {
        let panelMenuButtons = [];
        let panelMenuButton;

@@ -483,9 +473,9 @@ var dtpPanelManager = Utils.defineClass({
        find(container);

        return panelMenuButtons;
-    },
+    }

-    _removePanelBarriers: function(panel) {
+    _removePanelBarriers(panel) {
        if (panel.isStandalone && panel._rightPanelBarrier) {
            panel._rightPanelBarrier.destroy();
        }
@@ -494,13 +484,13 @@ var dtpPanelManager = Utils.defineClass({
            panel._leftPanelBarrier.destroy();
            delete panel._leftPanelBarrier;
        }
-    },
+    }

-    _getPanelMenuButton: function(obj) {
-        return obj._delegate && obj._delegate instanceof PanelMenu.Button ? obj._delegate : 0;
-    },
+    _getPanelMenuButton(obj) {
+        return obj instanceof PanelMenu.Button && obj.menu?._boxPointer ? obj : 0;
+    }

-    _setKeyBindings: function(enable) {
+    _setKeyBindings(enable) {
        let keys = {
            'intellihide-key-toggle': () => this.allPanels.forEach(p => p.intellihide.toggle())
        };
@@ -509,107 +499,18 @@ var dtpPanelManager = Utils.defineClass({
            Utils.removeKeybinding(k);

            if (enable) {
-                Utils.addKeybinding(k, Me.settings, keys[k], Shell.ActionMode.NORMAL);
+                Utils.addKeybinding(k, SETTINGS, keys[k], Shell.ActionMode.NORMAL);
            }
        });
-    },
+    }

-    _newOverviewRelayout: function() {
-        // To avoid updating the position and size of the workspaces
-        // we just hide the overview. The positions will be updated
-        // when it is next shown.
-        this.hide();
-
-        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.overview.viewSelector._workspacesDisplay._primaryIndex);
-
-        this._coverPane.set_position(0, workArea.y);
-        this._coverPane.set_size(workArea.width, workArea.height);
-
-        this._updateBackgrounds();
-    },
-
-    _newUpdateWorkspacesViews: function() {
-        for (let i = 0; i < this._workspacesViews.length; i++)
-            this._workspacesViews[i].destroy();
-
-        this._workspacesViews = [];
-
-        let monitors = Main.layoutManager.monitors;
-
-        for (let i = 0; i < monitors.length; i++) {
-            let workspaces;
-            let view;
-            if (this._workspacesOnlyOnPrimary && i != Main.layoutManager.primaryIndex) {
-                view = new WorkspacesView.ExtraWorkspaceView(i);
-                view.getActiveWorkspace = view.getActiveWorkspace || function() { return this._workspace; };
-                workspaces = [view._workspace];
-            } else {
-                view = new WorkspacesView.WorkspacesView(i, this._scrollAdjustment || 0);
-                workspaces = view._workspaces;
-            }
-
-            Utils.wrapActor(view);
-            view.actor.connect('scroll-event', this._onScrollEvent.bind(this));
-            if (i == Main.layoutManager.primaryIndex && view.scrollAdjustment) {
-                this._scrollAdjustment = view.scrollAdjustment;
-                this._scrollAdjustment.connect('notify::value',
-                                            this._scrollValueChanged.bind(this));
-            }
-
-            workspaces.forEach(w => w.setFullGeometry = geom => w._fullGeometry = geom);
-            this._workspacesViews.push(view);
-        }
-
-        this._workspacesViews.forEach(wv => Main.layoutManager.overviewGroup.add_actor(wv.actor));
-
-        if (this._syncWorkspacesFullGeometry) {
-            //gnome-shell 3.36.4
-            if (this._fullGeometry)
-                this._syncWorkspacesFullGeometry();
-            if (this._actualGeometry)
-                this._syncWorkspacesActualGeometry();
-        } else if (this._updateWorkspacesFullGeometry) {
-            this._updateWorkspacesFullGeometry();
-            this._updateWorkspacesActualGeometry();
-        }
-    },
-
-    _newGetShowAppsButton: function() {
-        let focusedMonitorIndex = Utils.findIndex(this.allPanels, p => this.checkIfFocusedMonitor(p.monitor));
-        
-        return this.allPanels[focusedMonitorIndex].taskbar.showAppsButton;
-    },
-
-    _newDashItemContainerAllocate: function(box, flags) {
-        if (this.child == null)
-            return;
-
-        Utils.setAllocation(this, box, flags);
-
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
-        let [minChildWidth, minChildHeight, natChildWidth, natChildHeight] = this.child.get_preferred_size();
-        let [childScaleX, childScaleY] = this.child.get_scale();
-
-        let childWidth = Math.min(natChildWidth * childScaleX, availWidth);
-        let childHeight = Math.min(natChildHeight * childScaleY, availHeight);
-        let childBox = new Clutter.ActorBox();
-
-        childBox.x1 = (availWidth - childWidth) / 2;
-        childBox.y1 = (availHeight - childHeight) / 2;
-        childBox.x2 = childBox.x1 + childWidth;
-        childBox.y2 = childBox.y1 + childHeight;
-
-        Utils.allocate(this.child, childBox, flags);
-    },
-});
+};

 // This class drives long-running icon animations, to keep them running in sync
 // with each other.
-var IconAnimator = Utils.defineClass({
-    Name: 'ZorinTaskbar.IconAnimator',
+export const IconAnimator = class {

-    _init: function(actor) {
+    constructor(actor) {
        this._count = 0;
        this._started = false;
        this._animations = {
@@ -632,12 +533,12 @@ var IconAnimator = Utils.defineClass({
                dancers[i].target.rotation_angle_z = danceRotation;
            }
        });
-    },
+    }

-    destroy: function() {
+    destroy() {
        this._timeline.stop();
        this._timeline = null;
-        for (const name in this._animations) {
+        for (let name in this._animations) {
            const pairs = this._animations[name];
            for (let i = 0, iMax = pairs.length; i < iMax; i++) {
                const pair = pairs[i];
@@ -645,32 +546,32 @@ var IconAnimator = Utils.defineClass({
            }
        }
        this._animations = null;
-    },
+    }

-    pause: function() {
+    pause() {
        if (this._started && this._count > 0) {
            this._timeline.stop();
        }
        this._started = false;
-    },
+    }

-    start: function() {
+    start() {
        if (!this._started && this._count > 0) {
            this._timeline.start();
        }
        this._started = true;
-    },
+    }

-    addAnimation: function(target, name) {
+    addAnimation(target, name) {
        const targetDestroyId = target.connect('destroy', () => this.removeAnimation(target, name));
-        this._animations[name].push({ target, targetDestroyId });
+        this._animations[name].push({ target: target, targetDestroyId: targetDestroyId });
        if (this._started && this._count === 0) {
            this._timeline.start();
        }
        this._count++;
-    },
+    }

-    removeAnimation: function(target, name) {
+    removeAnimation(target, name) {
        const pairs = this._animations[name];
        for (let i = 0, iMax = pairs.length; i < iMax; i++) {
            const pair = pairs[i];
@@ -685,77 +586,7 @@ var IconAnimator = Utils.defineClass({
            }
        }
    }
-});
-
-function newViewSelectorAnimateIn(oldPage) {
-    if (oldPage)
-        oldPage.hide();
-
-    let vs = Main.overview.viewSelector;
-
-    vs.emit('page-empty');
-
-    vs._activePage.show();
-
-    if (vs._activePage == vs._appsPage && oldPage == vs._workspacesPage) {
-        // Restore opacity, in case we animated via _fadePageOut
-        vs._activePage.opacity = 255;
-        let animate = Me.settings.get_boolean('animate-show-apps');
-        if(animate)
-            vs.appDisplay.animate(IconGrid.AnimationDirection.IN);
-    } else {
-        vs._fadePageIn();
-    }
-}
-
-function newViewSelectorAnimateOut(page) {
-    let oldPage = page;
-    let vs = Main.overview.viewSelector;
-
-    if (page == vs._appsPage &&
-        vs._activePage == vs._workspacesPage &&
-        !Main.overview.animationInProgress) {
-        let animate = Me.settings.get_boolean('animate-show-apps');
-        if(animate)
-            vs.appDisplay.animate(IconGrid.AnimationDirection.OUT, Lang.bind(this,
-                function() {
-                    vs._animateIn(oldPage)
-            }));
-        else
-            vs._animateIn(oldPage)
-    } else {
-        vs._fadePageOut(page);
-    }
-}
-
-function newGetPositionForDirection(direction, fromWs, toWs) {
-    let [xDest, yDest] = WM.WindowManager.prototype._getPositionForDirection(direction, fromWs, toWs);
-
-    if (direction == Meta.MotionDirection.UP ||
-        direction == Meta.MotionDirection.UP_LEFT ||
-        direction == Meta.MotionDirection.UP_RIGHT) {
-        yDest -= Main.panel.height;
-    } else if (direction != Meta.MotionDirection.LEFT &&
-               direction != Meta.MotionDirection.RIGHT) {
-        yDest += Main.panel.height;
-    }
-
-    return [xDest, yDest];
-}
-
-function newDoSpringAnimation(animationDirection) {
-    this._grid.opacity = 255;
-    this._grid.animateSpring(animationDirection, Main.overview.getShowAppsButton());
-}
-
-function newAnimateIconPosition(icon, box, flags, nChangedIcons) {
-    if (this._needsIconAllocate) {
-        Utils.allocate(icon, box, flags);
-        return;
-    }
-
-    return this._oldAnimateIconPosition(icon, box, flags, nChangedIcons);;
-}
+};

 function newUpdateHotCorners() {
    // destroy old hot corners
@@ -820,7 +651,7 @@ function newUpdateHotCorners() {
        if (haveTopLeftCorner) {
            let corner = new Layout.HotCorner(this, monitor, cornerX, cornerY);

-            corner.setBarrierSize = size => corner.__proto__.setBarrierSize.call(corner, Math.min(size, 32));
+            corner.setBarrierSize = size => Object.getPrototypeOf(corner).setBarrierSize.call(corner, Math.min(size, 32));
            corner.setBarrierSize(panel ? panel.dtpSize : 32);
            this.hotCorners.push(corner);
        } else {
@@ -855,8 +686,8 @@ function newUpdatePanelBarrier(panel) {
    let fixed2 = panel.monitor.y + barrierSize;
    
    if (panel.checkIfVertical()) {
-        barriers._rightPanelBarrier.push(panel.monitor.y + panel.monitor.height, Meta.BarrierDirection.POSITIVE_Y);
-        barriers._leftPanelBarrier.push(panel.monitor.y, Meta.BarrierDirection.NEGATIVE_Y);
+        barriers._rightPanelBarrier.push(panel.monitor.y + panel.monitor.height, Meta.BarrierDirection.NEGATIVE_Y);
+        barriers._leftPanelBarrier.push(panel.monitor.y, Meta.BarrierDirection.POSITIVE_Y);
    } else {
        barriers._rightPanelBarrier.push(panel.monitor.x + panel.monitor.width, Meta.BarrierDirection.NEGATIVE_X);
        barriers._leftPanelBarrier.push(panel.monitor.x, Meta.BarrierDirection.POSITIVE_X);
@@ -869,12 +700,12 @@ function newUpdatePanelBarrier(panel) {
            fixed2 = panel.monitor.y + panel.monitor.height;
            break;
        case St.Side.LEFT:
-            fixed1 = panel.monitor.x;
-            fixed2 = panel.monitor.x + barrierSize;
+            fixed1 = panel.monitor.x + barrierSize;
+            fixed2 = panel.monitor.x;
            break;
        case St.Side.RIGHT:
-            fixed1 = panel.monitor.x + panel.monitor.width;
-            fixed2 = panel.monitor.x + panel.monitor.width - barrierSize;
+            fixed1 = panel.monitor.x + panel.monitor.width - barrierSize;
+            fixed2 = panel.monitor.x + panel.monitor.width;
            break;
    }

@@ -891,7 +722,7 @@ function newUpdatePanelBarrier(panel) {

    Object.keys(barriers).forEach(k => {
        let barrierOptions = { 
-            display: global.display,
+            backend: global.backend,
            directions: barriers[k][2]
        };
        
@@ -908,14 +739,12 @@ function _newLookingGlassResize() {
    let topOffset = primaryMonitorPanel.getPosition() == St.Side.TOP ? primaryMonitorPanel.dtpSize + 8 : 32;

    this._oldResize();
-    Utils.wrapActor(this);
-    Utils.wrapActor(this._objInspector);

-    this._hiddenY = Main.layoutManager.primaryMonitor.y + topOffset - this.actor.height;
-    this._targetY = this._hiddenY + this.actor.height;
-    this.actor.y = this._hiddenY;
+    this._hiddenY = Main.layoutManager.primaryMonitor.y + topOffset - this.height;
+    this._targetY = this._hiddenY + this.height;
+    this.y = this._hiddenY;

-    this._objInspector.actor.set_position(this.actor.x + Math.floor(this.actor.width * 0.1), this._targetY + Math.floor(this.actor.height * 0.1));
+    this._objInspector.set_position(this.x + Math.floor(this.width * 0.1), this._targetY + Math.floor(this.height * 0.1));
 }

 function _newLookingGlassOpen() {
--- a/panelPositions.js
+++ b/panelPositions.js
@@ -18,27 +18,31 @@
 * This file is based on code from the Dash to Panel extension
 */

-var SHOW_APPS_BTN = 'showAppsButton';
-var ACTIVITIES_BTN = 'activitiesButton';
-var TASKBAR = 'taskbar';
-var DATE_MENU = 'dateMenu';
-var SYSTEM_MENU = 'systemMenu';
-var LEFT_BOX = 'leftBox';
-var CENTER_BOX = 'centerBox';
-var RIGHT_BOX = 'rightBox';
-var DESKTOP_BTN = 'desktopButton';
+export const SHOW_APPS_BTN = 'showAppsButton';
+export const ACTIVITIES_BTN = 'activitiesButton';
+export const TASKBAR = 'taskbar';
+export const DATE_MENU = 'dateMenu';
+export const SYSTEM_MENU = 'systemMenu';
+export const LEFT_BOX = 'leftBox';
+export const CENTER_BOX = 'centerBox';
+export const RIGHT_BOX = 'rightBox';
+export const DESKTOP_BTN = 'desktopButton';

-var STACKED_TL = 'stackedTL';
-var STACKED_BR = 'stackedBR';
-var CENTERED = 'centered';
-var CENTERED_MONITOR = 'centerMonitor';
+export const STACKED_TL = 'stackedTL';
+export const STACKED_BR = 'stackedBR';
+export const CENTERED = 'centered';
+export const CENTERED_MONITOR = 'centerMonitor';

-var TOP = 'TOP';
-var BOTTOM = 'BOTTOM';
-var LEFT = 'LEFT';
-var RIGHT = 'RIGHT';
+export const TOP = 'TOP';
+export const BOTTOM = 'BOTTOM';
+export const LEFT = 'LEFT';
+export const RIGHT = 'RIGHT';

-var defaults = [
+export const START = 'START';
+export const MIDDLE = 'MIDDLE';
+export const END = 'END';
+
+export const defaults = [
    { element: LEFT_BOX,        visible: true,     position: STACKED_TL },
    { element: SHOW_APPS_BTN,   visible: false,    position: STACKED_TL },
    { element: ACTIVITIES_BTN,  visible: true,     position: STACKED_TL },
@@ -50,24 +54,11 @@ var defaults = [
    { element: DESKTOP_BTN,     visible: false,    position: STACKED_BR },
 ];

-var optionDialogFunctions = {};
+export const optionDialogFunctions = {};

-optionDialogFunctions[SHOW_APPS_BTN] = '_showShowAppsButtonOptions';
 optionDialogFunctions[DATE_MENU] = '_showDateMenuOptions';
 optionDialogFunctions[DESKTOP_BTN] = '_showDesktopButtonOptions';

-function getSettingsPositions(settings, setting) {
-    var positions = null;
-
-    try {
-        positions = JSON.parse(settings.get_string(setting));
-    } catch(e) {
-        log('Error parsing positions: ' + e.message);
-    }
-
-    return positions;
-}
-
-function checkIfCentered(position) {
+export function checkIfCentered(position) {
    return position == CENTERED || position == CENTERED_MONITOR;
 }
--- a/panelSettings.js
+++ b/panelSettings.js
@@ -0,0 +1,111 @@
+/*
+ * This file is part of the Zorin Taskbar extension for Zorin OS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as Pos from './panelPositions.js';
+
+/** Return object representing a settings value that is stored as JSON. */
+export function getSettingsJson(settings, setting) {
+    try {
+        return JSON.parse(settings.get_string(setting));
+    } catch(e) {
+        log('Error parsing positions: ' + e.message);
+    }
+}
+/** Write value object as JSON to setting in settings. */
+export function setSettingsJson(settings, setting, value) {
+    try {
+        const json = JSON.stringify(value);
+        settings.set_string(setting, json);
+    } catch(e) {
+        log('Error serializing setting: ' + e.message);
+    }
+}
+
+/** Returns size of panel on a specific monitor, in pixels. */
+export function getPanelSize(settings, monitorIndex) {
+    const sizes = getSettingsJson(settings, 'panel-sizes');
+    // Pull in deprecated setting if panel-sizes does not have setting for monitor.
+    const fallbackSize = settings.get_int('panel-size');
+    const theDefault = 48;
+    return sizes[monitorIndex] || fallbackSize || theDefault;
+}
+
+export function setPanelSize(settings, monitorIndex, value) {
+    if (!(Number.isInteger(value) && value <= 128 && value >= 16)) {
+        log('Not setting invalid panel size: ' + value);
+        return;
+    }
+    let sizes = getSettingsJson(settings, 'panel-sizes');
+    sizes[monitorIndex] = value;
+    setSettingsJson(settings, 'panel-sizes', sizes);
+}
+
+/**
+ * Returns length of panel on a specific monitor, as a whole number percent,
+ * from settings. e.g. 100
+ */
+export function getPanelLength(settings, monitorIndex) {
+    const lengths = getSettingsJson(settings, 'panel-lengths');
+    const theDefault = 100;
+    return lengths[monitorIndex] || theDefault;
+}
+
+export function setPanelLength(settings, monitorIndex, value) {
+    if (!(Number.isInteger(value) && value <= 100 && value >= 0)) {
+        log('Not setting invalid panel length: ' + value);
+        return;
+    }
+    let lengths = getSettingsJson(settings, 'panel-lengths');
+    lengths[monitorIndex] = value;
+    setSettingsJson(settings, 'panel-lengths', lengths);
+}
+
+/** Returns position of panel on a specific monitor. */
+export function getPanelPosition(settings, monitorIndex) {
+    const positions = getSettingsJson(settings, 'panel-positions');
+    const fallbackPosition = settings.get_string('panel-position');
+    const theDefault = Pos.BOTTOM;
+    return positions[monitorIndex] || fallbackPosition || theDefault;
+}
+
+export function setPanelPosition(settings, monitorIndex, value) {
+    if (!(value === Pos.TOP || value === Pos.BOTTOM || value === Pos.LEFT
+        || value === Pos.RIGHT)) {
+        log('Not setting invalid panel position: ' + value);
+        return;
+    }
+    const positions = getSettingsJson(settings, 'panel-positions');
+    positions[monitorIndex] = value;
+    setSettingsJson(settings, 'panel-positions', positions);
+}
+
+/** Returns anchor location of panel on a specific monitor. */
+export function getPanelAnchor(settings, monitorIndex) {
+    const anchors = getSettingsJson(settings, 'panel-anchors');
+    const theDefault = Pos.MIDDLE;
+    return anchors[monitorIndex] || theDefault;
+}
+
+export function setPanelAnchor(settings, monitorIndex, value) {
+    if (!(value === Pos.START || value === Pos.MIDDLE || value === Pos.END)) {
+        log('Not setting invalid panel anchor: ' + value);
+        return;
+    }
+    const anchors = getSettingsJson(settings, 'panel-anchors');
+    anchors[monitorIndex] = value;
+    setSettingsJson(settings, 'panel-anchors', anchors);
+}
--- a/panelStyle.js
+++ b/panelStyle.js
@@ -22,38 +22,23 @@
 * mathematical.coffee@gmail.com
 */

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const ExtensionUtils = imports.misc.extensionUtils;
-const Lang = imports.lang;
-const Main = imports.ui.main;
-const Mainloop = imports.mainloop;
-const St = imports.gi.St;
-const Shell = imports.gi.Shell;
+import * as Utils from './utils.js';

-const Panel = Me.imports.panel;
-const Taskbar = Me.imports.taskbar;
-const Utils = Me.imports.utils;
+export const PanelStyle = class {

-var dtpPanelStyle = Utils.defineClass({
-    Name: 'ZorinTaskbar.PanelStyle',
-
-    _init: function() {
-
-    },
-
-    enable : function(panel) {
+    enable(panel) {
        this.panel = panel;

        this._applyStyles();
-    },
+    }

-    disable: function () {
+    disable() {
        this._removeStyles();
-    },
+    }

-    _applyStyles: function() {
+    _applyStyles() {
        this._rightBoxOperations = [];
-      
+
        // center box has been moved next to the right box and will be treated the same
        this._centerBoxOperations = this._rightBoxOperations;

@@ -62,31 +47,31 @@ var dtpPanelStyle = Utils.defineClass({
        this._applyStylesRecursively();
        
        /* connect signal */
-        this._rightBoxActorAddedID = this.panel._rightBox.connect('actor-added',
-            Lang.bind(this, function (container, actor) {
+        this._rightBoxActorAddedID = this.panel._rightBox.connect('child-added',
+            (container, actor) => {
                if(this._rightBoxOperations.length && !this._ignoreAddedChild)
                    this._recursiveApply(actor, this._rightBoxOperations);

                this._ignoreAddedChild = 0;
-            })
+            }
        );
-        this._centerBoxActorAddedID = this.panel._centerBox.connect('actor-added',
-            Lang.bind(this, function (container, actor) {
+        this._centerBoxActorAddedID = this.panel._centerBox.connect('child-added',
+            (container, actor) => {
                if(this._centerBoxOperations.length && !this._ignoreAddedChild)
                    this._recursiveApply(actor, this._centerBoxOperations);

                this._ignoreAddedChild = 0;
-            })
+            }
        );
-        this._leftBoxActorAddedID = this.panel._leftBox.connect('actor-added',
-            Lang.bind(this, function (container, actor) {
+        this._leftBoxActorAddedID = this.panel._leftBox.connect('child-added',
+            (container, actor) => {
                if(this._leftBoxOperations.length)
                    this._recursiveApply(actor, this._leftBoxOperations);
-            })
+            }
        );
-    },
+    }

-    _removeStyles: function() {
+    _removeStyles() {
        /* disconnect signal */
        if (this._rightBoxActorAddedID) 
            this.panel._rightBox.disconnect(this._rightBoxActorAddedID);
@@ -100,13 +85,13 @@ var dtpPanelStyle = Utils.defineClass({
        this._restoreOriginalStyle(this.panel._leftBox);

        this._applyStylesRecursively(true);
-    },
+    }

-    _applyStylesRecursively: function(restore) {
+    _applyStylesRecursively(restore) {
        /*recurse actors */
        if(this._rightBoxOperations.length) {
            // add the system menu as we move it from the rightbox to the panel to position it independently
-            let children = this.panel._rightBox.get_children().concat([this.panel.statusArea.aggregateMenu.container]);
+            let children = this.panel._rightBox.get_children().concat([this.panel.statusArea[Utils.getSystemMenuInfo().name].container]);
            for(let i in children)
                this._recursiveApply(children[i], this._rightBoxOperations, restore);
        }
@@ -123,9 +108,9 @@ var dtpPanelStyle = Utils.defineClass({
            for(let i in children)
                this._recursiveApply(children[i], this._leftBoxOperations, restore);
        }
-    },
+    }

-    _recursiveApply: function(actor, operations, restore) {
+    _recursiveApply(actor, operations, restore) {
        for(let i in operations) {
            let o = operations[i];
            if(o.compareFn(actor))
@@ -141,9 +126,9 @@ var dtpPanelStyle = Utils.defineClass({
                this._recursiveApply(children[i], operations, restore);
            }
        }
-    },
-    
-    _restoreOriginalStyle: function(actor) {
+    }
+
+    _restoreOriginalStyle(actor) {
        if (actor._dtp_original_inline_style !== undefined) {
            actor.set_style(actor._dtp_original_inline_style);
            delete actor._dtp_original_inline_style;
@@ -153,10 +138,10 @@ var dtpPanelStyle = Utils.defineClass({
        if (actor.has_style_class_name('panel-button')) {
            this._refreshPanelButton(actor);
        }
-    },
+    }

-    _refreshPanelButton: function(actor) {
-        if (actor.visible && imports.misc.config.PACKAGE_VERSION >= '3.34.0') {
+    _refreshPanelButton(actor) {
+        if (actor.visible) {
            //force gnome 3.34+ to refresh (having problem with the -natural-hpadding)
            let parent = actor.get_parent();
            let children = parent.get_children();
@@ -173,4 +158,4 @@ var dtpPanelStyle = Utils.defineClass({
        }
    }
    
-});
+}
--- a/po/ar.po
+++ b/po/ar.po
@@ -24,3 +24,6 @@ msgstr "أظهر زر سطح المكتب المساحة المتروكة (بي

 msgid "Floating rounded theme"
 msgstr "مظهر دائري عائم"
+
+msgid "Isolate Workspaces and Monitors in Application Switching settings"
+msgstr "عزل مساحات العمل والشاشات في إعدادات تبديل التطبيقات"
--- a/po/cs.po
+++ b/po/cs.po
--- a/po/de.po
+++ b/po/de.po
--- a/po/es.po
+++ b/po/es.po
--- a/po/fa.po
+++ b/po/fa.po
--- a/po/fr.po
+++ b/po/fr.po
--- a/po/gl.po
+++ b/po/gl.po
--- a/po/hi.po
+++ b/po/hi.po
@@ -24,3 +24,6 @@ msgstr "डेस्कटॉप बटन दिखाएं पैडिंग

 msgid "Floating rounded theme"
 msgstr "फ़्लोटिंग गोलाकार थीम"
+
+msgid "Isolate Workspaces and Monitors in Application Switching settings"
+msgstr "एप्लिकेशन स्विचिंग सेटिंग्स में कार्यस्थलों और मॉनिटर को अलग करें"
--- a/po/hu.po
+++ b/po/hu.po
--- a/po/id.po
+++ b/po/id.po
@@ -24,3 +24,6 @@ msgstr "Tampilkan tombol desktop padding (px)"

 msgid "Floating rounded theme"
 msgstr "Tema bulat mengambang"
+
+msgid "Isolate Workspaces and Monitors in Application Switching settings"
+msgstr "Isolasi Ruang Kerja dan Monitor dalam pengaturan Pengalihan Aplikasi"
--- a/po/it.po
+++ b/po/it.po
--- a/po/ja.po
+++ b/po/ja.po
--- a/po/kk.po
+++ b/po/kk.po
--- a/po/ko.po
+++ b/po/ko.po
--- a/po/nl.po
+++ b/po/nl.po
--- a/po/pl.po
+++ b/po/pl.po
--- a/po/pt.po
+++ b/po/pt.po
@@ -24,3 +24,6 @@ msgstr "Preenchimento do botão Mostrar Área de Trabalho (px)"

 msgid "Floating rounded theme"
 msgstr "Tema arredondado flutuante"
+
+msgid "Isolate Workspaces and Monitors in Application Switching settings"
+msgstr "Isolar espaços de trabalho e monitores nas configurações de Comutação de aplicações"
--- a/po/pt_BR.po
+++ b/po/pt_BR.po
--- a/po/ru.po
+++ b/po/ru.po
--- a/po/sk.po
+++ b/po/sk.po
--- a/po/sv.po
+++ b/po/sv.po
--- a/po/tr.po
+++ b/po/tr.po
--- a/po/uk.po
+++ b/po/uk.po
--- a/po/zh_CN.po
+++ b/po/zh_CN.po
--- a/po/zh_TW.po
+++ b/po/zh_TW.po
--- a/prefs.js
+++ b/prefs.js
--- a/progress.js
+++ b/progress.js
@@ -20,20 +20,21 @@
 * and code from the Dash to Panel extension
 */

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Gio = imports.gi.Gio;
-const Cairo = imports.cairo;
-const Clutter = imports.gi.Clutter;
-const Pango = imports.gi.Pango;
-const St = imports.gi.St;
-const Signals = imports.signals;
-const Utils = Me.imports.utils;
+import Cairo from 'cairo';
+import Gio from 'gi://Gio';
+import Clutter from 'gi://Clutter';
+import Pango from 'gi://Pango';
+import St from 'gi://St';
+import * as Utils from './utils.js';
+import {SETTINGS} from './extension.js';
+
+import {EventEmitter} from 'resource:///org/gnome/shell/misc/signals.js';


-var ProgressManager = Utils.defineClass({
-    Name: 'ZorinTaskbar.ProgressManager',
+export const ProgressManager = class extends EventEmitter {

-    _init: function() {
+    constructor() {
+        super();

        this._entriesByDBusName = {};

@@ -56,9 +57,9 @@ var ProgressManager = Utils.defineClass({
                this._onDBusNameOwnerChanged.bind(this));

        this._acquireUnityDBus();
-    },
+    }

-    destroy: function() {
+    destroy() {
        if (this._launcher_entry_dbus_signal_id) {
            Gio.DBus.session.signal_unsubscribe(this._launcher_entry_dbus_signal_id);
        }
@@ -68,17 +69,17 @@ var ProgressManager = Utils.defineClass({
        }

        this._releaseUnityDBus();
-    },
+    }

-    size: function() {
+    size() {
        return Object.keys(this._entriesByDBusName).length;
-    },
+    }

-    lookupByDBusName: function(dbusName) {
+    lookupByDBusName(dbusName) {
        return this._entriesByDBusName.hasOwnProperty(dbusName) ? this._entriesByDBusName[dbusName] : null;
-    },
+    }

-    lookupById: function(appId) {
+    lookupById(appId) {
        let ret = [];
        for (let dbusName in this._entriesByDBusName) {
            let entry = this._entriesByDBusName[dbusName];
@@ -88,9 +89,9 @@ var ProgressManager = Utils.defineClass({
        }

        return ret;
-    },
+    }

-    addEntry: function(entry) {
+    addEntry(entry) {
        let existingEntry = this.lookupByDBusName(entry.dbusName());
        if (existingEntry) {
            existingEntry.update(entry);
@@ -98,28 +99,28 @@ var ProgressManager = Utils.defineClass({
            this._entriesByDBusName[entry.dbusName()] = entry;
            this.emit('progress-entry-added', entry);
        }
-    },
+    }

-    removeEntry: function(entry) {
+    removeEntry(entry) {
        delete this._entriesByDBusName[entry.dbusName()]
        this.emit('progress-entry-removed', entry);
-    },
+    }

-    _acquireUnityDBus: function() {
+    _acquireUnityDBus() {
        if (!this._unity_bus_id) {
            Gio.DBus.session.own_name('com.canonical.Unity',
                Gio.BusNameOwnerFlags.ALLOW_REPLACEMENT, null, null);
        }
-    },
+    }

-    _releaseUnityDBus: function() {
+    _releaseUnityDBus() {
        if (this._unity_bus_id) {
            Gio.DBus.session.unown_name(this._unity_bus_id);
            this._unity_bus_id = 0;
        }
-    },
+    }

-    _onEntrySignalReceived: function(connection, sender_name, object_path,
+    _onEntrySignalReceived(connection, sender_name, object_path,
        interface_name, signal_name, parameters, user_data) {
        if (!parameters || !signal_name)
            return;
@@ -131,9 +132,9 @@ var ProgressManager = Utils.defineClass({

            this._handleUpdateRequest(sender_name, parameters);
        }
-    },
+    }

-    _onDBusNameOwnerChanged: function(connection, sender_name, object_path,
+    _onDBusNameOwnerChanged(connection, sender_name, object_path,
        interface_name, signal_name, parameters, user_data) {
        if (!parameters || !this.size())
            return;
@@ -145,9 +146,9 @@ var ProgressManager = Utils.defineClass({
                this.removeEntry(this._entriesByDBusName[before]);
            }
        }
-    },
+    }

-    _handleUpdateRequest: function(senderName, parameters) {
+    _handleUpdateRequest(senderName, parameters) {
        if (!senderName || !parameters) {
            return;
        }
@@ -164,13 +165,13 @@ var ProgressManager = Utils.defineClass({
            this.addEntry(entry);
        }
    }
-});
-Signals.addSignalMethods(ProgressManager.prototype);
+};

-var AppProgress = Utils.defineClass({
-    Name: 'ZorinTaskbar.AppProgress',
+export class AppProgress extends EventEmitter {
+
+    constructor(dbusName, appId, properties) {
+        super();

-    _init: function(dbusName, appId, properties) {
        this._dbusName = dbusName;
        this._appId = appId;
        this._count = 0;
@@ -179,80 +180,80 @@ var AppProgress = Utils.defineClass({
        this._progressVisible = false;
        this._urgent = false;
        this.update(properties);
-    },
+    }

-    appId: function() {
+    appId() {
        return this._appId;
-    },
+    }

-    dbusName: function() {
+    dbusName() {
        return this._dbusName;
-    },
+    }

-    count: function() {
+    count() {
        return this._count;
-    },
+    }

-    setCount: function(count) {
+    setCount(count) {
        if (this._count != count) {
            this._count = count;
            this.emit('count-changed', this._count);
        }
-    },
+    }

-    countVisible: function() {
+    countVisible() {
        return this._countVisible;
-    },
+    }

-    setCountVisible: function(countVisible) {
+    setCountVisible(countVisible) {
        if (this._countVisible != countVisible) {
            this._countVisible = countVisible;
            this.emit('count-visible-changed', this._countVisible);
        }
-    },
+    }

-    progress: function() {
+    progress() {
        return this._progress;
-    },
+    }

-    setProgress: function(progress) {
+    setProgress(progress) {
        if (this._progress != progress) {
            this._progress = progress;
            this.emit('progress-changed', this._progress);
        }
-    },
+    }

-    progressVisible: function() {
+    progressVisible() {
        return this._progressVisible;
-    },
+    }

-    setProgressVisible: function(progressVisible) {
+    setProgressVisible(progressVisible) {
        if (this._progressVisible != progressVisible) {
            this._progressVisible = progressVisible;
            this.emit('progress-visible-changed', this._progressVisible);
        }
-    },
-    
-    urgent: function() {
-        return this._urgent;
-    },
+    }

-    setUrgent: function(urgent) {
+    urgent() {
+        return this._urgent;
+    }
+
+    setUrgent(urgent) {
        if (this._urgent != urgent) {
            this._urgent = urgent;
            this.emit('urgent-changed', this._urgent);
        }
-    },
+    }

-    setDBusName: function(dbusName) {
+    setDBusName(dbusName) {
        if (this._dbusName != dbusName) {
            let oldName = this._dbusName;
            this._dbusName = dbusName;
            this.emit('dbus-name-changed', oldName);
        }
-    },
+    }

-    update: function(other) {
+    update(other) {
        if (other instanceof AppProgress) {
            this.setDBusName(other.dbusName())
            this.setCount(other.count());
@@ -266,11 +267,11 @@ var AppProgress = Utils.defineClass({
                    if (property == 'count') {
                        this.setCount(other[property].get_int64());
                    } else if (property == 'count-visible') {
-                        this.setCountVisible(Me.settings.get_boolean('progress-show-count') && other[property].get_boolean());
+                        this.setCountVisible(SETTINGS.get_boolean('progress-show-count') && other[property].get_boolean());
                    } else if (property == 'progress') {
                        this.setProgress(other[property].get_double());
                    } else if (property == 'progress-visible') {
-                        this.setProgressVisible(Me.settings.get_boolean('progress-show-bar') && other[property].get_boolean());
+                        this.setProgressVisible(SETTINGS.get_boolean('progress-show-bar') && other[property].get_boolean());
                    } else if (property == 'urgent') {
                        this.setUrgent(other[property].get_boolean());
                    } else {
@@ -280,19 +281,17 @@ var AppProgress = Utils.defineClass({
            }
        }
    }
-});
-Signals.addSignalMethods(AppProgress.prototype);
+}


-var ProgressIndicator = Utils.defineClass({
-    Name: 'ZorinTaskbar.ProgressIndicator',
+export const ProgressIndicator = class {

-    _init: function(source, progressManager) {
+    constructor(source, progressManager) {
        this._source = source;
        this._progressManager = progressManager;
        this._signalsHandler = new Utils.GlobalSignalsHandler();

-        this._sourceDestroyId = this._source.actor.connect('destroy', () => {
+        this._sourceDestroyId = this._source.connect('destroy', () => {
            this._signalsHandler.destroy();
        });          

@@ -326,36 +325,36 @@ var ProgressIndicator = Utils.defineClass({
            'progress-entry-removed',
            this._onEntryRemoved.bind(this)
        ]);
-    },
+    }

-    destroy: function() {
-        this._source.actor.disconnect(this._sourceDestroyId);
+    destroy() {
+        this._source.disconnect(this._sourceDestroyId);
        this._signalsHandler.destroy();
-    },
+    }

-    _onEntryAdded: function(appProgress, entry) {
+    _onEntryAdded(appProgress, entry) {
        if (!entry || !entry.appId())
            return;
        if (this._source && this._source.app && this._source.app.id == entry.appId()) {
            this.insertEntry(entry);
        }
-    },
+    }

-    _onEntryRemoved: function(appProgress, entry) {
+    _onEntryRemoved(appProgress, entry) {
        if (!entry || !entry.appId())
            return;

        if (this._source && this._source.app && this._source.app.id == entry.appId()) {
            this.removeEntry(entry);
        }
-    },
+    }

-    updateNotificationBadge: function() {
+    updateNotificationBadge() {
        this._source.updateNumberOverlay(this._notificationBadgeBin);
        this._notificationBadgeLabel.clutter_text.ellipsize = Pango.EllipsizeMode.MIDDLE;
-    },
+    }

-    _notificationBadgeCountToText: function(count) {
+    _notificationBadgeCountToText(count) {
        if (count <= 9999) {
            return count.toString();
        } else if (count < 1e5) {
@@ -374,24 +373,24 @@ var ProgressIndicator = Utils.defineClass({
            let billions = count / 1e9;
            return billions.toFixed(1).toString() + "B";
        }
-    },
+    }

-    setNotificationBadge: function(count) {
+    setNotificationBadge(count) {
        this._notificationBadgeCount = count;
        let text = this._notificationBadgeCountToText(count);
        this._notificationBadgeLabel.set_text(text);
-    },
+    }

-    toggleNotificationBadge: function(activate) {
+    toggleNotificationBadge(activate) {
        if (activate && this._notificationBadgeCount > 0) {
            this.updateNotificationBadge();
            this._notificationBadgeBin.show();
        }
        else
            this._notificationBadgeBin.hide();
-    },
+    }

-    _showProgressOverlay: function() {
+    _showProgressOverlay() {
        if (this._progressOverlayArea) {
            this._updateProgressOverlay();
            return;
@@ -410,34 +409,34 @@ var ProgressIndicator = Utils.defineClass({
        if (hasColor)
            this._progressbar_background = color
        else
-            this._progressbar_background = new Clutter.Color({red: 204, green: 204, blue: 204, alpha: 255});
+            this._progressbar_background = new Utils.ColorUtils.Color({red: 204, green: 204, blue: 204, alpha: 255});

        [hasColor, color] = node.lookup_color('-progress-bar-border', false);
        if (hasColor)
            this._progressbar_border = color;
        else
-            this._progressbar_border = new Clutter.Color({red: 230, green: 230, blue: 230, alpha: 255});
+            this._progressbar_border = new Utils.ColorUtils.Color({red: 230, green: 230, blue: 230, alpha: 255});

        this._updateProgressOverlay();
-    },
+    }

-    _hideProgressOverlay: function() {
+    _hideProgressOverlay() {
        if (this._progressOverlayArea)
            this._progressOverlayArea.destroy();

        this._progressOverlayArea = null;
        this._progressbar_background = null;
        this._progressbar_border = null;
-    },
+    }

-    _updateProgressOverlay: function() {
+    _updateProgressOverlay() {

        if (this._progressOverlayArea) {
            this._progressOverlayArea.queue_repaint();
        }
-    },
+    }

-    _drawProgressOverlay: function(area) {
+    _drawProgressOverlay(area) {
        let scaleFactor = Utils.getScaleFactor();
        let [surfaceWidth, surfaceHeight] = area.get_surface_size();
        let cr = area.get_context();
@@ -495,31 +494,31 @@ var ProgressIndicator = Utils.defineClass({
            Utils.drawRoundedLine(cr, x + lineWidth/2.0, y + lineWidth/2.0, finishedWidth, height, true, true, stroke, fill);

        cr.$dispose();
-    },
+    }

-    setProgress: function(progress) {
+    setProgress(progress) {
        this._progress = Math.min(Math.max(progress, 0.0), 1.0);
        this._updateProgressOverlay();
-    },
+    }

-    toggleProgressOverlay: function(activate) {
+    toggleProgressOverlay(activate) {
        if (activate) {
            this._showProgressOverlay();
        }
        else {
            this._hideProgressOverlay();
        }
-    },
+    }

-    insertEntry: function(appProgress) {
+    insertEntry(appProgress) {
        if (!appProgress || this._progressManagerEntries.indexOf(appProgress) !== -1)
            return;

        this._progressManagerEntries.push(appProgress);
        this._selectEntry(appProgress);
-    },
+    }

-    removeEntry: function(appProgress) {
+    removeEntry(appProgress) {
        if (!appProgress || this._progressManagerEntries.indexOf(appProgress) == -1)
            return;

@@ -534,9 +533,9 @@ var ProgressIndicator = Utils.defineClass({
            this.toggleProgressOverlay(false);
            this.setUrgent(false);
        }
-    },
+    }

-    _selectEntry: function(appProgress) {
+    _selectEntry(appProgress) {
        if (!appProgress)
            return;

@@ -570,7 +569,9 @@ var ProgressIndicator = Utils.defineClass({
        ], [
            appProgress,
            'urgent-changed',
-            (appProgress, value) => this.setUrgent(value)
+            (appProgress, value) => {
+                this.setUrgent(value)
+            }
        ]);

        this.setNotificationBadge(appProgress.count());
@@ -579,8 +580,8 @@ var ProgressIndicator = Utils.defineClass({
        this.toggleProgressOverlay(appProgress.progressVisible());

        this._isUrgent = false;
-    },
-    
+    }
+
    setUrgent(urgent) {
        const icon = this._source.icon._iconBin;
        if (urgent) {
@@ -597,4 +598,4 @@ var ProgressIndicator = Utils.defineClass({
            icon.rotation_angle_z = 0;
        }
    }
-});
+};
--- a/proximity.js
+++ b/proximity.js
@@ -18,14 +18,12 @@
 * This file is based on code from the Dash to Panel extension
 */

-const Lang = imports.lang;
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
+import Mtk from 'gi://Mtk';

-const Layout = imports.ui.layout;
-const Main = imports.ui.main;
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Utils = Me.imports.utils;
+import * as Utils from './utils.js';

 //timeout intervals
 const MIN_UPDATE_MS = 200;
@@ -33,53 +31,46 @@ const MIN_UPDATE_MS = 200;
 //timeout names
 const T1 = 'limitUpdateTimeout';

-var Mode = {
+export const Mode = {
    ALL_WINDOWS: 0,
    FOCUSED_WINDOWS: 1,
    MAXIMIZED_WINDOWS: 2
 };

-var ProximityWatch = Utils.defineClass({
-    Name: 'ZorinTaskbar.ProximityWatch',
+export class ProximityWatch {

-    _init: function(actor, mode, xThreshold, yThreshold, handler) {
+    constructor(actor, monitorIndex, mode, xThreshold, yThreshold, handler) {
        this.actor = actor;
-        this.overlap = 0;
+        this.monitorIndex = monitorIndex
+        this.overlap = false;
        this.mode = mode;
        this.threshold = [xThreshold, yThreshold];
        this.handler = handler;

-        this._allocationChangedId = actor.connect('notify::allocation', () => this._update());
-
-        this._update();
-    },
-
-    destroy: function() {
-        this.actor.disconnect(this._allocationChangedId);
-    },
-
-    _update: function() {
-        this.monitorIndex = Main.layoutManager.findIndexForActor(this.actor);
+        this._allocationChangedId = actor.connect('notify::allocation', () => this._updateWatchRect());

        this._updateWatchRect();
-    },
+    }

-    _updateWatchRect: function() {
+    destroy() {
+        this.actor.disconnect(this._allocationChangedId);
+    }
+
+    _updateWatchRect() {
        let [actorX, actorY] = this.actor.get_position();

-        this.rect = new Meta.Rectangle({ 
+        this.rect = new Mtk.Rectangle({ 
            x: actorX - this.threshold[0],
            y: actorY - this.threshold[1],
            width: this.actor.width + this.threshold[0] * 2,
            height: this.actor.height + this.threshold[1] * 2 
        });
-    },
-});
+    }
+};

-var ProximityManager = Utils.defineClass({
-    Name: 'ZorinTaskbar.ProximityManager',
+export const ProximityManager = class {

-    _init: function() {
+    constructor() {
        this._counter = 1;
        this._watches = {};
        this._focusedWindowInfo = null;
@@ -89,41 +80,41 @@ var ProximityManager = Utils.defineClass({

        this._bindSignals();
        this._setFocusedWindow();
-    },
+    }

-    createWatch: function(actor, mode, xThreshold, yThreshold, handler) {
-        let watch = new ProximityWatch(actor, mode, xThreshold, yThreshold, handler);
+    createWatch(actor, monitorIndex, mode, xThreshold, yThreshold, handler) {
+        let watch = new ProximityWatch(actor, monitorIndex, mode, xThreshold, yThreshold, handler);

        this._watches[this._counter] = watch;
        this.update();
        
        return this._counter++;
-    },
+    }

-    removeWatch: function(id) {
+    removeWatch(id) {
        if (this._watches[id]) {
            this._watches[id].destroy();
            delete this._watches[id];
        }
-    },
+    }

-    update: function() {
+    update() {
        this._queueUpdate(true);
-    },
+    }

-    destroy: function() {
+    destroy() {
        this._signalsHandler.destroy();
        this._timeoutsHandler.destroy();
        this._disconnectFocusedWindow();
        Object.keys(this._watches).forEach(id => this.removeWatch(id));
-    },
+    }

-    _bindSignals: function() {
+    _bindSignals() {
        this._signalsHandler.add(
            [
                global.window_manager,
                'switch-workspace', 
-                () => Object.keys(this._watches).forEach(id => this._watches[id].overlap = 0)
+                () => this._queueUpdate()
            ],
            [
                Main.overview,
@@ -139,17 +130,14 @@ var ProximityManager = Utils.defineClass({
                }
            ],
            [
-                global.window_group,
-                [
-                    'actor-added',
-                    'actor-removed'
-                ],
+                global.display, 
+                'restacked', 
                () => this._queueUpdate()
            ]
        );
-    },
+    }

-    _setFocusedWindow: function() {
+    _setFocusedWindow() {
        this._disconnectFocusedWindow();

        let focusedWindow = global.display.focus_window;
@@ -164,15 +152,15 @@ var ProximityManager = Utils.defineClass({
                this._focusedWindowInfo = focusedWindowInfo;
            }
        }
-    },
+    }

-    _getFocusedWindowInfo: function(focusedWindow) {
+    _getFocusedWindowInfo(focusedWindow) {
        let window = focusedWindow.get_compositor_private();
        let focusedWindowInfo;

        if (window) {
            focusedWindowInfo = { window: window };
-            focusedWindowInfo.metaWindow = focusedWindowInfo.window.get_meta_window();
+            focusedWindowInfo.metaWindow = focusedWindow;

            if (focusedWindow.is_attached_dialog()) {
                let mainMetaWindow = focusedWindow.get_transient_for();
@@ -185,38 +173,40 @@ var ProximityManager = Utils.defineClass({
        }

        return focusedWindowInfo;
-    },
+    }

-    _disconnectFocusedWindow: function(destroy) {
+    _disconnectFocusedWindow(destroy) {
        if (this._focusedWindowInfo && !destroy) {
            this._focusedWindowInfo.window.disconnect(this._focusedWindowInfo.allocationId);
            this._focusedWindowInfo.window.disconnect(this._focusedWindowInfo.destroyId);
        }

        this._focusedWindowInfo = null;
-    },
+    }

-    _getHandledWindows: function() {
-        return global.get_window_actors()
-                     .filter(w => w.visible)
-                     .map(w => w.get_meta_window())
-                     .filter(mw => this._checkIfHandledWindow(mw));
-    },
+    _getHandledWindows() {
+        return Utils.getCurrentWorkspace()
+                    .list_windows()
+                    .filter(mw => this._checkIfHandledWindow(mw));
+    }

-    _checkIfHandledWindow: function(metaWindow) {
-        return metaWindow && !metaWindow.minimized &&
+    _checkIfHandledWindow(metaWindow) {
+        return metaWindow && 
+               !metaWindow.minimized &&
+               !metaWindow.customJS_ding &&
+               metaWindow.window_type != Meta.WindowType.DESKTOP &&
               this._checkIfHandledWindowType(metaWindow);
-    },
+    }

-    _checkIfHandledWindowType: function(metaWindow) {
+    _checkIfHandledWindowType(metaWindow) {
        let metaWindowType = metaWindow.get_window_type();

        //https://www.roojs.org/seed/gir-1.2-gtk-3.0/seed/Meta.WindowType.html
        return metaWindowType <= Meta.WindowType.SPLASHSCREEN && 
               metaWindowType != Meta.WindowType.DESKTOP;
-    },
+    }

-    _queueUpdate: function(noDelay) {
+    _queueUpdate(noDelay) {
        if (!noDelay && this._timeoutsHandler.getId(T1)) {
            //limit the number of updates
            this._pendingUpdate = true;
@@ -226,40 +216,45 @@ var ProximityManager = Utils.defineClass({
        this._timeoutsHandler.add([T1, MIN_UPDATE_MS, () => this._endLimitUpdate()]);

        let metaWindows = this._getHandledWindows();
-        
+
        Object.keys(this._watches).forEach(id => {
            let watch = this._watches[id];
-            let overlap = this._update(watch, metaWindows);
+            let overlap = !!this._update(watch, metaWindows);

            if (overlap !== watch.overlap) {
                watch.handler(overlap);
                watch.overlap = overlap;
            }
        });
-    },
+    }

-    _endLimitUpdate: function() {
+    _endLimitUpdate() {
        if (this._pendingUpdate) {
            this._pendingUpdate = false;
            this._queueUpdate();
        }
-    },
+    }

-    _update: function(watch, metaWindows) {
-        if (watch.mode === Mode.FOCUSED_WINDOWS) {
+    _update(watch, metaWindows) {
+        if (watch.mode === Mode.FOCUSED_WINDOWS)
            return (this._focusedWindowInfo && 
                    this._checkIfHandledWindow(this._focusedWindowInfo.metaWindow) &&
                    this._checkProximity(this._focusedWindowInfo.metaWindow, watch));
-        } else if (watch.mode === Mode.MAXIMIZED_WINDOWS) {
+
+        if (watch.mode === Mode.MAXIMIZED_WINDOWS)
            return metaWindows.some(mw => mw.maximized_vertically && mw.maximized_horizontally && 
                                          mw.get_monitor() == watch.monitorIndex);
-        }
        
        //Mode.ALL_WINDOWS
        return metaWindows.some(mw => this._checkProximity(mw, watch));
-    },
+    }

-    _checkProximity: function(metaWindow, watch) {
-        return metaWindow.get_frame_rect().overlap(watch.rect);
-    },
-});
+    _checkProximity(metaWindow, watch) {
+        let windowRect = metaWindow.get_frame_rect();
+
+        return windowRect.overlap(watch.rect) && 
+               ((!watch.threshold[0] && !watch.threshold[1]) || 
+                metaWindow.get_monitor() == watch.monitorIndex || 
+                windowRect.overlap(global.display.get_monitor_geometry(watch.monitorIndex)));
+    }
+};
--- a/schemas/org.gnome.shell.extensions.zorin-taskbar.gschema.xml
+++ b/schemas/org.gnome.shell.extensions.zorin-taskbar.gschema.xml
@@ -17,6 +17,7 @@
    <value value='4' nick='CYCLE-MIN'/>
    <value value='5' nick='QUIT'/>
    <value value='6' nick='TOGGLE-SHOWPREVIEW'/>
+    <value value='7' nick='TOGGLE-CYCLE'/>
  </enum>
  <enum id='org.gnome.shell.extensions.zorin-taskbar.scrollAction'>
    <value value='0' nick='NOTHING'/>
@@ -42,13 +43,6 @@
    <value value='1' nick='FOCUSED_WINDOWS'/>
    <value value='2' nick='MAXIMIZED_WINDOWS'/>
  </enum>
-  <enum id='org.gnome.shell.extensions.zorin-taskbar.fontWeight'>
-    <value value='0' nick='inherit'/>
-    <value value='1' nick='normal'/>
-    <value value='2' nick='lighter'/>
-    <value value='3' nick='bold'/>
-    <value value='4' nick='bolder'/>
-  </enum>
  <enum id='org.gnome.shell.extensions.zorin-taskbar.hotkeyNumberKeys'>
    <value value='0' nick='NUM_ROW'/>
    <value value='1' nick='NUM_KEYPAD'/>
@@ -57,7 +51,7 @@
  <schema path="/org/gnome/shell/extensions/zorin-taskbar/" id="org.gnome.shell.extensions.zorin-taskbar">
    <key name="panel-position" enum="org.gnome.shell.extensions.zorin-taskbar.position">
      <default>'BOTTOM'</default>
-      <summary>Panel position</summary>
+      <summary>Panel position (Deprecated)</summary>
      <description>Panel is shown on the Bottom or Top of the screen.</description>
    </key>
    <key name="panel-element-positions-monitors-sync" type="b">
@@ -75,9 +69,24 @@
      <summary>Panel element positions</summary>
      <description>Panel element positions (JSON).</description>
    </key>
+    <key type="s" name="panel-lengths">
+      <default>'{}'</default>
+      <summary>Percentages of screen edge for panel to span</summary>
+      <description>Length of the panels, in percent (JSON).</description>
+    </key>
+    <key type="s" name="panel-anchors">
+      <default>'{}'</default>
+      <summary>Positions along screen edge</summary>
+      <description>Where to show the panels if it is not the full length of the screen edge (JSON).</description>
+    </key>
+    <key type="s" name="panel-sizes">
+      <default>'{}'</default>
+      <summary>Panel sizes</summary>
+      <description>Sizes of panels, in pixels.</description>
+    </key>
    <key type="i" name="panel-size">
      <default>48</default>
-      <summary>Panel size</summary>
+      <summary>Panel size (Deprecated)</summary>
      <description>Set the size of the panel.</description>
    </key>
    <key name="dot-style-focused" enum="org.gnome.shell.extensions.zorin-taskbar.dotStyle">
@@ -95,6 +104,16 @@
      <summary>Running indicator dominant color</summary>
      <description>Whether to use the app icon's dominant color for .app-well-running-dot</description>
    </key>
+    <key type="b" name="stockgs-keep-top-panel">
+      <default>false</default>
+      <summary>Keep top panel</summary>
+      <description>Whether to keep the stock gnome-shell top panel</description>
+    </key>
+    <key type="b" name="stockgs-panelbtn-click-only">
+      <default>false</default>
+      <summary>Panel menu buttons require click</summary>
+      <description>Whether to activate the panel menu buttons on hover or on click</description>
+    </key>
    <key type="b" name="taskbar-locked">
      <default>false</default>
      <summary>Lock the taskbar</summary>
@@ -105,11 +124,31 @@
      <summary>Custom background color</summary>
      <description>Replace current theme background color for the panel</description>
    </key>
+    <key type="b" name="trans-use-dynamic-opacity">
+      <default>false</default>
+      <summary>Dynamic opacity</summary>
+      <description>Enable dynamic opacity</description>
+    </key>
    <key type="d" name="trans-panel-opacity">
      <default>0.4</default>
      <summary>Panel opacity</summary>
      <description>Custom opacity for the panel</description>
    </key>
+    <key name="trans-dynamic-behavior" enum="org.gnome.shell.extensions.zorin-taskbar.proximityBehavior">
+      <default>'ALL_WINDOWS'</default>
+      <summary>Dynamic opacity behavior</summary>
+      <description>Dictates which window type affects the panel opacity</description>
+    </key>
+    <key type="i" name="trans-dynamic-distance">
+      <default>20</default>
+      <summary>Distance to change opacity</summary>
+      <description>The distance a window needs to be from the panel to change opacity</description>
+    </key>
+    <key type="d" name="trans-dynamic-anim-target">
+      <default>0.8</default>
+      <summary>Modified panel opacity</summary>
+      <description>Modified opacity for the panel when a window is near</description>
+    </key>
    <key type="b" name="intellihide">
      <default>false</default>
      <summary>Intellihide</summary>
@@ -150,20 +189,10 @@
      <summary>Keybinding toggle intellihide</summary>
      <description>Keybinding to reveal the panel while in intellihide mode</description>
    </key>
-    <key type="b" name="intellihide-floating-rounded-theme">
-      <default>true</default>
+    <key type="b" name="floating-rounded-theme">
+      <default>false</default>
      <summary>Floating rounded theme</summary>
-      <description>Display the panel with a floating rounded theme while in intellihide mode</description>
-    </key>
-    <key type="b" name="show-apps-override-escape">
-      <default>true</default>
-      <summary>Override escape key</summary>
-      <description>Override the escape key to return to the desktop when entering the overview using the Show Applications button</description>
-    </key>
-    <key type="b" name="animate-show-apps">
-      <default>true</default>
-      <summary>Animate Show Applications from the desktop</summary>
-      <description>Animate Show Applications from the desktop</description>
+      <description>Display the panel with a floating rounded theme</description>
    </key>
    <key type="as" name="panel-context-menu-commands">
     <default>[]</default>
@@ -216,7 +245,7 @@
      <description>Peek a window upon hover for some time</description>
    </key>
    <key type="i" name="window-preview-size">
-      <default>250</default>
+      <default>200</default>
      <summary>Window previews size</summary>
      <description>Preferred window previews size</description>
    </key>
@@ -339,7 +368,7 @@
      <description>When multiple instances of the application are available, show their window previews</description>
    </key>
    <key name="shortcut-num-keys" enum="org.gnome.shell.extensions.zorin-taskbar.hotkeyNumberKeys">
-      <default>'BOTH'</default>
+      <default>'NUM_ROW'</default>
      <summary>Hotkeys number keys</summary>
      <description>Which number keys are used for the hotkeys</description>
    </key>
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -21,34 +21,40 @@
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

-#zorintaskbarTaskbar .dash-item-container > StWidget {
-	margin: 0;
-	padding: 0; 
-}
-
-#zorintaskbarScrollview .app-well-app .overview-icon,
-.zorintaskbarMainPanel .show-apps .overview-icon {
-	background: none;
-	border: none;
+#zorintaskbarTaskbar .dash-item-container > StWidget,
+.zorintaskbarMainPanel .dash-item-container .show-apps {
 	margin: 0;
 	padding: 0;
 }

-#zorintaskbarScrollview .app-well-app .overview-label {
+#zorintaskbarScrollview .overview-tile,
+.zorintaskbarMainPanel .overview-tile {
+	background: none;
+}
+
+#zorintaskbarScrollview .overview-tile .overview-label {
 	/* must match TITLE_RIGHT_PADDING in apppicons.js */
 	padding-right: 8px;
+	text-align: left;
 }

-#zorintaskbarScrollview .app-well-app .favorite {
-	background-color: rgba(80, 150, 255, 0.4);
+.zorintaskbarMainPanel .dash-item-container .show-apps .overview-icon {
+	color: #FFF;
 }

-#zorintaskbarScrollview .app-well-app-running-dot {
-	margin-bottom: 0;
+#zorintaskbarTaskbar .dash-item-container .overview-tile:hover,
+#zorintaskbarTaskbar .dash-item-container .overview-tile .dtp-container .overview-icon,
+#zorintaskbarScrollview .overview-tile:hover .dtp-container.animate-appicon-hover,
+.zorintaskbarMainPanel .dash-item-container .show-apps:hover .overview-icon {
+	background: none;
+}
+
+#zorintaskbarScrollview .overview-tile .favorite {
+	/*background-color: rgba(80, 150, 255, 0.4);*/
 }

 #zorintaskbarTaskbar .scrollview-fade {
-    background-gradient-end: rgba(0, 0, 0, 0);
+	background-gradient-end: rgba(0, 0, 0, 0);
 }

 .zorintaskbarSecondaryMenu {
@@ -56,19 +62,26 @@
 }

 .zorintaskbarMainPanel.vertical .panel-button {
-	text-align: center; 
+	text-align: center;
 }

 .zorintaskbarMainPanel.vertical .panel-button.vertical *,
 .zorintaskbarMainPanel.vertical .panel-button.clock-display * {
 	padding: 0;
-	margin: 0; 
+	margin: 0;
 }

 .zorintaskbarMainPanel.vertical .panel-button > *,
 .zorintaskbarMainPanel.vertical .panel-button.vertical > *,
-.zorintaskbarMainPanel.vertical .panel-button.clock-display > * {
-	padding: 8px 0; 
+.zorintaskbarMainPanel.vertical .panel-button.vertical .system-status-icon,
+.zorintaskbarMainPanel.vertical .panel-button.clock-display > *,
+.zorintaskbarMainPanel.vertical .panel-button.clock-display .clock {
+	padding: 8px 0;
+}
+
+.zorintaskbarMainPanel.vertical .panel-button.clock-display {
+	-natural-hpadding: 0;
+	-minimum-hpadding: 0;
 }

 #zorintaskbarThumbnailList {
@@ -92,26 +105,35 @@
 }

 .popup-menu.panel-menu {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }

 #panel #panelLeft, #panel #panelCenter {
-	spacing: 0px; 
+	spacing: 0px;
 }

 #panelBox.floating {
-	padding: 8px;
 	background: transparent;
 }
+#panelBox.floating.top {
+	padding: 8px 8px 0 8px;
+}
+#panelBox.floating.right {
+	padding: 8px 8px 8px 0;
+}
+#panelBox.floating.bottom {
+	padding: 0 8px 8px 8px;
+}
+#panelBox.floating.left {
+	padding: 8px 0 8px 8px;
+}

 #panelBox.floating #panel,
-#panelBox.floating .panel-button {
+#panelBox.floating .panel-button,
+#panelBox.floating .panel-button.clock-display .clock {
 	border-radius: 10px;
 }

-.panel-corner.hidden:active, .panel-corner.hidden:overview, .panel-corner.hidden:focus {
-    -panel-corner-border-color: rgba(0, 0, 0, .001);
-}
 #zorintaskbarScrollview .badge {
 	color: rgba(255, 255, 255, 1);
 	font-weight: bold;
@@ -123,15 +145,14 @@
 }

 #zorintaskbarScrollview .notification-badge {
-    background-color: rgba(255,0,0,0.8);
-    margin: 2px;
+  background-color: rgba(255,0,0,0.8);
+  margin: 2px;
 }

 #zorintaskbarScrollview .progress-bar {
-    /* Customization of the progress bar style, e.g.:
-      -progress-bar-background: rgba(0.8, 0.8, 0.8, 1);
-      -progress-bar-border: rgba(0.9, 0.9, 0.9, 1);
-    */
+	/* Customization of the progress bar style, e.g.:
+	-progress-bar-background: rgba(0.8, 0.8, 0.8, 1);
+	-progress-bar-border: rgba(0.9, 0.9, 0.9, 1); */
 }

 .preview-container,
--- a/taskbar.js
+++ b/taskbar.js
--- a/transparency.js
+++ b/transparency.js
@@ -18,54 +18,46 @@
 * This file is based on code from the Dash to Panel extension
 */

-const Clutter = imports.gi.Clutter;
-const GdkPixbuf = imports.gi.GdkPixbuf;
-const Lang = imports.lang;
-const Main = imports.ui.main;
-const Meta = imports.gi.Meta;
-const St = imports.gi.St;
+import GdkPixbuf from 'gi://GdkPixbuf';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import St from 'gi://St';

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Panel = Me.imports.panel;
-const Proximity = Me.imports.proximity;
-const Utils = Me.imports.utils;
+import * as Proximity from './proximity.js';
+import * as Utils from './utils.js';
+import {SETTINGS} from './extension.js';

-var DynamicTransparency = Utils.defineClass({
-    Name: 'ZorinTaskbar.DynamicTransparency',
+const TRANS_DYNAMIC_DISTANCE = 20;

-    _init: function(dtpPanel) {
+export const DynamicTransparency = class {
+
+    constructor(dtpPanel) {
        this._dtpPanel = dtpPanel;
+        this._proximityManager = dtpPanel.panelManager.proximityManager;
+        this._proximityWatchId = 0;
        this.currentBackgroundColor = 0;

-        this._initialPanelStyle = dtpPanel.panel.actor.get_style();
-        
-        if (this._dtpPanel.geom.position == St.Side.TOP) {
-            this._initialPanelCornerStyle = dtpPanel.panel._leftCorner.actor.get_style();
-        }
+        this._initialPanelStyle = dtpPanel.panel.get_style();

        this._signalsHandler = new Utils.GlobalSignalsHandler();
        this._bindSignals();

        this._updateAllAndSet();
-    },
+        this._updateProximityWatch();
+    }

-    destroy: function() {
+    destroy() {
        this._signalsHandler.destroy();
+        this._proximityManager.removeWatch(this._proximityWatchId);

-        this._dtpPanel.panel.actor.set_style(this._initialPanelStyle);
-        
-        if (this._dtpPanel.geom.position == St.Side.TOP) {
-            this._dtpPanel.panel._leftCorner.actor.set_style(this._initialPanelCornerStyle);
-            this._dtpPanel.panel._rightCorner.actor.set_style(this._initialPanelCornerStyle);
-        }
-    },
+        this._dtpPanel.panel.set_style(this._initialPanelStyle);
+    }

-    updateExternalStyle: function() {
+    updateExternalStyle() {
        this._updateComplementaryStyles();
        this._setBackground();
-    },
+    }

-    _bindSignals: function() {
+    _bindSignals() {
        this._signalsHandler.add(
            [
                Utils.getStageTheme(),
@@ -81,17 +73,51 @@ var DynamicTransparency = Utils.defineClass({
                () => this._updateAlphaAndSet()
            ],
            [
-                Me.settings,
+                SETTINGS,
                [
                    'changed::trans-use-custom-opacity',
-                    'changed::trans-panel-opacity'
+                    'changed::trans-panel-opacity',
+                    'changed::trans-dynamic-anim-target',
+                    'changed::trans-use-dynamic-opacity'
                ],
                () => this._updateAlphaAndSet()
+            ],
+            [
+                SETTINGS,
+                [
+                    'changed::trans-dynamic-behavior',
+                    'changed::trans-use-dynamic-opacity'
+                ],
+                () => this._updateProximityWatch()
            ]
        );
-    },
+    }

-    _updateAllAndSet: function() {
+    _updateProximityWatch() {
+        this._proximityManager.removeWatch(this._proximityWatchId);
+
+        if (SETTINGS.get_boolean('trans-use-dynamic-opacity')) {
+            let isVertical = this._dtpPanel.checkIfVertical();
+            let threshold = TRANS_DYNAMIC_DISTANCE;
+
+            this._windowOverlap = false;
+            this._updateAlphaAndSet()
+
+            this._proximityWatchId = this._proximityManager.createWatch(
+                this._dtpPanel.panelBox.get_parent(),
+                this._dtpPanel.monitor.index,
+                Proximity.Mode[SETTINGS.get_string('trans-dynamic-behavior')], 
+                isVertical ? threshold : 0, 
+                isVertical ? 0 : threshold, 
+                overlap => { 
+                    this._windowOverlap = overlap;
+                    this._updateAlphaAndSet();
+                }
+            );
+        }
+    }
+
+    _updateAllAndSet() {
        let themeBackground = this._getThemeBackground(true);

        this._updateColor(themeBackground);
@@ -99,64 +125,63 @@ var DynamicTransparency = Utils.defineClass({
        this._updateComplementaryStyles();
        this._setBackground();
        this._setActorStyle();
-    },
+    }

-    _updateAlphaAndSet: function() {
+    _updateAlphaAndSet() {
        this._updateAlpha();
        this._setBackground();
-    },
+    }

-    _updateComplementaryStyles: function() {
-        let panelThemeNode = this._dtpPanel.panel.actor.get_theme_node();
+    _updateComplementaryStyles() {
+        let panelThemeNode = this._dtpPanel.panel.get_theme_node();

        this._complementaryStyles = 'border-radius: ' + panelThemeNode.get_border_radius(0) + 'px;';
-    },
+    }

-    _updateColor: function(themeBackground) {
-        this.backgroundColorRgb = (themeBackground || this._getThemeBackground());
-    },
+    _updateColor(themeBackground) {
+        this.backgroundColorRgb = themeBackground || this._getThemeBackground();
+    }

-    _updateAlpha: function(themeBackground) {
-        this.alpha = Me.settings.get_boolean('trans-use-custom-opacity') ?
-                     Me.settings.get_double('trans-panel-opacity') : 
-                     (themeBackground || this._getThemeBackground()).alpha * 0.003921569; // 1 / 255 = 0.003921569
-    },
+    _updateAlpha(themeBackground) {
+        if (this._windowOverlap && !Main.overview.visibleTarget && SETTINGS.get_boolean('trans-use-dynamic-opacity')) {
+            this.alpha = SETTINGS.get_double('trans-dynamic-anim-target');
+        } else {
+            this.alpha = SETTINGS.get_boolean('trans-use-custom-opacity') ?
+                         SETTINGS.get_double('trans-panel-opacity') : 
+                         (themeBackground || this._getThemeBackground()).alpha * 0.003921569; // 1 / 255 = 0.003921569
+        }
+    }

-    _setBackground: function() {
+    _setBackground() {
        this.currentBackgroundColor = Utils.getrgbaColor(this.backgroundColorRgb, this.alpha);
-        
-        let transition = 'transition-duration: 200ms;';
-        let cornerStyle = '-panel-corner-background-color: ' + this.currentBackgroundColor + transition;
+
+        let transition = 'transition-duration: 300ms;';

        this._dtpPanel.set_style('background-color: ' + this.currentBackgroundColor + transition + this._complementaryStyles);
-                
-        if (this._dtpPanel.geom.position == St.Side.TOP) {
-            this._dtpPanel.panel._leftCorner.actor.set_style(cornerStyle);
-            this._dtpPanel.panel._rightCorner.actor.set_style(cornerStyle);
-        }
-    },
+    }

-    _setActorStyle: function() {
-        this._dtpPanel.panel.actor.set_style(
+    _setActorStyle() {
+        this._dtpPanel.panel.set_style(
            'background: none; ' + 
            'border-image: none; ' + 
-            'background-image: none;'
+            'background-image: none; ' +
+            'transition-duration: 300ms;'
        );
-    },
+    }

-    _getThemeBackground: function(reload) {
+    _getThemeBackground(reload) {
        if (reload || !this._themeBackground) {
            let fakePanel = new St.Bin({ name: 'panel' });
            Main.uiGroup.add_child(fakePanel);
-            let fakeTheme = fakePanel.get_theme_node();
+            let fakeTheme = fakePanel.get_theme_node()
            this._themeBackground = this._getBackgroundImageColor(fakeTheme) || fakeTheme.get_background_color();
            Main.uiGroup.remove_child(fakePanel);
        }

        return this._themeBackground;
-    },
+    }

-    _getBackgroundImageColor: function(theme) {
+    _getBackgroundImageColor(theme) {
        let bg = null;

        try {
@@ -172,4 +197,4 @@ var DynamicTransparency = Utils.defineClass({

        return bg;
    }
-});
+}
--- a/ui/BoxDynamicOpacityOptions.ui
+++ b/ui/BoxDynamicOpacityOptions.ui
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="trans_opacity_min_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">5</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="GtkBox" id="box_dynamic_opacity_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">The panel background opacity is affected by</property>
+            <child>
+              <object class="GtkComboBoxText" id="trans_options_window_type_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="ALL_WINDOWS" translatable="yes">All windows</item>
+                  <item id="FOCUSED_WINDOWS" translatable="yes">Focused windows</item>
+                  <item id="MAXIMIZED_WINDOWS" translatable="yes">Maximized windows</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Change opacity to (%)</property>
+            <child>
+              <object class="GtkSpinButton" id="trans_options_min_opacity_spinbutton">
+                <property name="text" translatable="yes">0</property>
+                <property name="valign">center</property>
+                <property name="adjustment">trans_opacity_min_adjustment</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+  </object>
+
+</interface>
--- a/ui/BoxGroupAppsOptions.ui
+++ b/ui/BoxGroupAppsOptions.ui
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="group_apps_label_max_width_adjustment">
+    <property name="upper">1000</property>
+    <property name="step_increment">10</property>
+    <property name="page_increment">100</property>
+  </object>
+
+  <object class="GtkBox" id="box_group_apps_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Maximum width (px) of the application titles</property>
+            <property name="subtitle" translatable="yes">(default is 160)</property>
+            <child>
+              <object class="GtkSpinButton" id="group_apps_label_max_width_spinbutton">
+                <property name="valign">center</property>
+                <property name="width_chars">4</property>
+                <property name="text">0</property>
+                <property name="adjustment">group_apps_label_max_width_adjustment</property>
+                <property name="numeric">True</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Use a fixed width for the application titles</property>
+            <property name="subtitle" translatable="yes">The application titles all have the same width, even if their texts are shorter than the maximum width. The maximum width value is used as the fixed width.</property>
+            <child>
+              <object class="GtkSwitch" id="group_apps_use_fixed_width_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Use the favorite icons as application launchers</property>
+            <child>
+              <object class="GtkSwitch" id="group_apps_use_launchers_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+  </object>
+
+</interface>
--- a/ui/BoxIntellihideOptions.ui
+++ b/ui/BoxIntellihideOptions.ui
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkBox" id="box_intellihide_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Only hide the panel when it is obstructed by windows</property>
+            <child>
+              <object class="GtkSwitch" id="intellihide_window_hide_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow" id="intellihide_behaviour_options">
+            <property name="title" translatable="yes">The panel hides from</property>
+            <child>
+              <object class="GtkComboBoxText" id="intellihide_behaviour_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="ALL_WINDOWS" translatable="yes">All windows</item>
+                  <item id="FOCUSED_WINDOWS" translatable="yes">Focused windows</item>
+                  <item id="MAXIMIZED_WINDOWS" translatable="yes">Maximized windows</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Require pressure at the edge of the screen to reveal the panel</property>
+            <child>
+              <object class="GtkSwitch" id="intellihide_use_pressure_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Allow the panel to be revealed while in fullscreen mode</property>
+            <child>
+              <object class="GtkSwitch" id="intellihide_show_in_fullscreen_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow" id="grid_intellihide_only_secondary">
+            <property name="title" translatable="yes">Only hide secondary panels</property>
+            <property name="subtitle" translatable="yes">(requires multi-monitors option)</property>
+            <child>
+              <object class="GtkSwitch" id="intellihide_only_secondary_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Keyboard shortcut to reveal and hold the panel</property>
+            <property name="subtitle" translatable="yes">Syntax: &amp;lt;Shift&amp;gt;, &amp;lt;Ctrl&amp;gt;, &amp;lt;Alt&amp;gt;, &amp;lt;Super&amp;gt;</property>
+            <child>
+              <object class="GtkEntry" id="intellihide_toggle_entry">
+                <property name="valign">center</property>
+                <property name="width_chars">12</property>
+                <property name="placeholder_text" translatable="yes">e.g. &lt;Super&gt;i</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+
+</interface>
--- a/ui/BoxMiddleClickOptions.ui
+++ b/ui/BoxMiddleClickOptions.ui
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkBox" id="box_middle_click_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Shift+Click action</property>
+            <property name="subtitle" translatable="yes">When set to minimize, double clicking minimizes all the windows of the application.</property>
+            <child>
+              <object class="GtkComboBoxText" id="shift_click_action_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="RAISE" translatable="yes">Raise windows</item>
+                  <item id="MINIMIZE" translatable="yes">Minimize window</item>
+                  <item id="LAUNCH" translatable="yes">Launch new instance</item>
+                  <item id="CYCLE" translatable="yes">Cycle through windows</item>
+                  <item id="CYCLE-MIN" translatable="yes">Cycle windows + minimize</item>
+                  <item id="TOGGLE-SHOWPREVIEW" translatable="yes">Toggle single / Preview multiple</item>
+                  <item id="TOGGLE-CYCLE" translatable="yes">Toggle single / Cycle multiple</item>
+                  <item id="QUIT" translatable="yes">Quit</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Middle-Click action</property>
+            <property name="subtitle" translatable="yes">Behavior for Middle-Click.</property>
+            <child>
+              <object class="GtkComboBoxText" id="middle_click_action_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="RAISE" translatable="yes">Raise windows</item>
+                  <item id="MINIMIZE" translatable="yes">Minimize window</item>
+                  <item id="LAUNCH" translatable="yes">Launch new instance</item>
+                  <item id="CYCLE" translatable="yes">Cycle through windows</item>
+                  <item id="CYCLE-MIN" translatable="yes">Cycle windows + minimize</item>
+                  <item id="TOGGLE-SHOWPREVIEW" translatable="yes">Toggle single / Preview multiple</item>
+                  <item id="TOGGLE-CYCLE" translatable="yes">Toggle single / Cycle multiple</item>
+                  <item id="QUIT" translatable="yes">Quit</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Shift+Middle-Click action</property>
+            <property name="subtitle" translatable="yes">Behavior for Shift+Middle-Click.</property>
+            <child>
+              <object class="GtkComboBoxText" id="shift_middle_click_action_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="RAISE" translatable="yes">Raise windows</item>
+                  <item id="MINIMIZE" translatable="yes">Minimize window</item>
+                  <item id="LAUNCH" translatable="yes">Launch new instance</item>
+                  <item id="CYCLE" translatable="yes">Cycle through windows</item>
+                  <item id="CYCLE-MIN" translatable="yes">Cycle windows + minimize</item>
+                  <item id="TOGGLE-SHOWPREVIEW" translatable="yes">Toggle single / Preview multiple</item>
+                  <item id="TOGGLE-CYCLE" translatable="yes">Toggle single / Cycle multiple</item>
+                  <item id="QUIT" translatable="yes">Quit</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+
+</interface>
--- a/ui/BoxOverlayShortcut.ui
+++ b/ui/BoxOverlayShortcut.ui
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkBox" id="box_overlay_shortcut">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Hotkeys prefix</property>
+            <property name="subtitle" translatable="yes">Hotkeys will either be Super+Number or Super+Alt+Num</property>
+            <child>
+              <object class="GtkComboBoxText" id="hotkey_prefix_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="Super" translatable="yes">Super</item>
+                  <item id="SuperAlt" translatable="yes">Super + Alt</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Number overlay</property>
+            <property name="subtitle" translatable="yes">Temporarily show the application numbers over the icons when using the hotkeys.</property>
+            <child>
+              <object class="GtkComboBoxText" id="overlay_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="NEVER" translatable="yes">Never</item>
+                  <item id="TEMPORARILY" translatable="yes">Show temporarily</item>
+                  <item id="ALWAYS" translatable="yes">Always visible</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Shortcut to show the overlay for 2 seconds</property>
+            <property name="subtitle" translatable="yes">Syntax: &amp;lt;Shift&amp;gt;, &amp;lt;Ctrl&amp;gt;, &amp;lt;Alt&amp;gt;, &amp;lt;Super&amp;gt;</property>
+            <child>
+              <object class="GtkEntry" id="shortcut_entry">
+                <property name="valign">center</property>
+                <property name="width_chars">12</property>
+                <property name="placeholder_text" translatable="yes">e.g. &lt;Super&gt;q</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show window previews on hotkey</property>
+            <property name="subtitle" translatable="yes">Show previews when the application have multiple instances</property>
+            <child>
+                <object class="GtkSwitch" id="shortcut_preview_switch">
+                  <property name="valign">center</property>
+                </object>
+              </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Hotkeys are activated with</property>
+            <property name="subtitle" translatable="yes">Select which keyboard number keys are used to activate the hotkeys</property>
+            <child>
+              <object class="GtkComboBoxText" id="shortcut_num_keys_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="NUM_ROW" translatable="yes">Number row</item>
+                  <item id="NUM_KEYPAD" translatable="yes">Numeric keypad</item>
+                  <item id="BOTH" translatable="yes">Both</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+  </object>
+
+</interface>
--- a/ui/BoxShowDateMenuOptions.ui
+++ b/ui/BoxShowDateMenuOptions.ui
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkBox" id="box_date_menu_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Date</property>
+            <child>
+              <object class="GtkSwitch" id="date_menu_date_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Weekday</property>
+            <child>
+              <object class="GtkSwitch" id="date_menu_weekday_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Seconds</property>
+            <child>
+              <object class="GtkSwitch" id="date_menu_seconds_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+
+</interface>
--- a/ui/BoxShowDesktopOptions.ui
+++ b/ui/BoxShowDesktopOptions.ui
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="show_showdesktop_width_adjustment">
+    <property name="lower">1</property>
+    <property name="upper">40</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="GtkAdjustment" id="show_showdesktop_delay_adjustment">
+    <property name="upper">5000</property>
+    <property name="step_increment">10</property>
+    <property name="page_increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="show_showdesktop_time_adjustment">
+    <property name="upper">5000</property>
+    <property name="step_increment">10</property>
+    <property name="page_increment">100</property>
+  </object>
+
+  <object class="GtkBox" id="box_show_showdesktop_options">
+    <property name="orientation">vertical</property>
+    <property name="width-request">600</property>
+    <property name="spacing">24</property>
+    <property name="margin-top">32</property>
+    <property name="margin-bottom">32</property>
+    <property name="margin-start">32</property>
+    <property name="margin-end">32</property>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show Desktop icon</property>
+            <child>
+              <object class="GtkSwitch" id="show_showdesktop_icon_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow" id="show_showdesktop_width_label">
+            <child>
+              <object class="GtkSpinButton" id="show_showdesktop_width_spinbutton">
+                <property name="valign">center</property>
+                <property name="width_chars">4</property>
+                <property name="text">1</property>
+                <property name="adjustment">show_showdesktop_width_adjustment</property>
+                <property name="numeric">True</property>
+                <property name="value">1</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwPreferencesGroup">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Reveal the desktop when hovering the Show Desktop button</property>
+            <child>
+              <object class="GtkSwitch" id="show_showdesktop_hide_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+
+</interface>
--- a/ui/BoxWindowPreviewOptions.ui
+++ b/ui/BoxWindowPreviewOptions.ui
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="preview_size_adjustment">
+    <property name="lower">100</property>
+    <property name="upper">800</property>
+    <property name="step_increment">10</property>
+    <property name="page_increment">50</property>
+  </object>
+
+  <object class="GtkScrolledWindow" id="box_window_preview_options">
+    <property name="width-request">680</property>
+    <property name="height-request">280</property>
+    <property name="vexpand">True</property>
+    <child>
+
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="width-request">600</property>
+        <property name="spacing">24</property>
+        <property name="margin-top">32</property>
+        <property name="margin-bottom">32</property>
+        <property name="margin-start">32</property>
+        <property name="margin-end">32</property>
+
+        <child>
+          <object class="AdwPreferencesGroup">
+
+            <child>
+              <object class="AdwActionRow">
+                <property name="title" translatable="yes">Middle click on the preview to close the window</property>
+                <child>
+                  <object class="GtkSwitch" id="preview_middle_click_close_switch">
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwPreferencesGroup">
+
+            <child>
+              <object class="AdwActionRow">
+                <property name="title" translatable="yes">Window previews preferred size (px)</property>
+                <child>
+                  <object class="GtkSpinButton" id="preview_size_spinbutton">
+                    <property name="valign">center</property>
+                    <property name="width_chars">4</property>
+                    <property name="text">100</property>
+                    <property name="adjustment">preview_size_adjustment</property>
+                    <property name="numeric">True</property>
+                    <property name="value">100</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwPreferencesGroup">
+
+            <child>
+              <object class="AdwActionRow">
+                <property name="title" translatable="yes">Enable window peeking</property>
+                <property name="subtitle" translatable="yes">When hovering over a window preview for some time, the window gets distinguished.</property>
+                <child>
+                  <object class="GtkSwitch" id="peek_mode_switch">
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+
+      </object>
+
+    </child>
+  </object>
+
+</interface>
--- a/ui/SettingsAction.ui
+++ b/ui/SettingsAction.ui
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="AdwPreferencesPage" id="action">
+    <property name="title" translatable="yes">Action</property>
+    <property name="icon_name">view-pin-symbolic</property>
+
+    <!-- group click action -->
+    <child>
+      <object class="AdwPreferencesGroup" id="action_group_click_action">
+        <property name="title" translatable="yes">Click action</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Click action</property>
+            <property name="subtitle" translatable="yes">Behaviour when clicking on the icon of a running application.</property>
+            <child>
+              <object class="GtkButton" id="middle_click_options_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="middle_click_image">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkComboBoxText" id="click_action_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="CYCLE-MIN" translatable="yes">Cycle windows + minimize</item>
+                  <item id="CYCLE" translatable="yes">Cycle through windows</item>
+                  <item id="TOGGLE-SHOWPREVIEW" translatable="yes">Toggle single / Preview multiple</item>
+                  <item id="TOGGLE-CYCLE" translatable="yes">Toggle single / Cycle multiple</item>
+                  <item id="MINIMIZE" translatable="yes">Toggle windows</item>
+                  <item id="RAISE" translatable="yes">Raise windows</item>
+                  <item id="LAUNCH" translatable="yes">Launch new instance</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group scroll action -->
+    <child>
+      <object class="AdwPreferencesGroup" id="action_group_scroll_action">
+        <property name="title" translatable="yes">Scroll action</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Scroll icon action</property>
+            <property name="subtitle" translatable="yes">Behavior when mouse scrolling over an application icon.</property>
+            <child>
+              <object class="GtkComboBoxText" id="scroll_icon_combo">
+                <property name="valign">center</property>
+                <property name="hexpand">True</property>
+                <items>
+                  <item id="NOTHING" translatable="yes">Do nothing</item>
+                  <item id="CYCLE_WINDOWS" translatable="yes">Cycle windows</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group hotkey -->
+    <child>
+      <object class="AdwPreferencesGroup" id="action_group_hotkry">
+        <property name="title" translatable="yes">Hotkey overlay</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Use hotkeys to activate apps</property>
+            <property name="subtitle" translatable="yes">Enable Super+(0-9) as shortcuts to activate apps. It can also be used together with Shift and Ctrl.</property>
+            <child>
+              <object class="GtkButton" id="overlay_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_overlay">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="hot_keys_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group gnome -->
+    <child>
+      <object class="AdwPreferencesGroup" id="finetune_group_gnome">
+        <property name="title" translatable="yes">Gnome functionality</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Keep original gnome-shell top panel</property>
+            <child>
+              <object class="GtkSwitch" id="stockgs_top_panel_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Activate panel menu buttons on click only</property>
+            <property name="subtitle" translatable="yes">(e.g. date menu)</property>
+            <child>
+              <object class="GtkSwitch" id="stockgs_panelbtn_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+</interface>
--- a/ui/SettingsBehavior.ui
+++ b/ui/SettingsBehavior.ui
@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <object class="AdwPreferencesPage" id="behavior">
+    <property name="title" translatable="yes">Behavior</property>
+    <property name="icon_name">preferences-system-symbolic</property>
+
+    <!-- group applications -->
+    <child>
+      <object class="AdwPreferencesGroup" id="behavior_group_applications">
+        <property name="title" translatable="yes">Applications</property>
+        
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show favorite applications</property>
+            <child>
+              <object class="GtkSwitch" id="show_favorite_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show favorite applications on secondary panels</property>
+            <child>
+              <object class="GtkSwitch" id="multimon_multi_show_favorites_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show running applications</property>
+            <child>
+              <object class="GtkSwitch" id="show_runnning_apps_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Ungroup applications</property>
+            <child>
+              <object class="GtkButton" id="show_group_apps_options_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_show_group_apps_options">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="group_apps_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show notification counter badge</property>
+            <child>
+              <object class="GtkSwitch" id="show_notification_badge_switch">
+                <property name="visible">True</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group hover -->
+    <child>
+      <object class="AdwPreferencesGroup" id="behavior_group_hover">
+        <property name="title" translatable="yes">Hover</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show window previews on hover</property>
+            <child>
+              <object class="GtkButton" id="show_window_previews_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_window_previews_options">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="show_window_previews_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Show tooltip on hover</property>
+            <child>
+              <object class="GtkSwitch" id="show_tooltip_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group isolate -->
+    <child>
+      <object class="AdwPreferencesGroup" id="behavior_group_isolate">
+        <property name="title" translatable="yes">Isolate</property>
+        <child>
+          <object class="AdwActionRow" id="display_multitasking_settings">
+            <property name="title" translatable="yes">Isolate Workspaces and Monitors in Application Switching settings</property>
+            <property name="activatable">True</property>
+            <child>
+              <object class="GtkImage" id="image_display_multitasking_settings">
+                <property name="icon_name">adw-external-link-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+</interface>
--- a/ui/SettingsPosition.ui
+++ b/ui/SettingsPosition.ui
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="panel_size_adjustment">
+    <property name="lower">0.33</property>
+    <property name="upper">1</property>
+    <property name="step_increment">0.01</property>
+    <property name="page_increment">0.1</property>
+  </object>
+
+  <object class="GtkAdjustment" id="panel_length_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="AdwPreferencesPage" id="position">
+    <property name="title" translatable="yes">Position</property>
+    <property name="icon_name">find-location-symbolic</property>
+
+      <!-- group panel -->
+      <child>
+        <object class="AdwPreferencesGroup" id="position_group_panel">
+          <property name="title" translatable="yes">Panel</property>
+
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Display panels on all monitors</property>
+              <child>
+                <object class="GtkSwitch" id="multimon_multi_switch">
+                  <property name="valign">center</property>
+                </object>
+              </child>
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <!-- group order and positions -->
+      <child>
+        <object class="AdwPreferencesGroup" id="position_group_on_monitor">
+          <property name="title" translatable="yes">Order and Position on monitors</property>
+          
+
+          <child>
+            <object class="AdwPreferencesRow">
+              <property name="title" translatable="yes">Monitor</property>
+              <child>
+                <object class="GtkBox">
+                  <property name="margin-start">6</property>
+                  <property name="margin-end">6</property>
+                  <property name="margin-top">6</property>
+                  <property name="margin-bottom">6</property>
+                  <child>
+                    <object class="GtkCheckButton" id="taskbar_position_sync_button">
+                      <property name="label" translatable="yes">Apply changes to all monitors</property>
+                      <property name="receives_default">False</property>
+                      <property name="halign">start</property>
+                      <property name="hexpand">True</property>
+                    </object>
+                  </child>
+                  <child>
+                    <object class="GtkComboBoxText" id="taskbar_position_monitor_combo">
+                      <property name="halign">end</property>
+                      <property name="valign">center</property>
+                      <property name="hexpand">True</property>
+                    </object>
+                  </child>
+                </object>
+              </child>
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <!-- group order and positions 2 -->
+      <child>
+        <object class="AdwPreferencesGroup" id="position_group_on_monitor2">
+
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Panel screen position</property>
+              <child>
+                <object class="GtkToggleButton" id="position_bottom_button">
+                  <property name="label" translatable="yes">Bottom</property>
+                  <property name="receives_default">False</property>
+                  <property name="valign">center</property>
+                  <property name="active">True</property>
+                  <signal name="clicked" handler="position_bottom_button_clicked_cb" swapped="no"/>
+                </object>
+              </child>
+              <child>
+                <object class="GtkToggleButton" id="position_top_button">
+                  <property name="label" translatable="yes">Top</property>
+                  <property name="receives_default">False</property>
+                  <property name="valign">center</property>
+                  <property name="group">position_bottom_button</property>
+                  <signal name="clicked" handler="position_top_button_clicked_cb" swapped="no"/>
+                </object>
+              </child>
+              <child>
+                <object class="GtkToggleButton" id="position_left_button">
+                  <property name="label" translatable="yes">Left</property>
+                  <property name="receives_default">False</property>
+                  <property name="valign">center</property>
+                  <property name="group">position_bottom_button</property>
+                  <signal name="clicked" handler="position_left_button_clicked_cb" swapped="no"/>
+                </object>
+              </child>
+              <child>
+                <object class="GtkToggleButton" id="position_right_button">
+                  <property name="label" translatable="yes">Right</property>
+                  <property name="receives_default">False</property>
+                  <property name="valign">center</property>
+                  <property name="group">position_bottom_button</property>
+                  <signal name="clicked" handler="position_right_button_clicked_cb" swapped="no"/>
+                </object>
+              </child>
+            </object>
+          </child>
+
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Panel thickness</property>
+              <property name="subtitle" translatable="yes">(default is 48)</property>
+              <child>
+                <object class="GtkScale" id="panel_size_scale">
+                  <property name="width-request">350</property>
+                  <property name="adjustment">panel_size_adjustment</property>
+                  <property name="round_digits">0</property>
+                  <property name="digits">0</property>
+                  <property name="value_pos">right</property>
+                  <property name="draw_value">True</property>
+                  <signal name="value-changed" handler="panel_size_scale_value_changed_cb" swapped="no"/>
+                </object>
+              </child>
+            </object>
+          </child>
+
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Panel length (%)</property>
+              <property name="subtitle" translatable="yes">(default is 100)</property>
+              <child>
+                <object class="GtkScale" id="panel_length_scale">
+                  <property name="width-request">350</property>
+                  <property name="adjustment">panel_length_adjustment</property>
+                  <property name="round_digits">0</property>
+                  <property name="digits">0</property>
+                  <property name="value_pos">right</property>
+                  <property name="draw_value">True</property>
+                </object>
+              </child>
+            </object>
+          </child>
+
+          <child>
+            <object class="AdwActionRow" id="panel_anchor_label">
+              <property name="title" translatable="yes">Anchor</property>
+              <child>
+                <object class="GtkComboBoxText" id="panel_anchor_combo">
+                  <property name="valign">center</property>
+                  <items>
+                    <item id="START" translatable="yes">Start</item>
+                    <item id="MIDDLE" translatable="yes">Middle</item>
+                    <item id="END" translatable="yes">End</item>
+                  </items>
+                </object>
+              </child>
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <!-- group order and positions 3 -->
+      <child>
+        <object class="AdwPreferencesGroup" id="position_group_on_monitor3">
+
+          <child>
+            <object class="AdwPreferencesRow">
+              <property name="title" translatable="yes">Taskbar Display</property>
+              <child>
+                <object class="GtkListBox" id="taskbar_display_listbox">
+                  <property name="margin-top">6</property>
+                  <property name="margin-bottom">6</property>
+                  <property name="visible">True</property>
+                  <property name="selection_mode">none</property>
+                </object>
+              </child>
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+  </object>
+</interface>
--- a/ui/SettingsStyle.ui
+++ b/ui/SettingsStyle.ui
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <object class="GtkAdjustment" id="trans_opacity_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">5</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="AdwPreferencesPage" id="style">
+    <property name="title" translatable="yes">Style</property>
+    <property name="icon_name">applications-graphics-symbolic</property>
+
+    <!-- group panel intellihide -->
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_panel2">
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Panel Intellihide</property>
+            <property name="subtitle" translatable="yes">Hide and reveal the panel according to preferences</property>
+            <child>
+              <object class="GtkButton" id="intellihide_options_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_intellihide_options">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="intellihide_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- group dynamic trans2 -->
+    <child>
+      <object class="AdwPreferencesGroup" id="style_group_dynamic_trans2">
+        <property name="title" translatable="yes">Panel style</property>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Floating rounded theme</property>
+            <child>
+              <object class="GtkSwitch" id="floating_rounded_theme_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Override panel theme background opacity</property>
+            <child>
+              <object class="GtkSwitch" id="trans_opacity_override_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow" id="trans_opacity_box">
+            <property name="title" translatable="yes">Panel background opacity (%)</property>
+            <child>
+              <object class="GtkSpinButton" id="trans_opacity_spinbutton">
+                <property name="valign">center</property>
+                <property name="text" translatable="yes">0</property>
+                <property name="adjustment">trans_opacity_adjustment</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow" id="trans_opacity_box2">
+            <property name="title" translatable="yes">Dynamic background opacity</property>
+            <property name="subtitle" translatable="yes">Change opacity when a window gets close to the panel</property>
+            <child>
+              <object class="GtkButton" id="trans_dyn_options_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_trans_dyn_options">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="trans_dyn_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </object>
+</interface>
--- a/utils.js
+++ b/utils.js
@@ -21,119 +21,43 @@
 * Some code was also adapted from the upstream Gnome Shell source code.
 */

-const Clutter = imports.gi.Clutter;
-const Config = imports.misc.config;
-const GdkPixbuf = imports.gi.GdkPixbuf
-const Gi = imports._gi;
-const Gio = imports.gi.Gio;
-const GLib = imports.gi.GLib;
-const GObject = imports.gi.GObject;
-const Gtk = imports.gi.Gtk;
-const Meta = imports.gi.Meta;
-const Shell = imports.gi.Shell;
-const St = imports.gi.St;
-const Mainloop = imports.mainloop;
-const Main = imports.ui.main;
-const MessageTray = imports.ui.messageTray;
-const Util = imports.misc.util;
+import Clutter from 'gi://Clutter';
+import Cogl from 'gi://Cogl';
+import GdkPixbuf from 'gi://GdkPixbuf';
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import Graphene from 'gi://Graphene';
+import Meta from 'gi://Meta';
+import Shell from 'gi://Shell';
+import St from 'gi://St';
+import * as Util from 'resource:///org/gnome/shell/misc/util.js';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import * as MessageTray from 'resource:///org/gnome/shell/ui/messageTray.js';

-var TRANSLATION_DOMAIN = imports.misc.extensionUtils.getCurrentExtension().metadata['gettext-domain'];
-var SCROLL_TIME = Util.SCROLL_TIME / (Util.SCROLL_TIME > 1 ? 1000 : 1);
-
-//Clutter implicit animations are available since 3.34
-//prefer those over Tweener if available
-if (Config.PACKAGE_VERSION < '3.34') {
-    var Tweener = imports.ui.tweener;
-}
-
-var defineClass = function (classDef) {
-    let parentProto = classDef.Extends ? classDef.Extends.prototype : null;
-    
-    if (Config.PACKAGE_VERSION < '3.31.9') {
-        if (parentProto && (classDef.Extends.name || classDef.Extends.toString()).indexOf('ZorinTaskbar.') < 0) {
-            classDef.callParent = function() {
-                let args = Array.prototype.slice.call(arguments);
-                let func = args.shift();
-
-                classDef.Extends.prototype[func].apply(this, args);
-            };
-        }
-
-        return new imports.lang.Class(classDef);
-    }
-
-    let isGObject = parentProto instanceof GObject.Object;
-    let needsSuper = parentProto && !isGObject;
-    let getParentArgs = function(args) {
-        let parentArgs = [];
-
-        (classDef.ParentConstrParams || parentArgs).forEach(p => {
-            if (p.constructor === Array) {
-                let param = args[p[0]];
-                
-                parentArgs.push(p[1] ? param[p[1]] : param);
-            } else {
-                parentArgs.push(p);
-            }
-        });
-
-        return parentArgs;
-    };
-    
-    let C = eval(
-        '(class C ' + (needsSuper ? 'extends Object' : '') + ' { ' +
-        '     constructor(...args) { ' +
-                  (needsSuper ? 'super(...getParentArgs(args));' : '') +
-                  (needsSuper || !parentProto ? 'this._init(...args);' : '') +
-        '     }' +
-        '     callParent(...args) { ' +
-        '         let func = args.shift(); ' +
-        '         if (!(func === \'_init\' && needsSuper))' +
-        '             super[func](...args); ' +
-        '     }' +    
-        '})'
-    );
-
-    if (parentProto) {
-        Object.setPrototypeOf(C.prototype, parentProto);
-        Object.setPrototypeOf(C, classDef.Extends);
-    } 
-    
-    Object.defineProperty(C, 'name', { value: classDef.Name });
-    Object.keys(classDef)
-          .filter(k => classDef.hasOwnProperty(k) && classDef[k] instanceof Function)
-          .forEach(k => C.prototype[k] = classDef[k]);
-
-    if (isGObject) { 
-        C = GObject.registerClass({ Signals: classDef.Signals || {} }, C);
-    }
-    
-    return C;
-};
+const SCROLL_TIME = Util.SCROLL_TIME / (Util.SCROLL_TIME > 1 ? 1000 : 1);

 // simplify global signals and function injections handling
 // abstract class
-var BasicHandler = defineClass({
-    Name: 'ZorinTaskbar.BasicHandler',
+export const  BasicHandler = class {

-    _init: function(){
+    constructor() {
        this._storage = new Object();
-    },
+    }

-    add: function(/*unlimited 3-long array arguments*/){
+    add(/*unlimited 3-long array arguments*/){

        // convert arguments object to array, concatenate with generic
        let args = [].concat('generic', [].slice.call(arguments));
        // call addWithLabel with ags as if they were passed arguments
        this.addWithLabel.apply(this, args);
-    },
+    }

-    destroy: function() {
+    destroy() {
        for( let label in this._storage )
            this.removeWithLabel(label);
-    },
+    }

-    addWithLabel: function( label /* plus unlimited 3-long array arguments*/) {
+    addWithLabel( label /* plus unlimited 3-long array arguments*/) {

        if(this._storage[label] == undefined)
            this._storage[label] = new Array();
@@ -148,9 +72,9 @@ var BasicHandler = defineClass({
            }
        }

-    },
+    }

-    removeWithLabel: function(label){
+    removeWithLabel(label){

        if(this._storage[label]) {
            for( let i = 0; i < this._storage[label].length; i++ ) {
@@ -159,26 +83,24 @@ var BasicHandler = defineClass({

            delete this._storage[label];
        }
-    },
+    }

    /* Virtual methods to be implemented by subclass */
    // create single element to be stored in the storage structure
-    _create: function(item){
+    _create(item){
      throw new Error('no implementation of _create in ' + this);
-    },
+    }

    // correctly delete single element
-    _remove: function(item){
+    _remove(item){
      throw new Error('no implementation of _remove in ' + this);
    }
-});
+}

 // Manage global signals
-var GlobalSignalsHandler = defineClass({
-    Name: 'ZorinTaskbar.GlobalSignalsHandler',
-    Extends: BasicHandler,
+export const GlobalSignalsHandler = class extends BasicHandler {

-    _create: function(item) {
+    _create(item) {
        let handlers = [];

        item[1] = [].concat(item[1]);
@@ -187,28 +109,31 @@ var GlobalSignalsHandler = defineClass({
            let object = item[0];
            let event = item[1][i];
            let callback = item[2]
-            let id = object.connect(event, callback);
+            try {
+                let id = object.connect(event, callback);

-            handlers.push([object, id]);
+                handlers.push([object, id]);
+            } catch (e) 
+            {
+
+            }
        }

        return handlers;
-    },
+    }

-    _remove: function(item){
+    _remove(item){
       item[0].disconnect(item[1]);
    }
-});
+};

 /**
 * Manage function injection: both instances and prototype can be overridden
 * and restored
 */
-var InjectionsHandler = defineClass({
-    Name: 'ZorinTaskbar.InjectionsHandler',
-    Extends: BasicHandler,
+export const InjectionsHandler = class extends BasicHandler {

-    _create: function(item) {
+    _create(item) {
        let object = item[0];
        let name = item[1];
        let injectedFunction = item[2];
@@ -216,112 +141,126 @@ var InjectionsHandler = defineClass({

        object[name] = injectedFunction;
        return [[object, name, injectedFunction, original]];
-    },
+    }

-    _remove: function(item) {
+    _remove(item) {
        let object = item[0];
        let name = item[1];
        let original = item[3];
        object[name] = original;
    }
-});
+};

 /**
 * Manage timeouts: the added timeouts have their id reset on completion
 */
-var TimeoutsHandler = defineClass({
-    Name: 'ZorinTaskbar.TimeoutsHandler',
-    Extends: BasicHandler,
+export const TimeoutsHandler = class extends BasicHandler {

-    _create: function(item) {
+    _create(item) {
        let name = item[0];
        let delay = item[1];
        let timeoutHandler = item[2];

        this._remove(item);

-        this[name] = Mainloop.timeout_add(delay, () => {
+        this[name] = GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
            this[name] = 0;
            timeoutHandler();
+
+            return GLib.SOURCE_REMOVE;
        });

        return [[name]];
-    },
+    }

-    remove: function(name) {
+    remove(name) {
        this._remove([name])
-    },
+    }

-    _remove: function(item) {
+    _remove(item) {
        let name = item[0];

        if (this[name]) {
-            Mainloop.source_remove(this[name]);
+            GLib.Source.remove(this[name]);
            this[name] = 0;
        }
-    },
+    }

-    getId: function(name) {
+    getId(name) {
        return this[name] ? this[name] : 0;
    }
-});
+};

 // This is wrapper to maintain compatibility with GNOME-Shell 3.30+ as well as
 // previous versions.
-var DisplayWrapper = {
-    getScreen: function() {
+export const DisplayWrapper = {
+    getScreen() {
        return global.screen || global.display;
    },

-    getWorkspaceManager: function() {
+    getWorkspaceManager() {
        return global.screen || global.workspace_manager;
    },

-    getMonitorManager: function() {
-        return global.screen || Meta.MonitorManager.get();
+    getMonitorManager() {
+        return global.screen || global.backend.get_monitor_manager();
    }
 };

-var getCurrentWorkspace = function() {
+let unredirectEnabled = true
+export const setDisplayUnredirect = (enable) => {
+    if (enable && !unredirectEnabled)
+        Meta.enable_unredirect_for_display(global.display);
+    else if (!enable && unredirectEnabled)
+        Meta.disable_unredirect_for_display(global.display);
+
+    unredirectEnabled = enable;
+};
+
+export const getSystemMenuInfo = function() {
+    return {
+        name: 'quickSettings',
+        constructor: Main.panel.statusArea.quickSettings.constructor
+    };
+}
+
+export const getCurrentWorkspace = function() {
    return DisplayWrapper.getWorkspaceManager().get_active_workspace();
 };

-var getWorkspaceByIndex = function(index) {
+export const getWorkspaceByIndex = function(index) {
    return DisplayWrapper.getWorkspaceManager().get_workspace_by_index(index);
 };

-var getWorkspaceCount = function() {
+export const getWorkspaceCount = function() {
    return DisplayWrapper.getWorkspaceManager().n_workspaces;
 };

-var getStageTheme = function() {
+export const getStageTheme = function() {
    return St.ThemeContext.get_for_stage(global.stage);
 };

-var getScaleFactor = function() {
+export const getScaleFactor = function() {
    return getStageTheme().scale_factor || 1;
 };

-var getAppDisplayViews = function() {
-    //gnome-shell 3.38 only has one view and it is now the appDisplay
-    return Main.overview.viewSelector.appDisplay._views || [{ view: Main.overview.viewSelector.appDisplay }];
-};
+export const findIndex = function(array, predicate) {
+    if (array) {
+        if (Array.prototype.findIndex) {
+            return array.findIndex(predicate);
+        }

-var findIndex = function(array, predicate) {
-    if (Array.prototype.findIndex) {
-        return array.findIndex(predicate);
-    }
-
-    for (let i = 0, l = array.length; i < l; ++i) {
-        if (predicate(array[i])) {
-            return i;
+        for (let i = 0, l = array.length; i < l; ++i) {
+            if (predicate(array[i])) {
+                return i;
+            }
        }
    }

    return -1;
 };

-var find = function(array, predicate) {
+export const find = function(array, predicate) {
    let index = findIndex(array, predicate);

    if (index > -1) {
@@ -329,8 +268,8 @@ var find = function(array, predicate) {
    }
 };

-var mergeObjects = function(main, bck) {
-    for (var prop in bck) {
+export const mergeObjects = function(main, bck) {
+    for (const prop in bck) {
        if (!main.hasOwnProperty(prop) && bck.hasOwnProperty(prop)) {
            main[prop] = bck[prop];
        }
@@ -339,30 +278,14 @@ var mergeObjects = function(main, bck) {
    return main;
 };

-var hookVfunc = function(proto, symbol, func) {
-    if (Gi.hook_up_vfunc_symbol) {
-        //gjs > 1.53.3
-        proto[Gi.hook_up_vfunc_symbol](symbol, func);
-    } else {
-        //On older gjs, this is how to hook vfunc. It is buggy and can't be used reliably to replace
-        //already hooked functions. Since it's our only use for it, disabled for now (and probably forever) 
-        //Gi.hook_up_vfunc(proto, symbol, func);
-    }
-};
-
-var wrapActor = function(actor) {
-    if (actor) {
-        Object.defineProperty(actor, 'actor', {
-            value: actor instanceof Clutter.Actor ? actor : actor.actor
-        });
-    }
-};
-
-var getTransformedAllocation = function(actor) {
-    if (Config.PACKAGE_VERSION < '3.37') {
-        return Shell.util_get_transformed_allocation(actor);
-    }
+export const getTrackedActorData = (actor) => {
+    let trackedIndex = Main.layoutManager._findActor(actor);
+    
+    if (trackedIndex >= 0)
+        return Main.layoutManager._trackedActors[trackedIndex]
+}

+export const getTransformedAllocation = function(actor) {
    let extents = actor.get_transformed_extents();
    let topLeft = extents.get_top_left();
    let bottomRight = extents.get_bottom_right();
@@ -370,33 +293,13 @@ var getTransformedAllocation = function(actor) {
    return { x1: topLeft.x, x2: bottomRight.x, y1: topLeft.y, y2: bottomRight.y };
 };

-var allocate = function(actor, box, flags, useParent) {
-    let allocateObj = useParent ? actor.__proto__ : actor;
-
-    allocateObj.allocate.apply(actor, getAllocationParams(box, flags));
-};
-
-var setAllocation = function(actor, box, flags) {
-    actor.set_allocation.apply(actor, getAllocationParams(box, flags));
-};
-
-var getAllocationParams = function(box, flags) {
-    let params = [box];
-
-    if (Config.PACKAGE_VERSION < '3.37') {
-        params.push(flags);
-    }
-
-    return params;
-};
-
-var setClip = function(actor, x, y, width, height) {
+export const setClip = function(actor, x, y, width, height) {
    actor.set_clip(0, 0, width, height);
    actor.set_position(x, y);
    actor.set_size(width, height);
 };

-var addKeybinding = function(key, settings, handler, modes) {
+export const addKeybinding = function(key, settings, handler, modes) {
    if (!Main.wm._allowedKeybindings[key]) {
        Main.wm.addKeybinding(
            key, 
@@ -408,19 +311,19 @@ var addKeybinding = function(key, settings, handler, modes) {
    }
 };

-var removeKeybinding = function(key) {
+export const removeKeybinding = function(key) {
    if (Main.wm._allowedKeybindings[key]) {
        Main.wm.removeKeybinding(key);
    }
 };

-var getrgbColor = function(color) {
-    color = typeof color === 'string' ? Clutter.color_from_string(color)[1] : color;
+export const getrgbColor = function(color) {
+    color = typeof color === 'string' ? ColorUtils.color_from_string(color)[1] : color;

    return { red: color.red, green: color.green, blue: color.blue };
 };

-var getrgbaColor = function(color, alpha, offset) {
+export const getrgbaColor = function(color, alpha, offset) {
    if (alpha <= 0) {
        return 'transparent; ';
    }
@@ -440,14 +343,14 @@ var getrgbaColor = function(color, alpha, offset) {
    return 'rgba(' + rgb.red + ',' + rgb.green + ',' + rgb.blue + ',' + (Math.floor(alpha * 100) * 0.01) + '); ' ;
 };

-var checkIfColorIsBright = function(color) {
+export const checkIfColorIsBright = function(color) {
    let rgb = getrgbColor(color);
    let brightness = 0.2126 * rgb.red + 0.7152 * rgb.green + 0.0722 * rgb.blue;

    return brightness > 128;
 };

-var getMouseScrollDirection = function(event) {
+export const getMouseScrollDirection = function(event) {
    let direction;

    switch (event.get_scroll_direction()) {
@@ -464,7 +367,7 @@ var getMouseScrollDirection = function(event) {
    return direction;
 };

-var checkIfWindowHasTransient = function(window) {
+export const checkIfWindowHasTransient = function(window) {
    let hasTransient;

    window.foreach_transient(t => !(hasTransient = true));
@@ -472,11 +375,11 @@ var checkIfWindowHasTransient = function(window) {
    return hasTransient;
 };

-var activateSiblingWindow = function(windows, direction, startWindow) {
+export const activateSiblingWindow = function(windows, direction, startWindow) {
    let windowIndex = windows.indexOf(global.display.focus_window);
    let nextWindowIndex = windowIndex < 0 ?
                          startWindow ? windows.indexOf(startWindow) : 0 : 
-                          windowIndex + (direction == 'up' ? 1 : -1);
+                          windowIndex + (direction == 'up' ? -1 : 1);

    if (nextWindowIndex == windows.length) {
        nextWindowIndex = 0;
@@ -489,49 +392,39 @@ var activateSiblingWindow = function(windows, direction, startWindow) {
    }
 };

-var animateWindowOpacity = function(window, tweenOpts) {
+export const animateWindowOpacity = function(window, tweenOpts) {
    //there currently is a mutter bug with the windowactor opacity, starting with 3.34
    //https://gitlab.gnome.org/GNOME/mutter/issues/836

-    if (Config.PACKAGE_VERSION > '3.35') {
-        //on 3.36, a workaround is to use the windowactor's child for the fade animation
-        //this leaves a "shadow" on the desktop, so the windowactor needs to be hidden
-        //when the animation is complete
-        let visible = tweenOpts.opacity > 0;
-        let windowActor = window;
-        
-        window = windowActor.get_first_child() || windowActor;
+    //since 3.36, a workaround is to use the windowactor's child for the fade animation
+    //this leaves a "shadow" on the desktop, so the windowactor needs to be hidden
+    //when the animation is complete
+    let visible = tweenOpts.opacity > 0;
+    let windowActor = window;
+    let initialOpacity = window.opacity;

-        if (!windowActor.visible && visible) {
-            window.opacity = 0;
-            windowActor.visible = visible;
-        }
-        
-        if (!visible) {
-            let initialOpacity = window.opacity;
+    window = windowActor.get_first_child() || windowActor;

-            tweenOpts.onComplete = () => { 
-                windowActor.visible = visible; 
-                window.opacity = initialOpacity; 
-            };
-        }
-    } else if (Config.PACKAGE_VERSION > '3.33') {
-        //the workaround only works on 3.35+, so on 3.34, let's just hide the 
-        //window without animation
-        return window.visible = (tweenOpts.opacity == 255);
+    if (!windowActor.visible && visible) {
+        window.opacity = 0;
+        windowActor.visible = visible;
+        tweenOpts.opacity = Math.min(initialOpacity, tweenOpts.opacity);
+    }
+    
+    if (!visible) {
+        tweenOpts.onComplete = () => { 
+            windowActor.visible = visible; 
+            window.opacity = initialOpacity; 
+        };
    }

    animate(window, tweenOpts);
 };

-var animate = function(actor, options) {
-    if (Tweener) {
-        return Tweener.addTween(actor, options);
-    }
-
-    //to support both Tweener and Clutter animations, we use Tweener "time" 
-    //and "delay" properties defined in seconds, as opposed to Clutter animations 
-    //"duration" and "delay" which are defined in milliseconds
+export const animate = function(actor, options) {
+    //the original animations used Tweener instead of Clutter animations, so we
+    //use "time" and "delay" properties defined in seconds, as opposed to Clutter 
+    //animations "duration" and "delay" which are defined in milliseconds
    if (options.delay) {
        options.delay = options.delay * 1000;
    }
@@ -561,23 +454,15 @@ var animate = function(actor, options) {
    actor.ease.apply(actor, params);
 }

-var isAnimating = function(actor, prop) {
-    if (Tweener) {
-        return Tweener.isTweening(actor);
-    }
-
+export const isAnimating = function(actor, prop) {
    return !!actor.get_transition(prop);
 }

-var stopAnimations = function(actor) {
-    if (Tweener) {
-        return Tweener.removeTweens(actor);
-    }
-    
+export const stopAnimations = function(actor) {
    actor.remove_all_transitions();
 }

-var getIndicators = function(delegate) {
+export const getIndicators = function(delegate) {
    if (delegate instanceof St.BoxLayout) {
        return delegate;
    }
@@ -585,23 +470,11 @@ var getIndicators = function(delegate) {
    return delegate.indicators;
 }

-var getPoint = function(coords) {
-    if (Config.PACKAGE_VERSION > '3.35.1') {
-        return new imports.gi.Graphene.Point(coords);
-    }
-
-    return new Clutter.Point(coords);
+export const getPoint = function(coords) {
+    return new Graphene.Point(coords);
 }

-var getPanelGhost = function() {
-    if (!Main.overview._panelGhost) {
-        return Main.overview._overview.get_first_child();
-    }
-
-    return Main.overview._panelGhost;
-}
-
-var notify = function(text, iconName, action, isTransient) {
+export const notify = function(text, iconName, action, isTransient) {
    let source = new MessageTray.SystemNotificationSource();
    let notification = new MessageTray.Notification(source, 'Dash to Panel', text);
    let notifyFunc = source.showNotification || source.notify;
@@ -632,9 +505,9 @@ var notify = function(text, iconName, action, isTransient) {
 * it would be clamp to the current one in any case.
 * Return the amount of shift applied
 */
-var ensureActorVisibleInScrollView = function(scrollView, actor, fadeSize, onComplete) {
-    let vadjustment = scrollView.vscroll.adjustment;
-    let hadjustment = scrollView.hscroll.adjustment;
+export const ensureActorVisibleInScrollView = function(scrollView, actor, fadeSize, onComplete) {
+    const vadjustment = scrollView.vadjustment;
+    const hadjustment = scrollView.hadjustment;
    let [vvalue, vlower, vupper, vstepIncrement, vpageIncrement, vpageSize] = vadjustment.get_values();
    let [hvalue, hlower, hupper, hstepIncrement, hpageIncrement, hpageSize] = hadjustment.get_values();

@@ -689,8 +562,13 @@ var ensureActorVisibleInScrollView = function(scrollView, actor, fadeSize, onCom
 /**
 *  ColorUtils is adapted from https://github.com/micheleg/dash-to-dock
 */
-var ColorUtils = {
-    colorLuminance: function(r, g, b, dlum) {
+let colorNs = Clutter.Color ? Clutter : Cogl
+
+export const ColorUtils = {
+    color_from_string: colorNs.color_from_string,
+    Color: colorNs.Color,
+
+    colorLuminance(r, g, b, dlum) {
        // Darken or brighten color by a fraction dlum
        // Each rgb value is modified by the same fraction.
        // Return "#rrggbb" strin
@@ -704,7 +582,7 @@ var ColorUtils = {
        return rgbString;
    },

-    _decimalToHex: function(d, padding) {
+    _decimalToHex(d, padding) {
        // Convert decimal to an hexadecimal string adding the desired padding

        let hex = d.toString(16);
@@ -713,7 +591,7 @@ var ColorUtils = {
        return hex;
    },

-    HSVtoRGB: function(h, s, v) {
+    HSVtoRGB(h, s, v) {
        // Convert hsv ([0-1, 0-1, 0-1]) to rgb ([0-255, 0-255, 0-255]).
        // Following algorithm in https://en.wikipedia.org/wiki/HSL_and_HSV
        // here with h = [0,1] instead of [0, 360]
@@ -752,7 +630,7 @@ var ColorUtils = {
        };
    },

-    RGBtoHSV: function(r, g, b) {
+    RGBtoHSV(r, g, b) {
        // Convert rgb ([0-255, 0-255, 0-255]) to hsv ([0-1, 0-1, 0-1]).
        // Following algorithm in https://en.wikipedia.org/wiki/HSL_and_HSV
        // here with h = [0,1] instead of [0, 360]
@@ -800,24 +678,20 @@ const MAX_CACHED_ITEMS = 1000;
 const BATCH_SIZE_TO_DELETE = 50;
 const DOMINANT_COLOR_ICON_SIZE = 64;

-var DominantColorExtractor = defineClass({
-    Name: 'ZorinTaskbar.DominantColorExtractor',
+export const DominantColorExtractor = class {

-    _init: function(app){
+    constructor(app){
        this._app = app;
-    },
+    }

    /**
     * Try to get the pixel buffer for the current icon, if not fail gracefully
     */
-    _getIconPixBuf: function() {
+    _getIconPixBuf() {
        let iconTexture = this._app.create_icon_texture(16);

        if (themeLoader === null) {
-            let ifaceSettings = new Gio.Settings({ schema: "org.gnome.desktop.interface" });
-
-            themeLoader = new Gtk.IconTheme(),
-            themeLoader.set_custom_theme(ifaceSettings.get_string('icon-theme')); // Make sure the correct theme is loaded
+            themeLoader = new St.IconTheme();
        }

        // Unable to load the icon texture, use fallback
@@ -838,12 +712,17 @@ var DominantColorExtractor = defineClass({
        }

        // Get the pixel buffer from the icon theme
-        let icon_info = themeLoader.lookup_icon(iconTexture.get_names()[0], DOMINANT_COLOR_ICON_SIZE, 0);
-        if (icon_info !== null)
-            return icon_info.load_icon();
-        else
-            return null;
-    },
+        if (iconTexture instanceof Gio.ThemedIcon) {
+            let icon_info = themeLoader.lookup_icon(iconTexture.get_names()[0],
+                DOMINANT_COLOR_ICON_SIZE, 0);
+            
+            if (icon_info !== null) {
+                return icon_info.load_icon();
+            }
+        }
+
+        return null;
+    }

    /**
     * The backlight color choosing algorithm was mostly ported to javascript from the
@@ -851,7 +730,7 @@ var DominantColorExtractor = defineClass({
     * https://bazaar.launchpad.net/~unity-team/unity/trunk/view/head:/launcher/LauncherIcon.cpp
     * so it more or less works the same way.
     */
-    _getColorPalette: function() {
+    _getColorPalette() {
        if (iconCacheMap.get(this._app.get_id())) {
            // We already know the answer
            return iconCacheMap.get(this._app.get_id());
@@ -944,7 +823,7 @@ var DominantColorExtractor = defineClass({
        iconCacheMap.set(this._app.get_id(), backgroundColor);

        return backgroundColor;
-    },
+    }

    /**
     * Downsample large icons before scanning for the backlight color to
@@ -957,7 +836,7 @@ var DominantColorExtractor = defineClass({
     *
     * @return [];
     */
-    _resamplePixels: function (pixels, resampleX, resampleY) {
+    _resamplePixels(pixels, resampleX, resampleY) {
        let resampledPixels = [];
        // computing the limit outside the for (where it would be repeated at each iteration)
        // for performance reasons
@@ -974,9 +853,9 @@ var DominantColorExtractor = defineClass({
        return resampledPixels;
    }

-});
+};

-var drawRoundedLine = function(cr, x, y, width, height, isRoundLeft, isRoundRight, stroke, fill) {
+export const drawRoundedLine = function(cr, x, y, width, height, isRoundLeft, isRoundRight, stroke, fill) {
    if (height > width) {
        y += Math.floor((height - width) / 2.0);
        height = width;
@@ -984,8 +863,8 @@ var drawRoundedLine = function(cr, x, y, width, height, isRoundLeft, isRoundRigh
    
    height = 2.0 * Math.floor(height / 2.0);
    
-    var leftRadius = isRoundLeft ? height / 2.0 : 0.0;
-    var rightRadius = isRoundRight ? height / 2.0 : 0.0;
+    const leftRadius = isRoundLeft ? height / 2.0 : 0.0;
+    const rightRadius = isRoundRight ? height / 2.0 : 0.0;
    
    cr.moveTo(x + width - rightRadius, y);
    cr.lineTo(x + leftRadius, y);
@@ -1008,28 +887,3 @@ var drawRoundedLine = function(cr, x, y, width, height, isRoundLeft, isRoundRigh
        cr.setSource(stroke);
    cr.stroke();
 }
-
-/**
- * Check if an app exists in the system.
- */
-var checkedCommandsMap = new Map();
-
-function checkIfCommandExists(app) {
-    let answer = checkedCommandsMap.get(app);
-    if (answer === undefined) {
-        // Command is a shell built in, use shell to call it.
-        // Quotes around app value are important. They let command operate
-        // on the whole value, instead of having shell interpret it.
-        let cmd = "sh -c 'command -v \"" + app + "\"'";
-        try {
-            let out = GLib.spawn_command_line_sync(cmd);
-            // out contains 1: stdout, 2: stderr, 3: exit code
-            answer = out[3] == 0;
-        } catch (ex) {
-            answer = false;
-        }
-
-        checkedCommandsMap.set(app, answer);
-    }
-    return answer;
-}
--- a/windowPreview.js
+++ b/windowPreview.js
@@ -18,23 +18,19 @@
 * This file is based on code from the Dash to Panel extension
 */

-const Clutter = imports.gi.Clutter;
-const Config = imports.misc.config;
-const GLib = imports.gi.GLib;
-const Gtk = imports.gi.Gtk;
-const Main = imports.ui.main;
-const Mainloop = imports.mainloop;
-const Meta = imports.gi.Meta;
-const PopupMenu = imports.ui.popupMenu;
-const Signals = imports.signals;
-const St = imports.gi.St;
-const WindowManager = imports.ui.windowManager;
-const Workspace = imports.ui.workspace;
+import GObject from 'gi://GObject';
+import Clutter from 'gi://Clutter';
+import GLib from 'gi://GLib';
+import Graphene from 'gi://Graphene';
+import * as Main from 'resource:///org/gnome/shell/ui/main.js';
+import Meta from 'gi://Meta';
+import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';
+import St from 'gi://St';

-const Me = imports.misc.extensionUtils.getCurrentExtension();
-const Panel = Me.imports.panel;
-const Taskbar = Me.imports.taskbar;
-const Utils = Me.imports.utils;
+import * as Taskbar from './taskbar.js';
+import * as Utils from './utils.js';
+import {SETTINGS} from './extension.js';
+import {gettext as _} from 'resource:///org/gnome/shell/extensions/extension.js';

 //timeout intervals
 const ENSURE_VISIBLE_MS = 200;
@@ -55,14 +51,14 @@ const PEEK_INDEX_PROP = '_dtpPeekInitialIndex';
 const MARGIN_SIZE = 8;

 const SHOW_WINDOW_PREVIEWS_TIMEOUT = 400;
-const ENTER_PEEK_MODE_TIMEOUT = 500;
-const LEAVE_TIMEOUT = 100;
+const LEAVE_TIMEOUT = 250;
 const WINDOW_PREVIEW_ANIMATION_TIME = 200;
 const WINDOW_PREVIEW_ASPECT_RATIO_X = 16;
 const WINDOW_PREVIEW_FIXED_X = false;
 const WINDOW_PREVIEW_ASPECT_RATIO_Y = 9;
 const WINDOW_PREVIEW_FIXED_Y = true;
 const WINDOW_PREVIEW_PADDING = 8;
+const ENTER_PEEK_MODE_TIMEOUT = 500;
 const PEEK_MODE_OPACITY = 40;

 let headerHeight = 0;
@@ -73,19 +69,19 @@ let scaleFactor = 1;
 let animationTime = 0;
 let aspectRatio = {};

-var PreviewMenu = Utils.defineClass({
-    Name: 'ZorinTaskbar-PreviewMenu',
-    Extends: St.Widget,
-    Signals: { 'open-state-changed': {} },
+export const PreviewMenu = GObject.registerClass({
+    Signals: { 'open-state-changed': {} }
+}, class PreviewMenu extends St.Widget {

-    _init: function(panel) {
-        this.callParent('_init', { layout_manager: new Clutter.BinLayout() });
+    _init(panel) {
+        super._init({ layout_manager: new Clutter.BinLayout() });

        let geom = panel.geom;
        this.panel = panel;
        this.currentAppIcon = null;
        this._focusedPreview = null;
        this._peekedWindow = null;
+        this.allowCloseWindow = true;
        this.peekInitialWorkspaceIndex = -1;
        this.opened = false;
        this.isVertical = geom.position == St.Side.LEFT || geom.position == St.Side.RIGHT;
@@ -107,18 +103,18 @@ var PreviewMenu = Utils.defineClass({
        this._box = new St.BoxLayout({ vertical: this.isVertical });
        this._scrollView = new St.ScrollView({
            name: 'zorintaskbarPreviewScrollview',
-            hscrollbar_policy: Gtk.PolicyType.NEVER,
-            vscrollbar_policy: Gtk.PolicyType.NEVER,
+            hscrollbar_policy: St.PolicyType.NEVER,
+            vscrollbar_policy: St.PolicyType.NEVER,
            enable_mouse_scrolling: true,
            y_expand: !this.isVertical
        });

-        this._scrollView.add_actor(this._box);
+        this._scrollView.add_child(this._box);
        this.menu.add_child(this._scrollView);
        this.add_child(this.menu);
-    },
+    }

-    enable: function() {
+    enable() {
        this._timeoutsHandler = new Utils.TimeoutsHandler();
        this._signalsHandler = new Utils.GlobalSignalsHandler();

@@ -156,9 +152,9 @@ var PreviewMenu = Utils.defineClass({
                }
            ],
            [
-                Me.settings,
+                SETTINGS,
                [
-                    'changed::panel-size',
+                    'changed::panel-sizes',
                    'changed::window-preview-size'
                ],
                () => {
@@ -167,9 +163,9 @@ var PreviewMenu = Utils.defineClass({
                }
            ]
        );
-    },
+    }

-    disable: function() {
+    disable() {
        this._timeoutsHandler.destroy();
        this._signalsHandler.destroy();

@@ -177,9 +173,9 @@ var PreviewMenu = Utils.defineClass({

        Main.layoutManager.untrackChrome(this.menu);
        Main.layoutManager.removeChrome(this);
-    },
+    }

-    requestOpen: function(appIcon) {
+    requestOpen(appIcon) {
        let timeout = SHOW_WINDOW_PREVIEWS_TIMEOUT;

        if (this.opened) {
@@ -188,23 +184,24 @@ var PreviewMenu = Utils.defineClass({

        this._endOpenCloseTimeouts();
        this._timeoutsHandler.add([T1, timeout, () => this.open(appIcon)]);
-    },
+    }

-    requestClose: function() {
+    requestClose() {
        this._endOpenCloseTimeouts();
        this._addCloseTimeout();
-    },
+    }

-    open: function(appIcon) {
+    open(appIcon, preventCloseWindow) {
        if (this.currentAppIcon != appIcon) {
            this.currentAppIcon = appIcon;
+            this.allowCloseWindow = !preventCloseWindow;

            if (!this.opened) {
                this._refreshGlobals();
                
                this.set_height(this.clipHeight);
                this.menu.show();
-
+                
                setStyle(this.menu, 'padding: 0; margin: 0; border: none; background-image: none;');
            }

@@ -215,9 +212,9 @@ var PreviewMenu = Utils.defineClass({
            this._setReactive(true);
            this._setOpenedState(true);
        }
-    },
+    }

-    close: function(immediate) {
+    close(immediate) {
        this._endOpenCloseTimeouts();
        this._removeFocus();
        this._endPeek();
@@ -231,9 +228,9 @@ var PreviewMenu = Utils.defineClass({

        this._setReactive(false);
        this.currentAppIcon = null;
-    },
+    }

-    update: function(appIcon, windows) {
+    update(appIcon, windows) {
        if (this.currentAppIcon == appIcon) {
            if (windows && !windows.length) {
                this.close();
@@ -242,13 +239,13 @@ var PreviewMenu = Utils.defineClass({
                this._updatePosition();
            }
        }
-    },
+    }

-    updatePosition: function() {
+    updatePosition() {
        this._updatePosition();
-    },
+    }

-    focusNext: function() {
+    focusNext() {
        let previews = this._box.get_children();
        let currentIndex = this._focusedPreview ? previews.indexOf(this._focusedPreview) : -1;
        let nextIndex = currentIndex + 1;
@@ -262,31 +259,31 @@ var PreviewMenu = Utils.defineClass({
        }

        return nextIndex;
-    },
+    }

-    activateFocused: function() {
+    activateFocused() {
        if (this.opened && this._focusedPreview) {
            this._focusedPreview.activate();
        }
-    },
+    }

-    requestPeek: function(window) {
+    requestPeek(window) {
        this._timeoutsHandler.remove(T3);

-        if (Me.settings.get_boolean('peek-mode')) {
+        if (SETTINGS.get_boolean('peek-mode')) {
            if (this.peekInitialWorkspaceIndex < 0) {
                this._timeoutsHandler.add([T3, ENTER_PEEK_MODE_TIMEOUT, () => this._peek(window)]);
            } else {
                this._peek(window);
            }
        }
-    },
+    }

-    endPeekHere: function() {
+    endPeekHere() {
        this._endPeek(true);
-    },
+    }

-    ensureVisible: function(preview) {
+    ensureVisible(preview) {
        let [ , upper, pageSize] = this._getScrollAdjustmentValues();
        
        if (upper > pageSize) {
@@ -296,39 +293,39 @@ var PreviewMenu = Utils.defineClass({
                () => Utils.ensureActorVisibleInScrollView(this._scrollView, preview, MIN_DIMENSION, () => this._updateScrollFade())
            ]);
        }
-    },
+    }

-    getCurrentAppIcon: function() {
+    getCurrentAppIcon() {
        return this.currentAppIcon;
-    },
+    }

-    _setReactive: function(reactive) { 
+    _setReactive(reactive) {
        this._box.get_children().forEach(c => c.reactive = reactive);
        this.menu.reactive = reactive;
-    },
+    }

-    _setOpenedState: function(opened) {
+    _setOpenedState(opened) {
        this.opened = opened;
        this.emit('open-state-changed');
-    },
+    }

-    _resetHiddenState: function() {
+    _resetHiddenState() {
        this.menu.hide();
        this.set_height(0);
        this._setOpenedState(false);
        this.menu.opacity = 0;
        this.menu[this._translationProp] = this._translationOffset;
        this._box.get_children().forEach(c => c.destroy());
-    },
+    }

-    _removeFocus: function() {
+    _removeFocus() {
        if (this._focusedPreview) {
            this._focusedPreview.setFocus(false);
            this._focusedPreview = null;
        }
-    },
+    }

-    _mergeWindows: function(appIcon, windows) {
+    _mergeWindows(appIcon, windows) {
        windows = windows || (appIcon.window ? [appIcon.window] : appIcon.getAppIconInterestingWindows());
        windows.sort(Taskbar.sortWindowsCompareFunction);
    
@@ -344,9 +341,9 @@ var PreviewMenu = Utils.defineClass({
                currentPreviews[i][!this.opened ? 'destroy' : 'animateOut']();
            }
        }
-    },
+    }

-    _addAndRemoveWindows: function(windows) {
+    _addAndRemoveWindows(windows) {
        let currentPreviews = this._box.get_children();

        windows.sort(Taskbar.sortWindowsCompareFunction);
@@ -367,30 +364,34 @@ var PreviewMenu = Utils.defineClass({
        }

        currentPreviews.forEach(c => c.animateOut());
-    },
+    }

-    _addNewPreview: function(window) {
+    _addNewPreview(window) {
        let preview = new Preview(this);

        this._box.add_child(preview);
        preview.adjustOnStage();
        preview.assignWindow(window, this.opened);
-    },
+    }

-    _addCloseTimeout: function() {
+    _addCloseTimeout() {
        this._timeoutsHandler.add([T2, LEAVE_TIMEOUT, () => this.close()]);
-    },
+    }

-    _onHoverChanged: function() {
+    _onHoverChanged() {
        this._endOpenCloseTimeouts();

-        if (this.currentAppIcon && !this.menu.hover) {
-            this._addCloseTimeout();
-            this._endPeek();
+        if (this.currentAppIcon) {
+            this.menu.sync_hover(); // See dash-to-panel issue #2169
+			
+            if (!this.menu.hover) {
+                this._addCloseTimeout();
+                this._endPeek();
+            }
        }
-    },
+    }

-    _onScrollEvent: function(actor, event) {
+    _onScrollEvent(actor, event) {
        if (!event.is_pointer_emulated()) {
            let vOrh = this.isVertical ? 'v' : 'h';
            let adjustment = this._scrollView['get_' + vOrh + 'scroll_bar']().get_adjustment(); 
@@ -413,15 +414,15 @@ var PreviewMenu = Utils.defineClass({
        }

        return Clutter.EVENT_STOP;
-    },
+    }

-    _endOpenCloseTimeouts: function() {
+    _endOpenCloseTimeouts() {
        this._timeoutsHandler.remove(T1);
        this._timeoutsHandler.remove(T2);
        this._timeoutsHandler.remove(T4);
-    },
+    }

-    _refreshGlobals: function() {
+    _refreshGlobals() {
        isLeftButtons = Meta.prefs_get_button_layout().left_buttons.indexOf(Meta.ButtonFunction.CLOSE) >= 0;
        scaleFactor = Utils.getScaleFactor();
        headerHeight = HEADER_HEIGHT * scaleFactor;
@@ -436,14 +437,13 @@ var PreviewMenu = Utils.defineClass({
        };
        
        alphaBg = this._getThemeBackground().alpha;
-    },
+    }

-    _updateClip: function() {
+    _updateClip() {
        let x, y, w;
        let geom = this.panel.getGeometry();
        let panelBoxTheme = this.panel.panelBox.get_theme_node();
-        let themeBackground = this._getThemeBackground(true);
-        let previewSize = (Me.settings.get_int('window-preview-size') + 
+        let previewSize = (SETTINGS.get_int('window-preview-size') + 
                           WINDOW_PREVIEW_PADDING * 2) * scaleFactor;
        
        if (this.isVertical) {
@@ -467,12 +467,12 @@ var PreviewMenu = Utils.defineClass({
        }

        Utils.setClip(this, x, y, w, this.clipHeight);
-    },
+    }

-    _updatePosition: function() {
-        let sourceNode = this.currentAppIcon.actor.get_theme_node();
-        let sourceContentBox = sourceNode.get_content_box(this.currentAppIcon.actor.get_allocation_box());
-        let sourceAllocation = Utils.getTransformedAllocation(this.currentAppIcon.actor);
+    _updatePosition() {
+        let sourceNode = this.currentAppIcon.get_theme_node();
+        let sourceContentBox = sourceNode.get_content_box(this.currentAppIcon.get_allocation_box());
+        let sourceAllocation = Utils.getTransformedAllocation(this.currentAppIcon);
        let [previewsWidth, previewsHeight] = this._getPreviewsSize();
        let appIconMargin = Taskbar.APPICON_MARGIN / scaleFactor;
        let x = 0, y = 0;
@@ -497,9 +497,9 @@ var PreviewMenu = Utils.defineClass({
        } else {
            Utils.animate(this.menu, getTweenOpts({ x: x, y: y, width: previewsWidth, height: previewsHeight }));
        }
-    },
+    }

-    _updateScrollFade: function(remove) {
+    _updateScrollFade(remove) {
        let [value, upper, pageSize] = this._getScrollAdjustmentValues();
        let needsFade = Math.round(upper) > Math.round(pageSize);
        let fadeWidgets = this.menu.get_children().filter(c => c != this._scrollView);
@@ -518,15 +518,15 @@ var PreviewMenu = Utils.defineClass({
        } else if (remove || (!needsFade && fadeWidgets.length)) {
            fadeWidgets.forEach(fw => fw.destroy());
        }
-    },
+    }

-    _getScrollAdjustmentValues: function() {
-        let [value , , upper, , , pageSize] = this._scrollView[(this.isVertical ? 'v' : 'h') + 'scroll'].adjustment.get_values();
+    _getScrollAdjustmentValues() {
+        let [value , , upper, , , pageSize] = this._scrollView[(this.isVertical ? 'v' : 'h') + 'adjustment'].get_values();

        return [value, upper, pageSize];
-    },
+    }

-    _getFadeWidget: function(end) {
+    _getFadeWidget(end) {
        let x = 0, y = 0;
        let startBg = Utils.getrgbaColor(this._getThemeBackground(), Math.min(alphaBg + .1, 1));
        let endBg = Utils.getrgbaColor(this._getThemeBackground(), 0)
@@ -542,7 +542,7 @@ var PreviewMenu = Utils.defineClass({

        let fadeWidget = new St.Widget({ 
            reactive: false, 
-            pivot_point: Utils.getPoint({ x: .5, y: .5 }), 
+            pivot_point: new Graphene.Point({ x: .5, y: .5 }), 
            rotation_angle_z: end ? 180 : 0,
            style: fadeStyle,
            x: x, y: y,
@@ -551,9 +551,9 @@ var PreviewMenu = Utils.defineClass({
        });

        return fadeWidget;
-    },
+    }

-    _getPreviewsSize: function() {
+    _getPreviewsSize() {
        let previewsWidth = 0;
        let previewsHeight = 0;

@@ -572,9 +572,9 @@ var PreviewMenu = Utils.defineClass({
        });

        return [previewsWidth, previewsHeight];
-    },
-    
-    _getThemeBackground: function(reload) {
+    }
+
+    _getThemeBackground(reload) {
        if (reload || !this._themeBackground) {
            let fakeTooltip = new St.Bin({ style_class: 'dash-label' });
            Main.uiGroup.add_child(fakeTooltip);
@@ -584,9 +584,9 @@ var PreviewMenu = Utils.defineClass({
        }

        return this._themeBackground;
-    },
+    }

-    _animateOpenOrClose: function(show, onComplete) {
+    _animateOpenOrClose(show, onComplete) {
        let isTranslationAnimation = this.menu[this._translationProp] != 0;
        let tweenOpts = {
            opacity: show ? 255 : 0,
@@ -603,14 +603,19 @@ var PreviewMenu = Utils.defineClass({
        tweenOpts[this._translationProp] = show ? this._translationDirection : this._translationOffset;

        Utils.animate(this.menu, getTweenOpts(tweenOpts));
-    },
+    }

-    _peek: function(window) {
+    _peek(window) {
        let currentWorkspace = Utils.getCurrentWorkspace();
        let windowWorkspace = window.get_workspace();
        let focusWindow = () => this._focusMetaWindow(PEEK_MODE_OPACITY, window);
        
        this._restorePeekedWindowStack();
+
+        if (this._peekedWindow && windowWorkspace != currentWorkspace) {
+            currentWorkspace.list_windows().forEach(mw => this.animateWindowOpacity(mw, null, 255))
+        }
+
        this._peekedWindow = window;
        
        if (currentWorkspace != windowWorkspace) {
@@ -623,9 +628,9 @@ var PreviewMenu = Utils.defineClass({
        if (this.peekInitialWorkspaceIndex < 0) {
            this.peekInitialWorkspaceIndex = currentWorkspace.index();
        }
-    }, 
+    }

-    _endPeek: function(stayHere) {
+    _endPeek(stayHere) {
        this._timeoutsHandler.remove(T3);

        if (this._peekedWindow) {
@@ -641,9 +646,9 @@ var PreviewMenu = Utils.defineClass({

            this.peekInitialWorkspaceIndex = -1;
        }
-    },
+    }

-    _switchToWorkspaceImmediate: function(workspaceIndex) {
+    _switchToWorkspaceImmediate(workspaceIndex) {
        let workspace = Utils.getWorkspaceByIndex(workspaceIndex);
        let shouldAnimate = Main.wm._shouldAnimate;

@@ -655,9 +660,9 @@ var PreviewMenu = Utils.defineClass({
        Main.wm._shouldAnimate = () => false;
        workspace.activate(global.display.get_current_time_roundtrip());
        Main.wm._shouldAnimate = shouldAnimate;
-    },
+    }

-    _focusMetaWindow: function(dimOpacity, window, immediate, ignoreFocus) {
+    _focusMetaWindow(dimOpacity, window, immediate, ignoreFocus) {
        window.get_workspace().list_windows().forEach(mw => {
            let wa = mw.get_compositor_private();
            let isFocused = !ignoreFocus && mw == window;
@@ -671,21 +676,27 @@ var PreviewMenu = Utils.defineClass({
                if (isFocused && mw.minimized) {
                    wa.show();
                }
-                
-                if (!mw.minimized) {
-                    let tweenOpts = getTweenOpts({ opacity: isFocused ? 255 : dimOpacity });
-    
-                    if (immediate && !mw.is_on_all_workspaces()) {
-                        tweenOpts.time = 0;
-                    }
-                    
-                    Utils.animateWindowOpacity(wa, tweenOpts);
-                }
+
+                this.animateWindowOpacity(mw, wa, isFocused ? 255 : dimOpacity, immediate)
            }
        });
-    },
+    }

-    _restorePeekedWindowStack: function() {
+    animateWindowOpacity(metaWindow, windowActor, opacity, immediate) {
+        windowActor = windowActor || metaWindow.get_compositor_private();
+        
+        if (windowActor && !metaWindow.minimized) {
+            let tweenOpts = getTweenOpts({ opacity });
+
+            if (immediate && !metaWindow.is_on_all_workspaces()) {
+                tweenOpts.time = 0;
+            }
+            
+            Utils.animateWindowOpacity(windowActor, tweenOpts);
+        }
+    }
+
+    _restorePeekedWindowStack() {
        let windowActor = this._peekedWindow ? this._peekedWindow.get_compositor_private() : null;

        if (windowActor) {
@@ -698,15 +709,14 @@ var PreviewMenu = Utils.defineClass({
                windowActor.hide();
            }
        }
-    },
+    }
 });

-var Preview = Utils.defineClass({
-    Name: 'ZorinTaskbar-Preview',
-    Extends: St.Widget,
+export const Preview = GObject.registerClass({
+}, class Preview extends St.Widget {

-    _init: function(previewMenu) {
-        this.callParent('_init', { 
+    _init(previewMenu) {
+        super._init({ 
            style_class: 'preview-container', 
            reactive: true, 
            track_hover: true,
@@ -726,9 +736,7 @@ var Preview = Utils.defineClass({
        let [previewBinWidth, previewBinHeight] = this._getBinSize();
        let closeButton = new St.Button({ style_class: 'window-close', accessible_name: 'Close window' });

-        if (Config.PACKAGE_VERSION >= '3.31.9') {
-            closeButton.add_actor(new St.Icon({ icon_name: 'window-close-symbolic' }));
-        }
+        closeButton.add_child(new St.Icon({ icon_name: 'window-close-symbolic' }));

        this._closeButtonBin = new St.Widget({ 
            style_class: 'preview-close-btn-container',
@@ -774,9 +782,9 @@ var Preview = Utils.defineClass({
        this.connect('notify::hover', () => this._onHoverChanged());
        this.connect('button-release-event', (actor, e) => this._onButtonReleaseEvent(e));
        this.connect('destroy', () => this._onDestroy());
-    },
+    }

-    adjustOnStage: function() {
+    adjustOnStage() {
        let closeButton = this._closeButtonBin.get_first_child();
        let closeButtonHeight = closeButton.height;
        let maxCloseButtonSize = MAX_CLOSE_BUTTON_SIZE * scaleFactor;
@@ -802,9 +810,9 @@ var Preview = Utils.defineClass({
            'padding: ' + (headerHeight ? Math.round((headerHeight - closeButtonHeight) * .5 / scaleFactor) : 4) + 'px;' +
            closeButtonBorderRadius
        );
-    },
+    }

-    assignWindow: function(window, animateSize) {
+    assignWindow(window, animateSize) {
        if (this.window != window) {
            let _assignWindowClone = () => {
                if (window.get_compositor_private()) {
@@ -814,12 +822,14 @@ var Preview = Utils.defineClass({
                    this._addClone(cloneBin, animateSize);
                    this._previewMenu.updatePosition();
                } else if (!this._waitWindowId) {
-                    this._waitWindowId = Mainloop.idle_add(() => {
+                    this._waitWindowId = GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
                        this._waitWindowId = 0;

                        if (this._previewMenu.opened) {
                            _assignWindowClone();
                        }
+
+                        return GLib.SOURCE_REMOVE;
                    });
                }
            };
@@ -830,11 +840,11 @@ var Preview = Utils.defineClass({
        this._cancelAnimateOut();
        this._removeWindowSignals();
        this.window = window;
-        this._needsCloseButton = window.can_close() && !Utils.checkIfWindowHasTransient(window);
+        this._needsCloseButton = this._previewMenu.allowCloseWindow && window.can_close() && !Utils.checkIfWindowHasTransient(window);
        this._updateHeader();
-    },
+    }

-    animateOut: function() {
+    animateOut() {
        if (!this.animatingOut) {
            let tweenOpts = getTweenOpts({ opacity: 0, width: 0, height: 0, onComplete: () => this.destroy() });

@@ -843,18 +853,18 @@ var Preview = Utils.defineClass({
            Utils.stopAnimations(this);
            Utils.animate(this, tweenOpts);
        }
-    },
+    }

-    getSize: function() {
+    getSize() {
        let [binWidth, binHeight] = this._getBinSize();

        binWidth = Math.max(binWidth, this.cloneWidth + this._padding * 2);
        binHeight = Math.max(binHeight, this.cloneHeight + this._padding * 2) + headerHeight;

        return [binWidth, binHeight];
-    },
+    }

-    setFocus: function(focused) {
+    setFocus(focused) {
        this._hideOrShowCloseButton(!focused);
        setStyle(this, this._getBackgroundColor(FOCUSED_COLOR_OFFSET, focused ? '-' : 0));

@@ -862,47 +872,47 @@ var Preview = Utils.defineClass({
            this._previewMenu.ensureVisible(this);
            this._previewMenu.requestPeek(this.window);
        }
-    },
+    }

-    activate: function() {
+    activate() {
        this._previewMenu.endPeekHere();
        this._previewMenu.close();
        Main.activateWindow(this.window);
-    },
+    }

-    _onDestroy: function() {
+    _onDestroy() {
        if (this._waitWindowId) {
            GLib.source_remove(this._waitWindowId);
            this._waitWindowId = 0;
        }

        this._removeWindowSignals();
-    },
+    }

-    _onHoverChanged: function() {
+    _onHoverChanged() {
        this.setFocus(this.hover);
-    },
+    }

-    _onCloseBtnClick: function() {
+    _onCloseBtnClick() {
        this._hideOrShowCloseButton(true);
        this.reactive = false;

-        if (!Me.settings.get_boolean('group-apps')) {
+        if (!SETTINGS.get_boolean('group-apps')) {
            this._previewMenu.close();
        } else {
            this._previewMenu.endPeekHere();
        }

        this.window.delete(global.get_current_time());
-    },
+    }

-    _onButtonReleaseEvent: function(e) {
+    _onButtonReleaseEvent(e) {
        switch (e.get_button()) {
            case 1: // Left click
                this.activate();
                break;
            case 2: // Middle click
-                if (Me.settings.get_boolean('preview-middle-click-close')) {
+                if (SETTINGS.get_boolean('preview-middle-click-close')) {
                    this._onCloseBtnClick();
                }
                break;
@@ -912,18 +922,18 @@ var Preview = Utils.defineClass({
        }

        return Clutter.EVENT_STOP;
-    },
+    }

-    _cancelAnimateOut: function() {
+    _cancelAnimateOut() {
        if (this.animatingOut) {
            this.animatingOut = false;

            Utils.stopAnimations(this);
            Utils.animate(this, getTweenOpts({ opacity: 255, width: this.cloneWidth, height: this.cloneHeight }));
        }
-    },
+    }

-    _showContextMenu: function(e) {
+    _showContextMenu(e) {
        let coords = e.get_coords();
        let currentWorkspace = this._previewMenu.peekInitialWorkspaceIndex < 0 ? 
                               Utils.getCurrentWorkspace() : 
@@ -936,52 +946,53 @@ var Preview = Utils.defineClass({
            height: 0
        });

-        let ctxMenuData = Main.wm._windowMenuManager._manager._menus[0];
+        let menu = Main.wm._windowMenuManager._manager._menus[0];

-        ctxMenuData.menu.connect('open-state-changed', () => this._previewMenu.menu.sync_hover());
+        menu.connect('open-state-changed', () => this._previewMenu.menu.sync_hover());
+        this._previewMenu.menu.sync_hover();

        if (this.window.get_workspace() != currentWorkspace) {
            let menuItem = new PopupMenu.PopupMenuItem(_('Move to current Workspace') + ' [' + (currentWorkspace.index() + 1) + ']');
-            let menuItems = ctxMenuData.menu.box.get_children();
+            let menuItems = menu.box.get_children();
            let insertIndex = Utils.findIndex(menuItems, c => c._delegate instanceof PopupMenu.PopupSeparatorMenuItem);

            insertIndex = insertIndex >= 0 ? insertIndex : menuItems.length - 1;
-            ctxMenuData.menu.addMenuItem(menuItem, insertIndex);
+            menu.addMenuItem(menuItem, insertIndex);
            menuItem.connect('activate', () => this.window.change_workspace(currentWorkspace));
        }
-    },
+    }

-    _removeWindowSignals: function() {
+    _removeWindowSignals() {
        if (this._titleWindowChangeId) {
            this.window.disconnect(this._titleWindowChangeId);
            this._titleWindowChangeId = 0;
        }
-    },
+    }

-    _updateHeader: function() {
-        if (headerHeight) {           
+    _updateHeader() {
+        if (headerHeight) {
            this._titleWindowChangeId = this.window.connect('notify::title', () => this._updateWindowTitle());
            setStyle(this._windowTitle, 'max-width: 0px; padding-left: 8px; padding-right: 8px; text-align: center;');
            this._updateWindowTitle();
        }
-    },
+    }

-    _updateWindowTitle: function() {
+    _updateWindowTitle() {
        this._windowTitle.text = this.window.title;
-    },
+    }

-    _hideOrShowCloseButton: function(hide) {
+    _hideOrShowCloseButton(hide) {
        if (this._needsCloseButton) {
            Utils.animate(this._closeButtonBin, getTweenOpts({ opacity: hide ? 0 : 255 }));
        }
-    },
+    }

-    _getBackgroundColor: function(offset, alpha) {
+    _getBackgroundColor(offset, alpha) {
        return 'background-color: ' + this._getRgbaColor(offset, alpha) + 
               'transition-duration:' + this._previewMenu.panel.dynamicTransparency.animationDuration;
-    },
+    }

-    _getRgbaColor: function(offset, alpha) {
+    _getRgbaColor(offset, alpha) {
        alpha = Math.abs(alpha);

        if (isNaN(alpha)) {
@@ -989,9 +1000,9 @@ var Preview = Utils.defineClass({
        }

        return Utils.getrgbaColor(this._previewMenu._getThemeBackground(), alpha, offset);
-    },
+    }

-    _addClone: function(newCloneBin, animateSize) {
+    _addClone(newCloneBin, animateSize) {
        let currentClones = this._previewBin.get_children();
        let newCloneOpts = getTweenOpts({ opacity: 255 });
        
@@ -1025,9 +1036,9 @@ var Preview = Utils.defineClass({
        }

        Utils.animate(newCloneBin, newCloneOpts);
-    },
+    }
    
-    _getWindowCloneBin: function(window) {
+    _getWindowCloneBin(window) {
        let frameRect = window.get_frame_rect();
        let bufferRect = window.get_buffer_rect();
        let clone = new Clutter.Clone({ source: window.get_compositor_private() });
@@ -1042,18 +1053,18 @@ var Preview = Utils.defineClass({
        cloneBin.add_child(clone);

        return cloneBin;
-    },
+    }

-    _getBinSize: function() {
+    _getBinSize() {
        let [fixedWidth, fixedHeight] = this._previewDimensions;

        return [
            aspectRatio.x.fixed ? fixedWidth + this._padding * 2 : -1,
            aspectRatio.y.fixed ? fixedHeight + this._padding * 2 : -1
        ];
-    },
+    }

-    _resizeClone: function(cloneBin, window) {
+    _resizeClone(cloneBin, window) {
        let frameRect = cloneBin.layout_manager.frameRect || window.get_frame_rect();
        let [fixedWidth, fixedHeight] = this._previewDimensions;
        let ratio = Math.min(fixedWidth / frameRect.width, fixedHeight / frameRect.height, 1);
@@ -1073,10 +1084,10 @@ var Preview = Utils.defineClass({
        cloneBin.layout_manager.padding = [clonePaddingLeft * scaleFactor, clonePaddingTop * scaleFactor];

        cloneBin.get_first_child().set_size(cloneWidth, cloneHeight);
-    },
+    }

-    _getPreviewDimensions: function() {
-        let size = Me.settings.get_int('window-preview-size') * scaleFactor;
+    _getPreviewDimensions() {
+        let size = SETTINGS.get_int('window-preview-size') * scaleFactor;
        let w, h;

        if (this._previewMenu.isVertical) {
@@ -1091,19 +1102,18 @@ var Preview = Utils.defineClass({
    }
 });

-var WindowCloneLayout = Utils.defineClass({
-    Name: 'ZorinTaskbar-WindowCloneLayout',
-    Extends: Clutter.BinLayout,
+export const WindowCloneLayout = GObject.registerClass({
+}, class WindowCloneLayout extends Clutter.BinLayout {

-    _init: function(frameRect, bufferRect) {
-        this.callParent('_init');
+    _init(frameRect, bufferRect) {
+        super._init();

        //the buffer_rect contains the transparent padding that must be removed
        this.frameRect = frameRect;
        this.bufferRect = bufferRect;
-    },
+    }

-    vfunc_allocate: function(actor, box, flags) {
+    vfunc_allocate(actor, box) {
        let [width, height] = box.get_size();

        box.set_origin(
@@ -1116,15 +1126,15 @@ var WindowCloneLayout = Utils.defineClass({
            height + (this.bufferRect.height - this.frameRect.height) * this.ratio
        );

-        Utils.allocate(actor.get_first_child(), box, flags);
+        actor.get_first_child().allocate(box);
    }
 });

-function setStyle(actor, style) {
+export function setStyle(actor, style) {
    actor.set_style(style);
 }

-function getTweenOpts(opts) {
+export function getTweenOpts(opts) {
    let defaults = {
        time: animationTime,
        transition: 'easeInOutQuad'
Author	SHA1	Message	Date
Artyom Zorin	bb69c75c70	Bump to version 65.2	2025-02-27 15:46:57 +00:00
Artyom Zorin	f46cab04cb	Bump to version 56.11	2024-10-20 18:00:25 +01:00
Artyom Zorin	de47b50149	Updated French translations based on contribution from Zac0511	2024-10-20 17:55:55 +01:00
Artyom Zorin	d396f3af52	Bump to verison 56.10	2024-09-09 17:46:17 +01:00
Artyom Zorin	2a447787a5	Bump to version 56.9	2024-09-03 14:08:20 +01:00