feat: add CreditsNav component to display user credits in AppSidebar

src/components/AppSidebar.tsx

@@ -16,6 +16,7 @@ import {
 import { NavGroup } from './nav/NavGroup'
 import { NavItem } from './nav/NavItem'
 import { UserNav } from './nav/UserNav'
+import { CreditsNav } from './nav/CreditsNav'
 import { CompactPlayer } from './player/CompactPlayer'
 import { Separator } from '@/components/ui/separator'
 import { useAuth } from '@/contexts/AuthContext'
@@ -64,6 +65,8 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
             <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
           </>
         )}
+        <CreditsNav user={user} />
+        <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
         <UserNav user={user} logout={logout} />
       </SidebarFooter>
 

src/components/nav/CreditsNav.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { CircleDollarSign } from 'lucide-react'
+import NumberFlow from '@number-flow/react'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../ui/sidebar'
+import { userEvents, USER_EVENTS } from '@/lib/events'
+import type { User } from '@/types/auth'
+
+interface CreditsNavProps {
+  user: User
+}
+
+export function CreditsNav({ user }: CreditsNavProps) {
+  const [credits, setCredits] = useState(user.credits)
+
+  useEffect(() => {
+    const handleCreditsChanged = (data: { credits_after: number }) => {
+      setCredits(data.credits_after)
+    }
+
+    userEvents.on(USER_EVENTS.USER_CREDITS_CHANGED, handleCreditsChanged)
+
+    return () => {
+      userEvents.off(USER_EVENTS.USER_CREDITS_CHANGED, handleCreditsChanged)
+    }
+  }, [])
+
+  // Update credits when user prop changes (initial load or refresh)
+  useEffect(() => {
+    setCredits(user.credits)
+  }, [user.credits])
+
+  const tooltipText = `Credits: ${credits} / ${user.plan.max_credits}`
+  
+  // Determine icon color based on credit levels
+  const getIconColor = () => {
+    if (credits === 0) return 'text-red-500'
+    if (credits <= user.plan.max_credits * 0.2) return 'text-yellow-500'
+    return 'text-green-500'
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" className="cursor-default group-data-[collapsible=icon]:justify-center" tooltip={tooltipText}>
+          <CircleDollarSign className={`h-5 w-5 ${getIconColor()}`} />
+          <div className="flex flex-1 items-center justify-between text-sm leading-tight group-data-[collapsible=icon]:hidden">
+            <span className="font-semibold">Credits:</span>
+            <span className="text-muted-foreground">
+              <NumberFlow value={credits} /> / <NumberFlow value={user.plan.max_credits} />
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}