feat(sounds): add soundcn UI sound effects on key interactions

Wire soundcn (Web Audio API, zero-dep, CC0) on header items and home CTAs
via a unified useUiSounds hook — click on nav links, pop on sheet/menu
triggers, switch on theme toggle, error on logout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ln-dev7

app/page.tsx

@@ -31,6 +31,7 @@ import {
   Sparkles,
   Users,
 } from "lucide-react"
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { useTheme } from "@/components/theme-provider"
 
 import { siteConfig } from "@/config/site"
@@ -47,9 +48,15 @@ import { TiltedPreview } from "@/components/home/tilted-preview"
 export default function IndexPage() {
   const { login, isPending } = useGitHubLogin()
   const { resolvedTheme } = useTheme()
+  const { playClick, playPop } = useUiSounds()
 
   const { user } = useAuthContext()
 
+  const handleLogin = () => {
+    playClick()
+    login()
+  }
+
   // Contributors
   const { data: contributors, isLoading: isLoadingContributors } = useQuery(
     "contributors",
@@ -90,6 +97,7 @@ export default function IndexPage() {
         {/* Announcement pill */}
         <Link
           href="/image"
+          onClick={() => playPop()}
           className="group relative z-10 inline-flex w-fit items-center gap-2 rounded-full border border-zinc-200 bg-white/80 px-3 py-1 text-sm font-medium shadow-sm backdrop-blur-sm transition-all hover:border-zinc-300 hover:bg-white hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/80 dark:hover:border-zinc-700 dark:hover:bg-zinc-900"
         >
           <span className="relative flex h-2 w-2 shrink-0">
@@ -141,6 +149,7 @@ export default function IndexPage() {
         <div className="relative z-10 flex flex-col gap-3 sm:flex-row sm:gap-4">
           <Link
             href={siteConfig.links.explore}
+            onClick={() => playClick()}
             className={cn(
               buttonVariants({ size: "lg" }),
               "group relative gap-2 overflow-hidden shadow-[0_10px_30px_-12px_rgba(99,102,241,0.5)] transition-shadow hover:shadow-[0_16px_40px_-12px_rgba(99,102,241,0.7)] dark:shadow-[0_10px_30px_-12px_rgba(0,0,0,0.6)]"
@@ -155,6 +164,7 @@ export default function IndexPage() {
           {user ? (
             <Link
               href="/dashboard"
+              onClick={() => playClick()}
               className={cn(
                 buttonVariants({ size: "lg", variant: "outline" }),
                 "gap-2 backdrop-blur-sm"
@@ -170,7 +180,7 @@ export default function IndexPage() {
                 "gap-2 backdrop-blur-sm"
               )}
               disabled={isPending}
-              onClick={login}
+              onClick={handleLogin}
             >
               {isPending ? (
                 <Loader2 className="h-4 w-4 animate-spin" />

components/avatar-user.tsx

@@ -9,6 +9,7 @@ import { signOut } from "firebase/auth"
 import { Verified } from "lucide-react"
 
 import { siteConfig } from "@/config/site"
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { Icons } from "@/components/icons"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button, buttonVariants } from "@/components/ui/button"
@@ -43,12 +44,13 @@ export const useGitHubLogout = () => {
 export function AvatarUser() {
   const { logout } = useGitHubLogout()
   const { user, userPseudo } = useAuthContext()
+  const { playClick, playPop, playError } = useUiSounds()
 
   const { data, isLoading } = useDocument(userPseudo, "users")
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <div className="relative">
+        <div className="relative" onClick={() => playPop()}>
           {data && data.exists && data.data.premium && (
             <div className="absolute -right-1 -bottom-1 z-10 flex items-center justify-center rounded-full border-2 border-yellow-500 bg-white dark:bg-zinc-800">
               <Verified className="h-5 w-5 shrink-0 p-1 text-yellow-500" />
@@ -109,13 +111,15 @@ export function AvatarUser() {
           <Link
             defaultChecked
             href="/dashboard"
+            onClick={() => playClick()}
             className={buttonVariants({ size: "lg", variant: "outline" })}
           >
             Dashboard
           </Link>
           <Button
             className={buttonVariants({ size: "lg", variant: "destructive" })}
             onClick={() => {
+              playError()
               logout()
             }}
           >
@@ -132,6 +136,7 @@ export function AvatarUser() {
               href={siteConfig.links.github}
               target="_blank"
               rel="noreferrer"
+              onClick={() => playClick()}
             >
               <div
                 className={buttonVariants({
@@ -148,6 +153,7 @@ export function AvatarUser() {
               href={siteConfig.links.twitter}
               target="_blank"
               rel="noreferrer"
+              onClick={() => playClick()}
             >
               <div
                 className={buttonVariants({

components/main-nav.tsx

@@ -1,9 +1,12 @@
+"use client"
+
 import Link from "next/link"
 import { ExternalLink } from "lucide-react"
 
 import { NavItem } from "@/types/nav"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import {
@@ -20,10 +23,12 @@ interface MainNavProps {
 }
 
 export function MainNav({ items }: MainNavProps) {
+  const { playClick, playPop } = useUiSounds()
   return (
     <div className="flex gap-6 min-[1250px]:gap-10">
       <Link
         href="/"
+        onClick={() => playClick()}
         className="hidden items-center space-x-2 min-[1250px]:flex"
       >
         <Icons.logo className="h-6 w-6" />
@@ -40,6 +45,9 @@ export function MainNav({ items }: MainNavProps) {
                 <Link
                   key={index}
                   href={item.disabled ? "#" : item.href}
+                  onClick={() => {
+                    if (!item.disabled) playClick()
+                  }}
                   className={cn(
                     "group relative inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-semibold transition-colors hover:bg-zinc-100 focus:bg-zinc-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-zinc-50 data-[state=open]:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 dark:focus:bg-zinc-800 dark:data-[active]:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
                     item.disabled && "cursor-not-allowed"
@@ -67,6 +75,7 @@ export function MainNav({ items }: MainNavProps) {
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
+            onClick={() => playPop()}
             className="-ml-4 text-base hover:bg-transparent focus:ring-0 min-[1250px]:hidden"
           >
             <Icons.logo className="mr-2 h-4 w-4" />{" "}
@@ -87,7 +96,13 @@ export function MainNav({ items }: MainNavProps) {
           {items?.map(
             (item, index) =>
               item.href && (
-                <DropdownMenuItem key={index} asChild>
+                <DropdownMenuItem
+                  key={index}
+                  asChild
+                  onClick={() => {
+                    if (!item.disabled) playClick()
+                  }}
+                >
                   <Link href={item.disabled ? "#" : item.href}>
                     {item.title}
                     {item.external && <ExternalLink className="ml-2 h-4 w-4" />}

components/site-header.tsx

@@ -5,6 +5,7 @@ import { useParams, usePathname } from "next/navigation"
 import { useAuthContext } from "@/context/AuthContext"
 
 import { siteConfig } from "@/config/site"
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
 import { ThemeSwitcher } from "@/components/theme-switcher"
@@ -19,6 +20,7 @@ export function SiteHeader() {
   const { user } = useAuthContext()
   const pathName = usePathname()
   const params = useParams()
+  const { playClick } = useUiSounds()
 
   const searchBar =
     params["link"] !== undefined || (pathName === "/links" && user) ? (
@@ -46,6 +48,7 @@ export function SiteHeader() {
                 href={siteConfig.links.github}
                 target="_blank"
                 rel="noreferrer"
+                onClick={() => playClick()}
                 className={buttonVariants({
                   size: "sm",
                   variant: "ghost",
@@ -60,6 +63,7 @@ export function SiteHeader() {
                 href={siteConfig.links.twitter}
                 target="_blank"
                 rel="noreferrer"
+                onClick={() => playClick()}
                 className={buttonVariants({
                   size: "sm",
                   variant: "ghost",

components/theme-switcher.tsx

@@ -3,6 +3,7 @@
 import { Paintbrush, Check, Search } from "lucide-react"
 import { useState } from "react"
 
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { useTheme } from "@/components/theme-provider"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -347,6 +348,7 @@ const DARK_PREVIEWS: Record<
 export function ThemeSwitcher() {
   const { colorTheme, setColorTheme } = useColorThemeStore()
   const { resolvedTheme } = useTheme()
+  const { playClick, playPop } = useUiSounds()
 
   const isDark = resolvedTheme === "dark"
   const [search, setSearch] = useState("")
@@ -369,7 +371,12 @@ export function ThemeSwitcher() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" size="icon" className="size-8">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={() => playPop()}
+        >
           <Paintbrush className="size-4" />
         </Button>
       </SheetTrigger>
@@ -429,7 +436,10 @@ export function ThemeSwitcher() {
                 return (
                   <button
                     key={theme.id}
-                    onClick={() => setColorTheme(theme.id)}
+                    onClick={() => {
+                      playClick()
+                      setColorTheme(theme.id)
+                    }}
                     className={cn(
                       "relative flex flex-col gap-2 rounded-xl border-2 p-3 text-left transition-all hover:border-primary/50",
                       isSelected

components/theme-toggle.tsx

@@ -1,5 +1,8 @@
+"use client"
+
 import { useTheme } from "@/components/theme-provider"
 
+import { useUiSounds } from "@/hooks/use-ui-sounds"
 import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import {
@@ -11,26 +14,42 @@ import {
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()
+  const { playSwitchOn, playSwitchOff, playClick } = useUiSounds()
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm">
+        <Button variant="ghost" size="sm" onClick={() => playClick()}>
           <Icons.sun className="scale-100 rotate-0 transition-all hover:text-zinc-900 dark:scale-0 dark:-rotate-90 dark:text-zinc-400 dark:hover:text-zinc-100" />
           <Icons.moon className="absolute scale-0 rotate-90 transition-all hover:text-zinc-900 dark:scale-100 dark:rotate-0 dark:text-zinc-400 dark:hover:text-zinc-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" forceMount>
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem
+          onClick={() => {
+            playSwitchOff()
+            setTheme("light")
+          }}
+        >
           <Icons.sun className="mr-2 h-4 w-4" />
           <span>Light</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem
+          onClick={() => {
+            playSwitchOn()
+            setTheme("dark")
+          }}
+        >
           <Icons.moon className="mr-2 h-4 w-4" />
           <span>Dark</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
+        <DropdownMenuItem
+          onClick={() => {
+            playClick()
+            setTheme("system")
+          }}
+        >
           <Icons.laptop className="mr-2 h-4 w-4" />
           <span>System</span>
         </DropdownMenuItem>