Added: option to show tab subtitle with URL

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': {

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',

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"

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"

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
@@ -576,6 +577,25 @@
 .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)
+  font: var(--tabs-subtitle-font)
+  opacity: 0.7
+}
+
+.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
 // -

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]