Some enhancements to UI functionality

components/CreatePanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash, RefreshCw, Plus, Upload, Play, Pause } from 'lucide-react';
+import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash, RefreshCw, Plus, Upload, Play, Pause, Loader2 } from 'lucide-react';
 import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
 import { generateApi } from '../services/api';
@@ -174,8 +174,10 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   const [isUploadingSource, setIsUploadingSource] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [isFormatting, setIsFormatting] = useState(false);
+  const [isDraggingFile, setIsDraggingFile] = useState(false);
   const referenceInputRef = useRef<HTMLInputElement>(null);
   const sourceInputRef = useRef<HTMLInputElement>(null);
+  const dragDepthRef = useRef(0);
   const [showAudioModal, setShowAudioModal] = useState(false);
   const [audioModalTarget, setAudioModalTarget] = useState<'reference' | 'source'>('reference');
   const [tempAudioUrl, setTempAudioUrl] = useState('');
@@ -273,6 +275,50 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     };
   }, [isResizing]);
 
+  useEffect(() => {
+    const isFileDrag = (e: DragEvent) =>
+      !!(e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files'));
+
+    const handleDragEnter = (e: DragEvent) => {
+      if (!isFileDrag(e)) return;
+      dragDepthRef.current += 1;
+      setIsDraggingFile(true);
+      e.preventDefault();
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      if (!isFileDrag(e)) return;
+      e.preventDefault();
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      if (!isFileDrag(e)) return;
+      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+      if (dragDepthRef.current === 0) {
+        setIsDraggingFile(false);
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      if (!isFileDrag(e)) return;
+      e.preventDefault();
+      dragDepthRef.current = 0;
+      setIsDraggingFile(false);
+    };
+
+    window.addEventListener('dragenter', handleDragEnter);
+    window.addEventListener('dragover', handleDragOver);
+    window.addEventListener('dragleave', handleDragLeave);
+    window.addEventListener('drop', handleDrop);
+
+    return () => {
+      window.removeEventListener('dragenter', handleDragEnter);
+      window.removeEventListener('dragover', handleDragOver);
+      window.removeEventListener('dragleave', handleDragLeave);
+      window.removeEventListener('drop', handleDrop);
+    };
+  }, []);
+
   const startResizing = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsResizing(true);
@@ -303,13 +349,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>, target: 'reference' | 'source') => {
     const file = e.target.files?.[0];
     if (file) {
-      void uploadAudio(file, target);
+      void uploadReferenceTrack(file, target);
     }
     e.target.value = '';
   };
 
-  // Format handler - uses LLM to enhance style and auto-fill parameters
-  const handleFormat = async () => {
+  // Format handler - uses LLM to enhance style/lyrics and auto-fill parameters
+  const handleFormat = async (target: 'style' | 'lyrics') => {
     if (!token || !style.trim()) return;
     setIsFormatting(true);
     try {
@@ -327,14 +373,14 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
 
       if (result.success) {
         // Update fields with LLM-generated values
-        if (result.caption) setStyle(result.caption);
-        if (result.lyrics) setLyrics(result.lyrics);
+        if (target === 'style' && result.caption) setStyle(result.caption);
+        if (target === 'lyrics' && result.lyrics) setLyrics(result.lyrics);
         if (result.bpm && result.bpm > 0) setBpm(result.bpm);
         if (result.duration && result.duration > 0) setDuration(result.duration);
         if (result.key_scale) setKeyScale(result.key_scale);
         if (result.time_signature) setTimeSignature(result.time_signature);
         if (result.language) setVocalLanguage(result.language);
-        setIsFormatCaption(true);
+        if (target === 'style') setIsFormatCaption(true);
       } else {
         console.error('Format failed:', result.error || result.status_message);
         alert(result.error || result.status_message || 'Format failed. Make sure the LLM is initialized.');
@@ -372,7 +418,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     }
   }, [token]);
 
-  const uploadReferenceTrack = async (file: File) => {
+  const uploadReferenceTrack = async (file: File, target?: 'reference' | 'source') => {
     if (!token) {
       setUploadError('Please sign in to upload audio.');
       return;
@@ -398,7 +444,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
       setReferenceTracks(prev => [data.track, ...prev]);
 
       // Also set as current reference/source
-      if (audioModalTarget === 'reference') {
+      const selectedTarget = target ?? audioModalTarget;
+      if (selectedTarget === 'reference') {
         setReferenceAudioUrl(data.track.audio_url);
       } else {
         setSourceAudioUrl(data.track.audio_url);
@@ -494,7 +541,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     e.preventDefault();
     const file = e.dataTransfer.files?.[0];
     if (file) {
-      void uploadAudio(file, target);
+      void uploadReferenceTrack(file, target);
     }
   };
 
@@ -502,6 +549,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     e.preventDefault();
   };
 
+  const handleWorkspaceDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    if (e.dataTransfer.files?.length) {
+      handleDrop(e, audioTab);
+    }
+  };
+
+  const handleWorkspaceDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    if (e.dataTransfer.types.includes('Files')) {
+      e.preventDefault();
+    }
+  };
+
   const handleGenerate = () => {
     // Bulk generation: loop bulkCount times
     for (let i = 0; i < bulkCount; i++) {
@@ -582,7 +641,27 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   };
 
   return (
-    <div className="flex flex-col h-full bg-zinc-50 dark:bg-suno-panel w-full overflow-y-auto custom-scrollbar transition-colors duration-300">
+    <div
+      className="relative flex flex-col h-full bg-zinc-50 dark:bg-suno-panel w-full overflow-y-auto custom-scrollbar transition-colors duration-300"
+      onDrop={handleWorkspaceDrop}
+      onDragOver={handleWorkspaceDragOver}
+    >
+      {isDraggingFile && (
+        <div className="absolute inset-0 z-[90] pointer-events-none">
+          <div className="absolute inset-0 bg-white/70 dark:bg-black/50 backdrop-blur-sm" />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/90 px-6 py-5 shadow-xl">
+              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 text-white flex items-center justify-center shadow-lg">
+                <Upload size={22} />
+              </div>
+              <div className="text-sm font-semibold text-zinc-900 dark:text-white">Drop to upload</div>
+              <div className="text-[11px] text-zinc-500 dark:text-zinc-400">
+                Uploading as {audioTab === 'reference' ? 'Reference' : 'Cover'}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="p-4 pt-14 md:pt-4 space-y-5">
         <input
           ref={referenceInputRef}
@@ -971,12 +1050,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                     {instrumental ? 'Instrumental' : 'Vocal'}
                   </button>
                   <button
-                    className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormatting ? 'text-pink-500 animate-pulse' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                    className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormatting ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
                     title="AI Format - Enhance style & auto-fill parameters"
-                    onClick={handleFormat}
+                    onClick={() => handleFormat('lyrics')}
                     disabled={isFormatting || !style.trim()}
                   >
-                    <Sparkles size={14} />
+                    {isFormatting ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
                   </button>
                   <button
                     className="p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded text-zinc-500 hover:text-black dark:hover:text-white transition-colors"
@@ -1011,12 +1090,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">Genre, mood, instruments, vibe</p>
                 </div>
                 <button
-                  className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormatting ? 'text-pink-500 animate-pulse' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                  className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormatting ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
                   title="AI Format - Enhance style & auto-fill parameters"
-                  onClick={handleFormat}
+                  onClick={() => handleFormat('style')}
                   disabled={isFormatting || !style.trim()}
                 >
-                  <Sparkles size={14} />
+                  {isFormatting ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
                 </button>
               </div>
               <textarea
@@ -1708,7 +1787,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                 onClick={() => {
                   const input = document.createElement('input');
                   input.type = 'file';
-                  input.accept = '.mp3,.wav,.flac,audio/*';
+                  input.accept = '.mp3,.wav,.flac,.m4a,.mp4,audio/*';
                   input.onchange = (e) => {
                     const file = (e.target as HTMLInputElement).files?.[0];
                     if (file) void uploadReferenceTrack(file);
@@ -1727,7 +1806,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   <>
                     <Upload size={16} />
                     Upload audio
-                    <span className="text-xs text-zinc-400 ml-1">MP3, WAV, FLAC</span>
+                    <span className="text-xs text-zinc-400 ml-1">MP3, WAV, FLAC, M4A, MP4</span>
                   </>
                 )}
               </button>

components/LibraryView.tsx

@@ -1,26 +1,70 @@
 import React, { useState } from 'react';
 import { Song, Playlist } from '../types';
-import { Heart, Plus, Music, Play } from 'lucide-react';
+import { Heart, Plus, Music, Play, MoreHorizontal, Trash2 } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { SongDropdownMenu } from './SongDropdownMenu';
+import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
 
 interface LibraryViewProps {
+  allSongs: Song[];
   likedSongs: Song[];
   playlists: Playlist[];
+  referenceTracks: ReferenceTrack[];
   onPlaySong: (song: Song, list?: Song[]) => void;
   onCreatePlaylist: () => void;
   onSelectPlaylist: (playlist: Playlist) => void;
+  onAddToPlaylist: (song: Song) => void;
+  onOpenVideo?: (song: Song) => void;
+  onReusePrompt?: (song: Song) => void;
+  onDeleteSong?: (song: Song) => void;
+  onDeleteReferenceTrack?: (trackId: string) => void;
+}
+
+interface ReferenceTrack {
+    id: string;
+    filename: string;
+    storage_key: string;
+    duration: number | null;
+    file_size_bytes: number | null;
+    tags: string[] | null;
+    created_at: string;
+    audio_url: string;
 }
 
 export const LibraryView: React.FC<LibraryViewProps> = ({ 
+    allSongs,
     likedSongs, 
     playlists, 
+    referenceTracks,
     onPlaySong, 
     onCreatePlaylist,
-    onSelectPlaylist 
+    onSelectPlaylist,
+    onAddToPlaylist,
+    onOpenVideo,
+    onReusePrompt,
+    onDeleteSong,
+    onDeleteReferenceTrack,
 }) => {
-    const [activeTab, setActiveTab] = useState<'playlists' | 'liked'>('liked');
+    const { user } = useAuth();
+    const [activeTab, setActiveTab] = useState<'all' | 'playlists' | 'liked' | 'uploads'>('all');
+    const [shareModalOpen, setShareModalOpen] = useState(false);
+    const [shareSong, setShareSong] = useState<Song | null>(null);
+
+    const formatBytes = (bytes?: number | null) => {
+        if (!bytes || bytes <= 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unit = 0;
+        while (size >= 1024 && unit < units.length - 1) {
+            size /= 1024;
+            unit += 1;
+        }
+        return `${size.toFixed(size >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
+    };
 
     return (
+        <>
         <div className="flex-1 bg-white dark:bg-black overflow-y-auto custom-scrollbar p-6 lg:p-10 pb-32 transition-colors duration-300">
              <div className="flex items-center justify-between mb-8">
                 <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Your Library</h1>
@@ -35,6 +79,13 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
 
              {/* Tabs */}
              <div className="flex items-center gap-4 mb-8 border-b border-zinc-200 dark:border-white/10 pb-1">
+                 <button 
+                    onClick={() => setActiveTab('all')}
+                    className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'all' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
+                 >
+                    All Songs
+                    {activeTab === 'all' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
+                 </button>
                  <button 
                     onClick={() => setActiveTab('liked')}
                     className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'liked' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
@@ -49,10 +100,68 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                     Playlists
                     {activeTab === 'playlists' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
+                 <button 
+                    onClick={() => setActiveTab('uploads')}
+                    className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'uploads' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
+                 >
+                    Uploads
+                    {activeTab === 'uploads' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
+                 </button>
              </div>
 
              {/* Content */}
-             {activeTab === 'liked' ? (
+             {activeTab === 'all' && (
+                 <div className="space-y-1">
+                    {allSongs.length === 0 ? (
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">No songs yet.</div>
+                    ) : (
+                        allSongs.map((song, idx) => (
+                            <div key={song.id} className="group flex items-center gap-4 p-2 rounded hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors" onClick={() => onPlaySong(song, allSongs)}>
+                                <span className="text-zinc-400 dark:text-zinc-500 w-6 text-center group-hover:hidden">{idx + 1}</span>
+                                <span className="text-zinc-900 dark:text-white w-6 text-center hidden group-hover:block"><Play size={14} fill="currentColor" /></span>
+                                
+                                {song.coverUrl ? (
+                                    <img src={song.coverUrl} className="w-10 h-10 rounded object-cover shadow-sm" alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
+                                ) : (
+                                    <AlbumCover seed={song.id || song.title} size="sm" className="w-10 h-10" />
+                                )}
+                                
+                                <div className="flex-1 min-w-0">
+                                    <div className="text-zinc-900 dark:text-white font-medium truncate">{song.title}</div>
+                                    <div className="text-zinc-500 dark:text-zinc-400 text-xs">{song.style}</div>
+                                </div>
+                                
+                                <div className="text-zinc-500 dark:text-zinc-400 text-sm font-mono">{song.duration}</div>
+                                <div className="relative ml-2">
+                                    <button
+                                        className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            setShareSong(prev => prev?.id === song.id ? null : song);
+                                        }}
+                                    >
+                                        <MoreHorizontal size={16} />
+                                    </button>
+                                    <SongDropdownMenu
+                                        song={song}
+                                        isOpen={shareSong?.id === song.id}
+                                        onClose={() => setShareSong(null)}
+                                        isOwner={user ? song.userId === user.id : false}
+                                        onCreateVideo={() => onOpenVideo?.(song)}
+                                        onReusePrompt={() => onReusePrompt?.(song)}
+                                        onAddToPlaylist={() => onAddToPlaylist(song)}
+                                        onDelete={() => onDeleteSong?.(song)}
+                                        onShare={() => {
+                                            setShareModalOpen(true);
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        ))
+                    )}
+                 </div>
+             )}
+             {activeTab === 'liked' && (
                  <div>
                     <div className="bg-gradient-to-b from-indigo-500/10 to-zinc-50 dark:from-indigo-800/50 dark:to-zinc-900/50 p-6 rounded-xl flex items-end gap-6 mb-8 cursor-pointer hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors group border border-zinc-200 dark:border-white/5" onClick={() => likedSongs.length > 0 && onPlaySong(likedSongs[0], likedSongs)}>
                          <div className="w-40 h-40 bg-gradient-to-br from-indigo-500 to-purple-400 rounded shadow-2xl flex items-center justify-center">
@@ -91,11 +200,36 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                                 
                                 <div className="text-zinc-500 dark:text-zinc-400 text-sm font-mono">{song.duration}</div>
                                 <div className="text-green-500"><Heart fill="#22c55e" size={16} /></div>
+                                <div className="relative ml-2">
+                                    <button
+                                        className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            setShareSong(prev => prev?.id === song.id ? null : song);
+                                        }}
+                                    >
+                                        <MoreHorizontal size={16} />
+                                    </button>
+                                    <SongDropdownMenu
+                                        song={song}
+                                        isOpen={shareSong?.id === song.id}
+                                        onClose={() => setShareSong(null)}
+                                        isOwner={user ? song.userId === user.id : false}
+                                        onCreateVideo={() => onOpenVideo?.(song)}
+                                        onReusePrompt={() => onReusePrompt?.(song)}
+                                        onAddToPlaylist={() => onAddToPlaylist(song)}
+                                        onDelete={() => onDeleteSong?.(song)}
+                                        onShare={() => {
+                                            setShareModalOpen(true);
+                                        }}
+                                    />
+                                </div>
                             </div>
                         ))}
                     </div>
                  </div>
-             ) : (
+             )}
+             {activeTab === 'playlists' && (
                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
                      {playlists.map((playlist) => (
                          <div key={playlist.id} className="bg-white dark:bg-zinc-900/40 p-4 rounded-lg border border-zinc-200 dark:border-white/5 hover:border-zinc-300 dark:hover:border-white/10 hover:shadow-lg dark:hover:bg-zinc-900 transition-all group cursor-pointer" onClick={() => onSelectPlaylist(playlist)}>
@@ -112,6 +246,42 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                      ))}
                  </div>
              )}
+             {activeTab === 'uploads' && (
+                 <div className="space-y-2">
+                    {referenceTracks.length === 0 ? (
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">No uploads yet.</div>
+                    ) : (
+                        referenceTracks.map((track) => (
+                            <div key={track.id} className="flex items-center gap-4 p-3 rounded-lg border border-zinc-200 dark:border-white/5 bg-white dark:bg-zinc-900/40">
+                                <div className="w-10 h-10 rounded bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
+                                    <Music size={18} className="text-zinc-500 dark:text-zinc-400" />
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <div className="text-sm font-medium text-zinc-900 dark:text-white truncate">{track.filename}</div>
+                                    <div className="text-xs text-zinc-500 dark:text-zinc-400">
+                                        {formatBytes(track.file_size_bytes)} • {new Date(track.created_at).toLocaleDateString()}
+                                    </div>
+                                </div>
+                                <button
+                                    className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-500 hover:text-red-600 transition-colors"
+                                    onClick={() => onDeleteReferenceTrack?.(track.id)}
+                                    title="Delete upload"
+                                >
+                                    <Trash2 size={16} />
+                                </button>
+                            </div>
+                        ))
+                    )}
+                 </div>
+             )}
         </div>
+        {shareSong && (
+            <ShareModal
+                isOpen={shareModalOpen}
+                onClose={() => { setShareModalOpen(false); setShareSong(null); }}
+                song={shareSong}
+            />
+        )}
+        </>
     );
 };