fix(ui): show account group names in popovers

Co-authored-by: Codex <noreply@openai.com>

frontend/src/components/AccountGroupMarks.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AccountGroupRef } from '@/api'
 
+import { ZIconButton, ZPopover } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -10,10 +11,13 @@ const props = defineProps<{
 
 const { t } = useI18n({ useScope: 'global' })
 
-const fullNames = computed(() =>
-  props.groups.map(group => (group.enabled
-    ? group.name
-    : t('common.status.disabledName', { name: group.name }))).join('、'),
+const groupMarks = computed(() =>
+  props.groups.map(group => ({
+    ...group,
+    label: group.enabled
+      ? group.name
+      : t('common.status.disabledName', { name: group.name }),
+  })),
 )
 </script>
 
@@ -21,16 +25,33 @@ const fullNames = computed(() =>
   <div
     v-if="groups.length > 0"
     class="flex min-w-0 flex-wrap items-center gap-1.5"
-    :title="fullNames"
-    :aria-label="fullNames"
   >
-    <span
-      v-for="group in groups"
+    <ZPopover
+      v-for="group in groupMarks"
       :key="group.id"
-      class="size-4 shrink-0 rounded-sm"
-      :style="{ backgroundColor: group.color }"
-      :title="group.name"
-    />
+      class="shrink-0"
+      trigger="hover-click"
+      placement="top"
+      role="tooltip"
+      :hover-delay="240"
+    >
+      <template #reference="{ open, id }">
+        <ZIconButton
+          variant="link"
+          size="small"
+          class="size-4! rounded-sm!"
+          :aria-label="group.label"
+          :aria-expanded="open"
+          :aria-describedby="open ? id : undefined"
+          :title="undefined"
+        >
+          <span class="size-4 rounded-sm" :style="{ backgroundColor: group.color }" aria-hidden="true" />
+        </ZIconButton>
+      </template>
+      <div class="max-w-72 px-3 py-2 text-z-xs wrap-anywhere">
+        {{ group.label }}
+      </div>
+    </ZPopover>
   </div>
   <span v-else class="text-xs text-z-text-quaternary">—</span>
 </template>