refactor(ui): reuse shared button components

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

frontend/src/components/usage/UsageDetailPopover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ZPopover } from '@codex-proxy/ui'
+import { ZIconButton, ZPopover } from '@codex-proxy/ui'
 
 import { Info } from '@lucide/vue'
 
@@ -17,16 +17,14 @@ defineProps<{
     placement="right"
   >
     <template #reference>
-      <button
-        type="button"
-        class="inline-flex size-4 items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-z-control-outline"
-        :class="tone === 'warning'
-          ? 'text-z-warning-text'
-          : 'text-z-primary-text'"
+      <ZIconButton
+        variant="link"
+        :type="tone === 'warning' ? 'warning' : 'primary'"
+        class="size-4! rounded-full!"
         :aria-label="triggerLabel"
       >
         <Info class="size-3" />
-      </button>
+      </ZIconButton>
     </template>
 
     <div class="grid w-max min-w-60 max-w-[calc(100vw-2rem)] gap-2 p-3 text-z-sm leading-none">

frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue

@@ -123,20 +123,19 @@ function handleRequestConsume(creditId: string) {
 </script>
 
 <template>
-  <button
-    type="button"
-    class="inline-flex shrink-0 touch-manipulation items-center justify-center rounded-z border-0 bg-transparent text-z-text-secondary outline-none transition-[background-color,color,opacity,transform] duration-150 hover:bg-z-fill-quaternary hover:text-z-text active:bg-z-fill-tertiary focus-visible:ring-2 focus-visible:ring-z-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-z-bg-container motion-safe:active:scale-[0.96] motion-reduce:transition-none"
-    :class="showTriggerCount ? 'h-z-control-sm gap-1 px-2' : 'size-z-control-sm'"
+  <ZIconButton
+    size="small"
+    class="[&>span]:inline-flex [&>span]:items-center [&>span]:gap-1"
+    :class="showTriggerCount ? 'w-auto! px-2' : undefined"
     :aria-label="triggerLabel"
     :aria-pressed="panelOpen || undefined"
-    :title="triggerLabel"
     @click="panelOpen = true"
   >
     <TicketCheck class="size-3.5 shrink-0" />
     <span v-if="showTriggerCount" class="translate-y-px font-mono text-[10px] leading-none font-heavy tabular-nums">
       x{{ availableCount }}
     </span>
-  </button>
+  </ZIconButton>
 
   <ZDialog
     v-model="panelOpen"

frontend/src/views/accounts/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { useTableColumns, ZCard, ZCheckbox, ZConfirmDialog, ZPageHeader, ZPagination, ZTable, ZTableColumnSettings } from '@codex-proxy/ui'
+import { useTableColumns, ZCard, ZCheckbox, ZConfirmDialog, ZIconButton, ZPageHeader, ZPagination, ZTable, ZTableColumnSettings } from '@codex-proxy/ui'
 
 import { ChevronDown } from '@lucide/vue'
 import { ref, shallowRef } from 'vue'
@@ -269,17 +269,18 @@ const {
             @sort-change="handleSortChange"
           >
             <template #expander="{ row }">
-              <button
-                type="button"
-                class="inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-z-text-secondary transition hover:bg-z-bg-text-hover hover:text-z-text"
-                :title="expandedAccountIds.has(row.id) ? t('accounts.page.collapseStatistics') : t('accounts.page.expandStatistics')"
+              <ZIconButton
+                size="small"
+                class="size-6! rounded-md! hover:bg-z-bg-text-hover!"
+                :aria-label="expandedAccountIds.has(row.id) ? t('accounts.page.collapseStatistics') : t('accounts.page.expandStatistics')"
+                :aria-expanded="expandedAccountIds.has(row.id)"
                 @click.stop="toggleExpanded(row.id)"
               >
                 <ChevronDown
                   class="size-3.5 transition-transform"
                   :class="expandedAccountIds.has(row.id) ? '' : '-rotate-90'"
                 />
-              </button>
+              </ZIconButton>
             </template>
 
             <template #header-selection>

frontend/src/views/plugins/components/PluginVersionCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginArtifact, PluginInstance } from '@/api'
 
-import { ZIconButton, ZTag } from '@codex-proxy/ui'
+import { ZButton, ZIconButton, ZTag } from '@codex-proxy/ui'
 import { ArrowDownToLine, ChevronDown, Play, Trash2 } from '@lucide/vue'
 import { computed, shallowRef, useId } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -47,17 +47,19 @@ const detailsId = useId()
         <span class="text-z-xs text-z-text-secondary">{{ sourceLabel(artifact.source) }}</span>
         <span class="truncate font-mono text-z-xs text-z-text-quaternary">{{ shortDigest(artifact.metadata.sha256) }}</span>
       </div>
-      <button
+      <ZButton
         v-if="isCurrent"
-        type="button"
-        class="inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-z border-0 bg-transparent p-0 text-z-xs text-z-primary-text outline-none focus-visible:ring-2 focus-visible:ring-z-control-outline"
+        type="primary"
+        variant="link"
+        size="small"
+        class="h-auto! rounded-z! p-0! text-z-xs! leading-normal! font-normal! no-underline! [&>span]:gap-1"
         :aria-expanded="detailsOpen"
         :aria-controls="detailsId"
         @click="detailsOpen = !detailsOpen"
       >
         {{ t('plugins.versionDetails') }}
         <ChevronDown class="size-3.5 transition-transform motion-reduce:transition-none" :class="detailsOpen ? 'rotate-180' : undefined" aria-hidden="true" />
-      </button>
+      </ZButton>
     </div>
     <ZTag v-if="!artifact.acceptedAt" type="warning" size="small">
       {{ t('plugins.toBeInstalled') }}

frontend/src/views/proxies/index.vue

@@ -146,10 +146,10 @@ watch(search, () => {
               <span v-else class="text-z-text-quaternary">{{ t('proxies.page.notTested') }}</span>
             </template>
             <template #accounts="{ row }">
-              <button type="button" class="flex w-fit cursor-pointer items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-z-sm text-z-text-secondary outline-none transition-colors hover:text-z-primary-text focus-visible:ring-2 focus-visible:ring-z-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-z-bg-container" :aria-label="t('proxies.page.viewAccountsAssociatedWith', { name: row.name, count: row.accountCount })" @click="inspected = row; showAccounts = true">
+              <ZButton variant="link" size="small" class="h-auto! w-fit rounded-sm! p-0! text-z-sm! leading-normal! font-normal! no-underline! hover:text-z-primary-text! [&>span]:gap-1.5" :aria-label="t('proxies.page.viewAccountsAssociatedWith', { name: row.name, count: row.accountCount })" @click="inspected = row; showAccounts = true">
                 <Users class="size-3.5" aria-hidden="true" />
                 <span class="font-mono tabular-nums">{{ row.accountCount }}</span>
-              </button>
+              </ZButton>
             </template>
             <template #testedAt="{ row }">
               {{ row.lastTestAtDisplay ?? '-' }}

frontend/src/views/settings/components/backup/BackupStorageCard.vue

@@ -42,13 +42,13 @@ function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageFo
     <template #description>
       <I18nT keypath="settings.backup.storage.description" tag="span" scope="global" class="text-z-text-secondary">
         <template #service>
-          <button
-            type="button"
-            class="cursor-pointer border-0 bg-transparent p-0 text-z-link underline underline-offset-2 hover:text-z-link-hover"
+          <ZButton
+            variant="link"
+            class="h-auto! rounded-none! p-0! text-z-link! underline underline-offset-2 hover:text-z-link-hover! [font:inherit]!"
             @click="emit('openR2Guide')"
           >
             Cloudflare R2
-          </button>
+          </ZButton>
         </template>
       </I18nT>
     </template>