feat: implement theme-aware color schemes for DashboardPage

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,17 +246,29 @@ 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`}>
+                  Played 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={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                          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>
@@ -154,8 +279,8 @@ export function DashboardPage() {
                         </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,17 +296,29 @@ 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`}>
+                  Played 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={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                          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>
@@ -192,8 +329,8 @@ export function DashboardPage() {
                         </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,17 +346,29 @@ 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`}>
+                  Top 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={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                          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">
@@ -227,7 +376,7 @@ export function DashboardPage() {
                             <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"
                             />
                           )}
                           <div>
@@ -239,8 +388,8 @@ export function DashboardPage() {
                         </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>