feat: add release reactions and a GitHub-like reaction bar (#38415)

Adds emoji reactions to releases and moves the reaction picker of
issues, comments and releases into a GitHub-like reaction bar.

- Releases omit 👎 or 😕
- Drafts and tags can't be reacted to
- Moved menu to tippy
- Added keyboard navigation

Fixes: https://github.com/go-gitea/gitea/issues/34268
Fixes: https://github.com/go-gitea/gitea/issues/16676
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/repo/reactions.css

@@ -1,30 +1,61 @@
 .bottom-reactions {
   display: flex;
-  gap: 6px;
-  margin: 0 1em 1em;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0 14px 14px;
 }
 
 .timeline-item .conversation-holder .bottom-reactions {
-  margin: 1em 0 0 24px;
+  margin: 14px 0 0 24px;
   padding-bottom: 8px;
 }
 
+.releases .bottom-reactions {
+  margin: 14px 0 0;
+}
+
+.bottom-reactions .select-reaction,
 .bottom-reactions .ui.label {
-  padding: 2px 6px;
-  font-weight: var(--font-weight-normal);
+  height: 28px;
 }
 
-.bottom-reactions .ui.label.primary {
-  background-color: var(--color-reaction-active-bg) !important;
+.bottom-reactions .select-reaction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  padding: 0;
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-light-border);
+  background: var(--color-reaction-bg);
+  color: var(--color-text-light-1);
 }
 
-.bottom-reactions .ui.label:hover {
-  background-color: var(--color-reaction-hover-bg) !important;
+.bottom-reactions .select-reaction:hover,
+.bottom-reactions .select-reaction[aria-expanded="true"] {
+  background: var(--color-hover);
+  color: var(--color-text);
+}
+
+.bottom-reactions .ui.label {
+  padding: 0 8px;
+  background: transparent;
+}
+
+.bottom-reactions .ui.basic.label[data-has-reacted="true"] {
+  border-color: var(--color-primary);
+  background: var(--color-reaction-active-bg);
+  color: var(--color-text);
+}
+
+.bottom-reactions .ui.label:not(.disabled):hover {
+  background: var(--color-reaction-hover-bg);
 }
 
 .bottom-reactions .ui.label.disabled {
   cursor: default;
   opacity: 1;
+  pointer-events: auto;
 }
 
 .bottom-reactions .ui.label .reaction {
@@ -37,35 +68,22 @@
   aspect-ratio: 1;
 }
 
-.bottom-reactions .reaction-count {
-  margin-left: 4px;
-}
-
-.ui.dropdown.select-reaction .menu.visible {
-  display: grid !important;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 4px;
-}
-
-.ui.dropdown.select-reaction .menu > .item {
-  width: 34px;
-  height: 34px;
-  margin: 0;
-  font-size: 16px;
-  border-radius: var(--border-radius);
+.reaction-picker {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 4px;
+}
+
+.tippy-box .reaction-picker .item {
   justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  font-size: 17.5px;
 }
 
-.bottom-reactions .select-reaction {
-  padding: 0 10px;
-}
-
-.bottom-reactions .select-reaction:not(.active) {
-  visibility: hidden;
-}
-
-.bottom-reactions:hover .select-reaction {
-  visibility: visible;
+.tippy-box .reaction-picker .item[data-has-reacted="true"] {
+  background: var(--color-reaction-active-bg);
 }

web_src/js/features/comp/ReactionSelector.ts

@@ -1,31 +1,44 @@
-import {POST} from '../../modules/fetch.ts';
+import {performFetchActionRequest} from '../../modules/fetch-action.ts';
 import {registerGlobalEventFunc} from '../../modules/observer.ts';
+import {createTippy} from '../../modules/tippy.ts';
+import {createElementFromHTML} from '../../utils/dom.ts';
 
 export function initCompReactionSelector() {
+  registerGlobalEventFunc('click', 'onReactionPickerClick', (btn: HTMLElement) => {
+    if (btn._tippy) return;
+    createTippy(btn, {
+      content: btn.nextElementSibling!,
+      theme: 'menu',
+      arrow: false,
+      maxWidth: 'none',
+      placement: 'bottom-start',
+      trigger: 'click',
+      interactive: true,
+      hideOnClick: true,
+    }).show();
+  });
+
   registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: Event) => {
-    // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
     e.preventDefault();
 
     if (target.classList.contains('disabled')) return;
 
-    const actionUrl = target.closest('[data-action-url]')!.getAttribute('data-action-url');
-    const reactionContent = target.getAttribute('data-reaction-content')!;
-
-    const commentContainer = target.closest('.comment-container')!;
-
-    const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
-    const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
-    const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
-
-    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      data: new URLSearchParams({content: reactionContent}),
+    const picker = target.closest('[data-tippy-root]')?._tippy;
+    picker?.hide();
+    const bottomReactions = (picker?.reference ?? target).closest<HTMLElement>('.bottom-reactions')!;
+    const hasReacted = target.getAttribute('data-has-reacted') === 'true';
+    const res = await performFetchActionRequest(bottomReactions, {
+      method: 'POST',
+      url: `${bottomReactions.getAttribute('data-action-url')}/${hasReacted ? 'unreact' : 'react'}`,
+      data: new URLSearchParams({content: target.getAttribute('data-reaction-content')!}),
     });
-    if (!res.ok) return;
+    if (!res) return;
 
     const data = await res.json();
-    bottomReactions?.remove();
-    if (data.html) {
-      commentContainer.insertAdjacentHTML('beforeend', data.html);
-    }
+    const hadFocus = bottomReactions.contains(document.activeElement);
+    bottomReactions.querySelector('.select-reaction')?._tippy?.destroy();
+    const newBottomReactions = createElementFromHTML(data.html);
+    bottomReactions.replaceWith(newBottomReactions);
+    if (hadFocus) newBottomReactions.querySelector<HTMLElement>('.select-reaction')?.focus();
   });
 }

web_src/js/modules/fetch-action.ts

@@ -123,7 +123,9 @@ async function handleFetchActionError(el: HTMLElement, resp: Response) {
   const isRespJson = resp.headers.get('content-type')?.includes('application/json');
   const respText = await resp.text();
   const respJson = isRespJson ? JSON.parse(respText) : null;
-  if (respJson?.errorMessage) {
+  if (respJson?.redirect) {
+    fetchActionDoRedirect(respJson.redirect);
+  } else if (respJson?.errorMessage) {
     // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error"
     // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond.
     showErrorToast(respJson.errorMessage, {useHtmlBody: respJson.renderFormat === 'html'});

web_src/js/modules/tippy.ts

@@ -81,8 +81,8 @@ document.addEventListener('keydown', (e: KeyboardEvent) => {
   if (!inMenu && focused !== menuInstance.reference && focused !== document.body) return; // body: macOS Safari and Firefox do not focus clicked buttons
   if (e.key === 'Escape') {
     menuInstance.hide();
-  } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-    focusMenuItem(menuInstance, e.key === 'ArrowDown' ? 1 : -1);
+  } else if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(e.key)) {
+    focusMenuItem(menuInstance, e.key === 'ArrowDown' || e.key === 'ArrowRight' ? 1 : -1);
   } else if ((e.key === 'Enter' || e.key === ' ') && inMenu) {
     focused.click();
   } else {