+
+ {/* Progress bar at the top */}
+
+
- {/* Album Art */}
-
-
-
+ {/* Album Art - Animated transition */}
+
+
+
+
+
{/* Track Info */}
@@ -201,13 +368,13 @@ export const DraggableMiniPlayer: React.FC = ({ onExpa
- {/* Controls */}
{/* Keyboard shortcut hint */}
-
- Arrow keys to move • Hold Shift for larger steps • Esc to expand
-
+
+ Double-click to expand • Arrow keys to move
+
-
+ {/* Controls */}
+
-
+
+
+
+ {/* Volume Slider */}
+ {showVolumeSlider && (
+
e.stopPropagation()}
+ >
+
+
+ )}
+
+
+ {/* Expand button in top-right corner */}
+
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 94eadf7..05b8908 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -16,8 +16,9 @@ import { SidebarCustomization } from '@/app/components/SidebarCustomization';
import { SettingsManagement } from '@/app/components/SettingsManagement';
import { CacheManagement } from '@/app/components/CacheManagement';
import { OfflineManagement } from '@/app/components/OfflineManagement';
-import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
-import { Settings, ExternalLink } from 'lucide-react';
+import { AutoTaggingSettings } from '@/app/components/AutoTaggingSettings';
+import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog, FaTags } from 'react-icons/fa';
+import { Settings, ExternalLink, Tag } from 'lucide-react';
import { Switch } from '@/components/ui/switch';
const SettingsPage = () => {
@@ -788,6 +789,11 @@ const SettingsPage = () => {
+ {/* Auto-Tagging Settings */}
+