feat: implement settings management component with import/export functionality

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=3734f67
+NEXT_PUBLIC_COMMIT_SHA=da58c49

app/components/SettingsManagement.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { 
+  Download, 
+  Upload, 
+  RotateCcw,
+  Settings
+} from 'lucide-react';
+import { useSidebarLayout } from '@/hooks/use-sidebar-layout';
+
+export function SettingsManagement() {
+  const { exportSettings, importSettings, resetToDefaults } = useSidebarLayout();
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importing, setImporting] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const handleImportFile = async () => {
+    if (!importFile) return;
+    
+    setImporting(true);
+    setImportError(null);
+    
+    try {
+      await importSettings(importFile);
+      setImportFile(null);
+      // Reset file input
+      const fileInput = document.getElementById('settings-import') as HTMLInputElement;
+      if (fileInput) fileInput.value = '';
+    } catch (error) {
+      setImportError(error instanceof Error ? error.message : 'Failed to import settings');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Settings className="h-5 w-5" />
+          Settings Management
+        </CardTitle>
+        <CardDescription>
+          Export, import, or reset your application settings
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+          <Button onClick={exportSettings} variant="outline">
+            <Download className="h-4 w-4 mr-2" />
+            Export Settings
+          </Button>
+          
+          <div className="flex items-center gap-2">
+            <Input
+              id="settings-import"
+              type="file"
+              accept=".json"
+              onChange={(e) => setImportFile(e.target.files?.[0] || null)}
+              className="hidden"
+            />
+            <Button
+              variant="outline"
+              onClick={() => document.getElementById('settings-import')?.click()}
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              Select File
+            </Button>
+            
+            {importFile && (
+              <Button
+                onClick={handleImportFile}
+                disabled={importing}
+                variant="default"
+              >
+                {importing ? 'Importing...' : 'Import'}
+              </Button>
+            )}
+          </div>
+          
+          <Button onClick={resetToDefaults} variant="outline">
+            <RotateCcw className="h-4 w-4 mr-2" />
+            Reset to Default
+          </Button>
+        </div>
+        
+        {importFile && (
+          <div className="text-sm text-muted-foreground">
+            Selected: {importFile.name}
+          </div>
+        )}
+        
+        {importError && (
+          <div className="text-sm text-destructive">
+            Error: {importError}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

app/components/SidebarCustomization.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   DndContext,
   closestCenter,
@@ -25,14 +25,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Switch } from '@/components/ui/switch';
-import { Input } from '@/components/ui/input';
 import { 
   GripVertical, 
   Eye, 
   EyeOff, 
-  Download, 
-  Upload, 
-  RotateCcw,
   Search,
   Home,
   List,
@@ -130,19 +126,15 @@ function SortableItem({ item, onToggleVisibility, showIcons }: SortableItemProps
 export function SidebarCustomization() {
   const {
     settings,
+    hasUnsavedChanges,
     reorderItems,
     toggleItemVisibility,
     updateShortcuts,
     updateShowIcons,
-    exportSettings,
+    applyChanges,
-    importSettings,
+    discardChanges,
-    resetToDefaults,
   } = useSidebarLayout();
 
-  const [importFile, setImportFile] = useState<File | null>(null);
-  const [importing, setImporting] = useState(false);
-  const [importError, setImportError] = useState<string | null>(null);
-
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -158,24 +150,7 @@ export function SidebarCustomization() {
     }
   };
 
-  const handleImportFile = async () => {
+
-    if (!importFile) return;
-    
-    setImporting(true);
-    setImportError(null);
-    
-    try {
-      await importSettings(importFile);
-      setImportFile(null);
-      // Reset file input
-      const fileInput = document.getElementById('settings-import') as HTMLInputElement;
-      if (fileInput) fileInput.value = '';
-    } catch (error) {
-      setImportError(error instanceof Error ? error.message : 'Failed to import settings');
-    } finally {
-      setImporting(false);
-    }
-  };
 
   return (
     <Card>
@@ -249,61 +224,20 @@ export function SidebarCustomization() {
           </DndContext>
         </div>
 
-        {/* Settings Import/Export */}
+        {/* Apply/Discard Changes */}
-        <div className="space-y-3 pt-4 border-t">
+        {hasUnsavedChanges() && (
-          <Label>Settings Management</Label>
+          <div className="space-y-3 pt-4 border-t">
-          
+            <Label>Unsaved Changes</Label>
-          <div className="flex flex-wrap gap-2">
+            <div className="flex gap-2">
-            <Button onClick={exportSettings} variant="outline">
+              <Button onClick={applyChanges} variant="default">
-              <Download className="h-4 w-4 mr-2" />
+                Apply Changes
-              Export Settings
+              </Button>
-            </Button>
+              <Button onClick={discardChanges} variant="outline">
-            
+                Discard Changes
-            <div className="flex items-center gap-2">
-              <Input
-                id="settings-import"
-                type="file"
-                accept=".json"
-                onChange={(e) => setImportFile(e.target.files?.[0] || null)}
-                className="hidden"
-              />
-              <Button
-                variant="outline"
-                onClick={() => document.getElementById('settings-import')?.click()}
-              >
-                <Upload className="h-4 w-4 mr-2" />
-                Select File
               </Button>
-              
-              {importFile && (
-                <Button
-                  onClick={handleImportFile}
-                  disabled={importing}
-                  variant="default"
-                >
-                  {importing ? 'Importing...' : 'Import'}
-                </Button>
-              )}
             </div>
-            
-            <Button onClick={resetToDefaults} variant="outline">
-              <RotateCcw className="h-4 w-4 mr-2" />
-              Reset to Default
-            </Button>
           </div>
-          
+        )}
-          {importFile && (
-            <div className="text-sm text-muted-foreground">
-              Selected: {importFile.name}
-            </div>
-          )}
-          
-          {importError && (
-            <div className="text-sm text-destructive">
-              Error: {importError}
-            </div>
-          )}
-        </div>
       </CardContent>
     </Card>
   );

app/settings/page.tsx

@@ -12,6 +12,7 @@ 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 { SettingsManagement } from '@/app/components/SettingsManagement';
 import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
 import { Settings, ExternalLink } from 'lucide-react';
 
@@ -347,10 +348,11 @@ const SettingsPage = () => {
                         <p className="text-muted-foreground">Customize your music experience</p>
                     </div>
 
-                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                <div className="columns-1 lg:columns-2 xl:columns-3 gap-6 space-y-6"
+                     style={{ columnFill: 'balance' }}>
 
                 {!hasEnvConfig && (
-                    <Card className="mb-6">
+                    <Card className="mb-6 break-inside-avoid">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -439,7 +441,7 @@ const SettingsPage = () => {
                 )}
 
                 {hasEnvConfig && (
-                    <Card className="mb-6">
+                    <Card className="mb-6 break-inside-avoid">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -466,7 +468,7 @@ const SettingsPage = () => {
                     </Card>
                 )}
 
-                <Card className="mb-6">
+                <Card className="mb-6 break-inside-avoid">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaLastfm className="w-5 h-5" />
@@ -544,7 +546,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card> */}
 
-                <Card className="mb-6">
+                <Card className="mb-6 break-inside-avoid">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <Settings className="w-5 h-5" />
@@ -695,11 +697,16 @@ const SettingsPage = () => {
                 </Card>
 
                 {/* Sidebar Customization */}
-                <div className="lg:col-span-2 xl:col-span-3">
+                <div className="break-inside-avoid mb-6">
                   <SidebarCustomization />
                 </div>
 
-                <Card className="mb-6">
+                {/* Settings Management */}
+                <div className="break-inside-avoid mb-6">
+                  <SettingsManagement />
+                </div>
+
+                <Card className="mb-6 break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>
                         <CardDescription>
@@ -748,7 +755,7 @@ const SettingsPage = () => {
                 </Card>
 
                 {/* Theme Preview */}
-                <Card className="mb-6">
+                <Card className="mb-6 break-inside-avoid">
                     <CardHeader>
                         <CardTitle>Preview</CardTitle>
                         <CardDescription>

hooks/use-sidebar-layout.ts

@@ -53,6 +53,7 @@ const defaultSettings: SidebarLayoutSettings = {
 
 export function useSidebarLayout() {
   const [settings, setSettings] = useState<SidebarLayoutSettings>(defaultSettings);
+  const [pendingSettings, setPendingSettings] = useState<SidebarLayoutSettings | null>(null);
 
   // Load settings from localStorage on mount
   useEffect(() => {
@@ -66,53 +67,86 @@ export function useSidebarLayout() {
           return savedItem ? { ...defaultItem, ...savedItem } : defaultItem;
         });
         
-        setSettings({
+        const loadedSettings = {
           items: mergedItems,
           shortcuts: parsed.shortcuts || defaultSettings.shortcuts,
           showIcons: parsed.showIcons !== undefined ? parsed.showIcons : defaultSettings.showIcons,
-        });
+        };
+        setSettings(loadedSettings);
       } catch (error) {
         console.error('Failed to parse sidebar layout settings:', error);
       }
     }
   }, []);
 
-  // Save settings to localStorage whenever they change
+  const saveSettings = (newSettings: SidebarLayoutSettings) => {
-  useEffect(() => {
+    setSettings(newSettings);
-    localStorage.setItem('sidebar-layout-settings', JSON.stringify(settings));
+    setPendingSettings(null);
-  }, [settings]);
+    localStorage.setItem('sidebar-layout-settings', JSON.stringify(newSettings));
-
-  const updateItemOrder = (newItems: SidebarItem[]) => {
-    setSettings(prev => ({ ...prev, items: newItems }));
   };
 
+  const updatePendingSettings = (newSettings: SidebarLayoutSettings) => {
+    setPendingSettings(newSettings);
+  };
+
+  const getCurrentSettings = () => pendingSettings || settings;
+
+  const hasUnsavedChanges = () => pendingSettings !== null;
+
   const reorderItems = (activeId: string, overId: string) => {
-    const activeIndex = settings.items.findIndex(item => item.id === activeId);
+    const currentSettings = getCurrentSettings();
-    const overIndex = settings.items.findIndex(item => item.id === overId);
+    const activeIndex = currentSettings.items.findIndex(item => item.id === activeId);
+    const overIndex = currentSettings.items.findIndex(item => item.id === overId);
 
     if (activeIndex !== -1 && overIndex !== -1) {
-      const newItems = [...settings.items];
+      const newItems = [...currentSettings.items];
       const [removed] = newItems.splice(activeIndex, 1);
       newItems.splice(overIndex, 0, removed);
-      setSettings(prev => ({ ...prev, items: newItems }));
+
+      const newSettings = { ...currentSettings, items: newItems };
+      updatePendingSettings(newSettings);
     }
   };
 
+  const updateItemOrder = (newItems: SidebarItem[]) => {
+    const currentSettings = getCurrentSettings();
+    const newSettings = { ...currentSettings, items: newItems };
+    updatePendingSettings(newSettings);
+  };
+
   const toggleItemVisibility = (itemId: SidebarItemType) => {
-    setSettings(prev => ({
+    const currentSettings = getCurrentSettings();
-      ...prev,
+    const newItems = currentSettings.items.map(item =>
-      items: prev.items.map(item =>
+      item.id === itemId ? { ...item, visible: !item.visible } : item
-        item.id === itemId ? { ...item, visible: !item.visible } : item
+    );
-      ),
+    const newSettings = { ...currentSettings, items: newItems };
-    }));
+    updatePendingSettings(newSettings);
   };
 
   const updateShortcuts = (shortcuts: 'albums' | 'playlists' | 'both') => {
-    setSettings(prev => ({ ...prev, shortcuts }));
+    const currentSettings = getCurrentSettings();
+    const newSettings = { ...currentSettings, shortcuts };
+    updatePendingSettings(newSettings);
   };
 
   const updateShowIcons = (showIcons: boolean) => {
-    setSettings(prev => ({ ...prev, showIcons }));
+    const currentSettings = getCurrentSettings();
+    const newSettings = { ...currentSettings, showIcons };
+    updatePendingSettings(newSettings);
+  };
+
+  const applyChanges = () => {
+    if (pendingSettings) {
+      saveSettings(pendingSettings);
+    }
+  };
+
+  const discardChanges = () => {
+    setPendingSettings(null);
+  };
+
+  const resetToDefaults = () => {
+    saveSettings(defaultSettings);
   };
 
   const exportSettings = () => {
@@ -179,17 +213,16 @@ export function useSidebarLayout() {
     });
   };
 
-  const resetToDefaults = () => {
-    setSettings(defaultSettings);
-  };
-
   return {
-    settings,
+    settings: getCurrentSettings(),
+    hasUnsavedChanges,
     updateItemOrder,
     reorderItems,
     toggleItemVisibility,
     updateShortcuts,
     updateShowIcons,
+    applyChanges,
+    discardChanges,
     exportSettings,
     importSettings,
     resetToDefaults,