feat: add dropdown menu for track links in MusicPlayer component

src/components/MusicPlayer.tsx

@@ -2,6 +2,12 @@ import { useRef } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { useMusicPlayer } from '@/contexts/MusicPlayerContext'
 import { 
   Play, 
@@ -18,7 +24,10 @@ import {
   Maximize2,
   Minimize2,
   Minus,
-  ArrowRightToLine
+  ArrowRightToLine,
+  ExternalLink,
+  Download,
+  Globe
 } from 'lucide-react'
 import { formatDuration } from '@/lib/format-duration'
 
@@ -154,9 +163,39 @@ export function MusicPlayer() {
         <div className="p-4 space-y-3">
           {/* Track info */}
           <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              {(currentTrack?.file_url || currentTrack?.service_url) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 shrink-0"
+                      title="Open track links"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {currentTrack?.file_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
+                        <Download className="h-3 w-3" />
+                        Open File
+                      </DropdownMenuItem>
+                    )}
+                    {currentTrack?.service_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.service_url, '_blank')}>
+                        <Globe className="h-3 w-3" />
+                        Open Service
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
               <h3 className="font-medium text-sm leading-tight line-clamp-1">
                 {currentTrack?.title || 'No track selected'}
               </h3>
+            </div>
             {currentTrack?.artist && (
               <p className="text-xs text-muted-foreground line-clamp-1">
                 {currentTrack.artist}
@@ -307,7 +346,37 @@ export function MusicPlayer() {
 
           {/* Track info */}
           <div className="text-center mb-6">
-            <h1 className="text-2xl font-bold mb-2">{currentTrack?.title || 'No track selected'}</h1>
+            <div className="flex items-center justify-center gap-3 mb-2">
+              {(currentTrack?.file_url || currentTrack?.service_url) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 shrink-0"
+                      title="Open track links"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {currentTrack?.file_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
+                        <Download className="h-4 w-4" />
+                        Open File
+                      </DropdownMenuItem>
+                    )}
+                    {currentTrack?.service_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.service_url, '_blank')}>
+                        <Globe className="h-4 w-4" />
+                        Open Service
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              <h1 className="text-2xl font-bold">{currentTrack?.title || 'No track selected'}</h1>
+            </div>
             {currentTrack?.artist && (
               <p className="text-lg text-muted-foreground">{currentTrack.artist}</p>
             )}