Avoid duplication in `toggle-files-button` (#5706)

1 files changed, 46 insertions, 31 deletions

diff --git a/source/features/toggle-files-button.tsx b/source/features/toggle-files-button.tsx
index d4b583ad..46fdfa82 100644
--- a/source/features/toggle-files-button.tsx
+++ b/source/features/toggle-files-button.tsx
@@ -8,57 +8,72 @@ import * as pageDetect from 'github-url-detection';
 import {FoldIcon, UnfoldIcon, ArrowUpIcon} from '@primer/octicons-react';
 
 import features from '.';
+import attachElement from '../helpers/attach-element';
 import observeElement from '../helpers/simplified-element-observer';
 
 const cacheKey = 'files-hidden';
+const hiddenFilesClass = 'rgh-files-hidden';
+const toggleButtonClass = 'rgh-toggle-files';
+const noticeClass = 'rgh-files-hidden-notice';
+
+// 19px align this icon with the <UnfoldIcon/> above it
+const noticeStyle = {paddingRight: '19px'};
 
 function addButton(): void {
-	const commitsInfo = select('.repository-content .octicon-history')?.closest('ul');
-	if (!commitsInfo || select.exists('.rgh-toggle-files')) {
-		return;
-	}
+	attachElement({
+		anchor: select('.repository-content .octicon-history')?.closest('ul'),
+		allowMissingAnchor: true,
+		className: toggleButtonClass,
+		position: 'append',
+		getNewElement: () => (
+			<button
+				type="button"
+				className="btn-octicon"
+				aria-label="Toggle files section"
+			>
+				<FoldIcon/>
+				<UnfoldIcon/>
+			</button>
+		),
+	});
+}
 
-	commitsInfo.append(
-		<button
-			type="button"
-			className="btn-octicon rgh-toggle-files"
-			aria-label="Toggle files section"
-		>
-			<FoldIcon/>
-			<UnfoldIcon/>
-		</button>,
-	);
+function addFilesHiddenNotice(repoContent: Element): void {
+	// Add notice so the user knows that the list was collapsed #5524
+	attachElement({
+		anchor: select('.Box', repoContent),
+		position: 'after',
+		className: noticeClass,
+		getNewElement: () => (
+			<div
+				className="mb-3 mt-n3 py-1 text-right text-small color-fg-subtle"
+				style={noticeStyle}
+			>
+				The file list was collapsed via Refined GitHub <ArrowUpIcon className="v-align-middle"/>
+			</div>
+		),
+	});
 }
 
 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();
+	select(`.${noticeClass}`)?.remove();
+
+	const isHidden = select('.repository-content')!.classList.toggle(hiddenFilesClass);
+	await cache.set(cacheKey, isHidden);
 }
 
 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>,
-		);
+		repoContent.classList.add(hiddenFilesClass);
+		addFilesHiddenNotice(repoContent);
 	}
 
 	return [
 		observeElement(repoContent, addButton),
-		delegate(document, '.rgh-toggle-files, .rgh-files-hidden-notice', 'click', toggleHandler),
+		delegate(document, `.${toggleButtonClass}, .${noticeClass}`, 'click', toggleHandler),
 	];
 }