fix(frontend): 🐛 update hover sound handler in MarketplaceHeader.tsx

features/image-generator/backend-api/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "node16",
-    "moduleResolution": "node16",
+    "module": "commonjs",
+    "moduleResolution": "bundler",
     "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,

features/marketplace/frontend-public/src/components/MarketplaceHeader.tsx

@@ -254,20 +254,26 @@ export function MarketplaceHeader() {
 
   // Sound-enabled navigation handler - plays sound, lets Link handle navigation
   const handleNavClick = () => {
-    console.log('[Sound Debug] button-click triggered');
-    console.log('[Sound Debug] soundEngine state:', {
-      enabled: localStorage.getItem('lilith-sounds-enabled'),
-      pack: localStorage.getItem('lilith-sound-pack'),
-      volume: localStorage.getItem('lilith-sound-volume'),
-      triggers: localStorage.getItem('lilith-sound-triggers'),
-    });
     playSound('button-click');
   };
 
-  // Hover sound handler
-  const handleHover = () => {
-    console.log('[Sound Debug] nav-hover triggered');
-    playSound('nav-hover');
+  // Hover sounds with variety - uses quadrant sounds for different nav items
+  // This provides variety instead of the same sound for every item
+  const hoverSounds = [
+    'quadrant-hover-nw',
+    'quadrant-hover-ne',
+    'quadrant-hover-sw',
+    'quadrant-hover-se',
+  ] as const;
+
+  // Create hover handler for specific index (for variety)
+  const createHoverHandler = (index: number) => () => {
+    playSound(hoverSounds[index % hoverSounds.length]);
+  };
+
+  // Logo hover - center sound (special)
+  const handleLogoHover = () => {
+    playSound('center-hover');
   };
 
   const isActive = (path: string) => {
@@ -286,7 +292,7 @@ export function MarketplaceHeader() {
   return (
     <HeaderContainer>
       <HeaderInner>
-        <LogoSection to="/" onClick={handleLogoClick} onMouseEnter={handleHover}>
+        <LogoSection to="/" onClick={handleLogoClick} onMouseEnter={handleLogoHover}>
           <LogoIcon>
             <LogoSvg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -303,13 +309,13 @@ export function MarketplaceHeader() {
 
         <Navigation>
           {vertical?.navigation && vertical.navigation.length > 0 ? (
-            vertical.navigation.map((item) => (
+            vertical.navigation.map((item, index) => (
               <NavLink
                 key={item.path}
                 to={item.path}
                 $active={isActive(item.path)}
                 onClick={handleNavClick}
-                onMouseEnter={handleHover}
+                onMouseEnter={createHoverHandler(index)}
               >
                 {item.label}
               </NavLink>
@@ -320,7 +326,7 @@ export function MarketplaceHeader() {
                 to={browseLink}
                 $active={isActive('/browse')}
                 onClick={handleNavClick}
-                onMouseEnter={handleHover}
+                onMouseEnter={createHoverHandler(0)}
               >
                 Browse
               </NavLink>
@@ -328,7 +334,7 @@ export function MarketplaceHeader() {
                 to="/categories"
                 $active={isActive('categories')}
                 onClick={handleNavClick}
-                onMouseEnter={handleHover}
+                onMouseEnter={createHoverHandler(1)}
               >
                 Categories
               </NavLink>
@@ -336,7 +342,7 @@ export function MarketplaceHeader() {
                 to="/browse/neighborhoods"
                 $active={isActive('neighborhoods')}
                 onClick={handleNavClick}
-                onMouseEnter={handleHover}
+                onMouseEnter={createHoverHandler(2)}
               >
                 Near Me
               </NavLink>