loukai-app 0.3.0

package/src/renderer/components/TabNavigation.jsx

@@ -0,0 +1,77 @@
+/**
+ * TabNavigation - Renderer tab navigation component
+ *
+ * Manages tab switching between different app sections
+ */
+
+import React, { useState } from 'react';
+
+export function TabNavigation({ requestsCount = 0 }) {
+  const [activeTab, setActiveTab] = useState('player');
+
+  const tabs = [
+    { id: 'player', label: '🎵 Player' },
+    { id: 'library', label: '📚 Library' },
+    { id: 'mixer', label: '🎛️ Audio' },
+    { id: 'effects', label: '✨ Effects' },
+    { id: 'requests', label: '🎤 Requests', badge: requestsCount },
+    { id: 'server', label: '🌐 Server' },
+    { id: 'create', label: '⚡ Create' },
+    { id: 'editor', label: '✏️ Edit' },
+  ];
+
+  const handleTabClick = (tabId) => {
+    // Hide all tab panes
+    document.querySelectorAll('[id$="-tab"]').forEach((pane) => {
+      pane.classList.add('hidden');
+      pane.classList.remove('block', 'flex');
+    });
+
+    // Show selected tab pane
+    const targetPane = document.getElementById(`${tabId}-tab`);
+    if (targetPane) {
+      targetPane.classList.remove('hidden');
+      // Use flex for player tab to maintain layout
+      if (tabId === 'player') {
+        targetPane.classList.add('flex');
+      } else {
+        targetPane.classList.add('block');
+      }
+    }
+
+    setActiveTab(tabId);
+
+    // Handle resize for player tab to update canvas styling
+    if (tabId === 'player' && window.kaiPlayerApp?.player?.karaokeRenderer?.resizeHandler) {
+      setTimeout(() => {
+        window.kaiPlayerApp.player.karaokeRenderer.resizeHandler();
+      }, 10);
+    }
+  };
+
+  return (
+    <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          className={`
+            px-6 py-3 font-medium transition-colors relative inline-flex items-center gap-2
+            ${
+              activeTab === tab.id
+                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 bg-gray-50 dark:bg-gray-900'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700'
+            }
+          `}
+          onClick={() => handleTabClick(tab.id)}
+        >
+          {tab.label}
+          {tab.badge > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 bg-red-600 text-white rounded-full text-xs font-semibold">
+              {tab.badge}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/renderer/components/TransportControlsWrapper.jsx

@@ -0,0 +1,69 @@
+/**
+ * TransportControlsWrapper - Renderer-specific wrapper for PlayerControls
+ * Uses React Context and hooks instead of bridge
+ */
+
+import React, { useState, useEffect } from 'react';
+import { PlayerControls } from '../../shared/components/PlayerControls.jsx';
+import { usePlayerState } from '../../shared/contexts/PlayerContext.jsx';
+import { usePlayer } from '../../shared/hooks/usePlayer.js';
+
+export function TransportControlsWrapper({ bridge: _bridge }) {
+  const { currentSong, isPlaying, currentPosition, duration } = usePlayerState();
+  const { play, pause, restart, next, seek } = usePlayer();
+  const [currentEffect, setCurrentEffect] = useState('');
+
+  // Subscribe to effects state (TODO: move to EffectsContext in future)
+  useEffect(() => {
+    if (!window.kaiAPI?.effects) return;
+
+    const handleEffectChanged = (event, effects) => {
+      setCurrentEffect(effects.current || '');
+    };
+
+    window.kaiAPI.effects.onChanged(handleEffectChanged);
+
+    return () => {
+      window.kaiAPI.effects.removeChangedListener(handleEffectChanged);
+    };
+  }, []);
+
+  // Effect callbacks (TODO: move to useEffects hook in future)
+  const handlePreviousEffect = () => {
+    if (window.kaiAPI?.effects) {
+      window.kaiAPI.effects.previous();
+    }
+  };
+
+  const handleNextEffect = () => {
+    if (window.kaiAPI?.effects) {
+      window.kaiAPI.effects.next();
+    }
+  };
+
+  const handleOpenCanvasWindow = () => {
+    if (window.kaiAPI?.window?.openCanvas) {
+      window.kaiAPI.window.openCanvas();
+    }
+  };
+
+  const playback = { isPlaying, position: currentPosition, duration };
+  const isLoading = currentSong?.isLoading || false;
+
+  return (
+    <PlayerControls
+      playback={playback}
+      currentSong={currentSong}
+      currentEffect={currentEffect}
+      isLoading={isLoading}
+      onPlay={play}
+      onPause={pause}
+      onRestart={restart}
+      onNext={next}
+      onSeek={seek}
+      onPreviousEffect={handlePreviousEffect}
+      onNextEffect={handleNextEffect}
+      onOpenCanvasWindow={handleOpenCanvasWindow}
+    />
+  );
+}