Fix player: clickable empty state, skip non-playable songs, spacebar shortcut

- Make bottom player empty state a clickable button that plays first available song
- Guard togglePlay to show toast when audioUrl is missing instead of silently failing
- playNext/playPrevious now skip songs without audioUrl or still generating
- repeatMode 'none' stops at queue boundaries instead of wrapping
- Add ShareModal to mobile fullscreen player (was missing, share silently failed)
- Add spacebar play/pause keyboard shortcut (skips when typing in inputs)
- Add onPlayFirst prop to Player component
- Add selectSongToPlay i18n key (en, zh, ja, ko)

components/Player.tsx

@@ -33,6 +33,7 @@ interface PlayerProps {
     onReusePrompt?: () => void;
     onAddToPlaylist?: () => void;
     onDelete?: () => void;
+    onPlayFirst?: () => void;
 }
 
 export const Player: React.FC<PlayerProps> = ({
@@ -59,7 +60,8 @@ export const Player: React.FC<PlayerProps> = ({
     onOpenVideo,
     onReusePrompt,
     onAddToPlaylist,
-    onDelete
+    onDelete,
+    onPlayFirst
 }) => {
     const { user } = useAuth();
     const { isMobile } = useResponsive();
@@ -100,12 +102,15 @@ export const Player: React.FC<PlayerProps> = ({
     if (!currentSong) {
         return (
             <div className="h-20 lg:h-24 bg-white dark:bg-black/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 flex items-center justify-center z-50 transition-colors duration-300 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] dark:shadow-none">
-                <div className="flex items-center gap-3 text-zinc-400 dark:text-zinc-600">
+                <button
+                    onClick={() => onPlayFirst?.()}
+                    className="flex items-center gap-3 text-zinc-400 dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 cursor-pointer transition-colors"
+                >
                     <div className="w-10 h-10 lg:w-12 lg:h-12 rounded bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center">
-                        <Play size={20} className="text-zinc-400 dark:text-zinc-600" />
+                        <Play size={20} />
                     </div>
-                    <span className="text-sm font-medium">Select a song to play</span>
-                </div>
+                    <span className="text-sm font-medium">{t('selectSongToPlay')}</span>
+                </button>
             </div>
         );
     }
@@ -321,6 +326,12 @@ export const Player: React.FC<PlayerProps> = ({
                             />
                         </div>
                     )}
+
+                    <ShareModal
+                        isOpen={shareModalOpen}
+                        onClose={() => setShareModalOpen(false)}
+                        song={currentSong}
+                    />
                 </div>
             );
         }