loukai-app 0.3.0

package/src/shared/components/QueueList.jsx

@@ -0,0 +1,365 @@
+/**
+ * QueueList - Unified queue display component
+ *
+ * Based on renderer's player-queue-sidebar design
+ * Works with both ElectronBridge and WebBridge via callbacks
+ */
+
+import { useState, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * PortalTooltip - Tooltip that renders via portal for consistent positioning on Wayland
+ */
+function PortalTooltip({ text, targetRect, visible }) {
+  if (!visible || !targetRect) return null;
+
+  const style = {
+    position: 'fixed',
+    left: targetRect.left + targetRect.width / 2,
+    top: targetRect.top - 4,
+    transform: 'translate(-50%, -100%)',
+    zIndex: 10000,
+  };
+
+  return createPortal(
+    <div
+      style={style}
+      className="px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded shadow-lg whitespace-nowrap pointer-events-none"
+    >
+      {text}
+      <div className="absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-900 dark:border-t-gray-700" />
+    </div>,
+    document.body
+  );
+}
+
+/**
+ * TooltipButton - Button with portal-based tooltip
+ */
+function TooltipButton({ icon, tooltip, onClick, className, iconSize = 'text-base' }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipRect, setTooltipRect] = useState(null);
+  const buttonRef = useRef(null);
+  const tooltipTimeoutRef = useRef(null);
+
+  const handleMouseEnter = useCallback(() => {
+    tooltipTimeoutRef.current = setTimeout(() => {
+      if (buttonRef.current) {
+        setTooltipRect(buttonRef.current.getBoundingClientRect());
+        setShowTooltip(true);
+      }
+    }, 400);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    if (tooltipTimeoutRef.current) {
+      clearTimeout(tooltipTimeoutRef.current);
+      tooltipTimeoutRef.current = null;
+    }
+    setShowTooltip(false);
+  }, []);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={onClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={className}
+      >
+        <span className={`material-icons ${iconSize}`}>{icon}</span>
+      </button>
+      <PortalTooltip text={tooltip} targetRect={tooltipRect} visible={showTooltip} />
+    </>
+  );
+}
+
+export function QueueList({
+  queue = [],
+  currentIndex = -1,
+  currentSongId = null, // Support web's currentSongId prop
+  onPlayFromQueue,
+  onRemoveFromQueue,
+  onLoad, // Alias for web compatibility
+  onRemove, // Alias for web compatibility
+  onClearQueue,
+  onClear, // Alias for web compatibility
+  onShuffleQueue,
+  onReorderQueue, // New: drag and drop reordering
+  onQuickSearch,
+  className = '',
+}) {
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const [dragOverIndex, setDragOverIndex] = useState(null);
+
+  // Support both prop names
+  const handlePlay = onPlayFromQueue || onLoad;
+  const handleRemove = onRemoveFromQueue || onRemove;
+  const handleClear = onClearQueue || onClear;
+
+  // Drag and drop handlers
+  const handleDragStart = (e, index) => {
+    if (!onReorderQueue) return;
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', e.currentTarget);
+  };
+
+  const handleDragOver = (e, index) => {
+    if (!onReorderQueue || draggedIndex === null) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverIndex(index);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+
+  const handleDrop = (e, dropIndex) => {
+    if (!onReorderQueue || draggedIndex === null) return;
+    e.preventDefault();
+
+    if (draggedIndex !== dropIndex) {
+      const item = queue[draggedIndex];
+      // When moving down, account for the shift caused by removing the dragged item
+      // Without this adjustment, items dropped below their origin end up one position too far down
+      let targetIndex = dropIndex;
+      if (draggedIndex < dropIndex) {
+        targetIndex = dropIndex - 1;
+      }
+      onReorderQueue(item.id, targetIndex);
+    }
+
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
+  if (queue.length === 0) {
+    return (
+      <div className={`flex flex-col gap-1 flex-1 min-h-0 ${className}`}>
+        {onQuickSearch && (
+          <div className="relative mb-2">
+            <input
+              type="text"
+              id="quickLibrarySearch"
+              className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500 dark:focus:border-blue-400"
+              placeholder="Search..."
+              onInput={(e) => onQuickSearch(e.target.value)}
+            />
+            <div
+              className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded shadow-lg z-50 hidden"
+              id="quickSearchResults"
+            >
+              <div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                Type to search your library
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-between items-center py-1">
+          <h4 className="m-0 text-base font-semibold text-gray-900 dark:text-white">Queue</h4>
+          <div className="flex gap-1">
+            {handleClear && (
+              <TooltipButton
+                icon="delete"
+                tooltip="Clear Queue"
+                onClick={handleClear}
+                iconSize="text-lg"
+                className="p-1.5 px-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+              />
+            )}
+            {onShuffleQueue && (
+              <TooltipButton
+                icon="shuffle"
+                tooltip="Shuffle"
+                onClick={onShuffleQueue}
+                iconSize="text-lg"
+                className="p-1.5 px-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto flex flex-col gap-1">
+          <div className="flex flex-col items-center justify-center p-8 text-gray-400 dark:text-gray-500">
+            <span className="material-icons text-5xl mb-2 opacity-50">queue_music</span>
+            <div className="text-sm">Queue is empty</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-1 flex-1 min-h-0 ${className}`}>
+      {onQuickSearch && (
+        <div className="relative mb-2">
+          <input
+            type="text"
+            id="quickLibrarySearch"
+            className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500 dark:focus:border-blue-400"
+            placeholder="Search..."
+            onInput={(e) => onQuickSearch(e.target.value)}
+          />
+          <div
+            className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded shadow-lg z-50 hidden"
+            id="quickSearchResults"
+          >
+            <div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
+              Type to search your library
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-between items-center py-1">
+        <h4 className="m-0 text-base font-semibold text-gray-900 dark:text-white">Queue</h4>
+        <div className="flex gap-1">
+          {handleClear && (
+            <TooltipButton
+              icon="delete"
+              tooltip="Clear Queue"
+              onClick={handleClear}
+              iconSize="text-lg"
+              className="p-1.5 px-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+            />
+          )}
+          {onShuffleQueue && (
+            <TooltipButton
+              icon="shuffle"
+              tooltip="Shuffle"
+              onClick={onShuffleQueue}
+              iconSize="text-lg"
+              className="p-1.5 px-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto flex flex-col gap-1">
+        {queue.map((item, index) => {
+          // Support both currentIndex (renderer) and currentSongId (web)
+          // ONLY match by queueItemId - no path fallback to avoid duplicate song highlighting
+          let isCurrentSong = false;
+
+          // Renderer uses currentIndex
+          if (currentIndex >= 0 && index === currentIndex) {
+            isCurrentSong = true;
+          }
+          // Web uses currentSongId (queueItemId only - must be a number)
+          else if (typeof currentSongId === 'number') {
+            isCurrentSong = item.id === currentSongId;
+          }
+
+          const requesterText = item.requester ? ` • Singer: ${item.requester}` : '';
+
+          const isDragging = draggedIndex === index;
+          const isDragOver = dragOverIndex === index;
+
+          // Build item classes
+          const itemClasses = [
+            'flex items-center gap-2 px-2 py-1.5 rounded transition-all',
+            'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+            'hover:bg-gray-200 dark:hover:bg-gray-750',
+          ];
+
+          if (isCurrentSong) {
+            itemClasses.push(
+              'bg-green-100 dark:bg-green-900/20 border-green-500 dark:border-green-600'
+            );
+          }
+          if (isDragging) {
+            itemClasses.push('opacity-50 cursor-grabbing');
+          }
+          if (isDragOver) {
+            itemClasses.push('border-t-2 border-t-cyan-500');
+          }
+          if (onReorderQueue) {
+            itemClasses.push('cursor-grab');
+          }
+
+          return (
+            <div
+              key={item.id}
+              className={itemClasses.join(' ')}
+              data-item-id={item.id}
+              draggable={Boolean(onReorderQueue)}
+              onDragStart={(e) => handleDragStart(e, index)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, index)}
+              onDragEnd={handleDragEnd}
+            >
+              <div className="flex items-center justify-center w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded text-xs font-semibold text-gray-600 dark:text-gray-400 flex-shrink-0">
+                {index + 1}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div
+                  className="font-medium text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis mb-0.5 text-sm"
+                  title={item.title}
+                >
+                  {item.title}
+                </div>
+                <div
+                  className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis"
+                  title={`${item.artist}${requesterText}`}
+                >
+                  {item.artist}
+                  {requesterText}
+                </div>
+              </div>
+              <div className="flex gap-1 flex-shrink-0">
+                {/* Up/Down reorder buttons - only show if more than one item */}
+                {onReorderQueue && queue.length > 1 && (
+                  <>
+                    {index > 0 && (
+                      <TooltipButton
+                        icon="arrow_upward"
+                        tooltip="Move Up"
+                        onClick={() => onReorderQueue(item.id, index - 1)}
+                        className="p-1 bg-transparent border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+                      />
+                    )}
+                    {index < queue.length - 1 && (
+                      <TooltipButton
+                        icon="arrow_downward"
+                        tooltip="Move Down"
+                        onClick={() => onReorderQueue(item.id, index + 1)}
+                        className="p-1 bg-transparent border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+                      />
+                    )}
+                  </>
+                )}
+                {handlePlay && (
+                  <TooltipButton
+                    icon="queue_play_next"
+                    tooltip="Load Song"
+                    onClick={() => handlePlay(item.id || item.path)}
+                    className="p-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+                  />
+                )}
+                {handleRemove && (
+                  <TooltipButton
+                    icon="close"
+                    tooltip="Remove"
+                    onClick={() => handleRemove(item.id)}
+                    className="p-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded cursor-pointer flex items-center justify-center transition-all text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600"
+                  />
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/shared/components/QuickSearch.jsx

@@ -0,0 +1,126 @@
+/**
+ * QuickSearch - Shared quick search component
+ * Used by both renderer and web admin for quick library search above queue
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { getFormatIcon } from '../formatUtils.js';
+
+export function QuickSearch({ bridge, requester = 'KJ' }) {
+  const [searchResults, setSearchResults] = useState([]);
+  const [showSearchDropdown, setShowSearchDropdown] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const searchInputRef = useRef(null);
+  const dropdownRef = useRef(null);
+
+  // Handle quick search
+  const handleQuickSearch = async (value) => {
+    setSearchTerm(value);
+
+    if (!value.trim()) {
+      setShowSearchDropdown(false);
+      setSearchResults([]);
+      return;
+    }
+
+    try {
+      const result = await bridge.searchSongs(value);
+      const songs = result.songs || [];
+      setSearchResults(songs.slice(0, 8)); // Limit to 8 results
+      setShowSearchDropdown(true);
+    } catch (error) {
+      console.error('Quick search error:', error);
+      setSearchResults([]);
+      setShowSearchDropdown(true);
+    }
+  };
+
+  // Add song to queue from search
+  const handleAddFromSearch = async (song) => {
+    const queueItem = {
+      path: song.path,
+      title: song.title || song.name.replace('.kai', ''),
+      artist: song.artist || 'Unknown Artist',
+      duration: song.duration,
+      requester: requester,
+      addedVia: requester === 'Web Admin' ? 'web' : 'ui',
+    };
+
+    await bridge.addToQueue(queueItem);
+
+    // Clear search
+    setSearchTerm('');
+    setShowSearchDropdown(false);
+    setSearchResults([]);
+  };
+
+  // Click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target) &&
+        searchInputRef.current &&
+        !searchInputRef.current.contains(e.target)
+      ) {
+        setShowSearchDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative p-2">
+      <input
+        ref={searchInputRef}
+        type="text"
+        className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        placeholder="Quick search library..."
+        value={searchTerm}
+        onChange={(e) => handleQuickSearch(e.target.value)}
+        onFocus={() => searchTerm && setShowSearchDropdown(true)}
+      />
+
+      {showSearchDropdown && (
+        <div
+          ref={dropdownRef}
+          className="absolute left-2 right-2 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 overflow-y-auto z-50"
+        >
+          {searchResults.length === 0 ? (
+            <div className="p-4 text-center text-gray-500 dark:text-gray-400">
+              {searchTerm ? 'No matches found' : 'Type to search your library'}
+            </div>
+          ) : (
+            searchResults.map((song) => (
+              <div
+                key={song.path}
+                className="flex items-center justify-between gap-3 p-3 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-700 last:border-b-0"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 text-gray-900 dark:text-gray-100 font-medium truncate">
+                    <span className="text-lg">{getFormatIcon(song.format)}</span>
+                    {song.title}
+                  </div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400 truncate">
+                    {song.artist}
+                  </div>
+                </div>
+                <button
+                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition flex-shrink-0"
+                  onClick={() => handleAddFromSearch(song)}
+                  title="Add to Queue"
+                >
+                  <span className="material-icons text-gray-700 dark:text-gray-300">
+                    playlist_add
+                  </span>
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/shared/components/RequestsList.jsx

@@ -0,0 +1,121 @@
+export function RequestsList({ requests, onApprove, onReject }) {
+  const handleApprove = async (requestId) => {
+    if (onApprove) {
+      await onApprove(requestId);
+    }
+  };
+
+  const handleReject = async (requestId) => {
+    if (onReject) {
+      await onReject(requestId);
+    }
+  };
+
+  const pendingRequests = requests.filter((r) => r.status === 'pending');
+  const otherRequests = requests.filter((r) => r.status !== 'pending');
+
+  return (
+    <div className="p-4 space-y-6">
+      {pendingRequests.length > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Pending Approval ({pendingRequests.length})
+          </h3>
+          <div className="space-y-2">
+            {pendingRequests.map((request) => (
+              <div
+                key={request.id}
+                className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 flex items-center justify-between gap-4"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-gray-900 dark:text-gray-100 truncate">
+                    <strong>{request.song.title}</strong>
+                    {request.song.artist && (
+                      <span className="text-gray-600 dark:text-gray-400">
+                        {' '}
+                        - {request.song.artist}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3 mt-1 text-sm text-gray-600 dark:text-gray-400">
+                    <span>From: {request.requesterName}</span>
+                    {request.message && <span className="italic">"{request.message}"</span>}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  <button
+                    className="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition"
+                    onClick={() => handleApprove(request.id)}
+                  >
+                    ✓ Approve
+                  </button>
+                  <button
+                    className="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition"
+                    onClick={() => handleReject(request.id)}
+                  >
+                    ✗ Reject
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {otherRequests.length > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Recent Requests
+          </h3>
+          <div className="space-y-2">
+            {otherRequests.slice(0, 10).map((request) => {
+              const statusColors = {
+                approved: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800',
+                rejected: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800',
+              };
+              const badgeColors = {
+                approved: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
+                rejected: 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200',
+              };
+
+              return (
+                <div
+                  key={request.id}
+                  className={`${statusColors[request.status] || 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'} border rounded-lg p-4`}
+                >
+                  <div className="flex items-center justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium text-gray-900 dark:text-gray-100 truncate">
+                        <strong>{request.song.title}</strong>
+                        {request.song.artist && (
+                          <span className="text-gray-600 dark:text-gray-400">
+                            {' '}
+                            - {request.song.artist}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-3 mt-1 text-sm text-gray-600 dark:text-gray-400">
+                        <span>From: {request.requesterName}</span>
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${badgeColors[request.status] || 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}`}
+                        >
+                          {request.status}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {requests.length === 0 && (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <p>No song requests yet</p>
+        </div>
+      )}
+    </div>
+  );
+}