feat: implement settings management component with import/export functionality

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,
-    importSettings,
-    resetToDefaults,
+    applyChanges,
+    discardChanges,
   } = 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 */}
-        <div className="space-y-3 pt-4 border-t">
-          <Label>Settings Management</Label>
-          
-          <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
+        {/* Apply/Discard Changes */}
+        {hasUnsavedChanges() && (
+          <div className="space-y-3 pt-4 border-t">
+            <Label>Unsaved Changes</Label>
+            <div className="flex gap-2">
+              <Button onClick={applyChanges} variant="default">
+                Apply Changes
+              </Button>
+              <Button onClick={discardChanges} variant="outline">
+                Discard Changes
               </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>