feat: Add avatar stacks (#37594)

Parse `Co-authored-by:` trailers from commit messages and surface
contributors as an avatar stack across the commit page, commits list, PR
commits tab, latest-commit row, blame, graph, and dashboard feed.

- Up to 10 visible 20px avatars, GitHub-style overlap (6px first stride,
4px between subsequent), `+N` chip for the rest.
- Label: 1 → name; 2 → `<a> and <b>`; 3+ → `<N> people` opens a Tippy
popup with all participants.
- Names and avatars link to the repo's commits-by-author search; fall
back to profile or `mailto:`.
- Trailer parsing uses `net/mail.ParseAddress`, scans only the trailing
paragraph, filters out the commit's own author/committer.
- Drops the non-standard `Co-committed-by:` emission on squash merge and
web edits.

Devtest: `/devtest/coauthor-avatars`.

Fixes #25521

----
<img width="353" height="277" alt="image"
src="https://github.com/user-attachments/assets/72092ceb-97ca-4b09-9557-0b72d3c5458e"
/>

<img width="533" height="328"
src="https://github.com/user-attachments/assets/11d0c8f8-8b3f-4f2e-9993-879f1c06bcc5"
/>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/avatar.css

@@ -0,0 +1,125 @@
+img.ui.avatar,
+.ui.avatar img,
+.ui.avatar svg {
+  border-radius: var(--border-radius);
+  object-fit: contain;
+  aspect-ratio: 1;
+}
+
+.avatar-stack-names {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 4px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.avatar-stack-names > a.muted,
+.avatar-stack-names > .avatar-stack-popup-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+}
+
+/* use semibold for latest commit author */
+.latest-commit .avatar-stack-names > a,
+.latest-commit .avatar-stack-names > .avatar-stack-popup-trigger {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* template emits children reversed; row-reverse re-orders visually and keeps the author last-painted (on top) */
+.avatar-stack {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.avatar-stack > * {
+  margin-left: -16px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  position: relative;
+  display: inline-flex;
+}
+
+.avatar-stack > *:last-child { margin-left: 0; }
+.avatar-stack > *:nth-last-child(2) { margin-left: -14px; }
+
+/* hover spreads via transform (no layout shift); positions count from visual-left = last DOM child = :nth-last-child */
+.avatar-stack:hover > *:nth-last-child(2) { transform: translateX(14px); }
+.avatar-stack:hover > *:nth-last-child(3) { transform: translateX(30px); }
+.avatar-stack:hover > *:nth-last-child(4) { transform: translateX(46px); }
+.avatar-stack:hover > *:nth-last-child(5) { transform: translateX(62px); }
+.avatar-stack:hover > *:nth-last-child(6) { transform: translateX(78px); }
+.avatar-stack:hover > *:nth-last-child(7) { transform: translateX(94px); }
+.avatar-stack:hover > *:nth-last-child(8) { transform: translateX(110px); }
+.avatar-stack:hover > *:nth-last-child(9) { transform: translateX(126px); }
+.avatar-stack:hover > *:nth-last-child(10) { transform: translateX(142px); }
+.avatar-stack:hover > *:nth-last-child(11) { transform: translateX(158px); }
+
+.avatar-stack .avatar {
+  border: 1px solid var(--color-body);
+  background: var(--color-body);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.avatar-stack:hover .avatar {
+  background-color: var(--color-body);
+}
+
+.avatar-stack-overflow-chip {
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  height: 20px;
+  margin-left: 0;
+  border: 0 solid var(--color-body);
+  border-radius: var(--border-radius);
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+  overflow: hidden;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+
+.avatar-stack:hover .avatar-stack-overflow-chip {
+  width: 20px;
+  margin-left: -16px;
+  border-width: 1px;
+  opacity: 1;
+}
+
+.avatar-stack-popup-trigger {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.avatar-stack-popup-trigger:hover {
+  color: var(--color-primary);
+}
+
+.avatar-stack-popup {
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+}
+
+.avatar-stack-popup > a {
+  padding: 6px 12px;
+  gap: 8px;
+}
+
+.avatar-stack-popup > a:hover {
+  background: var(--color-hover);
+}
+
+@media (max-width: 767.98px) {
+  .avatar-stack-names {
+    max-width: 80px;
+  }
+}

web_src/css/base.css

@@ -386,14 +386,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-img.ui.avatar,
-.ui.avatar img,
-.ui.avatar svg {
-  border-radius: var(--border-radius);
-  object-fit: contain;
-  aspect-ratio: 1;
-}
-
 .full.height {
   flex-grow: 1;
   padding-bottom: var(--page-space-bottom);

web_src/css/index.css

@@ -56,6 +56,7 @@
 
 @import "./font_i18n.css";
 @import "./base.css";
+@import "./avatar.css";
 @import "./home.css";
 @import "./install.css";
 

web_src/css/repo.css

@@ -1386,8 +1386,7 @@ tbody.commit-list {
   vertical-align: baseline;
 }
 
-.message-wrapper,
-.author-wrapper {
+.message-wrapper {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
@@ -1395,12 +1394,6 @@ tbody.commit-list {
   vertical-align: middle;
 }
 
-.author-wrapper {
-  max-width: 180px;
-  align-self: center;
-  white-space: nowrap;
-}
-
 .latest-commit .message-wrapper {
   max-width: calc(100% - 2.5rem);
 }
@@ -1415,9 +1408,6 @@ tbody.commit-list {
   tr.commit-list {
     width: 100%;
   }
-  .author-wrapper {
-    max-width: 80px;
-  }
 }
 
 @media (min-width: 768px) and (max-width: 991.98px) {

web_src/js/features/repo-commit.ts

@@ -25,6 +25,22 @@ export function initCommitStatuses() {
   });
 }
 
+export function initAvatarStackPopup() {
+  registerGlobalInitFunc('initAvatarStackPopup', (el: HTMLElement) => {
+    const nextEl = el.nextElementSibling!;
+    if (!nextEl.matches('.tippy-target')) throw new Error('Expected next element to be a tippy target');
+    createTippy(el, {
+      content: nextEl,
+      placement: 'bottom-start',
+      interactive: true,
+      role: 'dialog',
+      theme: 'menu',
+      trigger: 'click',
+      hideOnClick: true,
+    });
+  });
+}
+
 export function initCommitFileHistoryFollowRename() {
   registerGlobalInitFunc('initCommitHistoryFollowRename', (el: HTMLInputElement) => {
     el.addEventListener('change', () => {

web_src/js/index.ts

@@ -21,7 +21,7 @@ import {initMarkupContent} from './markup/content.ts';
 import {initRepoFileView} from './features/file-view.ts';
 import {initUserExternalLogins, initUserCheckAppUrl} from './features/user-auth.ts';
 import {initRepoPullRequestReview, initRepoIssueFilterItemLabel} from './features/repo-issue.ts';
-import {initRepoEllipsisButton, initCommitStatuses, initCommitFileHistoryFollowRename} from './features/repo-commit.ts';
+import {initRepoEllipsisButton, initCommitStatuses, initAvatarStackPopup, initCommitFileHistoryFollowRename} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
 import {initAdminCommon} from './features/admin/common.ts';
 import {initRepoCodeView} from './features/repo-code.ts';
@@ -146,6 +146,7 @@ const initPerformanceTracer = callInitFunctions([
   initRepoRecentCommits,
 
   initCommitStatuses,
+  initAvatarStackPopup,
   initCaptcha,
 
   initUserCheckAppUrl,