fix: adjust gap spacing in SoundboardPage layout for improved responsiveness

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'
 
@@ -57,6 +66,23 @@ export function MusicPlayer() {
     return null
   }
 
+  const openServiceUrlWithTimestamp = (serviceUrl: string) => {
+    let urlWithTimestamp = serviceUrl
+    const currentTimeInSeconds = Math.floor(currentTime / 1000)
+    const separator = serviceUrl.includes('?') ? '&' : '?'
+    
+    // Add timestamp parameter based on service type
+    if (serviceUrl.includes('youtube.com') || serviceUrl.includes('youtu.be')) {
+      // YouTube timestamp format: &t=123s or ?t=123s
+      urlWithTimestamp = `${serviceUrl}${separator}t=${currentTimeInSeconds}s`
+    } else {
+      // For other services, try common timestamp parameter
+      urlWithTimestamp = serviceUrl
+    }
+    
+    window.open(urlWithTimestamp, '_blank')
+  }
+
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newVolume = parseFloat(e.target.value)
     setVolume(newVolume)
@@ -154,9 +180,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={() => openServiceUrlWithTimestamp(currentTrack.service_url!)}>
+                        <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 +363,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={() => openServiceUrlWithTimestamp(currentTrack.service_url!)}>
+                        <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>
             )}

src/contexts/MusicPlayerContext.tsx

@@ -8,7 +8,8 @@ export interface Track {
   artist?: string
   duration: number
   thumbnail?: string
-  url: string
+  file_url: string
+  service_url?: string
 }
 
 export type PlayMode = 'continuous' | 'loop-playlist' | 'loop-one' | 'random' | 'single'

src/pages/DashboardPage.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from 'react'
 import { useAuth } from '@/hooks/use-auth'
 import { useDashboardStats, type TimePeriod } from '@/hooks/use-dashboard-stats'
-import { formatSize, formatSizeObject } from '@/lib/format-size'
+import { formatSizeObject } from '@/lib/format-size'
 import NumberFlow from '@number-flow/react'
+import { Volume2, Music, List, HardDrive, Users } from 'lucide-react'
+import { useTheme } from '@/hooks/use-theme'
 
 const PERIOD_OPTIONS = [
   { value: 'today' as TimePeriod, label: 'Today' },
@@ -19,11 +21,110 @@ const LIMIT_OPTIONS = [
   { value: 50, label: 'Top 50' },
 ]
 
+// Theme-aware color schemes
+const lightModeColors = {
+  sounds: {
+    gradient: 'from-blue-300/10 to-blue-600/20',
+    border: 'border-blue-200/50',
+    iconBg: 'from-blue-500 to-blue-600',
+    textGradient: 'from-blue-600 to-blue-700',
+    text: 'text-blue-600',
+    textMuted: 'text-blue-600/70',
+    itemBg: 'from-blue-50/50 to-indigo-50/50',
+    itemBorder: 'border-blue-100/50',
+    itemHover: 'hover:from-blue-50 hover:to-indigo-50',
+  },
+  tracks: {
+    gradient: 'from-green-500/10 to-green-600/20',
+    border: 'border-green-200/50',
+    iconBg: 'from-green-500 to-green-600',
+    textGradient: 'from-green-600 to-green-700',
+    text: 'text-green-600',
+    textMuted: 'text-green-500/70',
+    itemBg: 'from-green-50/50 to-emerald-50/50',
+    itemBorder: 'border-green-100/50',
+    itemHover: 'hover:from-green-50 hover:to-emerald-50',
+  },
+  playlists: {
+    gradient: 'from-purple-500/10 to-purple-600/20',
+    border: 'border-purple-200/50',
+    iconBg: 'from-purple-500 to-purple-600',
+    textGradient: 'from-purple-600 to-purple-700',
+    text: 'text-purple-600',
+    textMuted: 'text-purple-600/70',
+    itemBg: 'from-purple-50/50 to-pink-50/50',
+    itemBorder: 'border-purple-100/50',
+    itemHover: 'hover:from-purple-50 hover:to-pink-50',
+  },
+  storage: {
+    gradient: 'from-orange-500/10 to-orange-600/20',
+    border: 'border-orange-200/50',
+    iconBg: 'from-orange-500 to-orange-600',
+    textGradient: 'from-orange-600 to-orange-700',
+    text: 'text-orange-600',
+    textMuted: 'text-orange-600/70',
+    itemBg: 'from-orange-50/50 to-red-50/50',
+    itemBorder: 'border-orange-100/50',
+    itemHover: 'hover:from-orange-50 hover:to-red-50',
+  },
+}
+
+const darkModeColors = {
+  sounds: {
+    gradient: 'from-blue-800/20 to-blue-900/30',
+    border: 'border-blue-700/50',
+    iconBg: 'from-blue-600 to-blue-700',
+    textGradient: 'from-blue-400 to-blue-300',
+    text: 'text-blue-400',
+    textMuted: 'text-blue-400/70',
+    itemBg: 'from-blue-900/20 to-indigo-900/20',
+    itemBorder: 'border-blue-700/30',
+    itemHover: 'hover:from-blue-900/30 hover:to-indigo-900/30',
+  },
+  tracks: {
+    gradient: 'from-green-800/20 to-green-900/30',
+    border: 'border-green-700/50',
+    iconBg: 'from-green-600 to-green-700',
+    textGradient: 'from-green-400 to-green-300',
+    text: 'text-green-400',
+    textMuted: 'text-green-400/70',
+    itemBg: 'from-green-900/20 to-emerald-900/20',
+    itemBorder: 'border-green-700/30',
+    itemHover: 'hover:from-green-900/30 hover:to-emerald-900/30',
+  },
+  playlists: {
+    gradient: 'from-purple-800/20 to-purple-900/30',
+    border: 'border-purple-700/50',
+    iconBg: 'from-purple-600 to-purple-700',
+    textGradient: 'from-purple-400 to-purple-300',
+    text: 'text-purple-400',
+    textMuted: 'text-purple-400/70',
+    itemBg: 'from-purple-900/20 to-pink-900/20',
+    itemBorder: 'border-purple-700/30',
+    itemHover: 'hover:from-purple-900/30 hover:to-pink-900/30',
+  },
+  storage: {
+    gradient: 'from-orange-800/20 to-orange-900/30',
+    border: 'border-orange-700/50',
+    iconBg: 'from-orange-600 to-orange-700',
+    textGradient: 'from-orange-400 to-orange-300',
+    text: 'text-orange-400',
+    textMuted: 'text-orange-400/70',
+    itemBg: 'from-orange-900/20 to-red-900/20',
+    itemBorder: 'border-orange-700/30',
+    itemHover: 'hover:from-orange-900/30 hover:to-red-900/30',
+  },
+}
+
 export function DashboardPage() {
   const { user } = useAuth()
   const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>('today')
   const [selectedLimit, setSelectedLimit] = useState<number>(5)
   const { stats, topSounds, topTracks, topUsers, loading, error, refresh } = useDashboardStats(selectedPeriod, selectedLimit)
+  const { theme } = useTheme()
+
+  // Theme-aware color selection
+  const colors = theme === 'dark' ? darkModeColors : lightModeColors
 
   // Auto-refresh every 10 seconds
   useEffect(() => {
@@ -51,42 +152,54 @@ export function DashboardPage() {
         <>
           {/* Statistics Cards */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <div className="bg-card border rounded-lg p-6">
+            <div className={`bg-gradient-to-br ${colors.sounds.gradient} border ${colors.sounds.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <Volume2 className={`h-8 w-8 ${colors.sounds.text}`} />
+              </div>
               <div className="text-center">
-                <div className="text-3xl font-bold text-primary mb-2">
+                <div className={`text-3xl font-bold ${colors.sounds.text} mb-2`}>
                   <NumberFlow value={stats.soundboard_sounds} />
                 </div>
-                <div className="text-sm text-muted-foreground">
+                <div className={`text-sm ${colors.sounds.textMuted} font-medium`}>
                   Sounds
                 </div>
               </div>
             </div>
 
-            <div className="bg-card border rounded-lg p-6">
+            <div className={`bg-gradient-to-br ${colors.tracks.gradient} border ${colors.tracks.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <Music className={`h-8 w-8 ${colors.tracks.text}`} />
+              </div>
               <div className="text-center">
-                <div className="text-3xl font-bold text-primary mb-2">
+                <div className={`text-3xl font-bold ${colors.tracks.text} mb-2`}>
                   <NumberFlow value={stats.tracks} />
                 </div>
-                <div className="text-sm text-muted-foreground">
+                <div className={`text-sm ${colors.tracks.textMuted} font-medium`}>
                   Tracks
                 </div>
               </div>
             </div>
 
-            <div className="bg-card border rounded-lg p-6">
+            <div className={`bg-gradient-to-br ${colors.playlists.gradient} border ${colors.playlists.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <List className={`h-8 w-8 ${colors.playlists.text}`} />
+              </div>
               <div className="text-center">
-                <div className="text-3xl font-bold text-primary mb-2">
+                <div className={`text-3xl font-bold ${colors.playlists.text} mb-2`}>
                   <NumberFlow value={stats.playlists} />
                 </div>
-                <div className="text-sm text-muted-foreground">
+                <div className={`text-sm ${colors.playlists.textMuted} font-medium`}>
                   Playlists
                 </div>
               </div>
             </div>
 
-            <div className="bg-card border rounded-lg p-6">
+            <div className={`bg-gradient-to-br ${colors.storage.gradient} border ${colors.storage.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <HardDrive className={`h-8 w-8 ${colors.storage.text}`} />
+              </div>
               <div className="text-center">
-                <div className="text-3xl font-bold text-primary mb-2">
+                <div className={`text-3xl font-bold ${colors.storage.text} mb-2`}>
                   {(() => {
                     const sizeObj = formatSizeObject(stats.total_size, true)
                     return (
@@ -96,7 +209,7 @@ export function DashboardPage() {
                     )
                   })()}
                 </div>
-                <div className="text-sm text-muted-foreground">
+                <div className={`text-sm ${colors.storage.textMuted} font-medium`}>
                   Total Size
                 </div>
               </div>
@@ -133,29 +246,41 @@ export function DashboardPage() {
           <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
             {/* Top Sounds Section */}
             <div className="bg-card border rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-6">Played Sounds</h2>
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.sounds.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Volume2 className="h-5 w-5 text-white" />
+                </div>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.sounds.textGradient} bg-clip-text text-transparent`}>
+                  Sounds
+                </h2>
+              </div>
 
               {topSounds && topSounds.sounds.length > 0 ? (
                 <div className="space-y-3">
                   {topSounds.sounds.map((sound, index) => (
                     <div
                       key={sound.id}
-                      className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.sounds.itemBg} border ${colors.sounds.itemBorder} rounded-lg ${colors.sounds.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-blue-400 to-blue-500'
+                        }`}>
                           {index + 1}
                         </div>
-                        <div>
-                          <div className="font-medium">{sound.name}</div>
-                          <div className="text-sm text-muted-foreground">
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{sound.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
                             {sound.filename}
                           </div>
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold"><NumberFlow value={sound.play_count} /></div>
-                        <div className="text-sm text-muted-foreground">
+                        <div className={`font-semibold ${colors.sounds.text}`}><NumberFlow value={sound.play_count} /></div>
+                        <div className={`text-sm ${colors.sounds.textMuted}`}>
                           {sound.play_count === 1 ? 'play' : 'plays'}
                         </div>
                       </div>
@@ -171,29 +296,41 @@ export function DashboardPage() {
 
             {/* Top Tracks Section */}
             <div className="bg-card border rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-6">Played Tracks</h2>
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.tracks.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Music className="h-5 w-5 text-white" />
+                </div>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.tracks.textGradient} bg-clip-text text-transparent`}>
+                  Tracks
+                </h2>
+              </div>
 
               {topTracks && topTracks.tracks.length > 0 ? (
                 <div className="space-y-3">
                   {topTracks.tracks.map((track, index) => (
                     <div
                       key={track.id}
-                      className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.tracks.itemBg} border ${colors.tracks.itemBorder} rounded-lg ${colors.tracks.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-green-400 to-green-500'
+                        }`}>
                           {index + 1}
                         </div>
-                        <div>
-                          <div className="font-medium">{track.name}</div>
-                          <div className="text-sm text-muted-foreground">
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{track.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
                             {track.filename}
                           </div>
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold"><NumberFlow value={track.play_count} /></div>
-                        <div className="text-sm text-muted-foreground">
+                        <div className={`font-semibold ${colors.tracks.text}`}><NumberFlow value={track.play_count} /></div>
+                        <div className={`text-sm ${colors.tracks.textMuted}`}>
                           {track.play_count === 1 ? 'play' : 'plays'}
                         </div>
                       </div>
@@ -209,38 +346,50 @@ export function DashboardPage() {
 
             {/* Top Users Section */}
             <div className="bg-card border rounded-lg p-6">
-              <h2 className="text-xl font-semibold mb-6">Users</h2>
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.playlists.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Users className="h-5 w-5 text-white" />
+                </div>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.playlists.textGradient} bg-clip-text text-transparent`}>
+                  Users
+                </h2>
+              </div>
 
               {topUsers && topUsers.users.length > 0 ? (
                 <div className="space-y-3">
                   {topUsers.users.map((user, index) => (
                     <div
                       key={user.id}
-                      className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.playlists.itemBg} border ${colors.playlists.itemBorder} rounded-lg ${colors.playlists.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-purple-400 to-purple-500'
+                        }`}>
                           {index + 1}
                         </div>
-                        <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-2 min-w-0 flex-1">
                           {user.picture && (
                             <img
                               src={user.picture}
                               alt={user.name}
-                              className="w-8 h-8 rounded-full"
+                              className="w-8 h-8 rounded-full border-2 border-white shadow-sm shrink-0"
                             />
                           )}
-                          <div>
-                            <div className="font-medium">{user.name}</div>
-                            <div className="text-sm text-muted-foreground">
+                          <div className="min-w-0 flex-1">
+                            <div className="font-medium truncate">{user.name}</div>
+                            <div className="text-sm text-muted-foreground truncate">
                               {user.email}
                             </div>
                           </div>
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold"><NumberFlow value={user.play_count} /></div>
-                        <div className="text-sm text-muted-foreground">
+                        <div className={`font-semibold ${colors.playlists.text}`}><NumberFlow value={user.play_count} /></div>
+                        <div className={`text-sm ${colors.playlists.textMuted}`}>
                           {user.play_count === 1 ? 'play' : 'plays'}
                         </div>
                       </div>

src/pages/SoundboardPage.tsx

@@ -269,7 +269,7 @@ export function SoundboardPage() {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
         {filteredSounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}