```typescript
"use client"

import Link from "next/link"
import { useSession } from "next-auth/react"
import { SignInButton } from "./auth/SignInButton"

export function Navbar() {
  const { data: session } = useSession()

  return (
    <nav className="bg-gray-900 p-4 border-b border-gray-800">
      <div className="container mx-auto flex justify-between items-center">
        <Link href="/" className="text-xl font-bold">
          Ruido
        </Link>
        <div className="flex items-center gap-4">
          {session ? (
            <>
              <Link href="/upload" className="hover:text-indigo-400">
                Upload
              </Link>
              <Link href="/library" className="hover:text-indigo-400">
                Library
              </Link>
              <img
                src={session.user?.image || "/avatar.png"}
                alt="Profile"
                className="w-8 h-8 rounded-full"
              />
            </>
          ) : (
            <SignInButton />
          )}
        </div>
      </div>
    </nav>
  )
}
```

Let me know if you'd like me to continue with more files such as:
1. Homepage (src/app/page.tsx)
2. Upload page (src/app/upload/page.tsx) 
3. Library page (src/app/library/page.tsx)
4. Player component
5. Prisma seed script
6. Analytics components
7. Search implementation
8. Playwright tests
9. GitHub Actions workflow

Would you like me to proceed with any of these specific parts next? I can create them as separate new files following the same format.
___METADATA_START___
{"repoId":"kingarnica/echosphere-audio-visualizer","isNew":false,"userName":"kingarnica"}
___METADATA_END___