feat: add SocketProvider and integrate real-time credits updates in NavPlan component

src/components/sidebar/NavPlan.tsx

@@ -1,5 +1,6 @@
 import type { User } from "@/services/auth"
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
+import { useSocket } from "@/contexts/SocketContext"
 import NumberFlow from '@number-flow/react'
 import { useEffect, useState } from "react"
 
@@ -9,11 +10,28 @@ interface NavPlanProps {
 
 export function NavPlan({ user }: NavPlanProps) {
   const [credits, setCredits] = useState(0)
+  const { socket, isConnected } = useSocket()
   
   useEffect(() => {
     setCredits(user.credits)
   }, [user])
 
+  // Listen for real-time credits updates
+  useEffect(() => {
+    if (!socket || !isConnected) return
+
+    const handleCreditsChanged = (data: { credits: number }) => {
+      setCredits(data.credits)
+    }
+
+    socket.on("credits_changed", handleCreditsChanged)
+
+    // Cleanup listener on unmount
+    return () => {
+      socket.off("credits_changed", handleCreditsChanged)
+    }
+  }, [socket, isConnected])
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>