Add releases-dropdown feature

readme.md

@@ -314,6 +314,7 @@ Thanks for contributing! 🦋🙌
 
 - [](# "release-download-count") [Adds a download count next to release assets.](https://user-images.githubusercontent.com/1402241/197958719-1577bc1b-1f4d-44a8-98c2-2645b7b14d31.png)
 - [](# "releases-tab") [Adds a `Releases` tab and a keyboard shortcut: <kbd>g</kbd> <kbd>r</kbd>.](https://cloud.githubusercontent.com/assets/170270/13136797/16d3f0ea-d64f-11e5-8a45-d771c903038f.png)
+- [](# "tags-dropdown") [Adds a tags dropdown/search on tag/release pages.](https://user-images.githubusercontent.com/1402241/231678527-f0a96112-9c30-4b49-8205-efa472bd880e.png)
 - [](# "create-release-shortcut") Adds a keyboard shortcut to create a new release while on the Releases page: <kbd>c</kbd>.
 - [](# "tag-changes-link") 🔥 [Adds a link to changes since last tag/release for each tag/release.](https://user-images.githubusercontent.com/1402241/57081611-ad4a7180-6d27-11e9-9cb6-c54ec1ac18bb.png)
 - [](# "latest-tag-button") [Adds a link to the latest version tag on directory listings and files.](https://user-images.githubusercontent.com/44045911/155496122-6267c45d-21d4-45c9-adf7-94c9e41cc652.png)

source/features/tags-dropdown.tsx

@@ -0,0 +1,61 @@
+import React from 'dom-chef';
+import * as pageDetect from 'github-url-detection';
+import delegate, {DelegateEvent} from 'delegate-it';
+
+import * as api from '../github-helpers/api';
+import features from '../feature-manager';
+import {buildRepoURL} from '../github-helpers';
+import observe from '../helpers/selector-observer';
+
+let latestTags: string[] | undefined;
+
+const gql = `
+ repository() {
+ refs(refPrefix: "refs/tags/", last: 100) {
+ nodes {
+ name
+ }
+ }
+ }
+`;
+
+// `datalist` selections don't have an `inputType`
+function selectionHandler(event: DelegateEvent<Event, HTMLInputElement>): void {
+ const field = event.delegateTarget;
+ const selectedTag = field.value;
+ if (!('inputType' in event) && latestTags!.includes(selectedTag)) {
+ location.href = buildRepoURL('releases/tag', selectedTag);
+ field.value = '';
+ }
+}
+
+async function addList(searchField: HTMLInputElement): Promise<void> {
+ const {repository} = await api.v4(gql);
+ const nodes = repository.refs.nodes as Array<{name: string}>;
+ if (nodes.length === 0) {
+ return;
+ }
+
+ // Save globally
+ latestTags = nodes.map(({name}) => name).reverse();
+
+ searchField.after(
+ <datalist id="rgh-tags-dropdown">
+ {latestTags.map(tag => <option value={tag}/>)}
+ </datalist>,
+ );
+ searchField.setAttribute('list', 'rgh-tags-dropdown');
+}
+
+const searchFieldSelector = 'input#release-filter';
+async function init(signal: AbortSignal): Promise<void> {
+ observe(searchFieldSelector, addList, {signal});
+ delegate(document, searchFieldSelector, 'input', selectionHandler, {signal});
+}
+
+void features.add(import.meta.url, {
+ include: [
+ pageDetect.isReleasesOrTags,
+ ],
+ init,
+});

source/globals.d.ts

@@ -32,6 +32,8 @@ interface GlobalEventHandlersEventMap {
  'page:loaded': CustomEvent;
  'turbo:visit': CustomEvent;
  'session:resume': CustomEvent;
+ // No input:InputEvent match
+ // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1174#issuecomment-933042088
 }
 
 declare namespace JSX {

source/refined-github.ts

@@ -214,3 +214,4 @@ import './features/file-age-color';
 import './features/netiquette';
 import './features/rgh-netiquette';
 import './features/small-user-avatars';
+import './features/tags-dropdown';