feat: enhance UI and functionality in various components

web/default/src/lib/api.ts

@@ -175,7 +175,7 @@ export async function getUserModels(): Promise<{
 export async function getUserGroups(): Promise<{
   success: boolean
   message?: string
-  data?: Record<string, { desc: string; ratio: number }>
+  data?: Record<string, { desc: string; ratio: number | string }>
 }> {
   const res = await api.get('/api/user/self/groups')
   return res.data

web/default/src/lib/colors.ts

@@ -35,6 +35,29 @@ export const colorToBgClass: Record<SemanticColor, string> = {
   grey: 'bg-gray-500',
 }
 
+export const avatarColorMap: Record<SemanticColor, string> = {
+  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
+  green: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400',
+  cyan: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-400',
+  purple: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400',
+  pink: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-400',
+  red: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
+  orange: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400',
+  amber: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
+  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-400',
+  lime: 'bg-lime-100 text-lime-700 dark:bg-lime-500/20 dark:text-lime-400',
+  'light-green': 'bg-green-50 text-green-600 dark:bg-green-400/20 dark:text-green-300',
+  teal: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-400',
+  'light-blue': 'bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-400',
+  indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-400',
+  violet: 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400',
+  grey: 'bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400',
+}
+
+export function getAvatarColorClass(name: string): string {
+  return avatarColorMap[stringToColor(name)]
+}
+
 export function getBgColorClass(color?: string): string {
   if (!color) return colorToBgClass.blue
   return (

web/default/src/lib/currency.ts

@@ -262,6 +262,7 @@ function formatCurrencyValue(
     const formatted = new Intl.NumberFormat(undefined, {
       style: 'currency',
       currency: meta.currencyCode,
+      currencyDisplay: 'narrowSymbol',
       minimumFractionDigits: 0,
       maximumFractionDigits: digits,
     }).format(adjustedValue)
@@ -337,11 +338,11 @@ export function formatCurrencyFromUSD(
   const { config, meta } = getCurrencyDisplay()
   const merged = mergeOptions(options)
 
-  if (!config.displayInCurrency || meta.kind === 'tokens') {
+  if (meta.kind === 'tokens') {
     const tokens = amountUSD * config.quotaPerUnit
     return formatNumberWithSuffix(
       tokens,
-      meta.kind === 'tokens' ? 0 : merged.digitsLarge,
+      0,
       merged.digitsSmall,
       merged.abbreviate
     )
@@ -463,7 +464,7 @@ export function formatQuotaWithCurrency(
 export function getCurrencyLabel(): string {
   const { config, meta } = getCurrencyDisplay()
 
-  if (!config.displayInCurrency || meta.kind === 'tokens') {
+  if (meta.kind === 'tokens') {
     return 'Tokens'
   }
 
@@ -494,8 +495,8 @@ export function getCurrencyLabel(): string {
  * Use this to conditionally show currency-specific UI elements
  */
 export function isCurrencyDisplayEnabled(): boolean {
-  const { config, meta } = getCurrencyDisplay()
-  return config.displayInCurrency && meta.kind !== 'tokens'
+  const { meta } = getCurrencyDisplay()
+  return meta.kind !== 'tokens'
 }
 
 /**

web/default/src/lib/format.ts

@@ -61,7 +61,7 @@ export function parseQuotaFromDollars(amount: number): number {
   const { config, meta } = getCurrencyDisplay()
 
   // Tokens-only or raw quota mode
-  if (!config.displayInCurrency || meta.kind === 'tokens') {
+  if (meta.kind === 'tokens') {
     return Math.round(amount)
   }
 
@@ -80,7 +80,7 @@ export function parseQuotaFromDollars(amount: number): number {
 export function quotaUnitsToDollars(units: number): number {
   const { config, meta } = getCurrencyDisplay()
 
-  if (!config.displayInCurrency || meta.kind === 'tokens') {
+  if (meta.kind === 'tokens') {
     return units
   }