From 0ce1c401aa49ee4814ada2ac258bd6d790da05ed Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 14:24:06 +0100
Subject: [PATCH 1/6] feat: update governance list and design

---
 app/components/About/GovernanceList.vue | 60 +++++++++++++++++++
 app/components/About/LogoList.vue       |  4 +-
 app/pages/about.vue                     | 80 +++++++------------------
 i18n/locales/en.json                    |  1 +
 i18n/schema.json                        |  3 +
 server/api/contributors.get.ts          | 17 ++++--
 6 files changed, 100 insertions(+), 65 deletions(-)
 create mode 100644 app/components/About/GovernanceList.vue

diff --git a/app/components/About/GovernanceList.vue b/app/components/About/GovernanceList.vue
new file mode 100644
index 0000000000..4c6c7b89f9
--- /dev/null
+++ b/app/components/About/GovernanceList.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { Role, GitHubContributor } from '~~/server/api/contributors.get'
+
+const props = defineProps<{
+  members: GitHubContributor[]
+}>()
+
+const roleLabels = computed(
+  () =>
+    ({
+      steward: $t('about.team.role_steward'),
+      maintainer: $t('about.team.role_maintainer'),
+    }) as Partial<Record<Role, string>>,
+)
+</script>
+
+<template>
+  <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 list-none p-0">
+    <li
+      v-for="person in props.members"
+      :key="person.id"
+      class="relative p-3 bg-bg-muted border border-border rounded-xl hover:border-border-hover hover:bg-bg-subtle transition-[border-color,background-color] duration-200 cursor-pointer focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    >
+      <div class="flex gap-3">
+        <img
+          :src="`${person.avatar_url}&s=80`"
+          :alt="`${person.login}'s avatar`"
+          class="block w-15 h-15 rounded-md ring-1 ring-bg shrink-0"
+          loading="lazy"
+        />
+        <div class="min-w-0 flex-1">
+          <div class="font-mono text-sm text-fg truncate">
+            <NuxtLink
+              :to="person.html_url"
+              target="_blank"
+              class="decoration-none after:content-[''] after:absolute after:inset-0"
+              :aria-label="$t('about.contributors.view_profile', { name: person.login })"
+            >
+              @{{ person.login }}
+            </NuxtLink>
+          </div>
+          <div class="text-sm text-fg-muted tracking-tight">
+            {{ roleLabels[person.role] ?? person.role }}
+          </div>
+          <LinkBase
+            v-if="person.sponsors_url"
+            :to="person.sponsors_url"
+            no-underline
+            no-external-icon
+            classicon="i-lucide:heart"
+            class="flex! relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-1"
+            :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
+          >
+            {{ $t('about.team.sponsor') }}
+          </LinkBase>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
diff --git a/app/components/About/LogoList.vue b/app/components/About/LogoList.vue
index 8e9bd819fb..03945b705c 100644
--- a/app/components/About/LogoList.vue
+++ b/app/components/About/LogoList.vue
@@ -35,7 +35,7 @@ const props = defineProps<{
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border transition-colors py-1 px-3"
+        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border hover:border-border-hover transition-colors py-1 px-3"
         :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
@@ -65,7 +65,7 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border transition-colors p-1.5"
+              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border-hover transition-colors p-1.5"
               :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 5e898e23c7..45a5fb5aff 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -33,19 +33,15 @@ const pmLinks = {
 const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors')
 
 const governanceMembers = computed(
-  () => contributors.value?.filter(c => c.role !== 'contributor') ?? [],
+  () => contributors.value?.filter(c => c.role === 'steward' || c.role === 'core') ?? [],
 )
 
-const communityContributors = computed(
-  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
+const maintainersMembers = computed(
+  () => contributors.value?.filter(c => c.role === 'maintainer') ?? [],
 )
 
-const roleLabels = computed(
-  () =>
-    ({
-      steward: $t('about.team.role_steward'),
-      maintainer: $t('about.team.role_maintainer'),
-    }) as Partial<Record<Role, string>>,
+const communityContributors = computed(
+  () => contributors.value?.filter(c => c.role === 'contributor') ?? [],
 )
 </script>
 
@@ -179,7 +175,7 @@ const roleLabels = computed(
             {{ $t('about.contributors.description') }}
           </p>
 
-          <!-- Governance: stewards + maintainers -->
+          <!-- Governance: stewards + core -->
           <section
             v-if="governanceMembers.length"
             class="mb-12"
@@ -189,50 +185,20 @@ const roleLabels = computed(
               {{ $t('about.team.governance') }}
             </h3>
 
-            <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 list-none p-0">
-              <li
-                v-for="person in governanceMembers"
-                :key="person.id"
-                class="relative flex items-center gap-3 p-3 border border-border rounded-lg hover:border-border-hover hover:bg-bg-muted transition-[border-color,background-color] duration-200 cursor-pointer focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
-              >
-                <img
-                  :src="`${person.avatar_url}&s=80`"
-                  :alt="`${person.login}'s avatar`"
-                  class="w-12 h-12 rounded-md ring-1 ring-border shrink-0"
-                  loading="lazy"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="font-mono text-sm text-fg truncate">
-                    <NuxtLink
-                      :to="person.html_url"
-                      target="_blank"
-                      class="decoration-none after:content-[''] after:absolute after:inset-0"
-                      :aria-label="$t('about.contributors.view_profile', { name: person.login })"
-                    >
-                      @{{ person.login }}
-                    </NuxtLink>
-                  </div>
-                  <div class="text-xs text-fg-muted tracking-tight">
-                    {{ roleLabels[person.role] ?? person.role }}
-                  </div>
-                  <LinkBase
-                    v-if="person.sponsors_url"
-                    :to="person.sponsors_url"
-                    no-underline
-                    no-external-icon
-                    classicon="i-lucide:heart"
-                    class="relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-0.5"
-                    :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
-                  >
-                    {{ $t('about.team.sponsor') }}
-                  </LinkBase>
-                </div>
-                <span
-                  class="i-lucide:external-link rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5 pointer-events-none"
-                  aria-hidden="true"
-                />
-              </li>
-            </ul>
+            <AboutGovernanceList :members="governanceMembers" />
+          </section>
+
+          <!-- maintainers -->
+          <section
+            v-if="maintainersMembers.length"
+            class="mb-12"
+            aria-labelledby="maintainers-heading"
+          >
+            <h3 id="maintainers-heading" class="text-sm text-fg uppercase tracking-wider mb-4">
+              {{ $t('about.team.maintainers') }}
+            </h3>
+
+            <AboutGovernanceList :members="maintainersMembers" />
           </section>
 
           <!-- Contributors cloud -->
@@ -263,12 +229,12 @@ const roleLabels = computed(
             </div>
             <ul
               v-else-if="communityContributors.length"
-              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0"
+              class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-1 list-none p-0"
             >
               <li
                 v-for="contributor in communityContributors"
                 :key="contributor.id"
-                class="block group relative"
+                class="block group relative hover:z-1"
               >
                 <TooltipApp :text="`@${contributor.login}`" class="block" position="top">
                   <a
@@ -283,7 +249,7 @@ const roleLabels = computed(
                       :alt="`${contributor.login}'s avatar`"
                       width="48"
                       height="48"
-                      class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
+                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out will-change-transform"
                       loading="lazy"
                     />
                   </a>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7e119affa7..94c475f361 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1185,6 +1185,7 @@
     "team": {
       "title": "Team",
       "governance": "Governance",
+      "maintainers": "Maintainers",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/i18n/schema.json b/i18n/schema.json
index ee385067bd..b96ce0c76e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -3559,6 +3559,9 @@
             "governance": {
               "type": "string"
             },
+            "maintainers": {
+              "type": "string"
+            },
             "role_steward": {
               "type": "string"
             },
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 597d0a2dfd..c7e4329158 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -1,4 +1,4 @@
-export type Role = 'steward' | 'maintainer' | 'contributor'
+export type Role = 'steward' | 'maintainer' | 'contributor' | 'core'
 
 export interface GitHubContributor {
   login: string
@@ -18,17 +18,19 @@ const FALLBACK_STEWARDS = new Set(['danielroe', 'patak-cat'])
 
 interface TeamMembers {
   steward: Set<string>
+  core: Set<string>
   maintainer: Set<string>
 }
 
 async function fetchTeamMembers(token: string): Promise<TeamMembers | null> {
   const teams: Record<keyof TeamMembers, string> = {
     steward: 'stewards',
+    core: 'core',
     maintainer: 'maintainers',
   }
 
   try {
-    const result: TeamMembers = { steward: new Set(), maintainer: new Set() }
+    const result: TeamMembers = { steward: new Set(), maintainer: new Set(), core: new Set() }
 
     for (const [role, slug] of Object.entries(teams) as [keyof TeamMembers, string][]) {
       const response = await fetch(
@@ -110,8 +112,9 @@ async function fetchSponsorable(token: string, logins: string[]): Promise<Set<st
 
 function getRoleInfo(login: string, teams: TeamMembers): { role: Role; order: number } {
   if (teams.steward.has(login)) return { role: 'steward', order: 0 }
-  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 1 }
-  return { role: 'contributor', order: 2 }
+  if (teams.core.has(login)) return { role: 'core', order: 1 }
+  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 2 }
+  return { role: 'contributor', order: 3 }
 }
 
 export default defineCachedEventHandler(
@@ -124,7 +127,7 @@ export default defineCachedEventHandler(
         const fetched = await fetchTeamMembers(githubToken)
         if (fetched) return fetched
       }
-      return { steward: FALLBACK_STEWARDS, maintainer: new Set<string>() }
+      return { steward: FALLBACK_STEWARDS, maintainer: new Set<string>(), core: new Set<string>() }
     })()
 
     const allContributors: GitHubAPIContributor[] = []
@@ -169,7 +172,9 @@ export default defineCachedEventHandler(
 
     // Identify maintainers (stewards + maintainers) and check their sponsors status
     const maintainerLogins = filtered
-      .filter(c => teams.steward.has(c.login) || teams.maintainer.has(c.login))
+      .filter(
+        c => teams.steward.has(c.login) || teams.core.has(c.login) || teams.maintainer.has(c.login),
+      )
       .map(c => c.login)
 
     const sponsorable = githubToken

From e6d219ba08943ca487304aad51ba39fd629aa263 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 14:30:14 +0100
Subject: [PATCH 2/6] test: cover about-governance-list

---
 test/nuxt/a11y.spec.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5d0865d77f..a8d990d2cd 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -144,6 +144,7 @@ import {
   AppMark,
   AboutLogoImg,
   AboutLogoList,
+  AboutGovernanceList,
   AuthorAvatar,
   AuthorList,
   BackButton,
@@ -517,6 +518,37 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('AboutGovernanceList', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AboutGovernanceList, {
+        props: {
+          members: [
+            {
+              id: 1,
+              login: 'steward1',
+              avatar_url: 'https://github.com/steward1.png',
+              html_url: 'https://github.com/steward1',
+              contributions: 100,
+              role: 'steward',
+              sponsors_url: 'https://github.com/sponsors/steward1',
+            },
+            {
+              id: 3,
+              login: 'contributor1',
+              avatar_url: 'https://github.com/contributor1.png',
+              html_url: 'https://github.com/contributor1',
+              contributions: 100,
+              role: 'contributor',
+              sponsors_url: 'https://github.com/sponsors/contributor1',
+            },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('BaseCard', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BaseCard, {

From 7912c394dafd77a8dc91b3d31b9f32cb2fb9b43e Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 14:30:49 +0100
Subject: [PATCH 3/6] chore: remove unused import

---
 app/pages/about.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index 45a5fb5aff..c1db44691d 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Role } from '#server/api/contributors.get'
 import { SPONSORS } from '~/assets/logos/sponsors'
 import { OSS_PARTNERS } from '~/assets/logos/oss-partners'
 

From 02535c230c29325e190beefed16c6ac87fff4e6e Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 14:57:30 +0100
Subject: [PATCH 4/6] fix: update about roles logic

---
 server/api/contributors.get.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index c7e4329158..9e260ce3ce 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -111,10 +111,10 @@ async function fetchSponsorable(token: string, logins: string[]): Promise<Set<st
 }
 
 function getRoleInfo(login: string, teams: TeamMembers): { role: Role; order: number } {
-  if (teams.steward.has(login)) return { role: 'steward', order: 0 }
-  if (teams.core.has(login)) return { role: 'core', order: 1 }
-  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 2 }
-  return { role: 'contributor', order: 3 }
+  if (teams.steward.has(login)) return { role: 'steward', order: 3 }
+  if (teams.core.has(login)) return { role: 'core', order: 2 }
+  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 1 }
+  return { role: 'contributor', order: 0 }
 }
 
 export default defineCachedEventHandler(

From f42731f1f6620a01f65a7f7808755d59d862a3b5 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 14:59:50 +0100
Subject: [PATCH 5/6] chore: update styles

---
 app/pages/about.vue | 2 +-
 app/pages/pds.vue   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/about.vue b/app/pages/about.vue
index c1db44691d..2c6acac753 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -248,7 +248,7 @@ const communityContributors = computed(
                       :alt="`${contributor.login}'s avatar`"
                       width="48"
                       height="48"
-                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out will-change-transform"
+                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out"
                       loading="lazy"
                     />
                   </a>
diff --git a/app/pages/pds.vue b/app/pages/pds.vue
index cc937df40c..4de6e01037 100644
--- a/app/pages/pds.vue
+++ b/app/pages/pds.vue
@@ -142,7 +142,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
             {{ $t('pds.community.empty') }}
           </div>
           <div v-else>
-            <ul class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-2 list-none p-0">
+            <ul class="grid grid-cols-[repeat(auto-fill,48px)] justify-center gap-1 list-none p-0">
               <li
                 v-for="user in usersWithAvatars"
                 :key="user.handle"
@@ -162,7 +162,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
                       @error="handleImageError(user.handle)"
                       width="48"
                       height="48"
-                      class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
+                      class="w-12 h-12 rounded-md ring-1 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out"
                       loading="lazy"
                     />
                   </a>

From 17583b8e8356e5de5b099f23b9135eb7e926cb52 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sat, 16 May 2026 15:37:44 +0100
Subject: [PATCH 6/6] chore: apply suggestions

---
 app/components/About/GovernanceList.vue | 1 +
 i18n/locales/en.json                    | 1 +
 i18n/schema.json                        | 3 +++
 server/api/contributors.get.ts          | 8 ++++----
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/About/GovernanceList.vue b/app/components/About/GovernanceList.vue
index 4c6c7b89f9..aa89b6559a 100644
--- a/app/components/About/GovernanceList.vue
+++ b/app/components/About/GovernanceList.vue
@@ -9,6 +9,7 @@ const roleLabels = computed(
   () =>
     ({
       steward: $t('about.team.role_steward'),
+      core: $t('about.team.role_core'),
       maintainer: $t('about.team.role_maintainer'),
     }) as Partial<Record<Role, string>>,
 )
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 94c475f361..7c8f035eaf 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1186,6 +1186,7 @@
       "title": "Team",
       "governance": "Governance",
       "maintainers": "Maintainers",
+      "role_core": "core",
       "role_steward": "steward",
       "role_maintainer": "maintainer",
       "sponsor": "sponsor",
diff --git a/i18n/schema.json b/i18n/schema.json
index b96ce0c76e..57f82b4731 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -3562,6 +3562,9 @@
             "maintainers": {
               "type": "string"
             },
+            "role_core": {
+              "type": "string"
+            },
             "role_steward": {
               "type": "string"
             },
diff --git a/server/api/contributors.get.ts b/server/api/contributors.get.ts
index 9e260ce3ce..c7e4329158 100644
--- a/server/api/contributors.get.ts
+++ b/server/api/contributors.get.ts
@@ -111,10 +111,10 @@ async function fetchSponsorable(token: string, logins: string[]): Promise<Set<st
 }
 
 function getRoleInfo(login: string, teams: TeamMembers): { role: Role; order: number } {
-  if (teams.steward.has(login)) return { role: 'steward', order: 3 }
-  if (teams.core.has(login)) return { role: 'core', order: 2 }
-  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 1 }
-  return { role: 'contributor', order: 0 }
+  if (teams.steward.has(login)) return { role: 'steward', order: 0 }
+  if (teams.core.has(login)) return { role: 'core', order: 1 }
+  if (teams.maintainer.has(login)) return { role: 'maintainer', order: 2 }
+  return { role: 'contributor', order: 3 }
 }
 
 export default defineCachedEventHandler(