From 4ec19961ec2c499a56cdf4bf811f35631682221c Mon Sep 17 00:00:00 2001
From: wahajahmed010 <wahajahmed010@example.com>
Date: Wed, 22 Apr 2026 01:39:07 +0200
Subject: [PATCH] Add option to collapse the Transcript panel - Change
 transcript setting from boolean to enum (normal, collapsed, hidden) - Add
 collapse functionality when 'collapsed' option is selected - Update
 appearance.js to handle new states - Update core.js to collapse transcript
 when set to 'collapsed' state

---
 js&css/web-accessible/core.js                 | 25 +++++++++++++----
 .../www.youtube.com/appearance.js             | 28 ++++++++++++++++++-
 menu/skeleton-parts/appearance.js             | 26 ++++++++---------
 3 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/js&css/web-accessible/core.js b/js&css/web-accessible/core.js
index c75981e77..b9ebd709e 100644
--- a/js&css/web-accessible/core.js
+++ b/js&css/web-accessible/core.js
@@ -270,13 +270,26 @@ document.addEventListener('it-message-from-extension', function () {
 					}
 					break
 
-				case 'transcript':
-					if (ImprovedTube.storage.transcript === true) {
-						document.querySelector('*[target-id*=transcript]')?.removeAttribute('visibility');
-					} else if (ImprovedTube.storage.transcript === false) {
-						document.querySelector('*[target-id*=transcript] #visibility-button button')?.click();
+			case 'transcript':
+				if (ImprovedTube.storage.transcript === 'normal' || ImprovedTube.storage.transcript === 'collapsed') {
+					document.querySelector('*[target-id*=transcript]')?.removeAttribute('visibility');
+					
+					// Collapse the transcript if set to 'collapsed'
+					if (ImprovedTube.storage.transcript === 'collapsed') {
+						const transcriptPanel = document.querySelector('*[target-id*=transcript]');
+						if (transcriptPanel) {
+							setTimeout(function() {
+								const collapseButton = transcriptPanel.querySelector('button[aria-label*="collapse"], button[aria-label*="Collaps"]');
+								if (collapseButton) {
+									collapseButton.click();
+								}
+							}, 500);
+						}
 					}
-					break
+				} else if (ImprovedTube.storage.transcript === 'hidden') {
+					document.querySelector('*[target-id*=transcript] #visibility-button button')?.click();
+				}
+				break
 
 				case 'chapters':
 					if (ImprovedTube.storage.chapters === true) {
diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js
index c7fba1ca1..dfe8aa9a6 100644
--- a/js&css/web-accessible/www.youtube.com/appearance.js
+++ b/js&css/web-accessible/www.youtube.com/appearance.js
@@ -370,7 +370,7 @@ ImprovedTube.hideTopProgressBar = function () {
 /*----------------------------------------------------------------
  TRANSCRIPT
 --------------------------------------------------------------*/
-ImprovedTube.transcript = function (el) { if (ImprovedTube.storage.transcript === true) {
+ImprovedTube.transcript = function (el) { if (ImprovedTube.storage.transcript === 'collapsed' || ImprovedTube.storage.transcript === 'normal') {
 	const available = el.querySelector('[target-id*=transcript][visibility*=HIDDEN]') || el.querySelector('[target-id*=transcript]')?.clientHeight;
 	if (available) {
 		if (!ImprovedTube.originalFocus) {ImprovedTube.originalFocus = HTMLElement.prototype.focus;}  // Backing up default method. Youtube doesn't use alternatives Element.prototype.scrollIntoView  window.scrollTo  window.scrollBy)
@@ -383,6 +383,19 @@ ImprovedTube.transcript = function (el) { if (ImprovedTube.storage.transcript ==
 		const descriptionTranscript = el.querySelector('ytd-video-description-transcript-section-renderer button[aria-label]');
 		descriptionTranscript ? descriptionTranscript.click() : el.querySelector('[target-id*=transcript]')?.removeAttribute('visibility');
 		if ( yt.config_.EXPERIMENT_FLAGS.kevlar_watch_grid === true ) { available.setAttribute('z-index', '98765') }
+
+		// Collapse the transcript if set to 'collapsed'
+		if (ImprovedTube.storage.transcript === 'collapsed') {
+			setTimeout(function() {
+				const transcriptPanel = el.querySelector('[target-id*=transcript]');
+				if (transcriptPanel) {
+					const collapseButton = transcriptPanel.querySelector('button[aria-label*="collapse"], button[aria-label*="Collaps"]');
+					if (collapseButton) {
+						collapseButton.click();
+					}
+				}
+			}, 500);
+		}
 	}  
 }};
 /*----------------------------------------------------------------
@@ -401,6 +414,19 @@ ImprovedTube.chapters = function (el) { if (ImprovedTube.storage.chapters === tr
 		const modernChapters = el.querySelector('[modern-chapters] #navigation-button button[aria-label]');
 		modernChapters ? modernChapters.click() : el.querySelector('[target-id*=chapters]')?.removeAttribute('visibility');
 		if ( yt.config_.EXPERIMENT_FLAGS.kevlar_watch_grid === true ) { available.setAttribute('z-index', '98765') }
+
+		// Collapse the transcript if set to 'collapsed'
+		if (ImprovedTube.storage.transcript === 'collapsed') {
+			setTimeout(function() {
+				const transcriptPanel = el.querySelector('[target-id*=transcript]');
+				if (transcriptPanel) {
+					const collapseButton = transcriptPanel.querySelector('button[aria-label*="collapse"], button[aria-label*="Collaps"]');
+					if (collapseButton) {
+						collapseButton.click();
+					}
+				}
+			}, 500);
+		}
 	}  
 }};	
 /*------------------------------------------------------------------------------
diff --git a/menu/skeleton-parts/appearance.js b/menu/skeleton-parts/appearance.js
index 883fed097..e60a7ad22 100644
--- a/menu/skeleton-parts/appearance.js
+++ b/menu/skeleton-parts/appearance.js
@@ -1059,21 +1059,19 @@ extension.skeleton.main.layers.section.appearance.on.click.sidebar = {
 				text: "hideThumbnails"
 			},
 			transcript: {
-				component: 'switch',
+				component: "select",
 				text: 'Transcript',
-				value: false,
-				id: 'transcript',
-				on: {
-					click: function () {
-						setTimeout(() => {
-							if (satus.storage.get('transcript')) {
-								if (satus.storage.get('no_page_margin')) {
-									this.nextSibling.nextSibling.click();
-								}
-							}
-						}, 250);
-					}
-				}
+				options: [{
+					text: 'normal',
+					value: 'normal'
+				}, {
+					text: 'collapsed',
+					value: 'collapsed'
+				}, {
+					text: 'hidden',
+					value: 'hidden'
+				}],
+				storage: 'transcript'
 			},
 			compact_spacing: {
 				component: "switch",