message: Make `toggle-files-button` unforgettable
diff: @@ -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),
  ];
  }
  