feat: integrate dnd-kit for sidebar customization and reordering functionality

- Added dnd-kit dependencies to package.json and pnpm-lock.yaml.
- Implemented SidebarCustomization component using dnd-kit for drag-and-drop reordering of sidebar items.
- Created SortableItem component for individual sidebar items with visibility toggle.
- Enhanced SidebarCustomizer component with drag-and-drop support using react-beautiful-dnd.
- Updated sidebar-new component to include dynamic shortcuts for recently played albums and playlists.
- Improved user experience with import/export settings functionality and toast notifications.

app/settings/page.tsx

@@ -11,6 +11,7 @@ import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
 import { useToast } from '@/hooks/use-toast';
 import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
 import { useSidebarShortcuts, SidebarShortcutType } from '@/hooks/use-sidebar-shortcuts';
+import { SidebarCustomization } from '@/app/components/SidebarCustomization';
 import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
 import { Settings, ExternalLink } from 'lucide-react';
 
@@ -693,6 +694,9 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card>
 
+                {/* Sidebar Customization */}
+                <SidebarCustomization />
+
                 <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>