Make `toggle-files-button` unforgettable (#5653)

1 files changed, 17 insertions, 2 deletions

diff --git a/source/features/toggle-files-button.tsx b/source/features/toggle-files-button.tsx
index b6b02098..2c3345cd 100644
--- a/source/features/toggle-files-button.tsx
+++ b/source/features/toggle-files-button.tsx
@@ -5,7 +5,7 @@ import select from 'select-dom';
 import delegate from 'delegate-it';
 import elementReady from 'element-ready';
 import * as pageDetect from 'github-url-detection';
-import {FoldIcon, UnfoldIcon} from '@primer/octicons-react';
+import {FoldIcon, UnfoldIcon, ArrowUpIcon} from '@primer/octicons-react';
 
 import features from '.';
 import observeElement from '../helpers/simplified-element-observer';
@@ -33,17 +33,32 @@ function addButton(): void {
 async function toggleHandler(): Promise<void> {
 	const isHidden = select('.repository-content')!.classList.toggle('rgh-files-hidden');
 	await (isHidden ? cache.set(cacheKey, true) : cache.delete(cacheKey));
+
+	// Remove notice after the first click
+	select('.rgh-files-hidden-notice')?.remove();
 }
 
 async function init(): Promise<Deinit[]> {
 	const repoContent = (await elementReady('.repository-content'))!;
+
 	if (await cache.get<boolean>(cacheKey)) {
 		repoContent.classList.add('rgh-files-hidden');
+
+		// Add notice so the user knows that the list was collapsed #5524
+		select('.Box', repoContent)!.after(
+			// 19px align this icon with the <UnfoldIcon/> above it
+			<div
+				className="mb-3 mt-n3 py-1 text-right text-small color-fg-subtle rgh-files-hidden-notice"
+				style={{paddingRight: '19px'}}
+			>
+				The file list was collapsed via Refined GitHub <ArrowUpIcon className="v-align-middle"/>
+			</div>,
+		);
 	}
 
 	return [
 		observeElement(repoContent, addButton),
-		delegate(document, '.rgh-toggle-files', 'click', toggleHandler),
+		delegate(document, '.rgh-toggle-files, .rgh-files-hidden-notice', 'click', toggleHandler),
 	];
 }