Merge branch 'feat/apikey-group-remarks'

frontend/src/components/common/GroupOptionItem.vue

+<template>
+  <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+    <div
+      class="flex min-w-0 flex-1 flex-col items-start gap-1"
+      :title="description || undefined"
+    >
+      <GroupBadge
+        :name="name"
+        :platform="platform"
+        :subscription-type="subscriptionType"
+        :rate-multiplier="rateMultiplier"
+      />
+      <span
+        v-if="description"
+        class="w-full truncate text-left text-xs text-gray-500 dark:text-gray-400"
+      >
+        {{ description }}
+      </span>
+    </div>
+    <svg
+      v-if="showCheckmark && selected"
+      class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GroupBadge from './GroupBadge.vue'
+import type { SubscriptionType, GroupPlatform } from '@/types'
+
+interface Props {
+  name: string
+  platform: GroupPlatform
+  subscriptionType?: SubscriptionType
+  rateMultiplier?: number
+  description?: string | null
+  selected?: boolean
+  showCheckmark?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  subscriptionType: 'standard',
+  selected: false,
+  showCheckmark: true
+})
+</script>

frontend/src/views/user/KeysView.vue

@@ -335,12 +335,14 @@
               />
               <span v-else class="text-gray-400">{{ t('keys.selectGroup') }}</span>
             </template>
-            <template #option="{ option }">
-              <GroupBadge
+            <template #option="{ option, selected }">
+              <GroupOptionItem
                 :name="(option as unknown as GroupOption).label"
                 :platform="(option as unknown as GroupOption).platform"
                 :subscription-type="(option as unknown as GroupOption).subscriptionType"
                 :rate-multiplier="(option as unknown as GroupOption).rate"
+                :description="(option as unknown as GroupOption).description"
+                :selected="selected"
               />
             </template>
           </Select>
@@ -516,26 +518,19 @@
                 ? 'bg-primary-50 dark:bg-primary-900/20'
                 : 'hover:bg-gray-100 dark:hover:bg-dark-700'
             ]"
+            :title="option.description || undefined"
           >
-            <GroupBadge
+            <GroupOptionItem
               :name="option.label"
               :platform="option.platform"
               :subscription-type="option.subscriptionType"
               :rate-multiplier="option.rate"
-            />
-            <svg
-              v-if="
+              :description="option.description"
+              :selected="
                 selectedKeyForGroup?.group_id === option.value ||
                 (!selectedKeyForGroup?.group_id && option.value === null)
               "
-              class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="2"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
+            />
           </button>
         </div>
       </div>
@@ -562,6 +557,7 @@ import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
 import UseKeyModal from '@/components/keys/UseKeyModal.vue'
 import GroupBadge from '@/components/common/GroupBadge.vue'
+import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
 import type { ApiKey, Group, PublicSettings, SubscriptionType, GroupPlatform } from '@/types'
 import type { Column } from '@/components/common/types'
 import type { BatchApiKeyUsageStats } from '@/api/usage'
@@ -570,6 +566,7 @@ import { formatDateTime } from '@/utils/format'
 interface GroupOption {
   value: number
   label: string
+  description: string | null
   rate: number
   subscriptionType: SubscriptionType
   platform: GroupPlatform
@@ -665,6 +662,7 @@ const groupOptions = computed(() =>
   groups.value.map((group) => ({
     value: group.id,
     label: group.name,
+    description: group.description,
     rate: group.rate_multiplier,
     subscriptionType: group.subscription_type,
     platform: group.platform

frontend/vite.config.js

-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import checker from 'vite-plugin-checker';
-import { resolve } from 'path';
-export default defineConfig({
-    plugins: [
-        vue(),
-        checker({
-            typescript: true,
-            vueTsc: true
-        })
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, 'src')
-        }
-    },
-    build: {
-        outDir: '../backend/internal/web/dist',
-        emptyOutDir: true
-    },
-    server: {
-        host: '0.0.0.0',
-        port: 3000,
-        proxy: {
-            '/api': {
-                target: 'http://localhost:8080',
-                changeOrigin: true
-            },
-            '/setup': {
-                target: 'http://localhost:8080',
-                changeOrigin: true
-            }
-        }
-    }
-});