feat: add NavPlan component to display user plan and credits in sidebar

src/components/sidebar/AppSidebar.tsx

@@ -12,6 +12,7 @@ import { useAuth } from '@/hooks/use-auth'
 import { Activity, Home, Users, Volume2, Settings } from 'lucide-react'
 import { Link, useLocation } from 'react-router'
 import { NavUser } from './NavUser'
+import { NavPlan } from './NavPlan'
 
 const navigationItems = [
   {
@@ -105,6 +106,7 @@ export function AppSidebar() {
       </SidebarContent>
 
       <SidebarFooter>
+        <NavPlan user={user} />
         <NavUser user={user} logout={handleLogout} />
       </SidebarFooter>
     </Sidebar>

src/components/sidebar/NavPlan.tsx

@@ -0,0 +1,36 @@
+import type { User } from "@/services/auth"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
+import NumberFlow from '@number-flow/react'
+import { useEffect, useState } from "react"
+
+interface NavPlanProps {
+  user: User
+}
+
+export function NavPlan({ user }: NavPlanProps) {
+  const [credits, setCredits] = useState(0)
+  
+  useEffect(() => {
+    setCredits(user.credits)
+  }, [user])
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">
+              Plan: {user.plan.name}
+            </span>
+            <span className="truncate text-xs">
+              Credits: <NumberFlow value={credits} />
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

src/services/auth.ts

@@ -18,8 +18,8 @@ interface User {
   providers: string[]
   api_token?: string
   api_token_expires_at?: string | null
-  plan?: Plan
-  credits?: number
+  plan: Plan
+  credits: number
 }
 
 interface AuthResponse {