From 3966131655fca9179b5b5c9064fab8331517b391 Mon Sep 17 00:00:00 2001
From: Max <maximtsyba@gmail.com>
Date: Tue, 17 Dec 2024 20:50:39 +0100
Subject: [PATCH 1/2] Add option to show tab subtitle with URL

---
 src/_locales/dict.setup-page.ts             |  4 ++++
 src/defaults/settings.ts                    |  1 +
 src/page.setup/components/settings.tabs.vue |  4 ++++
 src/sidebar/components/tab.vue              |  3 +++
 src/styles/themes/proton/sidebar/tab.styl   | 18 ++++++++++++++++++
 src/types/settings.ts                       |  1 +
 6 files changed, 31 insertions(+)

diff --git a/src/_locales/dict.setup-page.ts b/src/_locales/dict.setup-page.ts
index 0c80ed66..9db30921 100644
--- a/src/_locales/dict.setup-page.ts
+++ b/src/_locales/dict.setup-page.ts
@@ -2666,6 +2666,10 @@ Przykłady: "*", "ctrl+$", "ctrl+alt+g"`,
     zh_TW: '分頁切換間的最小延遲（毫秒）',
     ja: 'タブ切り替え間の最小遅延（ミリ秒）',
   },
+  'settings.tabs_show_subtitle': {
+    en: 'Show tab subtitle with URL',
+    ru: 'Показывать подзаголовок вкладки с URL',
+  },
 
   // - New tab position
   'settings.move_new_tab_pin': {
diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts
index c9f50026..bab6c870 100644
--- a/src/defaults/settings.ts
+++ b/src/defaults/settings.ts
@@ -90,6 +90,7 @@ export const DEFAULT_SETTINGS: SettingsState = {
   tabWarmupOnHover: true,
   tabSwitchDelay: 0,
   forceDiscard: true,
+  showTabSubtitle: false,
 
   // New tab position
   moveNewTabPin: 'start',
diff --git a/src/page.setup/components/settings.tabs.vue b/src/page.setup/components/settings.tabs.vue
index 5e236e9e..45f6cbe9 100644
--- a/src/page.setup/components/settings.tabs.vue
+++ b/src/page.setup/components/settings.tabs.vue
@@ -119,6 +119,10 @@ section(ref="el")
   //-   label="settings.tab_warmup_on_hover"
   //-   v-model:value="Settings.state.tabWarmupOnHover"
   //-   @update:value="Settings.saveDebounced(150)")
+  ToggleField(
+    label="settings.tabs_show_subtitle"
+    v-model:value="Settings.state.showTabSubtitle"
+    @update:value="Settings.saveDebounced(150)")
   NumField.-inline(
     label="settings.tabs_switch_delay"
     v-model:value="Settings.state.tabSwitchDelay"
diff --git a/src/sidebar/components/tab.vue b/src/sidebar/components/tab.vue
index 3432970e..e8ed01c7 100644
--- a/src/sidebar/components/tab.vue
+++ b/src/sidebar/components/tab.vue
@@ -69,6 +69,9 @@
         @blur="onCustomTitleBlur"
         @keydown="onCustomTitlteKD")
       .title(v-else) {{tab.reactive.customTitle ?? tab.reactive.title}}
+      .subtitle(
+        v-if="tab.reactive.url && Settings.state.showTabSubtitle"
+      ) {{ tab.reactive.url.replace(/^https?:\/\//, '') }}
     .close(
       v-if="!iconOnly && Settings.state.tabRmBtn !== 'none'"
       @mousedown.stop="onMouseDownClose"
diff --git a/src/styles/themes/proton/sidebar/tab.styl b/src/styles/themes/proton/sidebar/tab.styl
index 3619c25c..a4d2f3af 100644
--- a/src/styles/themes/proton/sidebar/tab.styl
+++ b/src/styles/themes/proton/sidebar/tab.styl
@@ -576,6 +576,24 @@
 .Tab[data-active="true"] .title
   color: var(--tabs-activated-fg)
 
+// ---
+// -- Subtitle
+// -
+.Tab .subtitle{
+	position: relative;
+  color: var(--tabs-normal-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  transition: transform var(--d-fast);
+  padding-top: 1px;
+}
+
+.Tab[data-audible="true"] .t-box .subtitle,
+.Tab[data-muted="true"] .t-box .subtitle,
+.Tab[data-paused="true"] .t-box .subtitle{
+  transform: translateX(var(--audio-btn-offset));
+}
+
 // ---
 // -- Container highlight
 // -
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 609c5471..be594a44 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -89,6 +89,7 @@ export interface SettingsState {
   tabWarmupOnHover: boolean
   tabSwitchDelay: number
   forceDiscard: boolean
+  showTabSubtitle: boolean
 
   // New tab position
   moveNewTabPin: (typeof SETTINGS_OPTIONS.moveNewTabPin)[number]

From 81c8b6e9a1109427e8fd01b5f3f903f69238c65a Mon Sep 17 00:00:00 2001
From: Max <maximtsyba@gmail.com>
Date: Tue, 17 Dec 2024 21:08:50 +0100
Subject: [PATCH 2/2] Adjusted CSS rules for tab subtitles

---
 src/styles/themes/proton/sidebar/tab.styl | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/styles/themes/proton/sidebar/tab.styl b/src/styles/themes/proton/sidebar/tab.styl
index a4d2f3af..f415c426 100644
--- a/src/styles/themes/proton/sidebar/tab.styl
+++ b/src/styles/themes/proton/sidebar/tab.styl
@@ -7,6 +7,7 @@
   --tabs-margin: var(--general-margin)
   --tabs-indent: 10px
   --tabs-font: rem(15) sans-serif
+  --tabs-subtitle-font: rem(12) sans-serif
   --tabs-count-font: rem(9) sans-serif
   --tabs-border-radius: var(--general-border-radius)
   --tabs-inner-gap: 5px
@@ -580,12 +581,13 @@
 // -- Subtitle
 // -
 .Tab .subtitle{
-	position: relative;
-  color: var(--tabs-normal-fg);
-  white-space: nowrap;
-  overflow: hidden;
-  transition: transform var(--d-fast);
-  padding-top: 1px;
+	position: relative
+  color: var(--tabs-normal-fg)
+  white-space: nowrap
+  overflow: hidden
+  transition: transform var(--d-fast)
+  font: var(--tabs-subtitle-font)
+  opacity: 0.7
 }
 
 .Tab[data-audible="true"] .t-box .subtitle,