feat(quota): assign provider-specific icons for "Other" group to improve visual representation

style(quota): refine card layout and spacing for a more compact design

Author: 0xtbug

src/components/quota/ProviderQuotaCard.tsx

@@ -83,15 +83,27 @@ export function ProviderQuotaCard({
       // Determine icon based on group name
       let icon: string | undefined;
       const lowerName = name.toLowerCase();
+      const lowerProvider = provider.toLowerCase();
+
       if (lowerName.includes('claude')) {
         icon = '/claude/claude.png';
       } else if (lowerName.includes('gemini')) {
         icon = '/gemini/gemini.png';
       } else if (lowerName.includes('gpt') || lowerName.includes('o1')) {
         icon = '/openai/openai.png';
-      } else if (isAntigravity) {
-        // For Antigravity "Other" group, default to OpenAI icon
-        icon = '/openai/openai.png';
+      } else if (lowerName === 'other' || !icon) {
+        // For "Other" group, use provider-specific icon
+        if (lowerProvider.includes('antigravity')) {
+          icon = '/openai/openai.png';
+        } else if (lowerProvider.includes('codex')) {
+          icon = '/openai/openai.png';
+        } else if (lowerProvider.includes('kiro')) {
+          icon = '/kiro/kiro.png';
+        } else if (lowerProvider.includes('copilot') || lowerProvider.includes('github')) {
+          icon = '/github/github.png';
+        } else {
+          icon = '/openai/openai.png'; // Default fallback
+        }
       }
 
       return {
@@ -108,9 +120,9 @@ export function ProviderQuotaCard({
   const isSuspended = plan?.toLowerCase() === 'suspended';
 
   return (
-    <Card className="mb-4 overflow-hidden border bg-card text-card-foreground p-0">
+    <Card className="mb-4 overflow-hidden border bg-card text-card-foreground p-0 py-0 gap-1">
       {/* Header Section */}
-      <div className="flex flex-col gap-3 border-b p-2 pt-4 bg-muted/20">
+      <div className="flex flex-col gap-2 border-b p-2 pb-2 pt-3 bg-muted/20">
         <div className="flex items-center justify-between">
             <div className="flex flex-col gap-2">
                  {/* Top Row: List Icon + Email */}
@@ -215,14 +227,14 @@ export function ProviderQuotaCard({
       </div>
 
       {/* Summary Content Section */}
-      <CardContent className="p-2 space-y-4">
+      <CardContent className="px-2 py-1 space-y-2">
         {error ? (
             <div className="py-2 text-sm text-destructive flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-destructive"></div>
                 {error}
             </div>
         ) : (
-            <div className="space-y-4">
+            <div className="space-y-2">
                 <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
                     {t('quotaCard.usage')}
                 </div>