From dd9c57a1d28e3930663b4874caebabc8799467fe Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mauro-balades@users.noreply.github.com>
Date: Sat, 8 Feb 2025 14:14:11 +0100
Subject: [PATCH 01/31] Delete .github/workflows/staler.yml

Signed-off-by: mr. m  <91018726+mauro-balades@users.noreply.github.com>
---
 .github/workflows/staler.yml | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .github/workflows/staler.yml

diff --git a/.github/workflows/staler.yml b/.github/workflows/staler.yml
deleted file mode 100644
index 5a4b7fc8d..000000000
--- a/.github/workflows/staler.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: 'Close stale issues and PRs'
-on:
-  schedule:
-    - cron: '30 1 * * *'
-  workflow_dispatch:
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v9
-        with:
-          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
-          days-before-stale: 65
-          days-before-close: 10

From 4605b4f3ca0f8d94362ce7603077d65a72c1aba4 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 8 Feb 2025 19:41:56 +0100
Subject: [PATCH 02/31] Fix tab position calculation by removing unnecessary
 increment

---
 src/browser/base/zen-components/ZenGlanceManager.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
index 9757b6eb2..67760034c 100644
--- a/src/browser/base/zen-components/ZenGlanceManager.mjs
+++ b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -67,7 +67,7 @@
     }
 
     getTabPosition(tab) {
-      return Math.max(gBrowser.pinnedTabCount, tab._tPos) + 1;
+      return Math.max(gBrowser.pinnedTabCount, tab._tPos);
     }
 
     createBrowserElement(url, currentTab, existingTab = null) {

From b79d6a7347e6756db64cd7f142fd0fe3fd9731ba Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 8 Feb 2025 20:20:00 +0100
Subject: [PATCH 03/31] Reduce minimum width of the URL bar when open to
 improve layout flexibility

---
 src/browser/base/content/zen-styles/zen-urlbar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 0502aa2b8..208339888 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -393,7 +393,7 @@ button.popup-notification-dropmarker {
 
 :root[zen-single-toolbar='true'] {
   #urlbar[open] {
-    min-width: 40vw;
+    min-width: 30vw;
   }
 
   &[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {

From 988056e59c91755ce9ae40647293456c77dd0606 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sun, 9 Feb 2025 14:52:05 +0100
Subject: [PATCH 04/31] Add overflow-clip-margin to vertical tabs for improved
 layout handling

---
 src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index d2211409d..e08650a78 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -252,6 +252,7 @@
   padding-inline-start: 0 !important;
   overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */
   overflow-x: clip;
+  overflow-clip-margin: var(--zen-toolbox-padding);
 
   --tab-inner-inline-margin: 0;
 

From 1475d3daee27615a63e7265b13d4dcbe2818eb44 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sun, 9 Feb 2025 17:20:27 +0100
Subject: [PATCH 05/31] Refactor theme preferences by removing unused color
 options and adjusting border radius settings

---
 src/browser/app/profile/zen-browser.js        |   4 +-
 .../base/content/zen-styles/zen-theme.css     |  30 ----
 .../components/preferences/zen-settings.js    |  36 -----
 .../preferences/zenLooksAndFeel.inc.xhtml     | 141 ------------------
 .../shared/preferences/zen-preferences.css    |  19 ---
 5 files changed, 1 insertion(+), 229 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index ff35d39e5..2ee3107a7 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -103,15 +103,13 @@ pref('zen.rice.share.notice.accepted', false);
 pref('zen.theme.border-radius', 10); // In pixels
 #else
 #ifdef XP_WIN
-pref('zen.theme.border-radius', 12); // In pixels
+pref('zen.theme.border-radius', 10); // In pixels
 #else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
 #endif
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
-pref('zen.theme.color-prefs.amoled', false);
-pref('zen.theme.color-prefs.colorful', false);
 
 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 62b2efa5c..b5a75004d 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -222,33 +222,3 @@
     --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  @media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
-    :root {
-      --zen-dark-color-mix-base: hsl(5 5 5);
-      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
-    }
-  }
-
-  @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
-    :root {
-      --zen-in-content-dialog-background: rgb(28, 28, 32);
-
-      --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
-      --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
-      --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
-
-      --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
-      --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
-
-      --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
-      --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
-
-      --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
-      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
-
-      --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
-    }
-  }
-}
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index fe770629f..ca5f3d2a9 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -507,7 +507,6 @@ var gZenLooksAndFeel = {
         Services.prefs.removeObserver(pref, this);
       }
     });
-    this.setDarkThemeListener();
     this.setCompactModeStyle();
 
     this.applySidebarLayout();
@@ -560,41 +559,6 @@ var gZenLooksAndFeel = {
     }
   },
 
-  setDarkThemeListener() {
-    const chooser = document.getElementById('zen-dark-theme-styles-form');
-    const radios = [...chooser.querySelectorAll('input')];
-    for (let radio of radios) {
-      if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
-        radio.checked = true;
-      } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
-        radio.checked = true;
-      } else if (
-        radio.value === 'default' &&
-        !Services.prefs.getBoolPref('zen.theme.color-prefs.amoled') &&
-        !Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')
-      ) {
-        radio.checked = true;
-      }
-      radio.addEventListener('change', (e) => {
-        let value = e.target.value;
-        switch (value) {
-          case 'amoled':
-            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', true);
-            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
-            break;
-          case 'colorful':
-            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
-            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', true);
-            break;
-          default:
-            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
-            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
-            break;
-        }
-      });
-    }
-  },
-
   setCompactModeStyle() {
     const chooser = document.getElementById('zen-compact-mode-styles-form');
     const radios = [...chooser.querySelectorAll('input')];
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 39ccef7ee..de0568844 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -68,147 +68,6 @@
 
       <hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
 
-      <html:div id="ZenDarkThemeStyles">
-            <html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
-            <description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
-            <form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
-                  <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
-        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
-        </g>
-        <g id="Outline">
-            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
-            </g>
-            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
-            </g>
-        </g>
-        <g id="Top-Bar" serif:id="Top Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
-            </g>
-            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
-                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
-            </g>
-        </g>
-        <g id="Side-Bar" serif:id="Side Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
-            </g>
-        </g>
-    </g>
-</svg>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
-                        /><span data-l10n-id="zen-dark-theme-styles-amoled" />
-                  </div>
-                  </label>
-                        <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
-        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
-        </g>
-        <g id="Outline">
-            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
-            </g>
-            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
-            </g>
-        </g>
-        <g id="Top-Bar" serif:id="Top Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
-                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
-            </g>
-        </g>
-        <g id="Side-Bar" serif:id="Side Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-        </g>
-    </g>
-</svg>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
-                        /><span data-l10n-id="zen-dark-theme-styles-default" />
-                  </div>
-                  </label>
-                        <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
-        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
-        </g>
-        <g id="Outline">
-            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
-            </g>
-            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
-            </g>
-        </g>
-        <g id="Top-Bar" serif:id="Top Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
-                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
-            </g>
-        </g>
-        <g id="Side-Bar" serif:id="Side Bar">
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
-                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
-            </g>
-        </g>
-    </g>
-</svg>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
-                        /><span data-l10n-id="zen-dark-theme-styles-colorful" />
-                  </div>
-                  </label>
-            </form>
-      </html:div>
       <html:div data-l10n-id="preferences-web-appearance-footer">
             <html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
         </html:div>
diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css
index fa157c87b..1d3579462 100644
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -51,24 +51,6 @@ groupbox {
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
-@media (prefers-color-scheme: dark) {
-  @media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
-    groupbox {
-      background: #141414;
-    }
-  }
-
-  @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
-    groupbox {
-      background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
-    }
-
-    :root {
-      --zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 70%, #0f0f0f 30%));
-    }
-  }
-}
-
 .subcategory + groupbox,
 #noFxaAccount,
 #hasFxaAccount {
@@ -182,7 +164,6 @@ groupbox h2 {
   margin-bottom: 15px;
 }
 
-#zen-dark-theme-styles-form,
 #zen-compact-mode-styles-form {
   display: flex;
   justify-content: space-between;

From 3708b86e58fea29446c24d1a6a5d15e4e3aba0fa Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sun, 9 Feb 2025 18:12:30 +0100
Subject: [PATCH 06/31] Remove middle-click new tab preference and associated
 event handling for vertical tabs

---
 src/browser/app/profile/zen-browser.js    |  2 --
 src/browser/base/content/ZenUIManager.mjs | 14 --------------
 2 files changed, 16 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 2ee3107a7..99ee369df 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -158,7 +158,6 @@ pref('zen.view.hide-window-controls', true);
 pref('zen.view.experimental-no-window-controls', false);
 
 pref('zen.tabs.dim-pending', true);
-pref('zen.tabs.newtab-on-middle-click', true);
 
 pref('zen.keyboard.shortcuts.enabled', true);
 pref('zen.keyboard.shortcuts.version', 0); // Empty string means default shortcuts
@@ -184,7 +183,6 @@ pref('zen.sidebar.close-on-blur', true);
 pref('zen.sidebar.max-webpanels', 8);
 
 // Zen Split View
-pref('zen.splitView.working', false);
 pref('zen.splitView.min-resize-width', 7);
 pref('zen.splitView.change-on-hover', false);
 pref('zen.splitView.rearrange-hover-size', 24);
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index c843966c8..f5938ca7b 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -221,23 +221,9 @@ var gZenVerticalTabsManager = {
 
     const tabs = document.getElementById('tabbrowser-tabs');
 
-    XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
-
     if (!this.isWindowsStyledButtons) {
       document.documentElement.setAttribute('zen-window-buttons-reversed', true);
     }
-
-    if (tabs) {
-      tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
-    }
-  },
-
-  openNewTabOnTabsMiddleClick(event) {
-    if (event.button === 1 && event.target.id === 'tabbrowser-tabs' && this.canOpenTabOnMiddleClick) {
-      document.getElementById('cmd_newNavigatorTabNoEvent').doCommand();
-      event.stopPropagation();
-      event.preventDefault();
-    }
   },
 
   toggleExpand() {

From 0e8646d592ee2de90ff6a7e9b6b9d1278dd7c1f3 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 00:24:01 +0100
Subject: [PATCH 07/31] Refactor theme border-radius preference for consistency
 across platforms

---
 src/browser/app/profile/zen-browser.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 99ee369df..c4a5b7c59 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -102,12 +102,8 @@ pref('zen.rice.share.notice.accepted', false);
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else
-#ifdef XP_WIN
-pref('zen.theme.border-radius', 10); // In pixels
-#else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
-#endif
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
 

From c76066c99bed7812bc9dd1832b8345db8eb8a7e2 Mon Sep 17 00:00:00 2001
From: Jupi <73097618+JSGRD22@users.noreply.github.com>
Date: Mon, 10 Feb 2025 21:54:28 +0800
Subject: [PATCH 08/31] Improve corner radius on windows for a more native and
 consistent look

Signed-off-by: Jupi <73097618+JSGRD22@users.noreply.github.com>
---
 src/browser/app/profile/zen-browser.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 99ee369df..c4a5b7c59 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -102,12 +102,8 @@ pref('zen.rice.share.notice.accepted', false);
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else
-#ifdef XP_WIN
-pref('zen.theme.border-radius', 10); // In pixels
-#else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
-#endif
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
 

From d457e6fc766a4fdc907d809e046739f415cbc6ab Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 20:12:00 +0100
Subject: [PATCH 09/31] Fixed urlbar hiding when entering on a composition
 state

---
 src/browser/app/profile/zen-browser.js        |  1 +
 src/browser/base/content/ZenUIManager.mjs     |  2 +-
 .../tabbrowser/content/tabbrowser-js.patch    | 22 +++++++++----------
 .../urlbar/UrlbarInput-sys-mjs.patch          | 22 ++++++++-----------
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index c4a5b7c59..6e78ff8e7 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -376,6 +376,7 @@ pref("browser.urlbar.quicksuggest.enabled", false);
 pref("browser.urlbar.suggest.quicksuggest.sponsored", false);
 pref("browser.urlbar.suggest.quicksuggest.nonsponsored", false);
 pref("browser.urlbar.groupLabels.enabled", false);
+pref("browser.urlbar.keepPanelOpenDuringImeComposition", true); // IMPORTANT: Fixes closing the urlbar when on some languages
 pref("browser.formfill.enable", false);
 pref("security.insecure_connection_text.enabled", true);
 pref("security.insecure_connection_text.pbmode.enabled", true);
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index f5938ca7b..f4462c0bd 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -173,7 +173,7 @@ var gZenUIManager = {
     } else {
       this._lastSearch = gURLBar._untrimmedValue;
     }
-    gURLBar.setURI(this._prevUrlbarLabel, false, false, false, true);
+    gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
     gURLBar.handleRevert();
     if (gURLBar.focused) {
       gURLBar.view.close({ elementPicked: onSwitch });
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index 56bb251ba..f991c91ea 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..838542e31112c7c3b5e9049da4a2cb6b1c975652 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de6604534f 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -80,16 +80,16 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..838542e31112c7c3b5e9049da4a2cb6b
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -1477,6 +1511,9 @@
-           newBrowser &&
-           gURLBar.getBrowserState(newBrowser).urlbarFocused &&
-           gURLBar.focused;
-+        if (gURLBar._zenHandleUrlbarClose) {
-+          gURLBar._zenHandleUrlbarClose(true);
-+        }
-         if (!keepFocusOnUrlBar) {
-           // Clear focus so that _adjustFocusAfterTabSwitch can detect if
-           // some element has been focused and respect that.
+@@ -1462,6 +1496,9 @@
+       }
+ 
+       let activeEl = document.activeElement;
++      if (gURLBar._zenHandleUrlbarClose) {
++        gURLBar._zenHandleUrlbarClose(true);
++      }
+       // If focus is on the old tab, move it to the new tab.
+       if (activeEl == oldTab) {
+         newTab.focus();
 @@ -2387,7 +2424,7 @@
  
        let panel = this.getPanel(browser);
diff --git a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
index 4f76c0d50..f395eaa62 100644
--- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
+++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211ce209ff1a 100644
+index 50968dc04b527438acf30151f0c2e92f8b45097c..ea9207399b205c84d1263a4de8a63b776e36eabd 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -52,7 +52,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
    }
  
    /**
-@@ -1087,11 +1105,14 @@ export class UrlbarInput {
+@@ -1087,7 +1105,11 @@ export class UrlbarInput {
      }
  
      if (!result.payload.providesSearchMode) {
@@ -65,11 +65,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
      }
  
      this.controller.recordSelectedResult(event, result);
--
-     if (isCanonized) {
-       this.controller.engagementEvent.record(event, {
-         result,
-@@ -2144,6 +2165,11 @@ export class UrlbarInput {
+@@ -2144,6 +2166,11 @@ export class UrlbarInput {
  
      this.setAttribute("breakout-extend", "true");
  
@@ -81,7 +77,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
      // Enable the animation only after the first extend call to ensure it
      // doesn't run when opening a new window.
      if (!this.hasAttribute("breakout-extend-animate")) {
-@@ -2163,6 +2189,11 @@ export class UrlbarInput {
+@@ -2163,6 +2190,11 @@ export class UrlbarInput {
        return;
      }
  
@@ -93,7 +89,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
      this.removeAttribute("breakout-extend");
      this.#updateTextboxPosition();
    }
-@@ -3305,7 +3336,7 @@ export class UrlbarInput {
+@@ -3305,7 +3337,7 @@ export class UrlbarInput {
      } else {
        where = lazy.BrowserUtils.whereToOpenLink(event, false, false);
      }
@@ -102,7 +98,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
        if (where == "current") {
          where = "tab";
        } else if (where == "tab") {
-@@ -3859,6 +3890,11 @@ export class UrlbarInput {
+@@ -3859,6 +3891,11 @@ export class UrlbarInput {
    }
  
    _on_click(event) {
@@ -114,7 +110,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
      if (
        event.target == this.inputField ||
        event.target == this._inputContainer ||
-@@ -3930,7 +3966,7 @@ export class UrlbarInput {
+@@ -3930,7 +3967,7 @@ export class UrlbarInput {
        }
      }
  
@@ -123,7 +119,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
        this.view.autoOpen({ event });
      } else {
        if (this._untrimOnFocusAfterKeydown) {
-@@ -3970,9 +4006,12 @@ export class UrlbarInput {
+@@ -3970,9 +4007,12 @@ export class UrlbarInput {
    }
  
    _on_mousedown(event) {
@@ -137,7 +133,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211c
  
          if (
            event.target != this.inputField &&
-@@ -3982,8 +4021,8 @@ export class UrlbarInput {
+@@ -3982,8 +4022,8 @@ export class UrlbarInput {
            break;
          }
  

From 2dbd80f5397b858d646304eb0f0587f144f41120 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 20:30:13 +0100
Subject: [PATCH 10/31] Increase minimum width of the urlbar to improve
 usability

---
 src/browser/base/content/zen-styles/zen-urlbar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 208339888..773014084 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -393,7 +393,7 @@ button.popup-notification-dropmarker {
 
 :root[zen-single-toolbar='true'] {
   #urlbar[open] {
-    min-width: 30vw;
+    min-width: 35vw;
   }
 
   &[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {

From 84bf229944a9429884169d722099b0ddcfb478fc Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 20:48:41 +0100
Subject: [PATCH 11/31] Fixed urlbar being hidden/glitched on fullscreen

---
 src/browser/base/content/zen-styles/zen-browser-ui.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index 255a9228f..403370c63 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -22,7 +22,7 @@
 :root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
   #navigator-toolbox,
   #zen-sidebar-splitter {
-    display: none;
+    visibility: collapse;
   }
 }
 

From b5c889ab0190fcb0ded0242566852b8e7613289a Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 21:52:23 +0100
Subject: [PATCH 12/31] Refactor tab reset button label and clean up unused
 color scheme listener

---
 l10n                                               |  2 +-
 .../base/zen-components/ZenGlanceManager.mjs       |  3 +--
 src/browser/components/preferences/zen-settings.js | 14 --------------
 .../components/tabbrowser/content/tab-js.patch     |  4 ++--
 4 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/l10n b/l10n
index fb2f27225..19e2af33c 160000
--- a/l10n
+++ b/l10n
@@ -1 +1 @@
-Subproject commit fb2f27225e6ec810354ce4c95913d6a2105e200b
+Subproject commit 19e2af33c4d901a4edece2b95c4372b40d50a942
diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
index 67760034c..fc4f13942 100644
--- a/src/browser/base/zen-components/ZenGlanceManager.mjs
+++ b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -491,8 +491,6 @@
         index: this.getTabPosition(this.#currentTab),
       });
 
-      this.#currentParentTab._visuallySelected = false;
-
       this.browserWrapper.removeAttribute('style');
       this.browserWrapper.removeAttribute('has-finished-animation');
       this.browserWrapper.setAttribute('animate-full', true);
@@ -501,6 +499,7 @@
       this.#currentParentTab.removeAttribute('glance-id');
       gBrowser.selectedTab = this.#currentTab;
       this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
+      this.#currentParentTab._visuallySelected = false;
       this.hideSidebarButtons();
       gZenUIManager.motion
         .animate(
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index ca5f3d2a9..87618112a 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -495,14 +495,10 @@ var gZenLooksAndFeel = {
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
     gZenMarketplaceManager.init();
-    var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
-    window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
     for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
       Services.prefs.addObserver(pref, this);
     }
-    this.onPreferColorSchemeChange();
     window.addEventListener('unload', () => {
-      window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
       for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
         Services.prefs.removeObserver(pref, this);
       }
@@ -549,16 +545,6 @@ var gZenLooksAndFeel = {
     }
   },
 
-  onPreferColorSchemeChange(event) {
-    const darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    let elem = document.getElementById('ZenDarkThemeStyles');
-    if (darkTheme) {
-      elem.removeAttribute('hidden');
-    } else {
-      elem.setAttribute('hidden', 'true');
-    }
-  },
-
   setCompactModeStyle() {
     const chooser = document.getElementById('zen-compact-mode-styles-form');
     const radios = [...chooser.querySelectorAll('input')];
diff --git a/src/browser/components/tabbrowser/content/tab-js.patch b/src/browser/components/tabbrowser/content/tab-js.patch
index e888b83a4..06ba6a423 100644
--- a/src/browser/components/tabbrowser/content/tab-js.patch
+++ b/src/browser/components/tabbrowser/content/tab-js.patch
@@ -1,12 +1,12 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index d41c486c02a6f09dcff5741a59ad8b617294c481..0328460c7eb45d8ffb9de4f9b8d4a7bdd7a5b7b3 100644
+index d41c486c02a6f09dcff5741a59ad8b617294c481..abaccd1935fc117924c44dd22cae0b322fc6a0c4 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -37,6 +37,7 @@
              </hbox>
            </vbox>
            <image class="tab-close-button close-icon" role="button" data-l10n-id="tabbrowser-close-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
-+          <image class="tab-reset-button reset-icon" role="button" data-l10n-id="tabbrowser-reset-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
++          <image class="tab-reset-button reset-icon" role="button" data-l10n-id="tabbrowser-unload-tab-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
          </hbox>
        </stack>
        `;

From be2a44dab99dd3bbde6325607ed4e8b044cf382b Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 10 Feb 2025 22:16:50 +0100
Subject: [PATCH 13/31] Added a timeout before the newtab url bar can clear
 it's content

---
 src/browser/app/profile/zen-browser.js    |  3 ++-
 src/browser/base/content/ZenUIManager.mjs | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 6e78ff8e7..a61533e60 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -118,6 +118,7 @@ pref('zen.view.compact.animate-sidebar', true);
 
 pref('zen.urlbar.replace-newtab', true);
 pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
+pref('zen.urlbar.wait-to-clear', 45000); // in ms (default 45s)
 
 #ifdef XP_MACOSX
 // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
@@ -167,7 +168,7 @@ pref('zen.tab-unloader.excluded-urls', "example.com,example.org");
 
 pref('zen.pinned-tab-manager.debug', false);
 pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false);
-pref('zen.pinned-tab-manager.close-shortcut-behavior', 'switch');
+pref('zen.pinned-tab-manager.close-shortcut-behavior', 'unload-switch');
 
 // TODO: Check this out!
 pref("browser.profiles.enabled", false);
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index f4462c0bd..4c58a6e90 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -8,6 +8,7 @@ var gZenUIManager = {
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
     XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
     XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
+    XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
 
     ChromeUtils.defineLazyGetter(this, 'motion', () => {
       return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
@@ -149,11 +150,15 @@ var gZenUIManager = {
 
   _prevUrlbarLabel: null,
   _lastSearch: '',
+  _clearTimeout: null,
 
   handleNewTab(werePassedURL, searchClipboard, where) {
     const shouldOpenURLBar =
       Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
     if (shouldOpenURLBar) {
+      if (this._clearTimeout) {
+        clearTimeout(this._clearTimeout);
+      }
       this._prevUrlbarLabel = gURLBar._untrimmedValue;
       gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
       gURLBar.setAttribute('zen-newtab', true);
@@ -164,14 +169,21 @@ var gZenUIManager = {
     return false;
   },
 
+  clearUrlbarData() {
+    this._prevUrlbarLabel = null;
+    this._lastSearch = '';
+  },
+
   handleUrlbarClose(onSwitch) {
     gURLBar._zenHandleUrlbarClose = null;
     gURLBar.removeAttribute('zen-newtab');
     if (onSwitch) {
-      this._prevUrlbarLabel = null;
-      this._lastSearch = '';
+      this.clearUrlbarData();
     } else {
       this._lastSearch = gURLBar._untrimmedValue;
+      this._clearTimeout = setTimeout(() => {
+        this.clearUrlbarData();
+      }, this.urlbarWaitToClear);
     }
     gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
     gURLBar.handleRevert();

From 290aa09f893d85ad99ae7a8f7c88fb6b66e5d6f5 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 11:32:09 +0100
Subject: [PATCH 14/31] Small urlbar improvements

---
 src/browser/base/content/ZenUIManager.mjs     | 15 ++++++++
 .../zen-styles/zen-tabs/vertical-tabs.css     | 34 ++++++++-----------
 .../base/content/zen-styles/zen-theme.css     |  3 +-
 .../base/content/zen-styles/zen-urlbar.css    | 22 ++++++------
 .../themes/shared/zen-icons/accessibility.svg |  2 +-
 .../shared/zen-icons/add-to-dictionary.svg    |  2 +-
 .../themes/shared/zen-icons/arrow-down.svg    |  2 +-
 .../themes/shared/zen-icons/arrow-left.svg    |  2 +-
 .../themes/shared/zen-icons/arrow-right.svg   |  2 +-
 .../themes/shared/zen-icons/arrow-up.svg      |  2 +-
 .../themes/shared/zen-icons/audio-save.svg    |  2 +-
 .../zen-icons/autoplay-media-blocked.svg      |  2 +-
 .../shared/zen-icons/autoplay-media.svg       |  2 +-
 src/browser/themes/shared/zen-icons/back.svg  |  2 +-
 .../shared/zen-icons/bookmark-hollow.svg      |  2 +-
 .../zen-icons/bookmark-star-on-tray.svg       |  2 +-
 .../themes/shared/zen-icons/bookmark.svg      |  2 +-
 .../shared/zen-icons/camera-blocked.svg       |  2 +-
 .../themes/shared/zen-icons/camera.svg        |  2 +-
 .../themes/shared/zen-icons/canvas.svg        |  2 +-
 .../themes/shared/zen-icons/checkmark.svg     |  2 +-
 .../themes/shared/zen-icons/chevron.svg       |  2 +-
 .../themes/shared/zen-icons/close-all.svg     |  2 +-
 src/browser/themes/shared/zen-icons/close.svg |  2 +-
 .../themes/shared/zen-icons/container-tab.svg |  2 +-
 .../themes/shared/zen-icons/customize.svg     |  2 +-
 .../desktop-notification-blocked.svg          |  2 +-
 .../shared/zen-icons/desktop-notification.svg |  2 +-
 .../themes/shared/zen-icons/developer.svg     |  2 +-
 .../themes/shared/zen-icons/downloads.svg     |  2 +-
 .../shared/zen-icons/drag-indicator.svg       |  2 +-
 .../themes/shared/zen-icons/duplicate-tab.svg |  2 +-
 .../themes/shared/zen-icons/edit-copy.svg     |  2 +-
 .../themes/shared/zen-icons/edit-cut.svg      |  2 +-
 .../themes/shared/zen-icons/edit-delete.svg   |  2 +-
 .../themes/shared/zen-icons/edit-paste.svg    |  2 +-
 .../themes/shared/zen-icons/edit-redo.svg     |  2 +-
 .../shared/zen-icons/edit-select-all.svg      |  2 +-
 .../themes/shared/zen-icons/edit-theme.svg    |  2 +-
 .../themes/shared/zen-icons/edit-undo.svg     |  2 +-
 src/browser/themes/shared/zen-icons/edit.svg  |  2 +-
 .../themes/shared/zen-icons/essential-add.svg |  2 +-
 .../shared/zen-icons/essential-remove.svg     |  2 +-
 .../shared/zen-icons/expand-sidebar.svg       |  2 +-
 .../themes/shared/zen-icons/ext-link.svg      |  2 +-
 .../shared/zen-icons/extension-blocked.svg    |  2 +-
 .../themes/shared/zen-icons/extension.svg     |  2 +-
 .../themes/shared/zen-icons/folder.svg        |  2 +-
 .../themes/shared/zen-icons/forget.svg        |  2 +-
 .../themes/shared/zen-icons/forward.svg       |  2 +-
 .../shared/zen-icons/fullscreen-exit.svg      |  2 +-
 .../themes/shared/zen-icons/fullscreen.svg    |  2 +-
 .../themes/shared/zen-icons/geo-blocked.svg   |  2 +-
 src/browser/themes/shared/zen-icons/geo.svg   |  2 +-
 src/browser/themes/shared/zen-icons/help.svg  |  2 +-
 .../themes/shared/zen-icons/history.svg       |  2 +-
 src/browser/themes/shared/zen-icons/home.svg  |  2 +-
 .../themes/shared/zen-icons/image-copy.svg    |  2 +-
 .../themes/shared/zen-icons/image-open.svg    |  2 +-
 .../themes/shared/zen-icons/image-save.svg    |  2 +-
 src/browser/themes/shared/zen-icons/info.svg  |  2 +-
 .../themes/shared/zen-icons/inspect.svg       |  2 +-
 .../themes/shared/zen-icons/library.svg       |  2 +-
 src/browser/themes/shared/zen-icons/link.svg  |  2 +-
 .../themes/shared/zen-icons/manage.svg        |  2 +-
 .../themes/shared/zen-icons/media-loop.svg    |  2 +-
 .../themes/shared/zen-icons/media-mute.svg    |  2 +-
 .../themes/shared/zen-icons/media-pause.svg   |  2 +-
 .../themes/shared/zen-icons/media-pip.svg     |  2 +-
 .../themes/shared/zen-icons/media-play.svg    |  2 +-
 .../themes/shared/zen-icons/media-speed.svg   |  2 +-
 .../themes/shared/zen-icons/media-unmute.svg  |  2 +-
 .../themes/shared/zen-icons/menu-bar.svg      |  2 +-
 src/browser/themes/shared/zen-icons/menu.svg  |  2 +-
 .../shared/zen-icons/microphone-blocked.svg   |  2 +-
 .../themes/shared/zen-icons/microphone.svg    |  2 +-
 .../themes/shared/zen-icons/move-tab.svg      |  2 +-
 .../themes/shared/zen-icons/new-tab-image.svg |  2 +-
 src/browser/themes/shared/zen-icons/open.svg  |  2 +-
 .../themes/shared/zen-icons/page-portrait.svg |  2 +-
 .../themes/shared/zen-icons/passwords.svg     |  2 +-
 .../themes/shared/zen-icons/paste-and-go.svg  |  2 +-
 .../themes/shared/zen-icons/permissions.svg   |  2 +-
 .../zen-icons/persistent-storage-blocked.svg  |  2 +-
 .../shared/zen-icons/persistent-storage.svg   |  2 +-
 src/browser/themes/shared/zen-icons/pin.svg   |  2 +-
 src/browser/themes/shared/zen-icons/plus.svg  |  2 +-
 src/browser/themes/shared/zen-icons/popup.svg |  2 +-
 src/browser/themes/shared/zen-icons/print.svg |  2 +-
 .../shared/zen-icons/private-window.svg       |  2 +-
 .../shared/zen-icons/privateBrowsing.svg      |  2 +-
 .../themes/shared/zen-icons/reader-mode.svg   |  2 +-
 .../themes/shared/zen-icons/reload.svg        |  2 +-
 .../themes/shared/zen-icons/report.svg        |  2 +-
 src/browser/themes/shared/zen-icons/save.svg  |  2 +-
 .../shared/zen-icons/screen-blocked.svg       |  2 +-
 .../themes/shared/zen-icons/screen.svg        |  2 +-
 .../themes/shared/zen-icons/screenshot.svg    |  2 +-
 .../themes/shared/zen-icons/search-glass.svg  |  2 +-
 .../themes/shared/zen-icons/search-page.svg   |  2 +-
 .../shared/zen-icons/security-broken.svg      |  2 +-
 .../shared/zen-icons/security-warning.svg     |  2 +-
 .../themes/shared/zen-icons/security.svg      |  2 +-
 .../shared/zen-icons/send-to-device.svg       |  2 +-
 .../themes/shared/zen-icons/settings.svg      |  2 +-
 src/browser/themes/shared/zen-icons/share.svg |  2 +-
 .../themes/shared/zen-icons/sidebar.svg       |  2 +-
 .../shared/zen-icons/sidebars-right.svg       |  2 +-
 .../themes/shared/zen-icons/source-code.svg   |  2 +-
 .../themes/shared/zen-icons/spell-check.svg   |  2 +-
 src/browser/themes/shared/zen-icons/split.svg |  2 +-
 .../zen-icons/tab-audio-blocked-small.svg     |  2 +-
 .../zen-icons/tab-audio-muted-small.svg       |  2 +-
 .../zen-icons/tab-audio-playing-small.svg     |  2 +-
 src/browser/themes/shared/zen-icons/tab.svg   |  2 +-
 .../themes/shared/zen-icons/tool-profiler.svg |  2 +-
 .../shared/zen-icons/tracking-protection.svg  |  2 +-
 .../themes/shared/zen-icons/translations.svg  |  2 +-
 src/browser/themes/shared/zen-icons/unpin.svg |  2 +-
 .../themes/shared/zen-icons/video-open.svg    |  2 +-
 .../themes/shared/zen-icons/video-save.svg    |  2 +-
 .../themes/shared/zen-icons/window.svg        |  2 +-
 .../themes/shared/zen-icons/xr-blocked.svg    |  2 +-
 src/browser/themes/shared/zen-icons/xr.svg    |  2 +-
 .../themes/shared/zen-icons/zoom-control.svg  |  2 +-
 .../themes/shared/zen-icons/zoom-out.svg      |  2 +-
 126 files changed, 164 insertions(+), 154 deletions(-)

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 4c58a6e90..cfde08211 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -148,9 +148,18 @@ var gZenUIManager = {
     this.__currentPopupTrackElement = null;
   },
 
+  get newtabButton() {
+    if (this._newtabButton) {
+      return this._newtabButton;
+    }
+    this._newtabButton = document.getElementById('tabs-newtab-button');
+    return this._newtabButton;
+  },
+
   _prevUrlbarLabel: null,
   _lastSearch: '',
   _clearTimeout: null,
+  _lastTab: null,
 
   handleNewTab(werePassedURL, searchClipboard, where) {
     const shouldOpenURLBar =
@@ -159,9 +168,12 @@ var gZenUIManager = {
       if (this._clearTimeout) {
         clearTimeout(this._clearTimeout);
       }
+      this._lastTab = gBrowser.selectedTab;
+      this._lastTab._visuallySelected = false;
       this._prevUrlbarLabel = gURLBar._untrimmedValue;
       gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
       gURLBar.setAttribute('zen-newtab', true);
+      this.newtabButton.setAttribute('in-urlbar', true);
       document.getElementById('Browser:OpenLocation').doCommand();
       gURLBar.search(this._lastSearch);
       return true;
@@ -177,6 +189,9 @@ var gZenUIManager = {
   handleUrlbarClose(onSwitch) {
     gURLBar._zenHandleUrlbarClose = null;
     gURLBar.removeAttribute('zen-newtab');
+    this._lastTab._visuallySelected = true;
+    this._lastTab = null;
+    this.newtabButton.removeAttribute('in-urlbar');
     if (onSwitch) {
       this.clearUrlbarData();
     } else {
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index e08650a78..a593fedfc 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -87,17 +87,6 @@
     width: -moz-available !important;
   }
 
-  .sharing-icon,
-  #identity-icon,
-  .urlbar-icon,
-  #permissions-granted-icon,
-  #tracking-protection-icon,
-  #tracking-protection-icon-box,
-  #blocked-permissions-container > .blocked-permission-icon {
-    width: 14px;
-    height: 14px;
-  }
-
   #identity-icon-box,
   #identity-permission-box {
     margin-top: auto;
@@ -261,6 +250,7 @@
 
   --tab-block-margin: 2px;
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
+  --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -275,10 +265,6 @@
       #tabbrowser-tabs[dont-animate-tabs] & {
         opacity: 0;
       }
-
-      &:is([selected], [multiselected], [visuallyselected]) .tab-background {
-        box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
-      }
     }
 
     &:active {
@@ -535,7 +521,7 @@
       }
 
       &:hover {
-        background: var(--toolbarbutton-hover-background) !important;
+        background: var(--toolbarbutton-hover-background);
 
         & image,
         label {
@@ -902,10 +888,22 @@
 @media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
   #tabs-newtab-button {
     display: flex !important;
+    transition: scale 0.1s ease;
     & .toolbarbutton-text {
       align-items: center;
       padding-top: 0;
     }
+    
+    &:active,
+    &[open] {
+      scale: 0.98;
+    }
+
+    &[in-urlbar] {
+      background: var(--tab-selected-bgcolor) !important;
+      opacity: 1 !important;
+      box-shadow: var(--tab-selected-shadow);
+    }
   }
 
   #tabbrowser-arrowscrollbox-periphery {
@@ -968,10 +966,6 @@
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
-  &[selected] .tab-background {
-    box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
-  }
-
   &:not([selected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
     border: none;
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index b5a75004d..e4398c8ab 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -169,7 +169,6 @@
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
 
-  --tab-selected-shadow: none !important;
   --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
 
   /* Nativity */
@@ -213,7 +212,7 @@
     --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
 
     --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
-    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
+    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
     --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
 
     --zen-dialog-background: var(--zen-dark-color-mix-base);
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 773014084..b56c65232 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -11,7 +11,7 @@
 
 #urlbar {
   --toolbarbutton-border-radius: 8px;
-  --urlbarView-separator-color: var(--zen-colors-border);
+  --urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: var(--toolbarbutton-border-radius);
@@ -121,8 +121,12 @@
 }
 
 #urlbar[breakout-extend='true'] #urlbar-background {
-  border: 1px solid var(--zen-colors-border) !important;
-  box-shadow: var(--zen-big-shadow) !important;
+  box-shadow:
+    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
+    /* 2. shadow ring 👇 */ 0 0 0 1px hsla(230, 13%, 9%, 0.075),
+    /* 3. multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
+    0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
+    0 6.5px 12px hsla(230, 13%, 9%, 0.1) !important;
   backdrop-filter: none !important;
 }
 
@@ -387,7 +391,7 @@ button.popup-notification-dropmarker {
     /* We cant have a transparent background with a backdrop-filter because on normal websites,
       the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
       due to performance issues */
-    background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
+    background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
   }
 }
 
@@ -405,12 +409,11 @@ button.popup-notification-dropmarker {
   z-index: 1000;
   max-width: 45vw;
   min-width: 45vw !important;
-  font-size: 1.1em;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
   position: absolute;
 
-  font-size: 1.15em !important;
+  font-size: 1.5em !important;
   top: calc(var(--zen-toolbar-height) * 2) !important;
 
   --zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
@@ -491,10 +494,9 @@ button.popup-notification-dropmarker {
   }
 
   &:hover {
-    background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
-
-    .urlbarView-favicon {
-      background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
+    .urlbarView-favicon,
+    & {
+      background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 5%, transparent 95%) !important;
     }
 
     .urlbarView-url,
diff --git a/src/browser/themes/shared/zen-icons/accessibility.svg b/src/browser/themes/shared/zen-icons/accessibility.svg
index 89d9baa0b..c840382d3 100644
--- a/src/browser/themes/shared/zen-icons/accessibility.svg
+++ b/src/browser/themes/shared/zen-icons/accessibility.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="2.25" r="1.5" data-color="color-2"></circle><line x1="7.25" y1="16.5" x2="7.25" y2="6.24"></line><line x1="10.75" y1="6.24" x2="10.75" y2="16.5"></line><path d="M2.75,5.75c1.751,.3,3.86,.531,6.25,.531,1.777,0,3.894-.128,6.25-.531"></path><line x1="7.25" y1="11.25" x2="10.75" y2="11.25"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="2.25" r="1.5" data-color="color-2"></circle><line x1="7.25" y1="16.5" x2="7.25" y2="6.24"></line><line x1="10.75" y1="6.24" x2="10.75" y2="16.5"></line><path d="M2.75,5.75c1.751,.3,3.86,.531,6.25,.531,1.777,0,3.894-.128,6.25-.531"></path><line x1="7.25" y1="11.25" x2="10.75" y2="11.25"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/add-to-dictionary.svg b/src/browser/themes/shared/zen-icons/add-to-dictionary.svg
index 6f6dfdabb..3ee28ba35 100644
--- a/src/browser/themes/shared/zen-icons/add-to-dictionary.svg
+++ b/src/browser/themes/shared/zen-icons/add-to-dictionary.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.181,3.257c-.221-.865-.998-1.507-1.931-1.507H5.75c-1.105,0-2,.896-2,2v12.5l5.25-3.5,5.25,3.5v-3"></path><line x1="14.25" y1="5.75" x2="14.25" y2="10.75" data-color="color-2"></line><line x1="16.75" y1="8.25" x2="11.75" y2="8.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.181,3.257c-.221-.865-.998-1.507-1.931-1.507H5.75c-1.105,0-2,.896-2,2v12.5l5.25-3.5,5.25,3.5v-3"></path><line x1="14.25" y1="5.75" x2="14.25" y2="10.75" data-color="color-2"></line><line x1="16.75" y1="8.25" x2="11.75" y2="8.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/arrow-down.svg b/src/browser/themes/shared/zen-icons/arrow-down.svg
index 1ef89c26f..3fb328224 100644
--- a/src/browser/themes/shared/zen-icons/arrow-down.svg
+++ b/src/browser/themes/shared/zen-icons/arrow-down.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="15.25 6.5 9 12.75 2.75 6.5"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="15.25 6.5 9 12.75 2.75 6.5"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/arrow-left.svg b/src/browser/themes/shared/zen-icons/arrow-left.svg
index 21c2342a2..f44352b46 100644
--- a/src/browser/themes/shared/zen-icons/arrow-left.svg
+++ b/src/browser/themes/shared/zen-icons/arrow-left.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="11.5 15.25 5.25 9 11.5 2.75"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="11.5 15.25 5.25 9 11.5 2.75"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/arrow-right.svg b/src/browser/themes/shared/zen-icons/arrow-right.svg
index eaf6fc7c0..cff35212a 100644
--- a/src/browser/themes/shared/zen-icons/arrow-right.svg
+++ b/src/browser/themes/shared/zen-icons/arrow-right.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/arrow-up.svg b/src/browser/themes/shared/zen-icons/arrow-up.svg
index 7502b1f11..b206a3f9f 100644
--- a/src/browser/themes/shared/zen-icons/arrow-up.svg
+++ b/src/browser/themes/shared/zen-icons/arrow-up.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/audio-save.svg b/src/browser/themes/shared/zen-icons/audio-save.svg
index a5bc48b88..6b01002fb 100644
--- a/src/browser/themes/shared/zen-icons/audio-save.svg
+++ b/src/browser/themes/shared/zen-icons/audio-save.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="7.25" x2="5.75" y2="13.75"></line><line x1="14.75" y1="5.75" x2="14.75" y2="12.25"></line><path d="m8.6399,3.0186l4.9461-.8246c.61-.102,1.164.368,1.164.986v2.57l-9,1.5"></path><circle cx="3.75" cy="13.75" r="2"></circle><circle cx="12.75" cy="12.25" r="2"></circle><line x1="3.75" y1="1.25" x2="3.75" y2="6.25" data-color="color-2"></line><line x1="6.25" y1="3.75" x2="1.25" y2="3.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="7.25" x2="5.75" y2="13.75"></line><line x1="14.75" y1="5.75" x2="14.75" y2="12.25"></line><path d="m8.6399,3.0186l4.9461-.8246c.61-.102,1.164.368,1.164.986v2.57l-9,1.5"></path><circle cx="3.75" cy="13.75" r="2"></circle><circle cx="12.75" cy="12.25" r="2"></circle><line x1="3.75" y1="1.25" x2="3.75" y2="6.25" data-color="color-2"></line><line x1="6.25" y1="3.75" x2="1.25" y2="3.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/autoplay-media-blocked.svg b/src/browser/themes/shared/zen-icons/autoplay-media-blocked.svg
index aeb9a98eb..8e2760962 100644
--- a/src/browser/themes/shared/zen-icons/autoplay-media-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/autoplay-media-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.25,8.75V1.75s1.303,2.048,3.427,3.573"></path><path d="M5.406,16.13c.268,.078,.551,.12,.844,.12,1.657,0,3-1.343,3-3,0-.293-.042-.577-.12-.844"></path><path d="M7.485,10.515c-.377-.17-.795-.265-1.235-.265-1.657,0-3,1.343-3,3,0,.44,.095,.858,.265,1.235"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.25,8.75V1.75s1.303,2.048,3.427,3.573"></path><path d="M5.406,16.13c.268,.078,.551,.12,.844,.12,1.657,0,3-1.343,3-3,0-.293-.042-.577-.12-.844"></path><path d="M7.485,10.515c-.377-.17-.795-.265-1.235-.265-1.657,0-3,1.343-3,3,0,.44,.095,.858,.265,1.235"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/autoplay-media.svg b/src/browser/themes/shared/zen-icons/autoplay-media.svg
index 20a6a2c81..12ef8fcf0 100644
--- a/src/browser/themes/shared/zen-icons/autoplay-media.svg
+++ b/src/browser/themes/shared/zen-icons/autoplay-media.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.75,13.25V1.75s1.75,2.75,4.5,4.25" data-color="color-2"></path><circle cx="6.75" cy="13.25" r="3"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.75,13.25V1.75s1.75,2.75,4.5,4.25" data-color="color-2"></path><circle cx="6.75" cy="13.25" r="3"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/back.svg b/src/browser/themes/shared/zen-icons/back.svg
index 1678b6024..d2c36f023 100644
--- a/src/browser/themes/shared/zen-icons/back.svg
+++ b/src/browser/themes/shared/zen-icons/back.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="2.75" y1="9" x2="15.25" y2="9" data-color="color-2"></line><polyline points="7 13.25 2.75 9 7 4.75"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="2.75" y1="9" x2="15.25" y2="9" data-color="color-2"></line><polyline points="7 13.25 2.75 9 7 4.75"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/bookmark-hollow.svg b/src/browser/themes/shared/zen-icons/bookmark-hollow.svg
index 0d1792366..80ee175f8 100644
--- a/src/browser/themes/shared/zen-icons/bookmark-hollow.svg
+++ b/src/browser/themes/shared/zen-icons/bookmark-hollow.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/bookmark-star-on-tray.svg b/src/browser/themes/shared/zen-icons/bookmark-star-on-tray.svg
index 0d1792366..80ee175f8 100644
--- a/src/browser/themes/shared/zen-icons/bookmark-star-on-tray.svg
+++ b/src/browser/themes/shared/zen-icons/bookmark-star-on-tray.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/bookmark.svg b/src/browser/themes/shared/zen-icons/bookmark.svg
index d4af6bbbf..c00c201f1 100644
--- a/src/browser/themes/shared/zen-icons/bookmark.svg
+++ b/src/browser/themes/shared/zen-icons/bookmark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,16.25l-5.25-3.5-5.25,3.5V3.75c0-1.105,.895-2,2-2h6.5c1.105,0,2,.895,2,2v12.5Z"></path><polyline points="6.497 8 8.106 9.5 11.503 5" data-color="color-2"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,16.25l-5.25-3.5-5.25,3.5V3.75c0-1.105,.895-2,2-2h6.5c1.105,0,2,.895,2,2v12.5Z"></path><polyline points="6.497 8 8.106 9.5 11.503 5" data-color="color-2"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/camera-blocked.svg b/src/browser/themes/shared/zen-icons/camera-blocked.svg
index 090a80b78..fc7df3492 100644
--- a/src/browser/themes/shared/zen-icons/camera-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/camera-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.285,14.25h6.965c1.105,0,2-.895,2-2V5.75c0-.138-.014-.273-.041-.403"></path><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2"></path><path d="M7.055,10.945c-.498-.498-.805-1.185-.805-1.945,0-1.519,1.231-2.75,2.75-2.75,.759,0,1.447,.308,1.945,.805" data-color="color-2"></path><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.285,14.25h6.965c1.105,0,2-.895,2-2V5.75c0-.138-.014-.273-.041-.403"></path><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2"></path><path d="M7.055,10.945c-.498-.498-.805-1.185-.805-1.945,0-1.519,1.231-2.75,2.75-2.75,.759,0,1.447,.308,1.945,.805" data-color="color-2"></path><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/camera.svg b/src/browser/themes/shared/zen-icons/camera.svg
index eb7b8eb93..d8fd7902a 100644
--- a/src/browser/themes/shared/zen-icons/camera.svg
+++ b/src/browser/themes/shared/zen-icons/camera.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2H14.25c1.105,0,2-.895,2-2V5.75c0-1.105-.895-2-2-2Z"></path><circle cx="9" cy="9" r="2.75" data-color="color-2"></circle><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2H14.25c1.105,0,2-.895,2-2V5.75c0-1.105-.895-2-2-2Z"></path><circle cx="9" cy="9" r="2.75" data-color="color-2"></circle><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/canvas.svg b/src/browser/themes/shared/zen-icons/canvas.svg
index 56e2403dc..088d715e6 100644
--- a/src/browser/themes/shared/zen-icons/canvas.svg
+++ b/src/browser/themes/shared/zen-icons/canvas.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.762,14.989l6.074-6.075c.781-.781,2.047-.781,2.828,0l2.586,2.586" data-color="color-2"></path><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><circle cx="6.25" cy="7.25" r="1.25" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.762,14.989l6.074-6.075c.781-.781,2.047-.781,2.828,0l2.586,2.586" data-color="color-2"></path><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><circle cx="6.25" cy="7.25" r="1.25" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/checkmark.svg b/src/browser/themes/shared/zen-icons/checkmark.svg
index 2e009fdf1..b2379ceba 100644
--- a/src/browser/themes/shared/zen-icons/checkmark.svg
+++ b/src/browser/themes/shared/zen-icons/checkmark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 9.5 6.5 13.25 15.25 4.5"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 9.5 6.5 13.25 15.25 4.5"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/chevron.svg b/src/browser/themes/shared/zen-icons/chevron.svg
index c4294002c..43b683ae1 100644
--- a/src/browser/themes/shared/zen-icons/chevron.svg
+++ b/src/browser/themes/shared/zen-icons/chevron.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="9.75 4.75 14 9 9.75 13.25" data-color="color-2"></polyline><polyline points="5 4.75 9.25 9 5 13.25"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="9.75 4.75 14 9 9.75 13.25" data-color="color-2"></polyline><polyline points="5 4.75 9.25 9 5 13.25"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/close-all.svg b/src/browser/themes/shared/zen-icons/close-all.svg
index a27866f14..d4c6ae30a 100644
--- a/src/browser/themes/shared/zen-icons/close-all.svg
+++ b/src/browser/themes/shared/zen-icons/close-all.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,16.25v-.5c0-1.105,.895-2,2-2H14.25c1.105,0,2,.895,2,2v.5"></path><path d="M3.75,11.25c0-.828,.672-1.5,1.5-1.5h7.5c.828,0,1.5,.672,1.5,1.5"></path><polyline points="11.5 4.75 9 7.25 6.5 4.75" data-color="color-2"></polyline><line x1="9" y1="7" x2="9" y2="1.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,16.25v-.5c0-1.105,.895-2,2-2H14.25c1.105,0,2,.895,2,2v.5"></path><path d="M3.75,11.25c0-.828,.672-1.5,1.5-1.5h7.5c.828,0,1.5,.672,1.5,1.5"></path><polyline points="11.5 4.75 9 7.25 6.5 4.75" data-color="color-2"></polyline><line x1="9" y1="7" x2="9" y2="1.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/close.svg b/src/browser/themes/shared/zen-icons/close.svg
index 327a6c91f..8560bd1c0 100644
--- a/src/browser/themes/shared/zen-icons/close.svg
+++ b/src/browser/themes/shared/zen-icons/close.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14" y1="4" x2="4" y2="14" data-color="color-2"></line><line x1="4" y1="4" x2="14" y2="14"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14" y1="4" x2="4" y2="14" data-color="color-2"></line><line x1="4" y1="4" x2="14" y2="14"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/container-tab.svg b/src/browser/themes/shared/zen-icons/container-tab.svg
index 5774a0f1d..790c58e00 100644
--- a/src/browser/themes/shared/zen-icons/container-tab.svg
+++ b/src/browser/themes/shared/zen-icons/container-tab.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,2.75h7c1.105,0,2,.895,2,2v1.5" data-color="color-2"></path><line x1="11.25" y1="2.75" x2="11.25" y2="6.25" data-color="color-2"></line><line x1="14.75" y1="11.75" x2="14.75" y2="16.75" data-color="color-2"></line><path d="M15.75,9.461v-3.211H6.75V2.75h-2.5c-1.105,0-2,.895-2,2V13.25c0,1.105,.895,2,2,2h5.711"></path><line x1="17.25" y1="14.25" x2="12.25" y2="14.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,2.75h7c1.105,0,2,.895,2,2v1.5" data-color="color-2"></path><line x1="11.25" y1="2.75" x2="11.25" y2="6.25" data-color="color-2"></line><line x1="14.75" y1="11.75" x2="14.75" y2="16.75" data-color="color-2"></line><path d="M15.75,9.461v-3.211H6.75V2.75h-2.5c-1.105,0-2,.895-2,2V13.25c0,1.105,.895,2,2,2h5.711"></path><line x1="17.25" y1="14.25" x2="12.25" y2="14.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/customize.svg b/src/browser/themes/shared/zen-icons/customize.svg
index 6ddec40ff..9b4daa6fa 100644
--- a/src/browser/themes/shared/zen-icons/customize.svg
+++ b/src/browser/themes/shared/zen-icons/customize.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="10.25 12.75 12.75 15.25 15.25 12.75" data-color="color-2"></polyline><polyline points="15.25 5.25 12.75 2.75 10.25 5.25" data-color="color-2"></polyline><line x1="12.75" y1="15" x2="12.75" y2="3" data-color="color-2"></line><rect x="2.75" y="10.25" width="5" height="5" rx="1" ry="1"></rect><rect x="2.75" y="2.75" width="5" height="5" rx="1" ry="1"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="10.25 12.75 12.75 15.25 15.25 12.75" data-color="color-2"></polyline><polyline points="15.25 5.25 12.75 2.75 10.25 5.25" data-color="color-2"></polyline><line x1="12.75" y1="15" x2="12.75" y2="3" data-color="color-2"></line><rect x="2.75" y="10.25" width="5" height="5" rx="1" ry="1"></rect><rect x="2.75" y="2.75" width="5" height="5" rx="1" ry="1"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/desktop-notification-blocked.svg b/src/browser/themes/shared/zen-icons/desktop-notification-blocked.svg
index 4ab923e16..4a9ed8660 100644
--- a/src/browser/themes/shared/zen-icons/desktop-notification-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/desktop-notification-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.368,4.632c-.726-1.694-2.408-2.882-4.368-2.882h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2h2.5"></path><path d="M8,13.25h7.75c-1.105,0-2-.895-2-2v-3.5"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.368,4.632c-.726-1.694-2.408-2.882-4.368-2.882h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2h2.5"></path><path d="M8,13.25h7.75c-1.105,0-2-.895-2-2v-3.5"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/desktop-notification.svg b/src/browser/themes/shared/zen-icons/desktop-notification.svg
index 866964cd8..2647272ed 100644
--- a/src/browser/themes/shared/zen-icons/desktop-notification.svg
+++ b/src/browser/themes/shared/zen-icons/desktop-notification.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.75,13.25c-1.105,0-2-.895-2-2V6.5c0-2.623-2.127-4.75-4.75-4.75h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2H15.75Z"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.75,13.25c-1.105,0-2-.895-2-2V6.5c0-2.623-2.127-4.75-4.75-4.75h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2H15.75Z"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/developer.svg b/src/browser/themes/shared/zen-icons/developer.svg
index b2bcbe3ae..fd575bff4 100644
--- a/src/browser/themes/shared/zen-icons/developer.svg
+++ b/src/browser/themes/shared/zen-icons/developer.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="11.75" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.25" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><path d="M6.25,15.25h-1c-1.105,0-2-.895-2-2v-2.625c0-.897-.728-1.625-1.625-1.625,.897,0,1.625-.728,1.625-1.625v-2.625c0-1.105,.895-2,2-2h1"></path><path d="M11.75,15.25h1c1.105,0,2-.895,2-2v-2.625c0-.897,.728-1.625,1.625-1.625-.897,0-1.625-.728-1.625-1.625v-2.625c0-1.105-.895-2-2-2h-1"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="11.75" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.25" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><path d="M6.25,15.25h-1c-1.105,0-2-.895-2-2v-2.625c0-.897-.728-1.625-1.625-1.625,.897,0,1.625-.728,1.625-1.625v-2.625c0-1.105,.895-2,2-2h1"></path><path d="M11.75,15.25h1c1.105,0,2-.895,2-2v-2.625c0-.897,.728-1.625,1.625-1.625-.897,0-1.625-.728-1.625-1.625v-2.625c0-1.105-.895-2-2-2h-1"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/downloads.svg b/src/browser/themes/shared/zen-icons/downloads.svg
index 6fc5ab26a..271fe59dc 100644
--- a/src/browser/themes/shared/zen-icons/downloads.svg
+++ b/src/browser/themes/shared/zen-icons/downloads.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.25,11.75v1.5c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2v-1.5"></path><polyline points="5.5 6.75 9 10.25 12.5 6.75" data-color="color-2"></polyline><line x1="9" y1="10.25" x2="9" y2="2.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.25,11.75v1.5c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2v-1.5"></path><polyline points="5.5 6.75 9 10.25 12.5 6.75" data-color="color-2"></polyline><line x1="9" y1="10.25" x2="9" y2="2.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/drag-indicator.svg b/src/browser/themes/shared/zen-icons/drag-indicator.svg
index 97b4bb120..1fbf86104 100644
--- a/src/browser/themes/shared/zen-icons/drag-indicator.svg
+++ b/src/browser/themes/shared/zen-icons/drag-indicator.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="6.75" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="6.75" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="6.75" cy="14.25" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="11.25" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="14.25" r=".5" fill="currentColor"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="6.75" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="6.75" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="6.75" cy="14.25" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="11.25" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="14.25" r=".5" fill="currentColor"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/duplicate-tab.svg b/src/browser/themes/shared/zen-icons/duplicate-tab.svg
index 67e321267..feda9b8ef 100644
--- a/src/browser/themes/shared/zen-icons/duplicate-tab.svg
+++ b/src/browser/themes/shared/zen-icons/duplicate-tab.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.25" y="5.25" width="11" height="11" rx="2" ry="2"></rect><path d="M2.801,11.998L1.772,5.074c-.162-1.093,.592-2.11,1.684-2.272l6.924-1.029c.933-.139,1.81,.39,2.148,1.228" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.25" y="5.25" width="11" height="11" rx="2" ry="2"></rect><path d="M2.801,11.998L1.772,5.074c-.162-1.093,.592-2.11,1.684-2.272l6.924-1.029c.933-.139,1.81,.39,2.148,1.228" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-copy.svg b/src/browser/themes/shared/zen-icons/edit-copy.svg
index 0f4e4f2b5..20f72247b 100644
--- a/src/browser/themes/shared/zen-icons/edit-copy.svg
+++ b/src/browser/themes/shared/zen-icons/edit-copy.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-cut.svg b/src/browser/themes/shared/zen-icons/edit-cut.svg
index e461be2cd..601fdd3cb 100644
--- a/src/browser/themes/shared/zen-icons/edit-cut.svg
+++ b/src/browser/themes/shared/zen-icons/edit-cut.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="12.75" y1="7.75" x2="16.25" y2="7.75" data-color="color-2"></line><line x1="4" y1="7.75" x2="9.25" y2="7.75" data-color="color-2"></line><circle cx="4" cy="5.5" r="2.25" data-color="color-2"></circle><line x1="5.409" y1="11.659" x2="14" y2="3"></line><circle cx="7" cy="13.25" r="2.25"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="12.75" y1="7.75" x2="16.25" y2="7.75" data-color="color-2"></line><line x1="4" y1="7.75" x2="9.25" y2="7.75" data-color="color-2"></line><circle cx="4" cy="5.5" r="2.25" data-color="color-2"></circle><line x1="5.409" y1="11.659" x2="14" y2="3"></line><circle cx="7" cy="13.25" r="2.25"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-delete.svg b/src/browser/themes/shared/zen-icons/edit-delete.svg
index 8bcfe2ad7..a0c77b63b 100644
--- a/src/browser/themes/shared/zen-icons/edit-delete.svg
+++ b/src/browser/themes/shared/zen-icons/edit-delete.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="m13.474,7.25l-.374,7.105c-.056,1.062-.934,1.895-1.997,1.895h-4.205c-1.064,0-1.941-.833-1.997-1.895l-.374-7.105"></path><line x1="2.75" y1="4.75" x2="15.25" y2="4.75" data-color="color-2"></line><path d="m6.75,4.75v-2c0-.552.448-1,1-1h2.5c.552,0,1,.448,1,1v2" data-color="color-2"></path><line x1="7.375" y1="8.75" x2="7.625" y2="13.25" data-color="color-2"></line><line x1="10.625" y1="8.75" x2="10.375" y2="13.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="m13.474,7.25l-.374,7.105c-.056,1.062-.934,1.895-1.997,1.895h-4.205c-1.064,0-1.941-.833-1.997-1.895l-.374-7.105"></path><line x1="2.75" y1="4.75" x2="15.25" y2="4.75" data-color="color-2"></line><path d="m6.75,4.75v-2c0-.552.448-1,1-1h2.5c.552,0,1,.448,1,1v2" data-color="color-2"></path><line x1="7.375" y1="8.75" x2="7.625" y2="13.25" data-color="color-2"></line><line x1="10.625" y1="8.75" x2="10.375" y2="13.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-paste.svg b/src/browser/themes/shared/zen-icons/edit-paste.svg
index ceb616c4a..a2a9e1f6a 100644
--- a/src/browser/themes/shared/zen-icons/edit-paste.svg
+++ b/src/browser/themes/shared/zen-icons/edit-paste.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.25,2.75h-1c-1.105,0-2,.895-2,2V14.25c0,1.105,.895,2,2,2h7.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1"></path><rect x="6.25" y="1.25" width="5.5" height="3" rx="1" ry="1" data-color="color-2"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.25,2.75h-1c-1.105,0-2,.895-2,2V14.25c0,1.105,.895,2,2,2h7.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1"></path><rect x="6.25" y="1.25" width="5.5" height="3" rx="1" ry="1" data-color="color-2"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-redo.svg b/src/browser/themes/shared/zen-icons/edit-redo.svg
index 39b73abb0..f08e25b4d 100644
--- a/src/browser/themes/shared/zen-icons/edit-redo.svg
+++ b/src/browser/themes/shared/zen-icons/edit-redo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15,10c-.528-.461-2.7-2.251-6-2.251s-5.472,1.79-6,2.251" data-color="color-2"></path><polyline points="13.375 5.598 15 10 10.47 11.222"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15,10c-.528-.461-2.7-2.251-6-2.251s-5.472,1.79-6,2.251" data-color="color-2"></path><polyline points="13.375 5.598 15 10 10.47 11.222"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-select-all.svg b/src/browser/themes/shared/zen-icons/edit-select-all.svg
index d90d0e5ed..e59c2a0ca 100644
--- a/src/browser/themes/shared/zen-icons/edit-select-all.svg
+++ b/src/browser/themes/shared/zen-icons/edit-select-all.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14.75" y1=".75" x2="14.75" y2="5.75" data-color="color-2"></line><line x1="17.25" y1="3.25" x2="12.25" y2="3.25" data-color="color-2"></line><path d="M2.25,5.25c0-1.105,.895-2,2-2"></path><path d="M14.75,13.75c0,1.105-.895,2-2,2"></path><path d="M4.25,15.75c-1.105,0-2-.895-2-2"></path><line x1="7.25" y1="3.25" x2="9.25" y2="3.25"></line><line x1="7.25" y1="15.75" x2="9.75" y2="15.75"></line><line x1="14.75" y1="8.75" x2="14.75" y2="10.75"></line><line x1="2.25" y1="8.25" x2="2.25" y2="10.75"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14.75" y1=".75" x2="14.75" y2="5.75" data-color="color-2"></line><line x1="17.25" y1="3.25" x2="12.25" y2="3.25" data-color="color-2"></line><path d="M2.25,5.25c0-1.105,.895-2,2-2"></path><path d="M14.75,13.75c0,1.105-.895,2-2,2"></path><path d="M4.25,15.75c-1.105,0-2-.895-2-2"></path><line x1="7.25" y1="3.25" x2="9.25" y2="3.25"></line><line x1="7.25" y1="15.75" x2="9.75" y2="15.75"></line><line x1="14.75" y1="8.75" x2="14.75" y2="10.75"></line><line x1="2.25" y1="8.25" x2="2.25" y2="10.75"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-theme.svg b/src/browser/themes/shared/zen-icons/edit-theme.svg
index f1a2a6a9e..97a2d2ade 100644
--- a/src/browser/themes/shared/zen-icons/edit-theme.svg
+++ b/src/browser/themes/shared/zen-icons/edit-theme.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.75,9.247l5.086-5.083c.552-.552,.552-1.448,0-2-.552-.552-1.448-.552-2,0l-5.094,5.096" data-color="color-2"></path><path d="M5.75,11.815c2.162,.65,3.917,.704,5.351-.764,.865-.868,.865-2.276,0-3.145s-2.261-.881-3.133,0c-1.418,1.434-.18,2.795-2.218,3.909Z" data-color="color-2"></path><path d="M16.25,8.284v4.966c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h6.965"></path><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.75,9.247l5.086-5.083c.552-.552,.552-1.448,0-2-.552-.552-1.448-.552-2,0l-5.094,5.096" data-color="color-2"></path><path d="M5.75,11.815c2.162,.65,3.917,.704,5.351-.764,.865-.868,.865-2.276,0-3.145s-2.261-.881-3.133,0c-1.418,1.434-.18,2.795-2.218,3.909Z" data-color="color-2"></path><path d="M16.25,8.284v4.966c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h6.965"></path><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit-undo.svg b/src/browser/themes/shared/zen-icons/edit-undo.svg
index 4e469ac9f..cf28988dd 100644
--- a/src/browser/themes/shared/zen-icons/edit-undo.svg
+++ b/src/browser/themes/shared/zen-icons/edit-undo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3,10c.528-.461,2.7-2.251,6-2.251s5.472,1.79,6,2.251" data-color="color-2"></path><polyline points="4.625 5.598 3 10 7.53 11.222"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3,10c.528-.461,2.7-2.251,6-2.251s5.472,1.79,6,2.251" data-color="color-2"></path><polyline points="4.625 5.598 3 10 7.53 11.222"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/edit.svg b/src/browser/themes/shared/zen-icons/edit.svg
index e5317afc1..052928b6b 100644
--- a/src/browser/themes/shared/zen-icons/edit.svg
+++ b/src/browser/themes/shared/zen-icons/edit.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.75,15.25s3.599-.568,4.546-1.515c.947-.947,7.327-7.327,7.327-7.327,.837-.837,.837-2.194,0-3.03-.837-.837-2.194-.837-3.03,0,0,0-6.38,6.38-7.327,7.327s-1.515,4.546-1.515,4.546h0Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.75,15.25s3.599-.568,4.546-1.515c.947-.947,7.327-7.327,7.327-7.327,.837-.837,.837-2.194,0-3.03-.837-.837-2.194-.837-3.03,0,0,0-6.38,6.38-7.327,7.327s-1.515,4.546-1.515,4.546h0Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/essential-add.svg b/src/browser/themes/shared/zen-icons/essential-add.svg
index f814e9540..622d39314 100644
--- a/src/browser/themes/shared/zen-icons/essential-add.svg
+++ b/src/browser/themes/shared/zen-icons/essential-add.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M8.743,7.769l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><path d="M15.144,9.976c.52-.995,.856-2.117,.856-3.367,.008-2.12-1.704-3.846-3.826-3.859-1.277,.016-2.464,.66-3.174,1.72-.709-1.061-1.896-1.704-3.173-1.72-2.123,.013-3.834,1.739-3.826,3.859,0,4.826,4.959,7.794,6.529,8.613,.297,.155,.644,.155,.941,0,.114-.059,.249-.133,.395-.214"></path><path d="M15.658,12.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><circle cx="12.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M8.743,7.769l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><path d="M15.144,9.976c.52-.995,.856-2.117,.856-3.367,.008-2.12-1.704-3.846-3.826-3.859-1.277,.016-2.464,.66-3.174,1.72-.709-1.061-1.896-1.704-3.173-1.72-2.123,.013-3.834,1.739-3.826,3.859,0,4.826,4.959,7.794,6.529,8.613,.297,.155,.644,.155,.941,0,.114-.059,.249-.133,.395-.214"></path><path d="M15.658,12.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><circle cx="12.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/essential-remove.svg b/src/browser/themes/shared/zen-icons/essential-remove.svg
index 69ac1eb92..6675d71a1 100644
--- a/src/browser/themes/shared/zen-icons/essential-remove.svg
+++ b/src/browser/themes/shared/zen-icons/essential-remove.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="8.999 4.927 7.75 7 10.5 8.75 8.5 10.75" data-color="color-2"></polyline><path d="M15.2,9.222l-5.48,5.694c-.393,.409-1.048,.409-1.441,0L2.799,9.222c-1.452-1.528-1.389-3.944,.139-5.395,1.528-1.452,3.944-1.389,5.395,.139,.27,.284,.495,.609,.666,.962,1.074-2.212,4.002-2.92,6.007-1.162,.535,.469,.929,1.101,1.11,1.79,.363,1.383-.034,2.738-.916,3.666Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="8.999 4.927 7.75 7 10.5 8.75 8.5 10.75" data-color="color-2"></polyline><path d="M15.2,9.222l-5.48,5.694c-.393,.409-1.048,.409-1.441,0L2.799,9.222c-1.452-1.528-1.389-3.944,.139-5.395,1.528-1.452,3.944-1.389,5.395,.139,.27,.284,.495,.609,.666,.962,1.074-2.212,4.002-2.92,6.007-1.162,.535,.469,.929,1.101,1.11,1.79,.363,1.383-.034,2.738-.916,3.666Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/expand-sidebar.svg b/src/browser/themes/shared/zen-icons/expand-sidebar.svg
index a72ec63ba..04da277e5 100644
--- a/src/browser/themes/shared/zen-icons/expand-sidebar.svg
+++ b/src/browser/themes/shared/zen-icons/expand-sidebar.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="6.25" y1="12.5" x2="6.25" y2="15.25" data-color="color-2"></line><line x1="6.25" y1="2.75" x2="6.25" y2="5.5" data-color="color-2"></line><polyline points="8.75 6.5 6.25 9 8.75 11.5" data-color="color-2"></polyline><line x1="6.25" y1="9" x2="12.75" y2="9" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="6.25" y1="12.5" x2="6.25" y2="15.25" data-color="color-2"></line><line x1="6.25" y1="2.75" x2="6.25" y2="5.5" data-color="color-2"></line><polyline points="8.75 6.5 6.25 9 8.75 11.5" data-color="color-2"></polyline><line x1="6.25" y1="9" x2="12.75" y2="9" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/ext-link.svg b/src/browser/themes/shared/zen-icons/ext-link.svg
index 089c65e22..ec5374e08 100644
--- a/src/browser/themes/shared/zen-icons/ext-link.svg
+++ b/src/browser/themes/shared/zen-icons/ext-link.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.25,9.25V3.75c0-1.105,.895-2,2-2h6c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2H7.25"></path><polyline points="7.24 6.75 11.25 6.75 11.25 10.76" data-color="color-2"></polyline><line x1="11.25" y1="6.75" x2="1.75" y2="16.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.25,9.25V3.75c0-1.105,.895-2,2-2h6c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2H7.25"></path><polyline points="7.24 6.75 11.25 6.75 11.25 10.76" data-color="color-2"></polyline><line x1="11.25" y1="6.75" x2="1.75" y2="16.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/extension-blocked.svg b/src/browser/themes/shared/zen-icons/extension-blocked.svg
index 66278262e..8911071a4 100644
--- a/src/browser/themes/shared/zen-icons/extension-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/extension-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.266"></path><path d="M15.726,8.516c-.117-.993-.952-1.766-1.976-1.766H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h4.141"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.266"></path><path d="M15.726,8.516c-.117-.993-.952-1.766-1.976-1.766H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h4.141"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/extension.svg b/src/browser/themes/shared/zen-icons/extension.svg
index f462ae524..7b5ebe938 100644
--- a/src/browser/themes/shared/zen-icons/extension.svg
+++ b/src/browser/themes/shared/zen-icons/extension.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.75,8.25c.372,0,.716,.118,1,.317v-2.317c0-1.104-.895-2-2-2h-2.317c.198-.284,.317-.627,.317-1,0-.967-.784-1.75-1.75-1.75s-1.75,.783-1.75,1.75c0,.373,.118,.716,.317,1h-2.317c-1.105,0-2,.896-2,2v2.317c-.284-.198-.628-.317-1-.317-.966,0-1.75,.783-1.75,1.75s.784,1.75,1.75,1.75c.372,0,.716-.118,1-.317v2.317c0,1.104,.895,2,2,2h2.317c-.198-.284-.317-.627-.317-1,0-.967,.784-1.75,1.75-1.75s1.75,.783,1.75,1.75c0,.373-.118,.716-.317,1h2.317c1.105,0,2-.896,2-2v-2.317c-.284,.198-.628,.317-1,.317-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.75,8.25c.372,0,.716,.118,1,.317v-2.317c0-1.104-.895-2-2-2h-2.317c.198-.284,.317-.627,.317-1,0-.967-.784-1.75-1.75-1.75s-1.75,.783-1.75,1.75c0,.373,.118,.716,.317,1h-2.317c-1.105,0-2,.896-2,2v2.317c-.284-.198-.628-.317-1-.317-.966,0-1.75,.783-1.75,1.75s.784,1.75,1.75,1.75c.372,0,.716-.118,1-.317v2.317c0,1.104,.895,2,2,2h2.317c-.198-.284-.317-.627-.317-1,0-.967,.784-1.75,1.75-1.75s1.75,.783,1.75,1.75c0,.373-.118,.716-.317,1h2.317c1.105,0,2-.896,2-2v-2.317c-.284,.198-.628,.317-1,.317-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/folder.svg b/src/browser/themes/shared/zen-icons/folder.svg
index 410313bfe..6c5fe3631 100644
--- a/src/browser/themes/shared/zen-icons/folder.svg
+++ b/src/browser/themes/shared/zen-icons/folder.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.25c1.105,0,2,.895,2,2v5.5c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.25c1.105,0,2,.895,2,2v5.5c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/forget.svg b/src/browser/themes/shared/zen-icons/forget.svg
index d02a1961a..79f824519 100644
--- a/src/browser/themes/shared/zen-icons/forget.svg
+++ b/src/browser/themes/shared/zen-icons/forget.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="9 4.75 9 9 12.25 11.25" data-color="color-2"></polyline><path d="M1.75,9C1.75,4.996,4.996,1.75,9,1.75s7.25,3.246,7.25,7.25-3.246,7.25-7.25,7.25c-3.031,0-5.627-1.86-6.71-4.5"></path><polyline points="1.88 14.695 2.288 11.75 5.232 12.157"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="9 4.75 9 9 12.25 11.25" data-color="color-2"></polyline><path d="M1.75,9C1.75,4.996,4.996,1.75,9,1.75s7.25,3.246,7.25,7.25-3.246,7.25-7.25,7.25c-3.031,0-5.627-1.86-6.71-4.5"></path><polyline points="1.88 14.695 2.288 11.75 5.232 12.157"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/forward.svg b/src/browser/themes/shared/zen-icons/forward.svg
index da06af2c8..73619dc37 100644
--- a/src/browser/themes/shared/zen-icons/forward.svg
+++ b/src/browser/themes/shared/zen-icons/forward.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="15.25" y1="9" x2="2.75" y2="9" data-color="color-2"></line><polyline points="11 4.75 15.25 9 11 13.25"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="15.25" y1="9" x2="2.75" y2="9" data-color="color-2"></line><polyline points="11 4.75 15.25 9 11 13.25"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/fullscreen-exit.svg b/src/browser/themes/shared/zen-icons/fullscreen-exit.svg
index eb189574b..43c6448a1 100644
--- a/src/browser/themes/shared/zen-icons/fullscreen-exit.svg
+++ b/src/browser/themes/shared/zen-icons/fullscreen-exit.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 7.25 7.25 7.25 7.25 2.75"></polyline><line x1="7.25" y1="7.25" x2="2.75" y2="2.75"></line><polyline points="10.75 15.25 10.75 10.75 15.25 10.75" data-color="color-2"></polyline><line x1="10.75" y1="10.75" x2="15.25" y2="15.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 7.25 7.25 7.25 7.25 2.75"></polyline><line x1="7.25" y1="7.25" x2="2.75" y2="2.75"></line><polyline points="10.75 15.25 10.75 10.75 15.25 10.75" data-color="color-2"></polyline><line x1="10.75" y1="10.75" x2="15.25" y2="15.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/fullscreen.svg b/src/browser/themes/shared/zen-icons/fullscreen.svg
index 08ec0056e..4d0bb47b7 100644
--- a/src/browser/themes/shared/zen-icons/fullscreen.svg
+++ b/src/browser/themes/shared/zen-icons/fullscreen.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="10.75 2.75 15.25 2.75 15.25 7.25"></polyline><line x1="15.25" y1="2.75" x2="10.75" y2="7.25"></line><polyline points="2.75 10.75 2.75 15.25 7.25 15.25" data-color="color-2"></polyline><line x1="2.75" y1="15.25" x2="7.25" y2="10.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="10.75 2.75 15.25 2.75 15.25 7.25"></polyline><line x1="15.25" y1="2.75" x2="10.75" y2="7.25"></line><polyline points="2.75 10.75 2.75 15.25 7.25 15.25" data-color="color-2"></polyline><line x1="2.75" y1="15.25" x2="7.25" y2="10.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/geo-blocked.svg b/src/browser/themes/shared/zen-icons/geo-blocked.svg
index 52a9b5377..0f803e128 100644
--- a/src/browser/themes/shared/zen-icons/geo-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/geo-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.526,12.474c-1.226-1.765-2.305-3.736-2.305-5.208C3.221,3.776,6.207,1.75,9,1.75c1.819,0,3.721,.86,4.826,2.424"></path><path d="M14.759,6.776c.013,.16,.02,.323,.02,.49,0,2.622-3.428,6.833-5.004,8.631-.413,.471-1.139,.471-1.551,0-.329-.375-.739-.856-1.181-1.405"></path><path d="M8.752,9.233c-.849-.12-1.502-.85-1.502-1.733,0-.966,.784-1.75,1.75-1.75,.887,0,1.62,.66,1.735,1.516"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.526,12.474c-1.226-1.765-2.305-3.736-2.305-5.208C3.221,3.776,6.207,1.75,9,1.75c1.819,0,3.721,.86,4.826,2.424"></path><path d="M14.759,6.776c.013,.16,.02,.323,.02,.49,0,2.622-3.428,6.833-5.004,8.631-.413,.471-1.139,.471-1.551,0-.329-.375-.739-.856-1.181-1.405"></path><path d="M8.752,9.233c-.849-.12-1.502-.85-1.502-1.733,0-.966,.784-1.75,1.75-1.75,.887,0,1.62,.66,1.735,1.516"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/geo.svg b/src/browser/themes/shared/zen-icons/geo.svg
index bf395d4d4..0d0c7444e 100644
--- a/src/browser/themes/shared/zen-icons/geo.svg
+++ b/src/browser/themes/shared/zen-icons/geo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.779,7.266c0,2.622-3.428,6.833-5.004,8.631-.413,.471-1.139,.471-1.551,0-1.576-1.797-5.004-6.008-5.004-8.631C3.221,3.776,6.207,1.75,9,1.75s5.779,2.026,5.779,5.516Z"></path><circle cx="9" cy="7.5" r="1.75" data-color="color-2"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.779,7.266c0,2.622-3.428,6.833-5.004,8.631-.413,.471-1.139,.471-1.551,0-1.576-1.797-5.004-6.008-5.004-8.631C3.221,3.776,6.207,1.75,9,1.75s5.779,2.026,5.779,5.516Z"></path><circle cx="9" cy="7.5" r="1.75" data-color="color-2"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/help.svg b/src/browser/themes/shared/zen-icons/help.svg
index 95db53598..e0fa2e29f 100644
--- a/src/browser/themes/shared/zen-icons/help.svg
+++ b/src/browser/themes/shared/zen-icons/help.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r="7.25"></circle><path d="M6.925,6.619c.388-1.057,1.294-1.492,2.18-1.492,.895,0,1.818,.638,1.818,1.808,0,1.784-1.816,1.468-2.096,3.065" data-color="color-2"></path><path d="M8.791,13.567c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r="7.25"></circle><path d="M6.925,6.619c.388-1.057,1.294-1.492,2.18-1.492,.895,0,1.818,.638,1.818,1.808,0,1.784-1.816,1.468-2.096,3.065" data-color="color-2"></path><path d="M8.791,13.567c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/history.svg b/src/browser/themes/shared/zen-icons/history.svg
index 9d853baef..f89b5b653 100644
--- a/src/browser/themes/shared/zen-icons/history.svg
+++ b/src/browser/themes/shared/zen-icons/history.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,9c0,4.004,3.246,7.25,7.25,7.25s7.25-3.246,7.25-7.25S13.004,1.75,9,1.75c-3.031,0-5.627,1.86-6.71,4.5"></path><polyline points="1.88 3.305 2.288 6.25 5.232 5.843"></polyline><polyline points="9 4.75 9 9 12.25 11.25" data-color="color-2"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,9c0,4.004,3.246,7.25,7.25,7.25s7.25-3.246,7.25-7.25S13.004,1.75,9,1.75c-3.031,0-5.627,1.86-6.71,4.5"></path><polyline points="1.88 3.305 2.288 6.25 5.232 5.843"></polyline><polyline points="9 4.75 9 9 12.25 11.25" data-color="color-2"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/home.svg b/src/browser/themes/shared/zen-icons/home.svg
index f4a3273d7..962b7b345 100644
--- a/src/browser/themes/shared/zen-icons/home.svg
+++ b/src/browser/themes/shared/zen-icons/home.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.145,6.2l5.25-3.99c.358-.272,.853-.272,1.21,0l5.25,3.99c.249,.189,.395,.484,.395,.796v7.254c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2V6.996c0-.313,.146-.607,.395-.796Z"></path><path d="M11.652,12.152c-1.464,1.464-3.839,1.464-5.303,0" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.145,6.2l5.25-3.99c.358-.272,.853-.272,1.21,0l5.25,3.99c.249,.189,.395,.484,.395,.796v7.254c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2V6.996c0-.313,.146-.607,.395-.796Z"></path><path d="M11.652,12.152c-1.464,1.464-3.839,1.464-5.303,0" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/image-copy.svg b/src/browser/themes/shared/zen-icons/image-copy.svg
index b8df4d044..afa7e00bb 100644
--- a/src/browser/themes/shared/zen-icons/image-copy.svg
+++ b/src/browser/themes/shared/zen-icons/image-copy.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.587,12.243l5.206-5.2c.391-.391,1.024-.391,1.414,0l3.043,3.043" data-color="color-2"></path><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect><path d="M8,7c-.551,0-1-.449-1-1s.449-1,1-1,1,.449,1,1-.449,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.587,12.243l5.206-5.2c.391-.391,1.024-.391,1.414,0l3.043,3.043" data-color="color-2"></path><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect><path d="M8,7c-.551,0-1-.449-1-1s.449-1,1-1,1,.449,1,1-.449,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/image-open.svg b/src/browser/themes/shared/zen-icons/image-open.svg
index 677757e66..15201ba80 100644
--- a/src/browser/themes/shared/zen-icons/image-open.svg
+++ b/src/browser/themes/shared/zen-icons/image-open.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4,15.25l5.836-5.836c.781-.781,2.047-.781,2.828,0l3.086,3.086" data-color="color-2"></path><rect x="2.25" y="4.75" width="13.5" height="10.5" rx="2" ry="2"></rect><line x1="4.75" y1="1.75" x2="13.25" y2="1.75" data-color="color-2"></line><circle cx="5.75" cy="8.25" r="1.25" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4,15.25l5.836-5.836c.781-.781,2.047-.781,2.828,0l3.086,3.086" data-color="color-2"></path><rect x="2.25" y="4.75" width="13.5" height="10.5" rx="2" ry="2"></rect><line x1="4.75" y1="1.75" x2="13.25" y2="1.75" data-color="color-2"></line><circle cx="5.75" cy="8.25" r="1.25" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/image-save.svg b/src/browser/themes/shared/zen-icons/image-save.svg
index 3278cba0d..60372f9a5 100644
--- a/src/browser/themes/shared/zen-icons/image-save.svg
+++ b/src/browser/themes/shared/zen-icons/image-save.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="m3.762,14.989l6.074-6.075c.781-.781,2.047-.781,2.828,0l2.586,2.586"></path><circle cx="6.25" cy="7.25" r="1.25" stroke-width="0" fill="currentColor"></circle><line x1="14.25" y1="1.25" x2="14.25" y2="6.25" data-color="color-2"></line><path d="m9.461,2.75h-4.711c-1.1046,0-2,.8955-2,2v8.5c0,1.1045.8954,2,2,2h8.5c1.1046,0,2-.8955,2-2v-4.7109"></path><line x1="16.75" y1="3.75" x2="11.75" y2="3.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="m3.762,14.989l6.074-6.075c.781-.781,2.047-.781,2.828,0l2.586,2.586"></path><circle cx="6.25" cy="7.25" r="1.25" stroke-width="0" fill="currentColor"></circle><line x1="14.25" y1="1.25" x2="14.25" y2="6.25" data-color="color-2"></line><path d="m9.461,2.75h-4.711c-1.1046,0-2,.8955-2,2v8.5c0,1.1045.8954,2,2,2h8.5c1.1046,0,2-.8955,2-2v-4.7109"></path><line x1="16.75" y1="3.75" x2="11.75" y2="3.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/info.svg b/src/browser/themes/shared/zen-icons/info.svg
index 9db7c53f9..67e41ad96 100644
--- a/src/browser/themes/shared/zen-icons/info.svg
+++ b/src/browser/themes/shared/zen-icons/info.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r="7.25"></circle><line x1="9" y1="12.819" x2="9" y2="8.25" data-color="color-2"></line><path d="M9,6.75c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r="7.25"></circle><line x1="9" y1="12.819" x2="9" y2="8.25" data-color="color-2"></line><path d="M9,6.75c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/inspect.svg b/src/browser/themes/shared/zen-icons/inspect.svg
index cdab4a408..0ba2bd2bf 100644
--- a/src/browser/themes/shared/zen-icons/inspect.svg
+++ b/src/browser/themes/shared/zen-icons/inspect.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="14 6.25 16.25 4 14 1.75" data-color="color-2"></polyline><path d="M6.596,2.75h-1.846c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2H13.25c1.105,0,2-.896,2-2v-4.846"></path><polyline points="11 6.25 8.75 4 11 1.75" data-color="color-2"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="14 6.25 16.25 4 14 1.75" data-color="color-2"></polyline><path d="M6.596,2.75h-1.846c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2H13.25c1.105,0,2-.896,2-2v-4.846"></path><polyline points="11 6.25 8.75 4 11 1.75" data-color="color-2"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/library.svg b/src/browser/themes/shared/zen-icons/library.svg
index b623e3383..00c43ccdf 100644
--- a/src/browser/themes/shared/zen-icons/library.svg
+++ b/src/browser/themes/shared/zen-icons/library.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="2.75" width="4" height="12.5" rx="1" ry="1"></rect><rect x="2.75" y="4.75" width="3" height="10.5" rx="1" ry="1"></rect><rect x="11.235" y="4.719" width="3.5" height="10.5" rx="1" ry="1" transform="translate(-2.382 4.324) rotate(-17.344)"></rect><line x1="10.934" y1="9.272" x2="14.275" y2="8.228"></line><line x1="5.75" y1="7.25" x2="9.75" y2="7.25"></line><line x1="2.75" y1="8.75" x2="5.75" y2="8.75"></line><line x1="1" y1="15.25" x2="17" y2="15.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="2.75" width="4" height="12.5" rx="1" ry="1"></rect><rect x="2.75" y="4.75" width="3" height="10.5" rx="1" ry="1"></rect><rect x="11.235" y="4.719" width="3.5" height="10.5" rx="1" ry="1" transform="translate(-2.382 4.324) rotate(-17.344)"></rect><line x1="10.934" y1="9.272" x2="14.275" y2="8.228"></line><line x1="5.75" y1="7.25" x2="9.75" y2="7.25"></line><line x1="2.75" y1="8.75" x2="5.75" y2="8.75"></line><line x1="1" y1="15.25" x2="17" y2="15.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/link.svg b/src/browser/themes/shared/zen-icons/link.svg
index 5f1c21e95..24f91be91 100644
--- a/src/browser/themes/shared/zen-icons/link.svg
+++ b/src/browser/themes/shared/zen-icons/link.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" data-color="color-2"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" data-color="color-2"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/manage.svg b/src/browser/themes/shared/zen-icons/manage.svg
index 879093489..890b0ab0e 100644
--- a/src/browser/themes/shared/zen-icons/manage.svg
+++ b/src/browser/themes/shared/zen-icons/manage.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="4.25" y="3.25" width="9.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><line x1="1.25" y1="3.75" x2="1.25" y2="14.25" data-color="color-2"></line><line x1="16.75" y1="3.75" x2="16.75" y2="14.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="4.25" y="3.25" width="9.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><line x1="1.25" y1="3.75" x2="1.25" y2="14.25" data-color="color-2"></line><line x1="16.75" y1="3.75" x2="16.75" y2="14.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-loop.svg b/src/browser/themes/shared/zen-icons/media-loop.svg
index 347399d89..9b33cee66 100644
--- a/src/browser/themes/shared/zen-icons/media-loop.svg
+++ b/src/browser/themes/shared/zen-icons/media-loop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,13.75h-.75c-1.105,0-2-.895-2-2V6.25c0-1.105,.895-2,2-2H13.75c1.105,0,2,.895,2,2v5.5c0,1.105-.895,2-2,2h-5.742" data-color="color-2"></path><polyline points="10.5 11.25 8.008 13.742 10.5 16.235"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,13.75h-.75c-1.105,0-2-.895-2-2V6.25c0-1.105,.895-2,2-2H13.75c1.105,0,2,.895,2,2v5.5c0,1.105-.895,2-2,2h-5.742" data-color="color-2"></path><polyline points="10.5 11.25 8.008 13.742 10.5 16.235"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-mute.svg b/src/browser/themes/shared/zen-icons/media-mute.svg
index d97c674da..c7536b3d0 100644
--- a/src/browser/themes/shared/zen-icons/media-mute.svg
+++ b/src/browser/themes/shared/zen-icons/media-mute.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.143V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508H3.75c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.63"></path><path d="M9,13.21l3.981,2.548c.333,.213,.77-.026,.77-.421v-6.72"></path><line x1="2.75" y1="15.75" x2="16.75" y2="2.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.143V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508H3.75c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.63"></path><path d="M9,13.21l3.981,2.548c.333,.213,.77-.026,.77-.421v-6.72"></path><line x1="2.75" y1="15.75" x2="16.75" y2="2.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-pause.svg b/src/browser/themes/shared/zen-icons/media-pause.svg
index f6bdbdafb..0c8282871 100644
--- a/src/browser/themes/shared/zen-icons/media-pause.svg
+++ b/src/browser/themes/shared/zen-icons/media-pause.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1"></rect><rect x="11.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1" data-color="color-2"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1"></rect><rect x="11.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1" data-color="color-2"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-pip.svg b/src/browser/themes/shared/zen-icons/media-pip.svg
index 4ef02df2b..16952aa99 100644
--- a/src/browser/themes/shared/zen-icons/media-pip.svg
+++ b/src/browser/themes/shared/zen-icons/media-pip.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,12.25h-2c-1.105,0-2-.895-2-2V5.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v2"></path><rect x="8.75" y="10.75" width="7.5" height="4.5" rx="1.5" ry="1.5"></rect><polyline points="7.25 6.25 7.25 9.25 4.25 9.25" data-color="color-2"></polyline><line x1="7.25" y1="9.25" x2="4.25" y2="6.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,12.25h-2c-1.105,0-2-.895-2-2V5.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v2"></path><rect x="8.75" y="10.75" width="7.5" height="4.5" rx="1.5" ry="1.5"></rect><polyline points="7.25 6.25 7.25 9.25 4.25 9.25" data-color="color-2"></polyline><line x1="7.25" y1="9.25" x2="4.25" y2="6.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-play.svg b/src/browser/themes/shared/zen-icons/media-play.svg
index 7cf4f6039..0cf03d66b 100644
--- a/src/browser/themes/shared/zen-icons/media-play.svg
+++ b/src/browser/themes/shared/zen-icons/media-play.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z" data-color="color-2"></path><path d="M4.987,2.961c.778-.518,1.662-.89,2.612-1.075"></path><path d="M1.879,7.631c.185-.968,.562-1.867,1.091-2.657"></path><path d="M4.987,15.039c.778,.518,1.662,.89,2.612,1.075"></path><path d="M1.879,10.369c.185,.968,.562,1.867,1.091,2.657"></path><path d="M10.435,1.892c3.317,.666,5.815,3.595,5.815,7.108s-2.499,6.443-5.817,7.108"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z" data-color="color-2"></path><path d="M4.987,2.961c.778-.518,1.662-.89,2.612-1.075"></path><path d="M1.879,7.631c.185-.968,.562-1.867,1.091-2.657"></path><path d="M4.987,15.039c.778,.518,1.662,.89,2.612,1.075"></path><path d="M1.879,10.369c.185,.968,.562,1.867,1.091,2.657"></path><path d="M10.435,1.892c3.317,.666,5.815,3.595,5.815,7.108s-2.499,6.443-5.817,7.108"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-speed.svg b/src/browser/themes/shared/zen-icons/media-speed.svg
index 3cb15775c..8ac325445 100644
--- a/src/browser/themes/shared/zen-icons/media-speed.svg
+++ b/src/browser/themes/shared/zen-icons/media-speed.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="12" r="1" fill="currentColor" data-color="color-2"></circle><path d="M12.75,12.25h3.487c.003-.083,.013-.166,.013-.25,0-4.004-3.246-7.25-7.25-7.25S1.75,7.996,1.75,12c0,.084,.01,.167,.013,.25h3.487"></path><line x1="8.495" y1="11.137" x2="6.557" y2="7.827" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="12" r="1" fill="currentColor" data-color="color-2"></circle><path d="M12.75,12.25h3.487c.003-.083,.013-.166,.013-.25,0-4.004-3.246-7.25-7.25-7.25S1.75,7.996,1.75,12c0,.084,.01,.167,.013,.25h3.487"></path><line x1="8.495" y1="11.137" x2="6.557" y2="7.827" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/media-unmute.svg b/src/browser/themes/shared/zen-icons/media-unmute.svg
index dc630d8a5..f21b4c813 100644
--- a/src/browser/themes/shared/zen-icons/media-unmute.svg
+++ b/src/browser/themes/shared/zen-icons/media-unmute.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/menu-bar.svg b/src/browser/themes/shared/zen-icons/menu-bar.svg
index f843149e2..500b485af 100644
--- a/src/browser/themes/shared/zen-icons/menu-bar.svg
+++ b/src/browser/themes/shared/zen-icons/menu-bar.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="9" cy="3.25" r=".5" fill="currentColor"></circle><circle cx="9" cy="14.75" r=".5" fill="currentColor"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="9" cy="3.25" r=".5" fill="currentColor"></circle><circle cx="9" cy="14.75" r=".5" fill="currentColor"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/menu.svg b/src/browser/themes/shared/zen-icons/menu.svg
index dc211f56a..fa8906b3f 100644
--- a/src/browser/themes/shared/zen-icons/menu.svg
+++ b/src/browser/themes/shared/zen-icons/menu.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="3.25" cy="9" r=".5" fill="currentColor"></circle><circle cx="14.75" cy="9" r=".5" fill="currentColor"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="3.25" cy="9" r=".5" fill="currentColor"></circle><circle cx="14.75" cy="9" r=".5" fill="currentColor"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/microphone-blocked.svg b/src/browser/themes/shared/zen-icons/microphone-blocked.svg
index e0c5193bc..60801b32a 100644
--- a/src/browser/themes/shared/zen-icons/microphone-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/microphone-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="1.75" width="6.5" height="9.5" rx="3.25" ry="3.25"></rect><path d="M5.109,12.891c-1.437-1.145-2.359-2.911-2.359-4.891" data-color="color-2"></path><path d="M15.25,8c0,3.452-2.798,6.25-6.25,6.25h0c-.527,0-1.038-.065-1.527-.188" data-color="color-2"></path><line x1="9" y1="14.25" x2="9" y2="16.25" data-color="color-2"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="1.75" width="6.5" height="9.5" rx="3.25" ry="3.25"></rect><path d="M5.109,12.891c-1.437-1.145-2.359-2.911-2.359-4.891" data-color="color-2"></path><path d="M15.25,8c0,3.452-2.798,6.25-6.25,6.25h0c-.527,0-1.038-.065-1.527-.188" data-color="color-2"></path><line x1="9" y1="14.25" x2="9" y2="16.25" data-color="color-2"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/microphone.svg b/src/browser/themes/shared/zen-icons/microphone.svg
index 2ff9811d9..abdc0c9e7 100644
--- a/src/browser/themes/shared/zen-icons/microphone.svg
+++ b/src/browser/themes/shared/zen-icons/microphone.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="1.75" width="6.5" height="9.5" rx="3.25" ry="3.25"></rect><path d="M15.25,8c0,3.452-2.798,6.25-6.25,6.25h0c-3.452,0-6.25-2.798-6.25-6.25" data-color="color-2"></path><line x1="9" y1="14.25" x2="9" y2="16.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.75" y="1.75" width="6.5" height="9.5" rx="3.25" ry="3.25"></rect><path d="M15.25,8c0,3.452-2.798,6.25-6.25,6.25h0c-3.452,0-6.25-2.798-6.25-6.25" data-color="color-2"></path><line x1="9" y1="14.25" x2="9" y2="16.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/move-tab.svg b/src/browser/themes/shared/zen-icons/move-tab.svg
index dbf923668..4857214fb 100644
--- a/src/browser/themes/shared/zen-icons/move-tab.svg
+++ b/src/browser/themes/shared/zen-icons/move-tab.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="11.25" y="10.75" width="5" height="5" rx="1.5" ry="1.5" data-color="color-2"></rect><rect x="11.25" y="2.25" width="5" height="5" rx="1.5" ry="1.5"></rect><polyline points="6.75 11.5 9 13.75 6.75 16"></polyline><path d="M9,13.75h-2.5c-2.623,0-4.75-2.127-4.75-4.75h0c0-2.623,2.127-4.75,4.75-4.75h1.75"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="11.25" y="10.75" width="5" height="5" rx="1.5" ry="1.5" data-color="color-2"></rect><rect x="11.25" y="2.25" width="5" height="5" rx="1.5" ry="1.5"></rect><polyline points="6.75 11.5 9 13.75 6.75 16"></polyline><path d="M9,13.75h-2.5c-2.623,0-4.75-2.127-4.75-4.75h0c0-2.623,2.127-4.75,4.75-4.75h1.75"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/new-tab-image.svg b/src/browser/themes/shared/zen-icons/new-tab-image.svg
index bc40fea49..890f8c681 100644
--- a/src/browser/themes/shared/zen-icons/new-tab-image.svg
+++ b/src/browser/themes/shared/zen-icons/new-tab-image.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/open.svg b/src/browser/themes/shared/zen-icons/open.svg
index 3e0a34c1e..5e1889c80 100644
--- a/src/browser/themes/shared/zen-icons/open.svg
+++ b/src/browser/themes/shared/zen-icons/open.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6,14.25H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2H14.25c1.105,0,2,.895,2,2v7.5c0,1.105-.895,2-2,2h-2.25"></path><line x1="1.75" y1="6.25" x2="16.25" y2="6.25"></line><polyline points="6.5 11.25 9 8.75 11.5 11.25" data-color="color-2"></polyline><line x1="9" y1="8.75" x2="9" y2="17.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6,14.25H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2H14.25c1.105,0,2,.895,2,2v7.5c0,1.105-.895,2-2,2h-2.25"></path><line x1="1.75" y1="6.25" x2="16.25" y2="6.25"></line><polyline points="6.5 11.25 9 8.75 11.5 11.25" data-color="color-2"></polyline><line x1="9" y1="8.75" x2="9" y2="17.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/page-portrait.svg b/src/browser/themes/shared/zen-icons/page-portrait.svg
index 07dab98f5..99a678428 100644
--- a/src/browser/themes/shared/zen-icons/page-portrait.svg
+++ b/src/browser/themes/shared/zen-icons/page-portrait.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852" data-color="color-2"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852" data-color="color-2"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/passwords.svg b/src/browser/themes/shared/zen-icons/passwords.svg
index b87deb0ff..98792083e 100644
--- a/src/browser/themes/shared/zen-icons/passwords.svg
+++ b/src/browser/themes/shared/zen-icons/passwords.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.747,2.076l-2.847,.177-5.891,5.891c-.324-.084-.658-.144-1.009-.144-2.209,0-4,1.791-4,4s1.791,4,4,4,4-1.791,4-4c0-.362-.064-.707-.154-1.041l1.904-1.959v-2.25h2.25l1.753-1.645-.006-3.029Z"></path><circle cx="5.5" cy="12.5" r="1" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.747,2.076l-2.847,.177-5.891,5.891c-.324-.084-.658-.144-1.009-.144-2.209,0-4,1.791-4,4s1.791,4,4,4,4-1.791,4-4c0-.362-.064-.707-.154-1.041l1.904-1.959v-2.25h2.25l1.753-1.645-.006-3.029Z"></path><circle cx="5.5" cy="12.5" r="1" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/paste-and-go.svg b/src/browser/themes/shared/zen-icons/paste-and-go.svg
index 05ac6e8eb..8af067def 100644
--- a/src/browser/themes/shared/zen-icons/paste-and-go.svg
+++ b/src/browser/themes/shared/zen-icons/paste-and-go.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.25,2.75h-1c-1.105,0-2,.895-2,2V14.25c0,1.105,.895,2,2,2h7.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1"></path><rect x="6.25" y="1.25" width="5.5" height="3" rx="1" ry="1" data-color="color-2"></rect><polyline points="6.25 10.25 8 12.25 11.75 7.25" data-color="color-2"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.25,2.75h-1c-1.105,0-2,.895-2,2V14.25c0,1.105,.895,2,2,2h7.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1"></path><rect x="6.25" y="1.25" width="5.5" height="3" rx="1" ry="1" data-color="color-2"></rect><polyline points="6.25 10.25 8 12.25 11.75 7.25" data-color="color-2"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/permissions.svg b/src/browser/themes/shared/zen-icons/permissions.svg
index bcb43381e..9b9976140 100644
--- a/src/browser/themes/shared/zen-icons/permissions.svg
+++ b/src/browser/themes/shared/zen-icons/permissions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="6.75" x2="12.75" y2="6.75" data-color="color-2"></line><line x1="5.25" y1="6.75" x2="7.25" y2="6.75" data-color="color-2"></line><line x1="7.25" y1="5" x2="7.25" y2="8.5" data-color="color-2"></line><line x1="10.75" y1="11.25" x2="12.75" y2="11.25" data-color="color-2"></line><line x1="5.25" y1="11.25" x2="8.25" y2="11.25" data-color="color-2"></line><line x1="10.75" y1="9.5" x2="10.75" y2="13" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="6.75" x2="12.75" y2="6.75" data-color="color-2"></line><line x1="5.25" y1="6.75" x2="7.25" y2="6.75" data-color="color-2"></line><line x1="7.25" y1="5" x2="7.25" y2="8.5" data-color="color-2"></line><line x1="10.75" y1="11.25" x2="12.75" y2="11.25" data-color="color-2"></line><line x1="5.25" y1="11.25" x2="8.25" y2="11.25" data-color="color-2"></line><line x1="10.75" y1="9.5" x2="10.75" y2="13" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/persistent-storage-blocked.svg b/src/browser/themes/shared/zen-icons/persistent-storage-blocked.svg
index 66278262e..8911071a4 100644
--- a/src/browser/themes/shared/zen-icons/persistent-storage-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/persistent-storage-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.266"></path><path d="M15.726,8.516c-.117-.993-.952-1.766-1.976-1.766H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h4.141"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.266"></path><path d="M15.726,8.516c-.117-.993-.952-1.766-1.976-1.766H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h4.141"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/persistent-storage.svg b/src/browser/themes/shared/zen-icons/persistent-storage.svg
index 65d2044b5..97ac121bb 100644
--- a/src/browser/themes/shared/zen-icons/persistent-storage.svg
+++ b/src/browser/themes/shared/zen-icons/persistent-storage.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="9.75" width="14.5" height="5" rx="1.5" ry="1.5"></rect><path d="M1.841,10.739l2.204-6.621c.272-.817,1.036-1.368,1.898-1.368h6.116c.861,0,1.626,.551,1.898,1.368l2.204,6.621"></path><line x1="4.25" y1="12.25" x2="7" y2="12.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="9.75" width="14.5" height="5" rx="1.5" ry="1.5"></rect><path d="M1.841,10.739l2.204-6.621c.272-.817,1.036-1.368,1.898-1.368h6.116c.861,0,1.626,.551,1.898,1.368l2.204,6.621"></path><line x1="4.25" y1="12.25" x2="7" y2="12.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/pin.svg b/src/browser/themes/shared/zen-icons/pin.svg
index a30c319c1..734bb8374 100644
--- a/src/browser/themes/shared/zen-icons/pin.svg
+++ b/src/browser/themes/shared/zen-icons/pin.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.081" y1="14.919" x2="6.409" y2="11.591" data-color="color-2"></line><path d="M10.371,15.553c.432-.557,1.02-1.47,1.348-2.718,.169-.642,.23-1.224,.243-1.701l3.005-3.005c.781-.781,.781-2.047,0-2.828l-2.268-2.268c-.781-.781-2.047-.781-2.828,0l-3.005,3.005c-.478,.013-1.059,.074-1.701,.243-1.248,.328-2.161,.916-2.718,1.348l7.925,7.925Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.081" y1="14.919" x2="6.409" y2="11.591" data-color="color-2"></line><path d="M10.371,15.553c.432-.557,1.02-1.47,1.348-2.718,.169-.642,.23-1.224,.243-1.701l3.005-3.005c.781-.781,.781-2.047,0-2.828l-2.268-2.268c-.781-.781-2.047-.781-2.828,0l-3.005,3.005c-.478,.013-1.059,.074-1.701,.243-1.248,.328-2.161,.916-2.718,1.348l7.925,7.925Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/plus.svg b/src/browser/themes/shared/zen-icons/plus.svg
index 6ce916b23..c426dc454 100644
--- a/src/browser/themes/shared/zen-icons/plus.svg
+++ b/src/browser/themes/shared/zen-icons/plus.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="9" y1="3.25" x2="9" y2="14.75" data-color="color-2"></line><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="9" y1="3.25" x2="9" y2="14.75" data-color="color-2"></line><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/popup.svg b/src/browser/themes/shared/zen-icons/popup.svg
index 9f7ea80aa..8677da7b8 100644
--- a/src/browser/themes/shared/zen-icons/popup.svg
+++ b/src/browser/themes/shared/zen-icons/popup.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-stroke="none" data-color="color-2" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-stroke="none" data-color="color-2" stroke="none"></circle><line x1="1.75" y1="7.75" x2="16.25" y2="7.75"></line><path d="M16.25,8.709v-3.959c0-1.104-.895-2-2-2H3.75c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2h4.619"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-stroke="none" data-color="color-2" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-stroke="none" data-color="color-2" stroke="none"></circle><line x1="1.75" y1="7.75" x2="16.25" y2="7.75"></line><path d="M16.25,8.709v-3.959c0-1.104-.895-2-2-2H3.75c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2h4.619"></path><circle cx="14" cy="14" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="16.298" x2="16.292" y2="11.708" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/print.svg b/src/browser/themes/shared/zen-icons/print.svg
index ee1844f66..390d8d0c5 100644
--- a/src/browser/themes/shared/zen-icons/print.svg
+++ b/src/browser/themes/shared/zen-icons/print.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,5.25V2.75c0-.552,.448-1,1-1h4.5c.552,0,1,.448,1,1v2.5" data-color="color-2"></path><path d="M5.75,13.25h-1.5c-1.105,0-2-.895-2-2V7.25c0-1.105,.895-2,2-2H13.75c1.105,0,2,.895,2,2v4c0,1.105-.895,2-2,2h-1.5"></path><path d="M12.25,9.75v5.5c0,.552-.448,1-1,1H6.75c-.552,0-1-.448-1-1v-5.5h6.5Z" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,5.25V2.75c0-.552,.448-1,1-1h4.5c.552,0,1,.448,1,1v2.5" data-color="color-2"></path><path d="M5.75,13.25h-1.5c-1.105,0-2-.895-2-2V7.25c0-1.105,.895-2,2-2H13.75c1.105,0,2,.895,2,2v4c0,1.105-.895,2-2,2h-1.5"></path><path d="M12.25,9.75v5.5c0,.552-.448,1-1,1H6.75c-.552,0-1-.448-1-1v-5.5h6.5Z" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/private-window.svg b/src/browser/themes/shared/zen-icons/private-window.svg
index 98d5c73c4..0c7b46a9a 100644
--- a/src/browser/themes/shared/zen-icons/private-window.svg
+++ b/src/browser/themes/shared/zen-icons/private-window.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><line x1="1.75" y1="7.75" x2="16.25" y2="7.75"></line><path d="M16.25,9.141V4.75c0-1.104-.895-2-2-2H3.75c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2h4.5"></path><rect x="10.75" y="13.75" width="6" height="3.5" rx="1" ry="1" data-color="color-2"></rect><path d="M12.25,13.75v-1.5c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5v1.5" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><line x1="1.75" y1="7.75" x2="16.25" y2="7.75"></line><path d="M16.25,9.141V4.75c0-1.104-.895-2-2-2H3.75c-1.105,0-2,.896-2,2V13.25c0,1.104,.895,2,2,2h4.5"></path><rect x="10.75" y="13.75" width="6" height="3.5" rx="1" ry="1" data-color="color-2"></rect><path d="M12.25,13.75v-1.5c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5v1.5" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/privateBrowsing.svg b/src/browser/themes/shared/zen-icons/privateBrowsing.svg
index 1674d5457..ee96e2860 100644
--- a/src/browser/themes/shared/zen-icons/privateBrowsing.svg
+++ b/src/browser/themes/shared/zen-icons/privateBrowsing.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="4.5" r="2.75"></circle><rect x="10.75" y="12.75" width="6" height="3.5" rx="1" ry="1" data-color="color-2"></rect><path d="M10.043,9.844c-.34-.057-.686-.094-1.043-.094-2.551,0-4.739,1.53-5.709,3.72-.365,.825,.087,1.774,.947,2.045,1.093,.345,2.516,.645,4.167,.708"></path><path d="M12.25,12.75v-1.5c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5v1.5" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="4.5" r="2.75"></circle><rect x="10.75" y="12.75" width="6" height="3.5" rx="1" ry="1" data-color="color-2"></rect><path d="M10.043,9.844c-.34-.057-.686-.094-1.043-.094-2.551,0-4.739,1.53-5.709,3.72-.365,.825,.087,1.774,.947,2.045,1.093,.345,2.516,.645,4.167,.708"></path><path d="M12.25,12.75v-1.5c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5v1.5" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/reader-mode.svg b/src/browser/themes/shared/zen-icons/reader-mode.svg
index 8de3ff026..af5500748 100644
--- a/src/browser/themes/shared/zen-icons/reader-mode.svg
+++ b/src/browser/themes/shared/zen-icons/reader-mode.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="6.75" x2="7.75" y2="6.75" data-color="color-2"></line><line x1="5.75" y1="9.75" x2="12.25" y2="9.75" data-color="color-2"></line><line x1="5.75" y1="12.75" x2="12.25" y2="12.75" data-color="color-2"></line><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="6.75" x2="7.75" y2="6.75" data-color="color-2"></line><line x1="5.75" y1="9.75" x2="12.25" y2="9.75" data-color="color-2"></line><line x1="5.75" y1="12.75" x2="12.25" y2="12.75" data-color="color-2"></line><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/reload.svg b/src/browser/themes/shared/zen-icons/reload.svg
index 3aa735c04..2134474d6 100644
--- a/src/browser/themes/shared/zen-icons/reload.svg
+++ b/src/browser/themes/shared/zen-icons/reload.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15,13.071c-1.304,1.919-3.505,3.179-6,3.179-4.004,0-7.25-3.246-7.25-7.25S4.996,1.75,9,1.75c3.031,0,5.627,1.86,6.71,4.5" data-color="color-2"></path><polyline points="16.12 3.305 15.712 6.25 12.768 5.843"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15,13.071c-1.304,1.919-3.505,3.179-6,3.179-4.004,0-7.25-3.246-7.25-7.25S4.996,1.75,9,1.75c3.031,0,5.627,1.86,6.71,4.5" data-color="color-2"></path><polyline points="16.12 3.305 15.712 6.25 12.768 5.843"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/report.svg b/src/browser/themes/shared/zen-icons/report.svg
index cab37aaec..3125ec5cc 100644
--- a/src/browser/themes/shared/zen-icons/report.svg
+++ b/src/browser/themes/shared/zen-icons/report.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/save.svg b/src/browser/themes/shared/zen-icons/save.svg
index 4247ec61c..9bac1fb43 100644
--- a/src/browser/themes/shared/zen-icons/save.svg
+++ b/src/browser/themes/shared/zen-icons/save.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,3.25h1.5c1.105,0,2,.895,2,2v7.5c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V5.25c0-1.105,.895-2,2-2h1.5"></path><polyline points="12 8.75 9 11.75 6 8.75" data-color="color-2"></polyline><line x1="9" y1="11.75" x2="9" y2="3.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,3.25h1.5c1.105,0,2,.895,2,2v7.5c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V5.25c0-1.105,.895-2,2-2h1.5"></path><polyline points="12 8.75 9 11.75 6 8.75" data-color="color-2"></polyline><line x1="9" y1="11.75" x2="9" y2="3.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/screen-blocked.svg b/src/browser/themes/shared/zen-icons/screen-blocked.svg
index df45780fb..ffbba714a 100644
--- a/src/browser/themes/shared/zen-icons/screen-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/screen-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.75,13.25h-1c-1.105,0-2-.895-2-2v-1.25"></path><path d="M16.25,5v6.25c0,1.105-.895,2-2,2H8"></path><line x1="9" y1="2.75" x2="15.25" y2="2.75"></line><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line><polyline points="1.75 7.25 1.75 2.75 6.25 2.75" data-color="color-2"></polyline><line x1="2" y1="3" x2="6.5" y2="7.5" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.75,13.25h-1c-1.105,0-2-.895-2-2v-1.25"></path><path d="M16.25,5v6.25c0,1.105-.895,2-2,2H8"></path><line x1="9" y1="2.75" x2="15.25" y2="2.75"></line><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line><polyline points="1.75 7.25 1.75 2.75 6.25 2.75" data-color="color-2"></polyline><line x1="2" y1="3" x2="6.5" y2="7.5" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/screen.svg b/src/browser/themes/shared/zen-icons/screen.svg
index 57281387e..585d8ede6 100644
--- a/src/browser/themes/shared/zen-icons/screen.svg
+++ b/src/browser/themes/shared/zen-icons/screen.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9,2.75h5.25c1.105,0,2,.895,2,2v6.5c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2v-1.25"></path><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><polyline points="1.75 7.25 1.75 2.75 6.25 2.75" data-color="color-2"></polyline><line x1="2" y1="3" x2="7.25" y2="8.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9,2.75h5.25c1.105,0,2,.895,2,2v6.5c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2v-1.25"></path><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><polyline points="1.75 7.25 1.75 2.75 6.25 2.75" data-color="color-2"></polyline><line x1="2" y1="3" x2="7.25" y2="8.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/screenshot.svg b/src/browser/themes/shared/zen-icons/screenshot.svg
index 66b488605..5f4b9619b 100644
--- a/src/browser/themes/shared/zen-icons/screenshot.svg
+++ b/src/browser/themes/shared/zen-icons/screenshot.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.25,2.75h2c1.105,0,2,.895,2,2v2" data-color="color-2"></path><path d="M6.75,15.25h-2c-1.105,0-2-.895-2-2v-2" data-color="color-2"></path><path d="M2.75,6.75v-2c0-1.105,.895-2,2-2h2"></path><path d="M15.25,11.25v2c0,1.105-.895,2-2,2h-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.25,2.75h2c1.105,0,2,.895,2,2v2" data-color="color-2"></path><path d="M6.75,15.25h-2c-1.105,0-2-.895-2-2v-2" data-color="color-2"></path><path d="M2.75,6.75v-2c0-1.105,.895-2,2-2h2"></path><path d="M15.25,11.25v2c0,1.105-.895,2-2,2h-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/search-glass.svg b/src/browser/themes/shared/zen-icons/search-glass.svg
index 24d287f2f..0d5faa5ee 100644
--- a/src/browser/themes/shared/zen-icons/search-glass.svg
+++ b/src/browser/themes/shared/zen-icons/search-glass.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="7.25" cy="7.25" r="4.5"></circle><line x1="15.25" y1="15.25" x2="12.285" y2="12.285" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="7.25" cy="7.25" r="4.5"></circle><line x1="15.25" y1="15.25" x2="12.285" y2="12.285" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/search-page.svg b/src/browser/themes/shared/zen-icons/search-page.svg
index 1aad4b524..da76ae067 100644
--- a/src/browser/themes/shared/zen-icons/search-page.svg
+++ b/src/browser/themes/shared/zen-icons/search-page.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.75,6.75v-2c0-1.105,.895-2,2-2h2"></path><path d="M11.25,2.75h2c1.105,0,2,.895,2,2v2"></path><path d="M6.75,15.25h-2c-1.105,0-2-.895-2-2v-2"></path><circle cx="9" cy="9" r="3.25" data-color="color-2"></circle><line x1="11.296" y1="11.296" x2="14.5" y2="14.5" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.75,6.75v-2c0-1.105,.895-2,2-2h2"></path><path d="M11.25,2.75h2c1.105,0,2,.895,2,2v2"></path><path d="M6.75,15.25h-2c-1.105,0-2-.895-2-2v-2"></path><circle cx="9" cy="9" r="3.25" data-color="color-2"></circle><line x1="11.296" y1="11.296" x2="14.5" y2="14.5" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/security-broken.svg b/src/browser/themes/shared/zen-icons/security-broken.svg
index cab37aaec..3125ec5cc 100644
--- a/src/browser/themes/shared/zen-icons/security-broken.svg
+++ b/src/browser/themes/shared/zen-icons/security-broken.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/security-warning.svg b/src/browser/themes/shared/zen-icons/security-warning.svg
index f74987acc..622bec338 100644
--- a/src/browser/themes/shared/zen-icons/security-warning.svg
+++ b/src/browser/themes/shared/zen-icons/security-warning.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,4.75v-1.75c0-1.243,1.007-2.25,2.25-2.25h0c1.243,0,2.25,1.007,2.25,2.25v1.75"></path><path d="M5.334,4.75h7.333c1.037,0,1.903,.793,1.992,1.827l.652,7.5c.102,1.169-.82,2.173-1.992,2.173H4.681c-1.173,0-2.094-1.005-1.992-2.173l.652-7.5c.09-1.034,.955-1.827,1.992-1.827Z"></path><line x1="9" y1="10.75" x2="9" y2="8" data-color="color-2"></line><circle cx="9" cy="13" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,4.75v-1.75c0-1.243,1.007-2.25,2.25-2.25h0c1.243,0,2.25,1.007,2.25,2.25v1.75"></path><path d="M5.334,4.75h7.333c1.037,0,1.903,.793,1.992,1.827l.652,7.5c.102,1.169-.82,2.173-1.992,2.173H4.681c-1.173,0-2.094-1.005-1.992-2.173l.652-7.5c.09-1.034,.955-1.827,1.992-1.827Z"></path><line x1="9" y1="10.75" x2="9" y2="8" data-color="color-2"></line><circle cx="9" cy="13" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/security.svg b/src/browser/themes/shared/zen-icons/security.svg
index a4d491f0b..8ca41d326 100644
--- a/src/browser/themes/shared/zen-icons/security.svg
+++ b/src/browser/themes/shared/zen-icons/security.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,8.25v-3.25c0-1.795,1.455-3.25,3.25-3.25h0c1.795,0,3.25,1.455,3.25,3.25v3.25" data-color="color-2"></path><line x1="9" y1="11.75" x2="9" y2="12.75" data-color="color-2"></line><rect x="3.25" y="8.25" width="11.5" height="8" rx="2" ry="2"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5.75,8.25v-3.25c0-1.795,1.455-3.25,3.25-3.25h0c1.795,0,3.25,1.455,3.25,3.25v3.25" data-color="color-2"></path><line x1="9" y1="11.75" x2="9" y2="12.75" data-color="color-2"></line><rect x="3.25" y="8.25" width="11.5" height="8" rx="2" ry="2"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/send-to-device.svg b/src/browser/themes/shared/zen-icons/send-to-device.svg
index eff5388f8..5045e0362 100644
--- a/src/browser/themes/shared/zen-icons/send-to-device.svg
+++ b/src/browser/themes/shared/zen-icons/send-to-device.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.75,2.75h1.5c1.105,0,2,.895,2,2v6.5c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.5"></path><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><polyline points="6.25 5.5 9 2.75 11.75 5.5" data-color="color-2"></polyline><line x1="9" y1="2.75" x2="9" y2="10.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.75,2.75h1.5c1.105,0,2,.895,2,2v6.5c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.5"></path><path d="M5.75,16.25c.758-.239,1.878-.5,3.25-.5,.795,0,1.941,.088,3.25,.5"></path><line x1="9" y1="13.25" x2="9" y2="15.75"></line><polyline points="6.25 5.5 9 2.75 11.75 5.5" data-color="color-2"></polyline><line x1="9" y1="2.75" x2="9" y2="10.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/settings.svg b/src/browser/themes/shared/zen-icons/settings.svg
index 142f584d2..73a363015 100644
--- a/src/browser/themes/shared/zen-icons/settings.svg
+++ b/src/browser/themes/shared/zen-icons/settings.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="8.999" r="1.75" fill="currentColor" data-color="color-2"></circle><path d="m15.175,7.278l-.929-.328c-.102-.261-.219-.52-.363-.77s-.31-.48-.485-.699l.18-.968c.125-.671-.187-1.349-.778-1.69l-.351-.203c-.592-.342-1.334-.273-1.853.171l-.745.637c-.56-.086-1.133-.086-1.703,0l-.745-.638c-.519-.444-1.262-.513-1.853-.171l-.351.203c-.592.341-.903,1.019-.778,1.69l.18.965c-.36.449-.646.946-.852,1.474l-.924.326c-.644.227-1.075.836-1.075,1.519v.405c0,.683.431,1.292,1.075,1.519l.929.328c.102.261.218.519.363.769s.31.48.485.7l-.181.968c-.125.671.187,1.349.778,1.69l.351.203c.592.342,1.334.273,1.853-.171l.745-.638c.559.086,1.132.086,1.701,0l.746.639c.519.444,1.262.513,1.853.171l.351-.203c.592-.342.903-1.019.778-1.69l-.18-.966c.359-.449.646-.945.851-1.473l.925-.326c.644-.227,1.075-.836,1.075-1.519v-.405c0-.683-.431-1.292-1.075-1.519h.002Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="8.999" r="1.75" fill="currentColor" data-color="color-2"></circle><path d="m15.175,7.278l-.929-.328c-.102-.261-.219-.52-.363-.77s-.31-.48-.485-.699l.18-.968c.125-.671-.187-1.349-.778-1.69l-.351-.203c-.592-.342-1.334-.273-1.853.171l-.745.637c-.56-.086-1.133-.086-1.703,0l-.745-.638c-.519-.444-1.262-.513-1.853-.171l-.351.203c-.592.341-.903,1.019-.778,1.69l.18.965c-.36.449-.646.946-.852,1.474l-.924.326c-.644.227-1.075.836-1.075,1.519v.405c0,.683.431,1.292,1.075,1.519l.929.328c.102.261.218.519.363.769s.31.48.485.7l-.181.968c-.125.671.187,1.349.778,1.69l.351.203c.592.342,1.334.273,1.853-.171l.745-.638c.559.086,1.132.086,1.701,0l.746.639c.519.444,1.262.513,1.853.171l.351-.203c.592-.342.903-1.019.778-1.69l-.18-.966c.359-.449.646-.945.851-1.473l.925-.326c.644-.227,1.075-.836,1.075-1.519v-.405c0-.683-.431-1.292-1.075-1.519h.002Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/share.svg b/src/browser/themes/shared/zen-icons/share.svg
index 3b4ec7d20..702da7aab 100644
--- a/src/browser/themes/shared/zen-icons/share.svg
+++ b/src/browser/themes/shared/zen-icons/share.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.75,4.5V1.75s4.5,4.25,4.5,4.25l-4.5,4.25v-2.75c-3.625,0-6,3.5-6,3.5,0,0,0-6.5,6-6.5Z" data-color="color-2"></path><path d="M7.25,2.75h-2.5c-1.105,0-2,.895-2,2V13.25c0,1.105,.895,2,2,2H13.25c1.105,0,2-.895,2-2v-2.5"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.75,4.5V1.75s4.5,4.25,4.5,4.25l-4.5,4.25v-2.75c-3.625,0-6,3.5-6,3.5,0,0,0-6.5,6-6.5Z" data-color="color-2"></path><path d="M7.25,2.75h-2.5c-1.105,0-2,.895-2,2V13.25c0,1.105,.895,2,2,2H13.25c1.105,0,2-.895,2-2v-2.5"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/sidebar.svg b/src/browser/themes/shared/zen-icons/sidebar.svg
index b6134d970..754dce15a 100644
--- a/src/browser/themes/shared/zen-icons/sidebar.svg
+++ b/src/browser/themes/shared/zen-icons/sidebar.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2"></rect><rect x="4.75" y="6.25" width="2" height="5.5" fill="currentColor" data-color="color-2"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2"></rect><rect x="4.75" y="6.25" width="2" height="5.5" fill="currentColor" data-color="color-2"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/sidebars-right.svg b/src/browser/themes/shared/zen-icons/sidebars-right.svg
index 4db5521bf..4e7f8eb29 100644
--- a/src/browser/themes/shared/zen-icons/sidebars-right.svg
+++ b/src/browser/themes/shared/zen-icons/sidebars-right.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="11.75" y1="2.75" x2="11.75" y2="15.25" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="11.75" y1="2.75" x2="11.75" y2="15.25" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/source-code.svg b/src/browser/themes/shared/zen-icons/source-code.svg
index bb08f1398..b37c7d013 100644
--- a/src/browser/themes/shared/zen-icons/source-code.svg
+++ b/src/browser/themes/shared/zen-icons/source-code.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="5.25 13.25 1.75 9 5.25 4.75"></polyline><polyline points="12.75 13.25 16.25 9 12.75 4.75"></polyline><line x1="7.75" y1="13.25" x2="10.25" y2="4.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="5.25 13.25 1.75 9 5.25 4.75"></polyline><polyline points="12.75 13.25 16.25 9 12.75 4.75"></polyline><line x1="7.75" y1="13.25" x2="10.25" y2="4.75" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/spell-check.svg b/src/browser/themes/shared/zen-icons/spell-check.svg
index 455c785fe..0842c6b33 100644
--- a/src/browser/themes/shared/zen-icons/spell-check.svg
+++ b/src/browser/themes/shared/zen-icons/spell-check.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="5.108 11.75 12.892 11.75 9.401 2.75 8.599 2.75 3.75 15.25"></polyline><polyline points="11.244 14.641 12.853 16.25 16.25 11.833" data-color="color-2"></polyline></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="5.108 11.75 12.892 11.75 9.401 2.75 8.599 2.75 3.75 15.25"></polyline><polyline points="11.244 14.641 12.853 16.25 16.25 11.833" data-color="color-2"></polyline></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/split.svg b/src/browser/themes/shared/zen-icons/split.svg
index 3e2337cb8..8aa952db7 100644
--- a/src/browser/themes/shared/zen-icons/split.svg
+++ b/src/browser/themes/shared/zen-icons/split.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="9" y1="1.75" x2="9" y2="16.25" data-color="color-2"></line><path d="M6.25,15.25h-1.5c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.5"></path><path d="M11.75,15.25h1.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1.5"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="9" y1="1.75" x2="9" y2="16.25" data-color="color-2"></line><path d="M6.25,15.25h-1.5c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.5"></path><path d="M11.75,15.25h1.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1.5"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tab-audio-blocked-small.svg b/src/browser/themes/shared/zen-icons/tab-audio-blocked-small.svg
index 9877ff260..b2cf323c6 100644
--- a/src/browser/themes/shared/zen-icons/tab-audio-blocked-small.svg
+++ b/src/browser/themes/shared/zen-icons/tab-audio-blocked-small.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="7.25" x2="5.75" y2="13.75" data-color="color-2"></line><line x1="14.75" y1="5.75" x2="14.75" y2="12.25" data-color="color-2"></line><path d="M6.586,3.361l7-1.167c.61-.102,1.164,.368,1.164,.986v2.57l-9,1.5v-2.903c0-.489,.353-.906,.836-.986Z"></path><circle cx="3.75" cy="13.75" r="2"></circle><circle cx="12.75" cy="12.25" r="2"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="7.25" x2="5.75" y2="13.75" data-color="color-2"></line><line x1="14.75" y1="5.75" x2="14.75" y2="12.25" data-color="color-2"></line><path d="M6.586,3.361l7-1.167c.61-.102,1.164,.368,1.164,.986v2.57l-9,1.5v-2.903c0-.489,.353-.906,.836-.986Z"></path><circle cx="3.75" cy="13.75" r="2"></circle><circle cx="12.75" cy="12.25" r="2"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tab-audio-muted-small.svg b/src/browser/themes/shared/zen-icons/tab-audio-muted-small.svg
index e7701a9c3..71a22dfb3 100644
--- a/src/browser/themes/shared/zen-icons/tab-audio-muted-small.svg
+++ b/src/browser/themes/shared/zen-icons/tab-audio-muted-small.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.25,3.952v-1.288c0-.395-.437-.634-.77-.421l-5.48,3.508H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421v-1.288"></path><circle cx="14" cy="9" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="11.298" x2="16.292" y2="6.708" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.25,3.952v-1.288c0-.395-.437-.634-.77-.421l-5.48,3.508H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421v-1.288"></path><circle cx="14" cy="9" r="3.25" data-color="color-2"></circle><line x1="11.702" y1="11.298" x2="16.292" y2="6.708" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tab-audio-playing-small.svg b/src/browser/themes/shared/zen-icons/tab-audio-playing-small.svg
index dc630d8a5..f21b4c813 100644
--- a/src/browser/themes/shared/zen-icons/tab-audio-playing-small.svg
+++ b/src/browser/themes/shared/zen-icons/tab-audio-playing-small.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tab.svg b/src/browser/themes/shared/zen-icons/tab.svg
index b46663ccc..cbb67eb97 100644
--- a/src/browser/themes/shared/zen-icons/tab.svg
+++ b/src/browser/themes/shared/zen-icons/tab.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,2.75h7c1.105,0,2,.895,2,2v1.5" data-color="color-2"></path><line x1="11.25" y1="2.75" x2="11.25" y2="6.25" data-color="color-2"></line><path d="M15.75,6.25v7c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h2.5v3.5H15.75Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,2.75h7c1.105,0,2,.895,2,2v1.5" data-color="color-2"></path><line x1="11.25" y1="2.75" x2="11.25" y2="6.25" data-color="color-2"></line><path d="M15.75,6.25v7c0,1.105-.895,2-2,2H4.25c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h2.5v3.5H15.75Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tool-profiler.svg b/src/browser/themes/shared/zen-icons/tool-profiler.svg
index 870d63c02..fd6ae5fc2 100644
--- a/src/browser/themes/shared/zen-icons/tool-profiler.svg
+++ b/src/browser/themes/shared/zen-icons/tool-profiler.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="11.298" y1="11.298" x2="9.53" y2="9.53" data-color="color-2"></line><line x1="13.066" y1="9.53" x2="12.005" y2="8.47" data-color="color-2"></line><line x1="9.53" y1="13.066" x2="8.47" y2="12.005" data-color="color-2"></line><line x1="7.763" y1="14.834" x2="5.995" y2="13.066" data-color="color-2"></line><circle cx="12" cy="4.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><rect x="1.5" y="5.75" width="15" height="6.5" rx="1" ry="1" transform="translate(-3.728 9) rotate(-45)"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="11.298" y1="11.298" x2="9.53" y2="9.53" data-color="color-2"></line><line x1="13.066" y1="9.53" x2="12.005" y2="8.47" data-color="color-2"></line><line x1="9.53" y1="13.066" x2="8.47" y2="12.005" data-color="color-2"></line><line x1="7.763" y1="14.834" x2="5.995" y2="13.066" data-color="color-2"></line><circle cx="12" cy="4.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><rect x="1.5" y="5.75" width="15" height="6.5" rx="1" ry="1" transform="translate(-3.728 9) rotate(-45)"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/tracking-protection.svg b/src/browser/themes/shared/zen-icons/tracking-protection.svg
index e0b5854da..951808edf 100644
--- a/src/browser/themes/shared/zen-icons/tracking-protection.svg
+++ b/src/browser/themes/shared/zen-icons/tracking-protection.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.305,1.848l5.25,1.68c.414,.133,.695,.518,.695,.952v6.52c0,3.03-4.684,4.748-5.942,5.155-.203,.066-.413,.066-.616,0-1.258-.407-5.942-2.125-5.942-5.155V4.48c0-.435,.281-.82,.695-.952l5.25-1.68c.198-.063,.411-.063,.61,0Z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.305,1.848l5.25,1.68c.414,.133,.695,.518,.695,.952v6.52c0,3.03-4.684,4.748-5.942,5.155-.203,.066-.413,.066-.616,0-1.258-.407-5.942-2.125-5.942-5.155V4.48c0-.435,.281-.82,.695-.952l5.25-1.68c.198-.063,.411-.063,.61,0Z"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/translations.svg b/src/browser/themes/shared/zen-icons/translations.svg
index 2e9ee051d..fe519338d 100644
--- a/src/browser/themes/shared/zen-icons/translations.svg
+++ b/src/browser/themes/shared/zen-icons/translations.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="2.25" y1="4.25" x2="10.25" y2="4.25"></line><line x1="6.25" y1="2.25" x2="6.25" y2="4.25"></line><path d="M4.25,4.25c.091,2.676,1.916,4.981,4.5,5.684"></path><path d="M8.25,4.25c-.4,5.625-6,6-6,6"></path><polyline points="9.25 15.75 12.25 7.75 12.75 7.75 15.75 15.75" data-color="color-2"></polyline><line x1="10.188" y1="13.25" x2="14.813" y2="13.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="2.25" y1="4.25" x2="10.25" y2="4.25"></line><line x1="6.25" y1="2.25" x2="6.25" y2="4.25"></line><path d="M4.25,4.25c.091,2.676,1.916,4.981,4.5,5.684"></path><path d="M8.25,4.25c-.4,5.625-6,6-6,6"></path><polyline points="9.25 15.75 12.25 7.75 12.75 7.75 15.75 15.75" data-color="color-2"></polyline><line x1="10.188" y1="13.25" x2="14.813" y2="13.25" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/unpin.svg b/src/browser/themes/shared/zen-icons/unpin.svg
index 063818335..57473d9e0 100644
--- a/src/browser/themes/shared/zen-icons/unpin.svg
+++ b/src/browser/themes/shared/zen-icons/unpin.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/video-open.svg b/src/browser/themes/shared/zen-icons/video-open.svg
index dce174372..d34336b6b 100644
--- a/src/browser/themes/shared/zen-icons/video-open.svg
+++ b/src/browser/themes/shared/zen-icons/video-open.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.211,6.984l-2.296-1.385c-.402-.243-.915,.047-.915,.516v2.771c0,.47,.513,.759,.915,.516l2.296-1.385c.389-.235,.389-.798,0-1.033Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.211,6.984l-2.296-1.385c-.402-.243-.915,.047-.915,.516v2.771c0,.47,.513,.759,.915,.516l2.296-1.385c.389-.235,.389-.798,0-1.033Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/video-save.svg b/src/browser/themes/shared/zen-icons/video-save.svg
index a9773c398..09ddcaa1f 100644
--- a/src/browser/themes/shared/zen-icons/video-save.svg
+++ b/src/browser/themes/shared/zen-icons/video-save.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.844"></path><path d="M15.75,10.313v-1.563c0-1.104-.895-2-2-2H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h5"></path><path d="M12.539,11.323l4.204,2.477c.343,.202,.343,.697,0,.899l-4.204,2.477c-.349,.206-.789-.045-.789-.449v-4.955c0-.404,.441-.655,.789-.449Z" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.25,8.75V4.75c0-1.105,.895-2,2-2h1.951c.607,0,1.18,.275,1.56,.748l.603,.752h5.386c1.105,0,2,.895,2,2v2.844"></path><path d="M15.75,10.313v-1.563c0-1.104-.895-2-2-2H4.25c-1.105,0-2,.896-2,2v4.5c0,1.104,.895,2,2,2h5"></path><path d="M12.539,11.323l4.204,2.477c.343,.202,.343,.697,0,.899l-4.204,2.477c-.349,.206-.789-.045-.789-.449v-4.955c0-.404,.441-.655,.789-.449Z" data-color="color-2"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/window.svg b/src/browser/themes/shared/zen-icons/window.svg
index bc40fea49..890f8c681 100644
--- a/src/browser/themes/shared/zen-icons/window.svg
+++ b/src/browser/themes/shared/zen-icons/window.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/xr-blocked.svg b/src/browser/themes/shared/zen-icons/xr-blocked.svg
index 839642c37..266caf8b0 100644
--- a/src/browser/themes/shared/zen-icons/xr-blocked.svg
+++ b/src/browser/themes/shared/zen-icons/xr-blocked.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.012,6.524c.315,.763,.488,1.6,.488,2.476,0,3.59-2.91,6.5-6.5,6.5-.877,0-1.713-.174-2.476-.488"></path><path d="M4.404,13.596c-1.176-1.176-1.904-2.801-1.904-4.596,0-3.59,2.91-6.5,6.5-6.5,1.795,0,3.42,.728,4.596,1.904"></path><path d="M7.409,10.591c-.407-.407-.659-.97-.659-1.591,0-1.243,1.007-2.25,2.25-2.25,.621,0,1.184,.252,1.591,.659" data-color="color-2"></path><line x1="9" y1="1" x2="9" y2="2.5"></line><line x1="17" y1="9" x2="15.5" y2="9"></line><line x1="9" y1="17" x2="9" y2="15.5"></line><line x1="1" y1="9" x2="2.5" y2="9"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.012,6.524c.315,.763,.488,1.6,.488,2.476,0,3.59-2.91,6.5-6.5,6.5-.877,0-1.713-.174-2.476-.488"></path><path d="M4.404,13.596c-1.176-1.176-1.904-2.801-1.904-4.596,0-3.59,2.91-6.5,6.5-6.5,1.795,0,3.42,.728,4.596,1.904"></path><path d="M7.409,10.591c-.407-.407-.659-.97-.659-1.591,0-1.243,1.007-2.25,2.25-2.25,.621,0,1.184,.252,1.591,.659" data-color="color-2"></path><line x1="9" y1="1" x2="9" y2="2.5"></line><line x1="17" y1="9" x2="15.5" y2="9"></line><line x1="9" y1="17" x2="9" y2="15.5"></line><line x1="1" y1="9" x2="2.5" y2="9"></line><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/xr.svg b/src/browser/themes/shared/zen-icons/xr.svg
index 4ec759867..743a3fc36 100644
--- a/src/browser/themes/shared/zen-icons/xr.svg
+++ b/src/browser/themes/shared/zen-icons/xr.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.75,5.75H14.25c1.105,0,2,.895,2,2v4.5c0,1.105-.895,2-2,2h-2c-.63,0-1.222-.296-1.6-.8l-.45-.6c-.6-.8-1.8-.8-2.4,0l-.45,.6c-.378,.504-.97,.8-1.6,.8H3.75c-1.105,0-2-.895-2-2V7.75c0-1.105,.895-2,2-2Z"></path><circle cx="5.5" cy="10" r=".75" fill="currentColor" data-color="color-2"></circle><circle cx="12.5" cy="10" r=".75" fill="currentColor" data-color="color-2"></circle><path d="M15.979,6.745l-1.892-3.049c-.365-.588-1.008-.946-1.699-.946h-3.387s-3.387,0-3.387,0c-.692,0-1.335,.358-1.699,.946l-1.892,3.049"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.75,5.75H14.25c1.105,0,2,.895,2,2v4.5c0,1.105-.895,2-2,2h-2c-.63,0-1.222-.296-1.6-.8l-.45-.6c-.6-.8-1.8-.8-2.4,0l-.45,.6c-.378,.504-.97,.8-1.6,.8H3.75c-1.105,0-2-.895-2-2V7.75c0-1.105,.895-2,2-2Z"></path><circle cx="5.5" cy="10" r=".75" fill="currentColor" data-color="color-2"></circle><circle cx="12.5" cy="10" r=".75" fill="currentColor" data-color="color-2"></circle><path d="M15.979,6.745l-1.892-3.049c-.365-.588-1.008-.946-1.699-.946h-3.387s-3.387,0-3.387,0c-.692,0-1.335,.358-1.699,.946l-1.892,3.049"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/zoom-control.svg b/src/browser/themes/shared/zen-icons/zoom-control.svg
index 77505bc5e..91d85daf6 100644
--- a/src/browser/themes/shared/zen-icons/zoom-control.svg
+++ b/src/browser/themes/shared/zen-icons/zoom-control.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="7.75" cy="7.75" r="5"></circle><line x1="15.25" y1="15.25" x2="11.285" y2="11.285"></line><circle cx="5.5" cy="7.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="10" cy="7.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><path d="M6.75,8.5h2c.276,0,.5,.224,.5,.5h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.276,.224-.5,.5-.5Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="7.75" cy="7.75" r="5"></circle><line x1="15.25" y1="15.25" x2="11.285" y2="11.285"></line><circle cx="5.5" cy="7.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="10" cy="7.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><path d="M6.75,8.5h2c.276,0,.5,.224,.5,.5h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.276,.224-.5,.5-.5Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
diff --git a/src/browser/themes/shared/zen-icons/zoom-out.svg b/src/browser/themes/shared/zen-icons/zoom-out.svg
index 063818335..57473d9e0 100644
--- a/src/browser/themes/shared/zen-icons/zoom-out.svg
+++ b/src/browser/themes/shared/zen-icons/zoom-out.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="3.25" y1="9" x2="14.75" y2="9"></line></g></svg>

From f2460549e0459a9d61d0faacbbc1a1188d613e62 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 12:41:23 +0100
Subject: [PATCH 15/31] Added outline to urlbar when floating

---
 src/browser/base/content/zen-styles/zen-urlbar.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index b56c65232..b6799d5f2 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -392,6 +392,7 @@ button.popup-notification-dropmarker {
       the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
       due to performance issues */
     background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
+    outline: 1px solid rgba(0,0,0,.3) !important;
   }
 }
 

From 7cf0e05f705956e5524a9d0630d58346868227ac Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 13:26:50 +0100
Subject: [PATCH 16/31] Fixed normal tabs appear on pinned tab container

---
 .../base/content/zen-styles/zen-urlbar.css    |  2 +-
 .../base/zen-components/ZenGlanceManager.mjs  |  3 +-
 .../tabbrowser/content/tabbrowser-js.patch    | 64 +++++++++++++++++--
 3 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index b6799d5f2..a074fd993 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -392,7 +392,7 @@ button.popup-notification-dropmarker {
       the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
       due to performance issues */
     background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
-    outline: 1px solid rgba(0,0,0,.3) !important;
+    outline: 1px solid rgba(0, 0, 0, 0.3) !important;
   }
 }
 
diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
index fc4f13942..58f2046fd 100644
--- a/src/browser/base/zen-components/ZenGlanceManager.mjs
+++ b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -67,7 +67,7 @@
     }
 
     getTabPosition(tab) {
-      return Math.max(gBrowser.pinnedTabCount, tab._tPos);
+      return Math.max(gBrowser._numVisiblePinTabs, tab._tPos);
     }
 
     createBrowserElement(url, currentTab, existingTab = null) {
@@ -574,6 +574,7 @@
             DOMContentLoaded: {},
           },
         },
+        matches: ["https://*/*"],
       });
     }
   }
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index f991c91ea..5d2f2730d 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de6604534f 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..f7c02c14498b4ec5fcf5521480c88abac25a2283 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -44,7 +44,7 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de
        }
        return i;
      }
-@@ -807,7 +835,7 @@
+@@ -807,10 +835,10 @@
        this.showTab(aTab);
        if (this.tabContainer.verticalMode) {
          this._handleTabMove(aTab, () =>
@@ -52,7 +52,20 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de
 +          aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.appendChild(aTab)
          );
        } else {
-         this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
+-        this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
++        this.moveTabTo(aTab, this._numVisiblePinTabs, { forceStandaloneTab: true });
+       }
+       aTab.setAttribute("pinned", "true");
+       this._updateTabBarForPinnedTabs();
+@@ -831,7 +859,7 @@
+           this.tabContainer.arrowScrollbox.prepend(aTab);
+         });
+       } else {
+-        this.moveTabTo(aTab, this.pinnedTabCount - 1, {
++        this.moveTabTo(aTab, this._numVisiblePinTabs - 1, {
+           forceStandaloneTab: true,
+         });
+         aTab.removeAttribute("pinned");
 @@ -1055,6 +1083,8 @@
  
        let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@@ -197,16 +210,36 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de
            if (select) {
              tabToSelect = tab;
            }
+@@ -3464,8 +3546,8 @@
+           // inserted in the DOM. If the tab is not yet in the DOM,
+           // just insert it in the right place from the start.
+           if (!tab.parentNode) {
+-            tab._tPos = this.pinnedTabCount;
+-            this.tabContainer.insertBefore(tab, this.tabs[this.pinnedTabCount]);
++            tab._tPos = this._numVisiblePinTabs;
++            this.tabContainer.insertBefore(tab, this.tabs[this._numVisiblePinTabs]);
+             tab.toggleAttribute("pinned", true);
+             this.tabContainer._invalidateCachedTabs();
+             // Then ensure all the tab open/pinning information is sent.
 @@ -3729,7 +3811,7 @@
        // Ensure we have an index if one was not provided.
        if (typeof index != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
 -        index = Infinity;
-+        index = Services.prefs.getBoolPref("zen.view.show-newtab-button-top") ? this.pinnedTabCount : Infinity;
++        index = Services.prefs.getBoolPref("zen.view.show-newtab-button-top") ? this._numVisiblePinTabs : Infinity;
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3780,7 +3862,7 @@
+@@ -3773,14 +3855,14 @@
+       // Ensure index is within bounds.
+       if (tab.pinned) {
+         index = Math.max(index, 0);
+-        index = Math.min(index, this.pinnedTabCount);
++        index = Math.min(index, this._numVisiblePinTabs);
+       } else {
+-        index = Math.max(index, this.pinnedTabCount);
++        index = Math.max(index, this._numVisiblePinTabs);
+         index = Math.min(index, this.tabs.length);
        }
  
        /** @type {MozTabbrowserTab|undefined} */
@@ -295,6 +328,18 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
+@@ -5706,9 +5799,9 @@
+ 
+       // Don't allow mixing pinned and unpinned tabs.
+       if (aTab.pinned) {
+-        aIndex = Math.min(aIndex, this.pinnedTabCount - 1);
++        aIndex = Math.min(aIndex, this._numVisiblePinTabs - 1);
+       } else {
+-        aIndex = Math.max(aIndex, this.pinnedTabCount);
++        aIndex = Math.max(aIndex, this._numVisiblePinTabs);
+       }
+       if (aTab._tPos == aIndex) {
+         return;
 @@ -5727,6 +5820,9 @@
            this.tabContainer.insertBefore(aTab, neighbor);
          }
@@ -305,6 +350,15 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..39cb6ceda6154609daa8f3b84c4931de
      }
  
      moveTabToGroup(aTab, aGroup) {
+@@ -5802,7 +5898,7 @@
+         createLazyBrowser,
+       };
+ 
+-      let numPinned = this.pinnedTabCount;
++      let numPinned = this._numVisiblePinTabs;
+       if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
+         params.pinned = true;
+       }
 @@ -7443,6 +7539,7 @@
              aWebProgress.isTopLevel
            ) {

From c0589501194061786eb5501f95f590d6a6324f18 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 13:28:02 +0100
Subject: [PATCH 17/31] Formatted the project

---
 src/browser/base/zen-components/ZenGlanceManager.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
index 58f2046fd..ba9ecb0ec 100644
--- a/src/browser/base/zen-components/ZenGlanceManager.mjs
+++ b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -574,7 +574,7 @@
             DOMContentLoaded: {},
           },
         },
-        matches: ["https://*/*"],
+        matches: ['https://*/*'],
       });
     }
   }

From 6600e6049805d9ba7bb3cf198de4b95b5af4b728 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 13:40:13 +0100
Subject: [PATCH 18/31] Fixed showing wrong tab when changing workspaces

---
 src/browser/base/zen-components/ZenWorkspaces.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 6d8d867d7..d7704cf43 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1480,7 +1480,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
     // Find first suitable tab
     else {
-      tabToSelect = Array.from(visibleTabs).find((tab) => !tab.pinned);
+      tabToSelect = Array.from(visibleTabs).find((tab) => this._shouldShowTab(tab, window.uuid, containerId, workspaces));
     }
 
     const previousSelectedTab = gBrowser.selectedTab;

From 48badb83cf32f379366b95817b0a11cb7ed290be Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 13:45:09 +0100
Subject: [PATCH 19/31] Fixed creating a new tab when we can just select the
 last one when switching workspaces

---
 src/browser/base/zen-components/ZenWorkspaces.mjs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index d7704cf43..c37cd4921 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1480,7 +1480,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
     // Find first suitable tab
     else {
-      tabToSelect = Array.from(visibleTabs).find((tab) => this._shouldShowTab(tab, window.uuid, containerId, workspaces));
+      tabToSelect = Array.from(visibleTabs).find((tab) => !tab.pinned);
+      if (!tabToSelect && visibleTabs.length) {
+        tabToSelect = Array.from(visibleTabs)[visibleTabs.length - 1];
+      }
     }
 
     const previousSelectedTab = gBrowser.selectedTab;

From 6f612d62cf5fd23b0fd697800a3434dfc68abcef Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 16:35:06 +0100
Subject: [PATCH 20/31] Started working on new workspaec layout

---
 src/browser/base/content/ZenUIManager.mjs     |   6 +-
 .../base/zen-components/ZenWorkspaces.mjs     | 102 +++++++++++-------
 .../tabbrowser/content/tabs-js.patch          |  28 ++++-
 .../content/widgets/arrowscrollbox-js.patch   |  20 +++-
 4 files changed, 109 insertions(+), 47 deletions(-)

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index cfde08211..46dff2042 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -149,11 +149,7 @@ var gZenUIManager = {
   },
 
   get newtabButton() {
-    if (this._newtabButton) {
-      return this._newtabButton;
-    }
-    this._newtabButton = document.getElementById('tabs-newtab-button');
-    return this._newtabButton;
+    return ZenWorkspaces.activeWorkspaceStrip.querySelector('#tabs-newtab-button');
   },
 
   _prevUrlbarLabel: null,
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index c37cd4921..4a603d441 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -97,6 +97,47 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
+  get activeWorkspaceStrip() {
+    const activeWorkspace = this.activeWorkspace;
+    return document.querySelector(`.zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`);
+  }
+
+  get tabboxChildren() {
+    if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
+      return gBrowser.tabContainer.arrowScrollbox.children;
+    }
+    return this.activeWorkspaceStrip.children
+  }
+
+  async initializeTabsStripSections() {
+    const tabs = this.tabboxChildren;
+    const perifery = document.getElementById('tabbrowser-arrowscrollbox-periphery');
+    for (const workspace of (await this._workspaces()).workspaces) {
+      this._createWorkspaceTabsSection(workspace, tabs, perifery);
+    }
+    perifery.remove();
+    this._hasInitializedTabsStrip = true;
+  }
+
+  async _createWorkspaceTabsSection(workspace, tabs, perifery) {
+    const container = gBrowser.tabContainer.arrowScrollbox;
+    const section = document.createXULElement('vbox');
+    section.className = 'zen-workspace-tabs-section';
+    section.setAttribute('flex', '1');
+    section.setAttribute('zen-workspace-id', workspace.uuid);
+    container.appendChild(section);
+    this._organizeTabsToWorkspaceSections(workspace, section, tabs);
+    section.appendChild(perifery.cloneNode(true));
+  }
+
+  _organizeTabsToWorkspaceSections(workspace, section, tabs) {
+    const workspaceTabs = Array.from(tabs).filter((tab) => tab.getAttribute('zen-workspace-id') === workspace.uuid);
+    for (const tab of workspaceTabs) {
+      section.appendChild(tab);
+    }
+    this.tabContainer._invalidateCachedTabs();
+  } 
+
   initializeWorkspaceNavigation() {
     this._setupAppCommandHandlers();
     this._setupSidebarHandlers();
@@ -411,6 +452,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           this.activeWorkspace = activeWorkspace?.uuid;
         }
       }
+      await this.initializeTabsStripSections();
       try {
         if (activeWorkspace) {
           window.gZenThemePicker = new ZenThemePicker();
@@ -1319,19 +1361,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Refresh tab cache
     this.tabContainer._invalidateCachedTabs();
 
-    let animationDirection;
     if (previousWorkspace && !onInit && !this._animatingChange) {
-      animationDirection =
-        explicitAnimationDirection ??
-        (workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid) <
-        workspaces.workspaces.findIndex((w) => w.uuid === window.uuid)
-          ? 'right'
-          : 'left');
-    }
-    if (animationDirection) {
-      // Animate tabs out of view before changing workspace, therefor we
-      // need to animate in the opposite direction
-      await this._animateTabs(animationDirection === 'left' ? 'right' : 'left', true);
+      await this._animateTabs(previousWorkspace, window);
     }
 
     // First pass: Handle tab visibility and workspace ID assignment
@@ -1343,9 +1374,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Update UI and state
     await this._updateWorkspaceState(window, onInit);
 
-    if (animationDirection) {
-      await this._animateTabs(animationDirection);
-    }
   }
 
   get _animateTabsElements() {
@@ -1354,35 +1382,31 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return [...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)];
   }
 
-  async _animateTabs(direction, out = false) {
-    this.tabContainer.removeAttribute('dont-animate-tabs');
-    const tabsWidth = this.tabContainer.getBoundingClientRect().width;
-    // order by actual position in the children list to animate
-    const elements = this._animateTabsElements;
-    if (out) {
-      const existingTransform = elements[0].style.transform;
-      const newTransform = `translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`;
-      return gZenUIManager.motion.animate(
-        elements,
-        {
-          transform: existingTransform ? [existingTransform, newTransform] : newTransform,
-        },
-        {
-          type: 'spring',
-          bounce: 0,
-          duration: 0.12,
-        }
-      );
-    }
-    return gZenUIManager.motion.animate(
-      elements,
+  async _animateTabs(previousWorkspace, newWorkspace) {
+    const newWorkspaceContainer = this.tabContainer;
+    const previousWorkspaceContainer = document.querySelector(`[zen-workspace-id="${previousWorkspace.uuid}"]`);
+
+    const newWorkspaceLeft = newWorkspaceContainer.getBoundingClientRect().left;
+    gZenUIManager.motion.animate(
+      newWorkspaceContainer,
       {
-        transform: [`translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`, 'translateX(0px)'],
+        transform: [`translateX(${newWorkspaceLeft}px)`, 'translateX(0)'],
       },
       {
-        duration: 0.15,
         type: 'spring',
         bounce: 0,
+        duration: 0.12,
+      }
+    );
+    gZenUIManager.motion.animate(
+      previousWorkspaceContainer,
+      {
+        transform: ['translateX(0)', `translateX(-${newWorkspaceLeft}px)`],
+      },
+      {
+        type: 'spring',
+        bounce: 0,
+        duration: 0.12,
       }
     );
   }
diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch
index 756161868..b0a668a3c 100644
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441bde7b604 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ceab5c1dcf 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -101,7 +101,16 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1512,9 +1525,19 @@
+@@ -1498,7 +1511,7 @@
+       if (this.#allTabs) {
+         return this.#allTabs;
+       }
+-      let children = Array.from(this.arrowScrollbox.children);
++      let children = Array.from(ZenWorkspaces.tabboxChildren);
+       // remove arrowScrollbox periphery element
+       children.pop();
+ 
+@@ -1512,14 +1525,24 @@
        }
  
        this.#allTabs = [
@@ -122,6 +131,21 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
        return this.#allTabs;
      }
  
+     get allGroups() {
+-      let children = Array.from(this.arrowScrollbox.children);
++      let children = Array.from(ZenWorkspaces.tabboxChildren);
+       return children.filter(node => node.tagName == "tab-group");
+     }
+ 
+@@ -1577,7 +1600,7 @@
+       let verticalPinnedTabsContainer = document.getElementById(
+         "vertical-pinned-tabs-container"
+       );
+-      let children = Array.from(this.arrowScrollbox.children);
++      let children = Array.from(ZenWorkspaces.tabboxChildren);
+ 
+       let focusableItems = [];
+       for (let child of children) {
 @@ -1593,6 +1616,7 @@
        }
  
diff --git a/src/toolkit/content/widgets/arrowscrollbox-js.patch b/src/toolkit/content/widgets/arrowscrollbox-js.patch
index ebfbd2dec..28739a036 100644
--- a/src/toolkit/content/widgets/arrowscrollbox-js.patch
+++ b/src/toolkit/content/widgets/arrowscrollbox-js.patch
@@ -1,7 +1,25 @@
 diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
-index 328c770d275ebbaada8a44438eaf738b1a62d985..95460108c6356408170b8a4a40d55a8f0621756b 100644
+index 328c770d275ebbaada8a44438eaf738b1a62d985..070439e26bfe6a2299aa4b82ee4c434e143e1a20 100644
 --- a/toolkit/content/widgets/arrowscrollbox.js
 +++ b/toolkit/content/widgets/arrowscrollbox.js
+@@ -15,7 +15,7 @@
+     static get inheritedAttributes() {
+       return {
+         "#scrollbutton-up": "disabled=scrolledtostart",
+-        scrollbox: "orient,align,pack,dir,smoothscroll",
++        scrollbox: "align,pack,dir,smoothscroll",
+         "#scrollbutton-down": "disabled=scrolledtoend",
+       };
+     }
+@@ -26,7 +26,7 @@
+       <html:link rel="stylesheet" href="chrome://global/skin/arrowscrollbox.css"/>
+       <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-backwards"/>
+       <spacer part="overflow-start-indicator"/>
+-      <scrollbox part="scrollbox" flex="1">
++      <scrollbox part="scrollbox" orient="horizontal" flex="1">
+         <html:slot/>
+       </scrollbox>
+       <spacer part="overflow-end-indicator"/>
 @@ -98,6 +98,7 @@
  
        let slot = this.shadowRoot.querySelector("slot");

From e387652c8b3a0979b73d1c1e91ee1b210903b3f1 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Tue, 11 Feb 2025 22:01:41 +0100
Subject: [PATCH 21/31] HUGE: handle workspaces as individual containers
 instead of a single list of tabs

---
 src/browser/base/content/ZenStartup.mjs       |   1 -
 src/browser/base/content/ZenUIManager.mjs     |   2 +
 .../content/navigator-toolbox-inc-xhtml.patch |  17 +-
 .../content/zen-styles/zen-browser-ui.css     |   2 +-
 .../zen-styles/zen-tabs/horizontal-tabs.css   |   4 +-
 .../zen-styles/zen-tabs/vertical-tabs.css     |  31 +-
 .../base/content/zen-styles/zen-theme.css     |   2 +
 .../base/content/zen-styles/zen-urlbar.css    |   5 +-
 .../content/zen-styles/zen-workspaces.css     |  44 +--
 .../zen-components/ZenGradientGenerator.mjs   |   2 +-
 .../zen-components/ZenPinnedTabManager.mjs    |  10 +-
 .../base/zen-components/ZenWorkspaces.mjs     | 370 ++++++++++++------
 .../tabbrowser/content/tabbrowser-js.patch    |   4 +-
 .../tabbrowser/content/tabs-js.patch          | 105 +++--
 .../themes/shared/tabbrowser/tabs-css.patch   |  20 +-
 .../content/widgets/arrowscrollbox-js.patch   |  20 +-
 16 files changed, 413 insertions(+), 226 deletions(-)

diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs
index a8880efdd..a09e51f47 100644
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -85,7 +85,6 @@
     _initSidebarScrolling() {
       // Disable smooth scroll
       const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
-      const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
       const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
       gBrowser.tabContainer.addEventListener('wheel', (event) => {
         if (canSmoothScroll) return;
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 46dff2042..ca3354728 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -413,6 +413,8 @@ var gZenVerticalTabsManager = {
 
       gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
       gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+      // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
+      gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute('orient', isVerticalTabs ? 'horizontal' : 'vertical');
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
       if (isRightSide) {
diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index 6d7f1a45c..bc2ef52de 100644
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67aea54a6f47 100644
+index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -40,20 +40,17 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
          <tabs id="tabbrowser-tabs"
                is="tabbrowser-tabs"
                aria-multiselectable="true"
-@@ -50,6 +50,12 @@
+@@ -50,6 +50,9 @@
                tooltip="tabbrowser-tab-tooltip"
                orient="horizontal"
                stopwatchid="FX_TAB_CLICK_MS">
 +<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
-+<hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
-+  <hbox id="zen-current-workspace-indicator-icon"></hbox>
-+  <hbox id="zen-current-workspace-indicator-name"></hbox>
-+</hbox>
++<hbox id="zen-current-workspace-indicator-container"></hbox>
 +<html:div id="zen-browser-tabs-wrapper">
            <hbox class="tab-drop-indicator" hidden="true"/>
  # If the name (tabbrowser-arrowscrollbox) or structure of this changes
  # significantly, there is an optimization in
-@@ -57,7 +63,7 @@
+@@ -57,7 +60,7 @@
  # the current structure that we may want to revisit.
            <html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
            <html:div id="vertical-pinned-tabs-container-separator"></html:div>
@@ -62,7 +59,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -75,6 +81,7 @@
+@@ -75,6 +78,7 @@
                                tooltip="dynamic-shortcut-tooltip"
                                data-l10n-id="tabs-toolbar-new-tab"/>
            <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
@@ -70,7 +67,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
          </tabs>
  
          <toolbarbutton id="new-tab-button"
-@@ -100,11 +107,12 @@
+@@ -100,11 +104,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -86,7 +83,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -490,10 +498,12 @@
+@@ -490,10 +495,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>
diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index 403370c63..0257ac92f 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -51,7 +51,7 @@
     &[animating='true']::after {
       background: var(--zen-main-browser-background-old);
       backdrop-filter: blur(5px);
-      animation: zen-main-app-wrapper-animation 0.5s ease forwards;
+      animation: zen-main-app-wrapper-animation 0.2s ease forwards;
       transition: 0s;
     }
   }
diff --git a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
index e96e2fc8a..d1b2cb365 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
@@ -28,7 +28,7 @@
     --tab-min-height: 10px !important;
   }
 
-  #vertical-pinned-tabs-container-separator {
+  .vertical-pinned-tabs-container-separator {
     display: none !important;
   }
 
@@ -214,7 +214,7 @@
   }
 
   /* Other UI Elements */
-  #zen-current-workspace-indicator {
+  .zen-current-workspace-indicator {
     display: none !important;
   }
 
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index a593fedfc..b18d303c6 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -117,7 +117,7 @@
   }
 }
 
-#vertical-pinned-tabs-container-separator {
+.vertical-pinned-tabs-container-separator {
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
   border: none;
@@ -126,8 +126,8 @@
   width: 98%;
   transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
 
-  #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + &,
-  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox tab:not([hidden]))) & {
+  #vertical-pinned-tabs-container .zen-workspace-tabs-section[active]:not(:has(tab:not([hidden]))) &,
+  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[active] tab:not([hidden]))) & {
     max-height: 0;
     margin: 0 auto;
   }
@@ -254,18 +254,14 @@
   grid-gap: 0 !important;
 
   &[overflow]::after,
-  #vertical-tabs-newtab-button {
+  #vertical-tabs-newtab-button,
+  #vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
     /* Hide separator they give us, eww */
     display: none !important;
   }
 
   & .tabbrowser-tab {
     transition: scale 0.07s ease;
-    #tabbrowser-tabs &:not([zen-essential='true']) {
-      #tabbrowser-tabs[dont-animate-tabs] & {
-        opacity: 0;
-      }
-    }
 
     &:active {
       scale: 0.98;
@@ -441,7 +437,7 @@
     width: calc(100% - 10px) !important;
   }
 
-  & #zen-current-workspace-indicator-icon[no-icon='true'] {
+  & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
 
@@ -572,11 +568,11 @@
 #navigator-toolbox:not([zen-sidebar-expanded='true']) {
   max-width: var(--zen-toolbox-max-width) !important;
   min-width: var(--zen-toolbox-max-width) !important;
-  & #zen-current-workspace-indicator-name,
+  & .zen-current-workspace-indicator-name,
   & .toolbarbutton-text {
     display: none !important;
   }
-  & #zen-current-workspace-indicator {
+  & .zen-current-workspace-indicator {
     padding-left: 0;
     padding-right: 0;
     display: flex;
@@ -893,7 +889,7 @@
       align-items: center;
       padding-top: 0;
     }
-    
+
     &:active,
     &[open] {
       scale: 0.98;
@@ -966,7 +962,7 @@
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
-  &:not([selected], [multiselected="true"]) .tab-background {
+  &:not([visuallyselected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
     border: none;
   }
@@ -1137,3 +1133,10 @@
 #zen-essentials-container .tabbrowser-tab.drag-over-after {
   box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
 }
+
+/* Section: tab workspaces stylings */
+.zen-workspace-tabs-section {
+  position: absolute;
+  transform: translateX(-100%);
+  min-width: 100%;
+}
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index e4398c8ab..480f65c52 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -157,6 +157,8 @@
   --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
   --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
 
+  --zen-workspace-indicator-height: 45px;
+
   @media (-moz-windows-mica) or (-moz-platform: macos) {
     background: transparent;
     --zen-themed-toolbar-bg-transparency: 0;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index a074fd993..fb8bf7d2a 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -414,7 +414,10 @@ button.popup-notification-dropmarker {
   --urlbar-margin-inline: 10px !important;
   position: absolute;
 
-  font-size: 1.5em !important;
+  font-size: 1.15em !important;
+  @media (-moz-platform: macos) {
+    font-size: 1.5em !important;
+  }
   top: calc(var(--zen-toolbar-height) * 2) !important;
 
   --zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index a88c6a2aa..9fbe38108 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -446,11 +446,20 @@
 }
 
 /* Mark workspaces indicator */
-#zen-current-workspace-indicator {
+#zen-current-workspace-indicator-container {
+  margin-bottom: var(--zen-workspace-indicator-height);
+}
+
+.zen-current-workspace-indicator {
   padding: 15px calc(4px + var(--tab-inline-padding));
   font-weight: 600;
-  align-items: center;
-  position: relative;
+  position: absolute;
+  max-height: var(--zen-workspace-indicator-height);
+  min-height: var(--zen-workspace-indicator-height);
+  gap: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-direction: row !important;
 
   &::before {
     border-radius: var(--border-radius-medium);
@@ -459,11 +468,11 @@
     pointer-events: none;
     content: '';
     position: absolute;
-    top: 6px;
+    top: 4px;
     left: 2px;
     z-index: -1;
     width: calc(100% - 4px);
-    height: calc(100% - 12px);
+    height: calc(100% - 10px);
   }
 
   &:hover,
@@ -473,38 +482,23 @@
     }
   }
 
-  & #zen-current-workspace-indicator-icon {
-    font-size: 14px;
+  & .zen-current-workspace-indicator-icon {
+    font-size: 12px;
   }
 
-  #zen-current-workspace-indicator-name {
+  .zen-current-workspace-indicator-name {
     font-size: 13px;
     opacity: 0.5;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     display: block;
-
-    position: absolute;
-    max-width: calc(100% - var(--zen-toolbox-padding) * 4);
-  }
-
-  & #zen-current-workspace-indicator-icon {
-    min-height: 16px;
-  }
-
-  & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
-    padding-left: 24px;
   }
 }
 
 @media not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator') {
-  #zen-current-workspace-indicator {
+  #zen-current-workspace-indicator-container {
     display: none !important;
   }
 }
 
-#zen-current-workspace-indicator[hidden='true'] {
+#zen-current-workspace-indicator-container[hidden='true'] {
   display: none !important;
 }
diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
index 8080d686a..125c45da7 100644
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -614,7 +614,7 @@
                 // Reactivate the transition after the animation
                 appWrapper.removeAttribute('post-animating');
               }, 100);
-            }, 500);
+            }, 200);
           });
         }
 
diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
index aa2f9213d..a3487fee7 100644
--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -648,7 +648,7 @@
 
     moveToAnotherTabContainerIfNecessary(event, draggedTab) {
       const pinnedTabsTarget =
-        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('#zen-current-workspace-indicator');
+        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
 
@@ -717,7 +717,7 @@
     removeTabContainersDragoverClass() {
       this.dragIndicator.remove();
       this._dragIndicator = null;
-      document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -738,11 +738,11 @@
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
       const targetTab = event.target.closest('.tabbrowser-tab');
-      if (event.target.closest('#zen-current-workspace-indicator')) {
+      if (event.target.closest('.zen-current-workspace-indicator')) {
         this.removeTabContainersDragoverClass();
-        event.target.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
       } else {
-        document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
       }
 
       // If there's no valid target tab, nothing to do
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 4a603d441..8198ff3a1 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -28,13 +28,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._resolvePinnedInitialized = resolve;
   });
 
+  workspaceIndicatorXUL = `
+    <hbox class="zen-current-workspace-indicator-icon"></hbox>
+    <hbox class="zen-current-workspace-indicator-name"></hbox>
+  `;
+
   async waitForPromises() {
     await Promise.all([this.promiseDBInitialized, this.promisePinnedInitialized, SessionStore.promiseAllWindowsRestored]);
   }
 
   async init() {
     if (!this.shouldHaveWorkspaces) {
-      document.getElementById('zen-current-workspace-indicator').setAttribute('hidden', 'true');
+      document.getElementById('zen-current-workspace-indicator-container').setAttribute('hidden', 'true');
       console.warn('ZenWorkspaces: !!! ZenWorkspaces is disabled in hidden windows !!!');
       return; // We are in a hidden window, don't initialize ZenWorkspaces
     }
@@ -77,6 +82,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
+    this._pinnedTabsResizeObserver = new ResizeObserver(this.onPinnedTabsResize.bind(this));
     await this.waitForPromises();
     await this.initializeWorkspaces();
     console.info('ZenWorkspaces: ZenWorkspaces initialized');
@@ -97,46 +103,113 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
+  registerPinnedResizeObserver() {
+    if (!this._hasInitializedTabsStrip) {
+      return;
+    }
+    this._pinnedTabsResizeObserver.disconnect();
+    for (let element of document.getElementById('vertical-pinned-tabs-container').children) {
+      if (element.classList.contains('tabbrowser-tab')) {
+        continue;
+      }
+      this._pinnedTabsResizeObserver.observe(element);
+    }
+  }
+
   get activeWorkspaceStrip() {
+    if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
+      return gBrowser.tabContainer.arrowScrollbox;
+    }
     const activeWorkspace = this.activeWorkspace;
-    return document.querySelector(`.zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`);
+    return document.querySelector(
+      `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`
+    );
+  }
+
+  get activeWorkspaceIndicator() {
+    return document.querySelector(
+      `#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
+    );
   }
 
   get tabboxChildren() {
+    return this.activeWorkspaceStrip.children;
+  }
+
+  get pinnedTabsContainer() {
     if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
-      return gBrowser.tabContainer.arrowScrollbox.children;
+      return document.getElementById('vertical-pinned-tabs-container');
     }
-    return this.activeWorkspaceStrip.children
+    return document.querySelector(
+      `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
+    );
   }
 
   async initializeTabsStripSections() {
-    const tabs = this.tabboxChildren;
     const perifery = document.getElementById('tabbrowser-arrowscrollbox-periphery');
+    const tabs = gBrowser.tabContainer.allTabs.filter((tab) => !tab.pinned);
     for (const workspace of (await this._workspaces()).workspaces) {
       this._createWorkspaceTabsSection(workspace, tabs, perifery);
     }
-    perifery.remove();
+    if (tabs.length) {
+      const defaultSelectedContainer = document.querySelector(
+        `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
+      );
+      for (const tab of tabs) {
+        // before to the last child (perifery)
+        defaultSelectedContainer.insertBefore(tab, defaultSelectedContainer.lastChild);
+      }
+      this.tabContainer._invalidateCachedTabs();
+    }
+    perifery.setAttribute('hidden', 'true');
     this._hasInitializedTabsStrip = true;
+    this.registerPinnedResizeObserver();
   }
 
-  async _createWorkspaceTabsSection(workspace, tabs, perifery) {
-    const container = gBrowser.tabContainer.arrowScrollbox;
+  _createWorkspaceSection(workspace) {
     const section = document.createXULElement('vbox');
     section.className = 'zen-workspace-tabs-section';
     section.setAttribute('flex', '1');
     section.setAttribute('zen-workspace-id', workspace.uuid);
-    container.appendChild(section);
-    this._organizeTabsToWorkspaceSections(workspace, section, tabs);
-    section.appendChild(perifery.cloneNode(true));
+    return section;
   }
 
-  _organizeTabsToWorkspaceSections(workspace, section, tabs) {
+  async _createWorkspaceTabsSection(workspace, tabs, perifery) {
+    const container = gBrowser.tabContainer.arrowScrollbox;
+    const section = this._createWorkspaceSection(workspace);
+    container.appendChild(section);
+
+    const pinnedContainer = document.getElementById('vertical-pinned-tabs-container');
+    const pinnedSection = this._createWorkspaceSection(workspace);
+    this._organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs);
+    section.appendChild(perifery.cloneNode(true));
+    pinnedSection.appendChild(
+      window.MozXULElement.parseXULToFragment(`
+        <html:div class="vertical-pinned-tabs-container-separator"></html:div>
+      `)
+    );
+    pinnedContainer.appendChild(pinnedSection);
+
+    const workspaceIndicator = this._createWorkspaceSection(workspace);
+    workspaceIndicator.classList.add('zen-current-workspace-indicator');
+    workspaceIndicator.appendChild(window.MozXULElement.parseXULToFragment(this.workspaceIndicatorXUL));
+    document.getElementById('zen-current-workspace-indicator-container').appendChild(workspaceIndicator);
+    this.initIndicatorContextMenu(workspaceIndicator);
+  }
+
+  _organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
     const workspaceTabs = Array.from(tabs).filter((tab) => tab.getAttribute('zen-workspace-id') === workspace.uuid);
     for (const tab of workspaceTabs) {
-      section.appendChild(tab);
+      // remove tab from list
+      tabs.splice(tabs.indexOf(tab), 1);
+      if (tab.pinned) {
+        pinnedSection.appendChild(tab);
+      } else {
+        section.appendChild(tab);
+      }
     }
     this.tabContainer._invalidateCachedTabs();
-  } 
+  }
 
   initializeWorkspaceNavigation() {
     this._setupAppCommandHandlers();
@@ -462,11 +535,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
     }
-    this.initIndicatorContextMenu();
   }
 
-  initIndicatorContextMenu() {
-    const indicator = document.getElementById('zen-current-workspace-indicator');
+  initIndicatorContextMenu(indicator) {
     const th = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -780,7 +851,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (!browser.ZenWorkspaces.workspaceEnabled) {
         return;
       }
-      await browser.ZenWorkspaces.updateWorkspaceIndicator();
       let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
       const createWorkspaceElement = (workspace) => {
         let element = browser.document.createXULElement('toolbarbutton');
@@ -1074,7 +1144,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
-    let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
+    let target = event.target.closest('.zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
@@ -1231,13 +1301,25 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  moveTabToWorkspace(tab, workspaceID) {
+    if (tab.getAttribute('zen-workspace-id') === workspaceID) {
+      return;
+    }
+    tab.setAttribute('zen-workspace-id', workspaceID);
+    const parent = tab.pinned ? '#zen-browser-tabs-pinned ' : '#zen-browser-tabs ';
+    const container = document.querySelector(parent + '.zen-browser-tabs-container');
+    if (container) {
+      container.insertBefore(tab, container.firstChild);
+    }
+  }
+
   _prepareNewWorkspace(window) {
     document.documentElement.setAttribute('zen-workspace-id', window.uuid);
     let tabCount = 0;
     for (let tab of gBrowser.tabs) {
       const isEssential = tab.getAttribute('zen-essential') === 'true';
       if (!tab.hasAttribute('zen-workspace-id') && !tab.pinned && !isEssential) {
-        tab.setAttribute('zen-workspace-id', window.uuid);
+        this.moveTabToWorkspace(tab, window.uuid);
         tabCount++;
       }
     }
@@ -1250,7 +1332,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let tab = gZenUIManager.openAndChangeToTab(BROWSER_NEW_TAB_URL);
 
     if (window.uuid) {
-      tab.setAttribute('zen-workspace-id', window.uuid);
+      this.moveTabToWorkspace(tab, window.uuid);
     }
   }
 
@@ -1323,7 +1405,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       await this._performWorkspaceChange(window, ...args);
     } finally {
       this._inChangingWorkspace = false;
-      this.tabContainer.removeAttribute('dont-animate-tabs');
     }
   }
 
@@ -1359,87 +1440,125 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const workspaces = await this._workspaces();
 
     // Refresh tab cache
+    gBrowser.verticalPinnedTabsContainer = this.pinnedTabsContainer;
+    gBrowser.tabContainer.verticalPinnedTabsContainer = this.pinnedTabsContainer;
     this.tabContainer._invalidateCachedTabs();
-
-    if (previousWorkspace && !onInit && !this._animatingChange) {
-      await this._animateTabs(previousWorkspace, window);
-    }
+    await this._organizeWorkspaceStripLocations(previousWorkspace);
 
     // First pass: Handle tab visibility and workspace ID assignment
-    const visibleTabs = this._processTabVisibility(window.uuid, containerId, workspaces);
+    this._processTabVisibility(window.uuid, containerId, workspaces);
 
     // Second pass: Handle tab selection
-    await this._handleTabSelection(window, onInit, visibleTabs, containerId, workspaces, previousWorkspace.uuid);
+    this.tabContainer._invalidateCachedTabs();
+    await this._handleTabSelection(window, onInit, containerId, workspaces, previousWorkspace.uuid);
+    this.tabContainer._updateVerticalPinnedTabs();
 
     // Update UI and state
     await this._updateWorkspaceState(window, onInit);
-
   }
 
   get _animateTabsElements() {
     const selector = `#zen-browser-tabs-wrapper`;
-    const extraSelector = `#zen-current-workspace-indicator`;
+    const extraSelector = `.zen-current-workspace-indicator`;
     return [...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)];
   }
 
-  async _animateTabs(previousWorkspace, newWorkspace) {
-    const newWorkspaceContainer = this.tabContainer;
-    const previousWorkspaceContainer = document.querySelector(`[zen-workspace-id="${previousWorkspace.uuid}"]`);
+  _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
+    if (arrowscrollbox) {
+      arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
+    }
+  }
 
-    const newWorkspaceLeft = newWorkspaceContainer.getBoundingClientRect().left;
-    gZenUIManager.motion.animate(
-      newWorkspaceContainer,
-      {
-        transform: [`translateX(${newWorkspaceLeft}px)`, 'translateX(0)'],
-      },
-      {
-        type: 'spring',
-        bounce: 0,
-        duration: 0.12,
+  async _organizeWorkspaceStripLocations(workspace) {
+    const workspaces = await this._workspaces();
+    let workspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === workspace.uuid);
+    this._fixIndicatorsNames(workspaces);
+    for (const otherWorkspace of workspaces.workspaces) {
+      const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
+      const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
+      for (const container of document.querySelectorAll(selector)) {
+        container.style.transform = `translateX(${newTransform}%)`;
+        container.style.opacity = !newTransform;
       }
-    );
-    gZenUIManager.motion.animate(
-      previousWorkspaceContainer,
-      {
-        transform: ['translateX(0)', `translateX(-${newWorkspaceLeft}px)`],
-      },
-      {
-        type: 'spring',
-        bounce: 0,
-        duration: 0.12,
+      const pinnedContainerId = '#vertical-pinned-tabs-container ';
+      const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
+      const pinnedContainer = document.querySelector(pinnedContainerId + selector);
+      const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
+      this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
+    }
+  }
+
+  updateWorkspaceIndicator(currentWorkspace, workspaceIndicator) {
+    if (!workspaceIndicator) {
+      return;
+    }
+    const indicatorName = workspaceIndicator.querySelector('.zen-current-workspace-indicator-name');
+    const indicatorIcon = workspaceIndicator.querySelector('.zen-current-workspace-indicator-icon');
+
+    if (this.workspaceHasIcon(currentWorkspace)) {
+      indicatorIcon.removeAttribute('no-icon');
+    } else {
+      indicatorIcon.setAttribute('no-icon', 'true');
+    }
+    indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
+    indicatorName.textContent = currentWorkspace.name;
+  }
+
+  _fixIndicatorsNames(workspaces) {
+    for (const workspace of workspaces.workspaces) {
+      const workspaceIndicator = document.querySelector(
+        `#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspace.uuid}"]`
+      );
+      this.updateWorkspaceIndicator(workspace, workspaceIndicator);
+    }
+  }
+
+  async _animateTabs(newWorkspace, shouldAnimate) {
+    this._animatingChange = true;
+    const animations = [];
+    const workspaces = await this._workspaces();
+    const newWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
+    for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
+      const existingTransform = element.style.transform;
+      const elementWorkspaceId = element.getAttribute('zen-workspace-id');
+      const elementWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
+      const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
+      const newTransform = `translateX(${offset}%)`;
+      if (shouldAnimate) {
+        animations.push(
+          gZenUIManager.motion.animate(
+            element,
+            {
+              transform: existingTransform ? [existingTransform, newTransform] : newTransform,
+              // -0 to convert to number
+              opacity: [!!offset - 0, !offset - 0],
+            },
+            {
+              type: 'spring',
+              bounce: 0,
+              duration: 0.3,
+            }
+          )
+        );
       }
-    );
+      if (offset === 0) {
+        element.setAttribute('active', 'true');
+      } else {
+        element.removeAttribute('active');
+      }
+    }
+    await Promise.all(animations);
+    this._animatingChange = false;
   }
 
   _processTabVisibility(workspaceUuid, containerId, workspaces) {
-    const visibleTabs = new Set();
-    const lastSelectedTab = this._lastSelectedWorkspaceTabs[workspaceUuid];
-
-    this.tabContainer.setAttribute('dont-animate-tabs', 'true');
     for (const tab of gBrowser.tabs) {
-      const tabWorkspaceId = tab.getAttribute('zen-workspace-id');
-      const isEssential = tab.getAttribute('zen-essential') === 'true';
-
-      // Always hide last selected tabs from other workspaces
-      if (lastSelectedTab === tab && tabWorkspaceId !== workspaceUuid && !isEssential) {
-        gBrowser.hideTab(tab, undefined, true);
-        continue;
-      }
-
-      if (this._shouldShowTab(tab, workspaceUuid, containerId, workspaces)) {
-        gBrowser.showTab(tab);
-        visibleTabs.add(tab);
-
-        // Assign workspace ID if needed
-        if (!tabWorkspaceId && !isEssential) {
-          tab.setAttribute('zen-workspace-id', workspaceUuid);
-        }
-      } else {
+      if (!this._shouldShowTab(tab, workspaceUuid, containerId, workspaces)) {
         gBrowser.hideTab(tab, undefined, true);
+      } else if (tab.hasAttribute('zen-essential')) {
+        gBrowser.showTab(tab, undefined, true);
       }
     }
-
-    return visibleTabs;
   }
 
   _shouldShowTab(tab, workspaceUuid, containerId, workspaces) {
@@ -1470,15 +1589,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // For non-essential tabs (both normal and pinned)
     if (!tabWorkspaceId) {
       // Assign workspace ID to tabs without one
-      tab.setAttribute('zen-workspace-id', workspaceUuid);
+      this.moveTabToWorkspace(tab, workspaceUuid);
       return true;
     }
 
     // Show if tab belongs to current workspace
-    return tabWorkspaceId === workspaceUuid;
+    return true;
   }
 
-  async _handleTabSelection(window, onInit, visibleTabs, containerId, workspaces, previousWorkspaceId) {
+  async _handleTabSelection(window, onInit, containerId, workspaces, previousWorkspaceId) {
     const currentSelectedTab = gBrowser.selectedTab;
     const oldWorkspaceId = previousWorkspaceId;
     const lastSelectedTab = this._lastSelectedWorkspaceTabs[window.uuid];
@@ -1489,29 +1608,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
 
     let tabToSelect = null;
-
-    // If current tab is visible in new workspace, keep it
-    if (this._shouldShowTab(currentSelectedTab, window.uuid, containerId, workspaces) && visibleTabs.has(currentSelectedTab)) {
-      tabToSelect = currentSelectedTab;
-    }
     // Try last selected tab if it is visible
-    else if (
-      lastSelectedTab &&
-      this._shouldShowTab(lastSelectedTab, window.uuid, containerId, workspaces) &&
-      visibleTabs.has(lastSelectedTab)
-    ) {
+    if (lastSelectedTab && this._shouldShowTab(lastSelectedTab, window.uuid, containerId, workspaces)) {
       tabToSelect = lastSelectedTab;
     }
     // Find first suitable tab
     else {
-      tabToSelect = Array.from(visibleTabs).find((tab) => !tab.pinned);
-      if (!tabToSelect && visibleTabs.length) {
-        tabToSelect = Array.from(visibleTabs)[visibleTabs.length - 1];
+      tabToSelect = gBrowser.visibleTabs.find((tab) => !tab.pinned);
+      if (!tabToSelect && gBrowser.visibleTabs.length) {
+        tabToSelect = gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
       }
     }
 
-    const previousSelectedTab = gBrowser.selectedTab;
-
     // If we found a tab to select, select it
     if (tabToSelect) {
       gBrowser.selectedTab = tabToSelect;
@@ -1522,17 +1630,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       gBrowser.selectedTab = newTab;
       this._lastSelectedWorkspaceTabs[window.uuid] = newTab;
     }
-
-    // After selecting the new tab, hide the previous selected tab if it shouldn't be visible in the new workspace
-    if (!this._shouldShowTab(previousSelectedTab, window.uuid, containerId, workspaces)) {
-      gBrowser.hideTab(previousSelectedTab, undefined, true);
-    }
   }
 
   async _updateWorkspaceState(window, onInit) {
     // Update document state
     document.documentElement.setAttribute('zen-workspace-id', window.uuid);
 
+    // Recalculate new tab observers
+    gBrowser.tabContainer.observe(null, 'nsPref:changed', 'privacy.userContext.enabled');
+
     // Update workspace UI
     await this._updateWorkspacesChangeContextMenu();
     document.getElementById('tabbrowser-tabs')._positionPinnedTabs();
@@ -1546,6 +1652,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
     }
 
+    await this._animateTabs(window, !onInit && !this._animatingChange);
+
     // Reset bookmarks
     this._invalidateBookmarkContainers();
 
@@ -1563,22 +1671,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  async updateWorkspaceIndicator() {
-    // Update current workspace indicator
-    const currentWorkspace = await this.getActiveWorkspace();
-    if (!currentWorkspace) return;
-    const indicatorName = document.getElementById('zen-current-workspace-indicator-name');
-    const indicatorIcon = document.getElementById('zen-current-workspace-indicator-icon');
-
-    if (this.workspaceHasIcon(currentWorkspace)) {
-      indicatorIcon.removeAttribute('no-icon');
-    } else {
-      indicatorIcon.setAttribute('no-icon', 'true');
-    }
-    indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
-    indicatorName.textContent = currentWorkspace.name;
-  }
-
   async _updateWorkspacesChangeContextMenu() {
     const workspaces = await this._workspaces();
 
@@ -1612,6 +1704,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       theme: ZenThemePicker.getTheme([]),
     };
     this._prepareNewWorkspace(window);
+    const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
+    preifery?.removeAttribute('hidden');
+    this._createWorkspaceTabsSection(window, [], perifery);
+    preifery.setAttribute('hidden', 'true');
     return window;
   }
 
@@ -1622,9 +1718,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let workspaceData = this._createWorkspaceData(name, isDefault, icon);
     await this.saveWorkspace(workspaceData);
     await this.changeWorkspace(workspaceData);
+    this.registerPinnedResizeObserver();
     return workspaceData;
   }
 
+  onPinnedTabsResize(entries) {
+    if (!this.workspaceEnabled) {
+      return;
+    }
+    for (const entry of entries) {
+      const workspaceId = entry.target.getAttribute('zen-workspace-id');
+      const arrowScrollbox = document.querySelector(
+        `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
+      );
+      this._updateMarginTopPinnedTabs(arrowScrollbox, entry.target);
+    }
+  }
+
   async onTabBrowserInserted(event) {
     let tab = event.originalTarget;
     const isEssential = tab.getAttribute('zen-essential') === 'true';
@@ -1666,6 +1776,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  makeSurePinTabIsInCorrectPosition() {
+    const tabsInsidePinTab = Array.from(this.pinnedTabsContainer.parentElement.children).filter(
+      (child) => child.tagName === 'tab'
+    );
+    let changed = false;
+    for (const tab of tabsInsidePinTab) {
+      if (tab.getAttribute('zen-essential') === 'true') {
+        continue;
+      }
+      const workspaceId = tab.getAttribute('zen-workspace-id');
+      if (!workspaceId) {
+        continue;
+      }
+      const contaienr = document.querySelector(
+        `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
+      );
+      contaienr.insertBefore(tab, contaienr.firstChild);
+      changed = true;
+    }
+    if (changed) {
+      gBrowser.tabContainer._invalidateCachedTabs();
+    }
+  }
+
   // Context menu management
 
   _contextMenuId = null;
@@ -1801,7 +1935,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     document.getElementById('tabContextMenu').hidePopup();
     const previousWorkspaceID = document.documentElement.getAttribute('zen-workspace-id');
     for (let tab of tabs) {
-      tab.setAttribute('zen-workspace-id', workspaceID);
+      this.moveTabToWorkspace(tab, workspaceID);
       if (this._lastSelectedWorkspaceTabs[previousWorkspaceID] === tab) {
         // This tab is no longer the last selected tab in the previous workspace because it's being moved to
         // the current workspace
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index 5d2f2730d..e5ba04639 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..f7c02c14498b4ec5fcf5521480c88abac25a2283 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c90119b4b248887fd8612beb9aac83c6eeb57088 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -49,7 +49,7 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..f7c02c14498b4ec5fcf5521480c88aba
        if (this.tabContainer.verticalMode) {
          this._handleTabMove(aTab, () =>
 -          this.verticalPinnedTabsContainer.appendChild(aTab)
-+          aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.appendChild(aTab)
++          aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
          );
        } else {
 -        this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch
index b0a668a3c..149134733 100644
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ceab5c1dcf 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67709dae7d 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -101,6 +101,15 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        ) {
          delete draggedTab._dragData;
          return;
+@@ -1478,7 +1491,7 @@
+     }
+ 
+     get newTabButton() {
+-      return this.querySelector("#tabs-newtab-button");
++      return ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
+     }
+ 
+     get verticalMode() {
 @@ -1498,7 +1511,7 @@
        if (this.#allTabs) {
          return this.#allTabs;
@@ -110,7 +119,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        // remove arrowScrollbox periphery element
        children.pop();
  
-@@ -1512,14 +1525,24 @@
+@@ -1512,14 +1525,28 @@
        }
  
        this.#allTabs = [
@@ -126,6 +135,10 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
 +          // insert right after the parent tab
 +          this.#allTabs.splice(Math.min(i + 1, lastPinnedTabIdx), 0, glanceTab);
 +          i++;
++        } else if (this.#allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
++          // remove the separator from the list
++          this.#allTabs.splice(i, 1);
++          i--;
 +        }
 +      }
        return this.#allTabs;
@@ -137,16 +150,20 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        return children.filter(node => node.tagName == "tab-group");
      }
  
-@@ -1577,7 +1600,7 @@
-       let verticalPinnedTabsContainer = document.getElementById(
-         "vertical-pinned-tabs-container"
-       );
+@@ -1574,10 +1601,8 @@
+         return this.#focusableItems;
+       }
+ 
+-      let verticalPinnedTabsContainer = document.getElementById(
+-        "vertical-pinned-tabs-container"
+-      );
 -      let children = Array.from(this.arrowScrollbox.children);
++      let verticalPinnedTabsContainer = this.verticalPinnedTabsContainer;
 +      let children = Array.from(ZenWorkspaces.tabboxChildren);
  
        let focusableItems = [];
        for (let child of children) {
-@@ -1593,6 +1616,7 @@
+@@ -1593,6 +1618,7 @@
        }
  
        this.#focusableItems = [
@@ -154,7 +171,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1617,8 +1641,8 @@
+@@ -1617,8 +1643,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -165,7 +182,25 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        );
      }
  
-@@ -1816,7 +1840,7 @@
+@@ -1633,7 +1659,7 @@
+ 
+       if (node == null) {
+         // We have a container for non-tab elements at the end of the scrollbox.
+-        node = this.arrowScrollbox.lastChild;
++        node = ZenWorkspaces.activeWorkspaceStrip.lastChild;
+       }
+ 
+       node.before(tab);
+@@ -1733,7 +1759,7 @@
+           // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
+           // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
+           // Attach the long click popup to all of them.
+-          const newTab = document.getElementById("new-tab-button");
++          const newTab = ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
+           const newTab2 = this.newTabButton;
+           const newTabVertical = document.getElementById(
+             "vertical-tabs-newtab-button"
+@@ -1816,7 +1842,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -174,7 +209,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1832,6 +1856,7 @@
+@@ -1832,6 +1858,7 @@
          this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
        }
  
@@ -182,7 +217,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1843,7 +1868,7 @@
+@@ -1843,7 +1870,7 @@
          return;
        }
  
@@ -191,7 +226,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        if (!tabs.length) {
          return;
        }
-@@ -1879,7 +1904,7 @@
+@@ -1879,7 +1906,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -200,7 +235,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
          // Force tabs to stay the same width, unless we're closing the last tab,
          // which case we need to let them expand just enough so that the overall
          // tabbar width is the same.
-@@ -1894,7 +1919,7 @@
+@@ -1894,7 +1921,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -209,22 +244,40 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1965,11 +1990,11 @@
-       );
+@@ -1960,16 +1987,15 @@
+       // Move pinned tabs to another container when the tabstrip is toggled to vertical
+       // and when session restore code calls _positionPinnedTabs; update styling whenever
+       // the number of pinned tabs changes.
+-      let verticalTabsContainer = document.getElementById(
+-        "vertical-pinned-tabs-container"
+-      );
++      let verticalTabsContainer = this.verticalPinnedTabsContainer;
        let numPinned = gBrowser.pinnedTabCount;
  
 -      if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
 -        let tabs = this.visibleTabs;
-+      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length + document.getElementById("zen-essentials-container").children.length)) {
++      ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
++      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - 1 + document.getElementById("zen-essentials-container").children.length)) {
 +        let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
          for (let i = 0; i < numPinned; i++) {
            tabs[i].style.marginInlineStart = "";
 -          verticalTabsContainer.appendChild(tabs[i]);
-+          tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.appendChild(tabs[i]);
++          tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.insertBefore(tabs[i], verticalTabsContainer.lastChild);
          }
        }
  
-@@ -1992,8 +2017,8 @@
+@@ -1977,9 +2003,7 @@
+     }
+ 
+     _resetVerticalPinnedTabs() {
+-      let verticalTabsContainer = document.getElementById(
+-        "vertical-pinned-tabs-container"
+-      );
++      let verticalTabsContainer = this.verticalPinnedTabsContainer;
+ 
+       if (!verticalTabsContainer.children.length) {
+         return;
+@@ -1992,8 +2016,8 @@
      }
  
      _positionPinnedTabs() {
@@ -235,7 +288,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2074,7 +2099,7 @@
+@@ -2074,7 +2098,7 @@
          return;
        }
  
@@ -244,7 +297,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2257,9 +2282,9 @@
+@@ -2257,9 +2281,9 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -257,7 +310,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
          pinned ? numPinned : undefined
        );
  
-@@ -2502,8 +2527,9 @@
+@@ -2502,8 +2526,9 @@
        );
      }
  
@@ -269,7 +322,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
          return;
        }
  
-@@ -2668,9 +2694,9 @@
+@@ -2668,9 +2693,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -281,7 +334,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
        }
      }
  
-@@ -2754,7 +2780,7 @@
+@@ -2754,7 +2779,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -290,7 +343,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
          return;
        }
  
-@@ -2772,12 +2798,14 @@
+@@ -2772,12 +2797,14 @@
                selectedTab = {
                  left: selectedTab.left,
                  right: selectedTab.right,
@@ -306,7 +359,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
                selectedTab,
              ];
            })
-@@ -2794,8 +2822,11 @@
+@@ -2794,8 +2821,11 @@
              delete this._lastTabToScrollIntoView;
              // Is the new tab already completely visible?
              if (
@@ -320,7 +373,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ef532d6b5d311cab5bc573c2d0aae6ce
              ) {
                return;
              }
-@@ -2803,21 +2834,29 @@
+@@ -2803,21 +2833,29 @@
              if (this.arrowScrollbox.smoothScroll) {
                // Can we make both the new tab and the selected tab completely visible?
                if (
diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch
index 93e6cab24..65ff40457 100644
--- a/src/browser/themes/shared/tabbrowser/tabs-css.patch
+++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9b741fcd9 100644
+index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..9e11e715ade485c33ba4c8f719b41002f3008dde 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -33,7 +33,7 @@
@@ -64,6 +64,15 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9
        direction: rtl;
        mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
      }
+@@ -1135,7 +1133,7 @@
+   }
+ }
+ 
+-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
++#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+ #vertical-tabs-newtab-button {
+   appearance: none;
+   min-height: var(--tab-min-height);
 @@ -1146,7 +1144,7 @@
    margin-inline: var(--tab-inner-inline-margin);
  
@@ -73,6 +82,15 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9
    }
  
    &:hover {
+@@ -1170,7 +1168,7 @@
+  * flex container. #tabs-newtab-button is a child of the arrowscrollbox where
+  * we don't want a gap (between tabs), so we have to add some margin.
+  */
+-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
++#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
+   margin-block: var(--tab-block-margin);
+ }
+ 
 @@ -1194,7 +1192,6 @@
  }
  
diff --git a/src/toolkit/content/widgets/arrowscrollbox-js.patch b/src/toolkit/content/widgets/arrowscrollbox-js.patch
index 28739a036..ebfbd2dec 100644
--- a/src/toolkit/content/widgets/arrowscrollbox-js.patch
+++ b/src/toolkit/content/widgets/arrowscrollbox-js.patch
@@ -1,25 +1,7 @@
 diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
-index 328c770d275ebbaada8a44438eaf738b1a62d985..070439e26bfe6a2299aa4b82ee4c434e143e1a20 100644
+index 328c770d275ebbaada8a44438eaf738b1a62d985..95460108c6356408170b8a4a40d55a8f0621756b 100644
 --- a/toolkit/content/widgets/arrowscrollbox.js
 +++ b/toolkit/content/widgets/arrowscrollbox.js
-@@ -15,7 +15,7 @@
-     static get inheritedAttributes() {
-       return {
-         "#scrollbutton-up": "disabled=scrolledtostart",
--        scrollbox: "orient,align,pack,dir,smoothscroll",
-+        scrollbox: "align,pack,dir,smoothscroll",
-         "#scrollbutton-down": "disabled=scrolledtoend",
-       };
-     }
-@@ -26,7 +26,7 @@
-       <html:link rel="stylesheet" href="chrome://global/skin/arrowscrollbox.css"/>
-       <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-backwards"/>
-       <spacer part="overflow-start-indicator"/>
--      <scrollbox part="scrollbox" flex="1">
-+      <scrollbox part="scrollbox" orient="horizontal" flex="1">
-         <html:slot/>
-       </scrollbox>
-       <spacer part="overflow-end-indicator"/>
 @@ -98,6 +98,7 @@
  
        let slot = this.shadowRoot.querySelector("slot");

From d35fcabf929c4ca2d1c3ccc2f1d16fe5fd328ed2 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Tue, 11 Feb 2025 22:06:13 +0100
Subject: [PATCH 22/31] Refactor workspace tab animations and improve workspace
 strip organization

---
 .../base/zen-components/ZenWorkspaces.mjs     | 48 +++++++------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 8198ff3a1..5047afae7 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -370,9 +370,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth;
     const translateX = Math.max(-stripWidth, Math.min(delta, stripWidth));
 
-    for (const element of this._animateTabsElements) {
-      element.style.transform = `translateX(${translateX}px)`;
-    }
+    const currentWorkspace = this.activeWorkspace;
+    this._organizeWorkspaceStripLocations({ uuid: currentWorkspace }, true, translateX);
   }
 
   async _handleSwipeEnd(event) {
@@ -1409,21 +1408,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _cancelSwipeAnimation() {
-    const existingTransform = this._animateTabsElements[0].style.transform;
-    const newTransform = 'translateX(0)';
-    for (const element of this._animateTabsElements) {
-      gZenUIManager.motion.animate(
-        element,
-        {
-          transform: existingTransform ? [existingTransform, newTransform] : newTransform,
-        },
-        {
-          type: 'spring',
-          bounce: 0,
-          duration: 0.12,
-        }
-      );
-    }
+    const currentWorkspace = this.activeWorkspace;
+    this._animateTabs({ uuid: currentWorkspace }, true);
   }
 
   async _performWorkspaceChange(window, { onInit = false, alwaysChange = false, explicitAnimationDirection = undefined } = {}) {
@@ -1457,34 +1443,32 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this._updateWorkspaceState(window, onInit);
   }
 
-  get _animateTabsElements() {
-    const selector = `#zen-browser-tabs-wrapper`;
-    const extraSelector = `.zen-current-workspace-indicator`;
-    return [...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)];
-  }
-
   _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
     if (arrowscrollbox) {
       arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
     }
   }
 
-  async _organizeWorkspaceStripLocations(workspace) {
+  async _organizeWorkspaceStripLocations(workspace, justMove = false, offsetPixels = 0) {
     const workspaces = await this._workspaces();
     let workspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === workspace.uuid);
-    this._fixIndicatorsNames(workspaces);
+    if (!justMove) {
+      this._fixIndicatorsNames(workspaces);
+    }
     for (const otherWorkspace of workspaces.workspaces) {
       const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
       const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
       for (const container of document.querySelectorAll(selector)) {
-        container.style.transform = `translateX(${newTransform}%)`;
+        container.style.transform = `translateX(calc(${newTransform}% + ${offsetPixels}px))`;
         container.style.opacity = !newTransform;
       }
-      const pinnedContainerId = '#vertical-pinned-tabs-container ';
-      const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
-      const pinnedContainer = document.querySelector(pinnedContainerId + selector);
-      const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
-      this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
+      if (!justMove) {
+        const pinnedContainerId = '#vertical-pinned-tabs-container ';
+        const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
+        const pinnedContainer = document.querySelector(pinnedContainerId + selector);
+        const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
+        this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
+      }
     }
   }
 

From c4b4aa6287a7c669bbb5788ba3a3bc4fcb7d5067 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 11 Feb 2025 23:27:43 +0100
Subject: [PATCH 23/31] Fixed switching workspaces with

---
 .../base/zen-components/ZenWorkspaces.mjs     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 5047afae7..117a3dd15 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -384,7 +384,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let rawDirection = moveForward ? 1 : -1;
     if (this._swipeState.direction) {
       let direction = this.naturalScroll ? -1 : 1;
-      this.changeWorkspaceShortcut(rawDirection * direction);
+      this.changeWorkspaceShortcut(rawDirection * direction, true);
     } else {
       this._cancelSwipeAnimation();
     }
@@ -1412,7 +1412,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._animateTabs({ uuid: currentWorkspace }, true);
   }
 
-  async _performWorkspaceChange(window, { onInit = false, alwaysChange = false, explicitAnimationDirection = undefined } = {}) {
+  async _performWorkspaceChange(window, { onInit = false, alwaysChange = false, whileScrolling = false } = {}) {
     const previousWorkspace = await this.getActiveWorkspace();
     alwaysChange = alwaysChange || onInit;
 
@@ -1429,7 +1429,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     gBrowser.verticalPinnedTabsContainer = this.pinnedTabsContainer;
     gBrowser.tabContainer.verticalPinnedTabsContainer = this.pinnedTabsContainer;
     this.tabContainer._invalidateCachedTabs();
-    await this._organizeWorkspaceStripLocations(previousWorkspace);
+    if (!whileScrolling) {
+      await this._organizeWorkspaceStripLocations(previousWorkspace);
+    }
 
     // First pass: Handle tab visibility and workspace ID assignment
     this._processTabVisibility(window.uuid, containerId, workspaces);
@@ -1459,8 +1461,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
       const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
       for (const container of document.querySelectorAll(selector)) {
-        container.style.transform = `translateX(calc(${newTransform}% + ${offsetPixels}px))`;
-        container.style.opacity = !newTransform;
+        container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
+        container.style.opacity = offsetPixels ? 1 : !newTransform;
       }
       if (!justMove) {
         const pinnedContainerId = '#vertical-pinned-tabs-container ';
@@ -1508,14 +1510,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const elementWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
       const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
       const newTransform = `translateX(${offset}%)`;
+      const isCurrent = offset === 0;
       if (shouldAnimate) {
+        if (isCurrent) {
+          element.style.opacity = 1;
+        }
         animations.push(
           gZenUIManager.motion.animate(
             element,
             {
               transform: existingTransform ? [existingTransform, newTransform] : newTransform,
               // -0 to convert to number
-              opacity: [!!offset - 0, !offset - 0],
+              opacity: !isCurrent ? [!!offset - 0, !offset - 0] : [1, 1],
             },
             {
               type: 'spring',
@@ -1532,6 +1538,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
     }
     await Promise.all(animations);
+    if (this._beforeSelectedTab) {
+      this._beforeSelectedTab._visuallySelected = false;
+      this._beforeSelectedTab = null;
+    }
     this._animatingChange = false;
   }
 
@@ -1614,6 +1624,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       gBrowser.selectedTab = newTab;
       this._lastSelectedWorkspaceTabs[window.uuid] = newTab;
     }
+    // Always make sure we always unselect the tab from the old workspace
+    currentSelectedTab._selected = false;
+    currentSelectedTab._visuallySelected = true; // we do want to animate the tab deselection
+    this._beforeSelectedTab = currentSelectedTab;
   }
 
   async _updateWorkspaceState(window, onInit) {
@@ -1880,7 +1894,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._emojis = null;
   }
 
-  async changeWorkspaceShortcut(offset = 1) {
+  async changeWorkspaceShortcut(offset = 1, whileScrolling = false) {
     // Cycle through workspaces
     let workspaces = await this._workspaces();
     let activeWorkspace = await this.getActiveWorkspace();
@@ -1897,7 +1911,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
 
     let nextWorkspace = workspaces.workspaces[targetIndex];
-    await this.changeWorkspace(nextWorkspace, { explicitAnimationDirection: offset > 0 ? 'right' : 'left' });
+    await this.changeWorkspace(nextWorkspace, { whileScrolling });
   }
 
   _initializeWorkspaceTabContextMenus() {

From 22cad83c8fc08c565734e9cd0af8d1c9fce0ea06 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 12 Feb 2025 10:58:53 +0100
Subject: [PATCH 24/31] Fixed creating a new workspace in the new system

---
 src/browser/base/content/zen-styles/zen-workspaces.css | 2 +-
 src/browser/base/zen-components/ZenWorkspaces.mjs      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 9fbe38108..32f2a7c9a 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -456,7 +456,7 @@
   position: absolute;
   max-height: var(--zen-workspace-indicator-height);
   min-height: var(--zen-workspace-indicator-height);
-  gap: 5px;
+  gap: 12px;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-direction: row !important;
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 117a3dd15..636ab27d8 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1703,9 +1703,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     };
     this._prepareNewWorkspace(window);
     const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
-    preifery?.removeAttribute('hidden');
+    perifery?.removeAttribute('hidden');
     this._createWorkspaceTabsSection(window, [], perifery);
-    preifery.setAttribute('hidden', 'true');
+    perifery.setAttribute('hidden', 'true');
     return window;
   }
 

From 40a843200f3abba7aeb94d95c08db014542cb855 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 12 Feb 2025 12:39:13 +0100
Subject: [PATCH 25/31] Fixed unpinning tabs

---
 .../content/zen-styles/zen-tabs/vertical-tabs.css     |  2 +-
 src/browser/base/zen-components/ZenWorkspaces.mjs     | 11 ++++++-----
 .../components/tabbrowser/content/tabbrowser-js.patch | 10 +++++++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index b18d303c6..56415a234 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -369,7 +369,7 @@
 #zen-browser-tabs-wrapper {
   min-height: fit-content;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: clip;
   height: 100%;
   scrollbar-width: thin;
 }
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 636ab27d8..50a830328 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -359,7 +359,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     event.preventDefault();
     event.stopPropagation();
 
-    const delta = event.delta * 500;
+    const delta = event.delta * 300;
     this._swipeState.lastDelta = delta;
 
     if (Math.abs(delta) > 1) {
@@ -1625,9 +1625,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._lastSelectedWorkspaceTabs[window.uuid] = newTab;
     }
     // Always make sure we always unselect the tab from the old workspace
-    currentSelectedTab._selected = false;
-    currentSelectedTab._visuallySelected = true; // we do want to animate the tab deselection
-    this._beforeSelectedTab = currentSelectedTab;
+    if (currentSelectedTab && currentSelectedTab !== tabToSelect) {
+      currentSelectedTab._selected = false;
+      currentSelectedTab._visuallySelected = true; // we do want to animate the tab deselection
+      this._beforeSelectedTab = currentSelectedTab;
+    }
   }
 
   async _updateWorkspaceState(window, onInit) {
@@ -1639,7 +1641,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     // Update workspace UI
     await this._updateWorkspacesChangeContextMenu();
-    document.getElementById('tabbrowser-tabs')._positionPinnedTabs();
     gZenUIManager.updateTabsToolbar();
     await this._propagateWorkspaceData({ clearCache: false });
 
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index e5ba04639..1e2d0b8fc 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c90119b4b248887fd8612beb9aac83c6eeb57088 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..cbeb4472fdc7dc12c2a45a0c578d166c1cac1b6b 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -57,8 +57,12 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c90119b4b248887fd8612beb9aac83c6
        }
        aTab.setAttribute("pinned", "true");
        this._updateTabBarForPinnedTabs();
-@@ -831,7 +859,7 @@
-           this.tabContainer.arrowScrollbox.prepend(aTab);
+@@ -828,10 +856,10 @@
+           // the moving of a tab from the vertical pinned tabs container
+           // and back into arrowscrollbox.
+           aTab.removeAttribute("pinned");
+-          this.tabContainer.arrowScrollbox.prepend(aTab);
++          ZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
          });
        } else {
 -        this.moveTabTo(aTab, this.pinnedTabCount - 1, {

From bd4f9788ccb851cd4300ea5c188f0981f1e06cbb Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 12 Feb 2025 13:16:20 +0100
Subject: [PATCH 26/31] Fixed urlbar glitching when focusing in compact mode

---
 src/browser/components/urlbar/UrlbarInput-sys-mjs.patch | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
index f395eaa62..3871b2fe8 100644
--- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
+++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 50968dc04b527438acf30151f0c2e92f8b45097c..ea9207399b205c84d1263a4de8a63b776e36eabd 100644
+index 50968dc04b527438acf30151f0c2e92f8b45097c..f8587b68ac057bb0f829fc21f08ade6605b14c92 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -20,7 +20,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..ea9207399b205c84d1263a4de8a63b77
      // See _on_select().  HTMLInputElement.select() dispatches a "select"
      // event but does not set the primary selection.
      this._suppressPrimaryAdjustment = true;
-+    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", true);
++    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", !this.document.getElementById("navigator-toolbox").hasAttribute("zen-has-hover"));
      this.inputField.select();
 +    this.document.ownerGlobal.setTimeout(() => {
 +      this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");
@@ -44,7 +44,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..ea9207399b205c84d1263a4de8a63b77
        }
      }
 -
-+    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", true);
++    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", !this.document.getElementById("navigator-toolbox").hasAttribute("zen-has-hover"));
      this.handleNavigation({ event });
 +    this.document.ownerGlobal.setTimeout(() => {
 +      this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");

From 23d9487ca7957b5608682ccd54722eee1baa14ac Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 12 Feb 2025 15:35:37 +0100
Subject: [PATCH 27/31] Fixed pinned tabs separator using the wrong tabs when
 hiding

---
 .../zen-styles/zen-tabs/vertical-tabs.css        |  3 +--
 .../base/zen-components/ZenWorkspaces.mjs        | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 56415a234..2c530b8df 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -126,8 +126,7 @@
   width: 98%;
   transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
 
-  #vertical-pinned-tabs-container .zen-workspace-tabs-section[active]:not(:has(tab:not([hidden]))) &,
-  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[active] tab:not([hidden]))) & {
+  #vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
     max-height: 0;
     margin: 0 auto;
   }
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 50a830328..4535abca0 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -509,6 +509,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._initializeWorkspaceTabContextMenus();
       await this.workspaceBookmarks();
       window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
+      window.addEventListener('TabOpen', this.updateTabsContainers.bind(this));
+      window.addEventListener('TabClose', this.updateTabsContainers.bind(this));
       let workspaces = await this._workspaces();
       let activeWorkspace = null;
       if (workspaces.workspaces.length === 0) {
@@ -1721,6 +1723,19 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return workspaceData;
   }
 
+  updateTabsContainers() {
+    this.onPinnedTabsResize([this.pinnedTabsContainer]);
+  }
+
+  updateShouldHideSeparator(arrowScrollbox, pinnedContainer) {
+    const shouldHideSeparator = pinnedContainer.children.length === 1 || arrowScrollbox.children.length === 1;
+    if (shouldHideSeparator) {
+      pinnedContainer.setAttribute('hide-separator', 'true');
+    } else {
+      pinnedContainer.removeAttribute('hide-separator');
+    }
+  }
+
   onPinnedTabsResize(entries) {
     if (!this.workspaceEnabled) {
       return;
@@ -1731,6 +1746,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
       );
       this._updateMarginTopPinnedTabs(arrowScrollbox, entry.target);
+      this.updateShouldHideSeparator(arrowScrollbox, entry.target);
     }
   }
 

From aebc2c9660957926eba04cb654ca1eac835ac8c8 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 12 Feb 2025 15:36:59 +0100
Subject: [PATCH 28/31] Fixed handling tab opens/close on workspaces

---
 src/browser/base/zen-components/ZenWorkspaces.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 4535abca0..803854dd5 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1724,7 +1724,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   updateTabsContainers() {
-    this.onPinnedTabsResize([this.pinnedTabsContainer]);
+    this.onPinnedTabsResize([{ target: this.pinnedTabsContainer }]);
   }
 
   updateShouldHideSeparator(arrowScrollbox, pinnedContainer) {

From 9f6fbc5e57616d8a0daf9bafc304a0b8f9957047 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 12 Feb 2025 20:03:00 +0100
Subject: [PATCH 29/31] Refactor tab handling and session restore logic for
 improved workspace management

---
 .../zen-styles/zen-tabs/vertical-tabs.css     |  4 +-
 .../base/zen-components/ZenWorkspaces.mjs     | 41 ++++++++++++++++++-
 .../sessionstore/SessionStore-sys-mjs.patch   | 13 +++++-
 .../tabbrowser/content/tabbrowser-js.patch    | 10 ++---
 .../tabbrowser/content/tabs-js.patch          | 37 +++++++++--------
 surfer.json                                   |  2 +-
 6 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 2c530b8df..68c7d8624 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -371,6 +371,7 @@
   overflow-x: clip;
   height: 100%;
   scrollbar-width: thin;
+  position: relative;
 }
 
 #vertical-pinned-tabs-container {
@@ -378,7 +379,8 @@
   display: flex !important;
   flex-direction: column;
   min-height: fit-content !important;
-  overflow: visible;
+  overflow-x: clip;
+  overflow-y: visible;
   max-height: unset !important;
 
   & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 803854dd5..9ecf698ed 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1308,7 +1308,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
     tab.setAttribute('zen-workspace-id', workspaceID);
     const parent = tab.pinned ? '#zen-browser-tabs-pinned ' : '#zen-browser-tabs ';
-    const container = document.querySelector(parent + '.zen-browser-tabs-container');
+    const container = document.querySelector(parent + '.zen-workspace-tabs-section');
     if (container) {
       container.insertBefore(tab, container.firstChild);
     }
@@ -2043,4 +2043,43 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Return true only if the bookmark is in another workspace and not in the active one
     return isInOtherWorkspace && !isInActiveWorkspace;
   }
+
+  // Session restore functions
+  get allStoredTabs() {
+    if (!this._hasInitializedTabsStrip) {
+      const children = Array.from(this.tabboxChildren);
+      children.pop(); // Remove the last child which is the new tab button
+      return children;
+    }
+
+    const tabs = [];
+    // we need to go through each tab in each container
+    const essentialsContainer = document.getElementById('zen-essentials-container');
+    const pinnedContainers = document.querySelectorAll('#vertical-pinned-tabs-container .zen-workspace-tabs-section');
+    const normalContainers = document.querySelectorAll('#tabbrowser-arrowscrollbox .zen-workspace-tabs-section');
+    const containers = [essentialsContainer, ...pinnedContainers, ...normalContainers];
+    for (const container of containers) {
+      for (const tab of container.children) {
+        if (tab.tagName === 'tab' || tab.tagName == 'tab-group') {
+          tabs.push(tab);
+        }
+      }
+    }
+    return tabs;
+  }
+
+  get pinnedTabCount() {
+    return this.pinnedTabsContainer.children.length - 1;
+  }
+
+  get normalTabCount() {
+    return this.tabboxChildren.length - 1;
+  }
+
+  get allWorkspaceTabs() {
+    const currentWorkspace = this.activeWorkspace;
+    return this.allStoredTabs.filter(
+      (tab) => tab.hasAttribute('zen-essential') || tab.getAttribute('zen-workspace-id') === currentWorkspace
+    );
+  }
 })();
diff --git a/src/browser/components/sessionstore/SessionStore-sys-mjs.patch b/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
index 85c7071f7..2c7b2688f 100644
--- a/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
+++ b/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/components/sessionstore/SessionStore.sys.mjs b/browser/components/sessionstore/SessionStore.sys.mjs
-index 8125c1afc07f3365a2ad030adaf6a560453d7fe6..2856c5f93bfc9d68b98e09b2f26e3d5266c1f46a 100644
+index 908743177d9f95e2e6549c689e7a493ca8668701..b452d7dfc93f6171f8a65668e052a37638f1f6c3 100644
 --- a/browser/components/sessionstore/SessionStore.sys.mjs
 +++ b/browser/components/sessionstore/SessionStore.sys.mjs
-@@ -3679,6 +3679,7 @@ var SessionStoreInternal = {
+@@ -3848,6 +3848,7 @@ var SessionStoreInternal = {
          aWindow.gBrowser.selectedTab = newTab;
        }
  
@@ -10,3 +10,12 @@ index 8125c1afc07f3365a2ad030adaf6a560453d7fe6..2856c5f93bfc9d68b98e09b2f26e3d52
        // Restore the state into the new tab.
        this.restoreTab(newTab, tabState, {
          restoreImmediately: aRestoreImmediately,
+@@ -5315,7 +5316,7 @@ var SessionStoreInternal = {
+     }
+ 
+     let tabbrowser = aWindow.gBrowser;
+-    let tabs = tabbrowser.tabs;
++    let tabs = aWindow.ZenWorkspaces.allStoredTabs;
+     /** @type {WindowStateData} */
+     let winData = this._windows[aWindow.__SSi];
+     let tabsData = (winData.tabs = []);
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index 1e2d0b8fc..e5ba04639 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..cbeb4472fdc7dc12c2a45a0c578d166c1cac1b6b 100644
+index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c90119b4b248887fd8612beb9aac83c6eeb57088 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -406,11 +406,39 @@
@@ -57,12 +57,8 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..cbeb4472fdc7dc12c2a45a0c578d166c
        }
        aTab.setAttribute("pinned", "true");
        this._updateTabBarForPinnedTabs();
-@@ -828,10 +856,10 @@
-           // the moving of a tab from the vertical pinned tabs container
-           // and back into arrowscrollbox.
-           aTab.removeAttribute("pinned");
--          this.tabContainer.arrowScrollbox.prepend(aTab);
-+          ZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
+@@ -831,7 +859,7 @@
+           this.tabContainer.arrowScrollbox.prepend(aTab);
          });
        } else {
 -        this.moveTabTo(aTab, this.pinnedTabCount - 1, {
diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch
index 149134733..dfafb0b6c 100644
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67709dae7d 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..f7866af6f5b72e2704a87148300a391b20e112db 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -209,7 +209,12 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1832,6 +1858,7 @@
+@@ -1828,10 +1854,12 @@
+ 
+     _handleTabSelect(aInstant) {
+       let selectedTab = this.selectedItem;
++      if (!selectedTab) return;
+       if (this.overflowing) {
          this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
        }
  
@@ -217,7 +222,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1843,7 +1870,7 @@
+@@ -1843,7 +1871,7 @@
          return;
        }
  
@@ -226,7 +231,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
        if (!tabs.length) {
          return;
        }
-@@ -1879,7 +1906,7 @@
+@@ -1879,7 +1907,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -235,7 +240,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
          // Force tabs to stay the same width, unless we're closing the last tab,
          // which case we need to let them expand just enough so that the overall
          // tabbar width is the same.
-@@ -1894,7 +1921,7 @@
+@@ -1894,7 +1922,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -244,7 +249,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1960,16 +1987,15 @@
+@@ -1960,16 +1988,15 @@
        // Move pinned tabs to another container when the tabstrip is toggled to vertical
        // and when session restore code calls _positionPinnedTabs; update styling whenever
        // the number of pinned tabs changes.
@@ -266,7 +271,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
          }
        }
  
-@@ -1977,9 +2003,7 @@
+@@ -1977,9 +2004,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -277,7 +282,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -1992,8 +2016,8 @@
+@@ -1992,8 +2017,8 @@
      }
  
      _positionPinnedTabs() {
@@ -288,7 +293,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2074,7 +2098,7 @@
+@@ -2074,7 +2099,7 @@
          return;
        }
  
@@ -297,7 +302,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2257,9 +2281,9 @@
+@@ -2257,9 +2282,9 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -310,7 +315,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
          pinned ? numPinned : undefined
        );
  
-@@ -2502,8 +2526,9 @@
+@@ -2502,8 +2527,9 @@
        );
      }
  
@@ -322,7 +327,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
          return;
        }
  
-@@ -2668,9 +2693,9 @@
+@@ -2668,9 +2694,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -334,7 +339,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
        }
      }
  
-@@ -2754,7 +2779,7 @@
+@@ -2754,7 +2780,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -343,7 +348,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
          return;
        }
  
-@@ -2772,12 +2797,14 @@
+@@ -2772,12 +2798,14 @@
                selectedTab = {
                  left: selectedTab.left,
                  right: selectedTab.right,
@@ -359,7 +364,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
                selectedTab,
              ];
            })
-@@ -2794,8 +2821,11 @@
+@@ -2794,8 +2822,11 @@
              delete this._lastTabToScrollIntoView;
              // Is the new tab already completely visible?
              if (
@@ -373,7 +378,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67
              ) {
                return;
              }
-@@ -2803,21 +2833,29 @@
+@@ -2803,21 +2834,29 @@
              if (this.arrowScrollbox.smoothScroll) {
                // Can we make both the new tab and the selected tab completely visible?
                if (
diff --git a/surfer.json b/surfer.json
index 96ac3b992..8b97e5388 100644
--- a/surfer.json
+++ b/surfer.json
@@ -53,4 +53,4 @@
     "licenseType": "MPL-2.0"
   },
   "updateHostname": "updates.zen-browser.app"
-}
+}
\ No newline at end of file

From d16992f5b21ea5e3bb2aff560a0eda5a541ef606 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 12 Feb 2025 20:05:56 +0100
Subject: [PATCH 30/31] Force overflow-x clipping in vertical tabs to ensure
 consistent styling

---
 src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 68c7d8624..a5ca41b3f 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -368,7 +368,7 @@
 #zen-browser-tabs-wrapper {
   min-height: fit-content;
   overflow-y: auto;
-  overflow-x: clip;
+  overflow-x: clip !important; /* might break custom css with new design, so let's force it */
   height: 100%;
   scrollbar-width: thin;
   position: relative;

From 8b98469936ff756cb4c53a22dfb3382555aa1a5d Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 12 Feb 2025 21:38:05 +0100
Subject: [PATCH 31/31] Added support for acrylic backgrounds for windows 11
 with mica support

---
 .../libpref/init/StaticPrefList-yaml.patch    | 13 +++++++++---
 src/widget/windows/nsWindow-cpp.patch         | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/widget/windows/nsWindow-cpp.patch

diff --git a/src/modules/libpref/init/StaticPrefList-yaml.patch b/src/modules/libpref/init/StaticPrefList-yaml.patch
index 6d3166133..fadcff2b1 100644
--- a/src/modules/libpref/init/StaticPrefList-yaml.patch
+++ b/src/modules/libpref/init/StaticPrefList-yaml.patch
@@ -1,8 +1,8 @@
 diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
-index 5c5992d7b32e4c16d6a92815ca6fd54e8fcec824..6c8e67e36f02b578c800fa460868135afb73c66b 100644
+index 7364514f74703184462e8dbce3f0aafc3f850a3d..560671beddf6c216e918a47bd5dbd4e770a24ec7 100644
 --- a/modules/libpref/init/StaticPrefList.yaml
 +++ b/modules/libpref/init/StaticPrefList.yaml
-@@ -17810,7 +17810,7 @@
+@@ -18067,7 +18067,7 @@
  # Whether we use the mica backdrop. Off by default for now.
  - name: widget.windows.mica
    type: bool
@@ -11,7 +11,7 @@ index 5c5992d7b32e4c16d6a92815ca6fd54e8fcec824..6c8e67e36f02b578c800fa460868135a
    mirror: once
  #endif
  
-@@ -17923,6 +17923,19 @@
+@@ -18180,6 +18180,26 @@
    mirror: always
  #endif
  
@@ -27,6 +27,13 @@ index 5c5992d7b32e4c16d6a92815ca6fd54e8fcec824..6c8e67e36f02b578c800fa460868135a
 +  value: false
 +  mirror: always
 +#endif
++
++#ifdef XP_WIN
++- name: zen.widget.windows.acrylic
++  type: bool
++  value: true
++  mirror: once
++#endif
 +
  #---------------------------------------------------------------------------
  # Prefs starting with "zoom."
diff --git a/src/widget/windows/nsWindow-cpp.patch b/src/widget/windows/nsWindow-cpp.patch
new file mode 100644
index 000000000..99fe82efa
--- /dev/null
+++ b/src/widget/windows/nsWindow-cpp.patch
@@ -0,0 +1,21 @@
+diff --git a/widget/windows/nsWindow.cpp b/widget/windows/nsWindow.cpp
+index b735e78b1c2f3e0d85a5224311cdc746007c7eac..50f3c6e40b11220b71a8a3811305661887bb4360 100644
+--- a/widget/windows/nsWindow.cpp
++++ b/widget/windows/nsWindow.cpp
+@@ -165,6 +165,7 @@
+ #include "mozilla/StaticPrefs_layout.h"
+ #include "mozilla/StaticPrefs_ui.h"
+ #include "mozilla/StaticPrefs_widget.h"
++#include "mozilla/StaticPrefs_zen.h"
+ #include "nsNativeAppSupportWin.h"
+ 
+ #include "nsIGfxInfo.h"
+@@ -1071,7 +1072,7 @@ nsresult nsWindow::Create(nsIWidget* aParent, const LayoutDeviceIntRect& aRect,
+ 
+   if (WinUtils::MicaEnabled() && !IsPopup()) {
+     // Enable Mica Alt Material if available.
+-    const DWM_SYSTEMBACKDROP_TYPE tabbedWindow = DWMSBT_TABBEDWINDOW;
++    const DWM_SYSTEMBACKDROP_TYPE tabbedWindow = StaticPrefs::zen_widget_windows_acrylic_AtStartup() ? DWMSBT_TRANSIENTWINDOW : DWMSBT_TABBEDWINDOW;
+     DwmSetWindowAttribute(mWnd, DWMWA_SYSTEMBACKDROP_TYPE, &tabbedWindow,
+                           sizeof tabbedWindow);
+   }