feat: implement settings management component with import/export functionality

2025-07-10 19:26:32 +00:00
parent da58c49e6e
commit 98f5198a20
5 changed files with 196 additions and 117 deletions
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=3734f67
+NEXT_PUBLIC_COMMIT_SHA=da58c49
--- a/app/components/SettingsManagement.tsx
+++ b/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>
+  );
+}
--- a/app/components/SidebarCustomization.tsx
+++ b/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>
  );
--- a/app/settings/page.tsx
+++ b/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>
--- a/hooks/use-sidebar-layout.ts
+++ b/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
-  useEffect(() => {
-    localStorage.setItem('sidebar-layout-settings', JSON.stringify(settings));
-  }, [settings]);
-
-  const updateItemOrder = (newItems: SidebarItem[]) => {
-    setSettings(prev => ({ ...prev, items: newItems }));
+  const saveSettings = (newSettings: SidebarLayoutSettings) => {
+    setSettings(newSettings);
+    setPendingSettings(null);
+    localStorage.setItem('sidebar-layout-settings', JSON.stringify(newSettings));
  };

+  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 overIndex = settings.items.findIndex(item => item.id === overId);
+    const currentSettings = getCurrentSettings();
+    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 => ({
-      ...prev,
-      items: prev.items.map(item =>
-        item.id === itemId ? { ...item, visible: !item.visible } : item
-      ),
-    }));
+    const currentSettings = getCurrentSettings();
+    const newItems = currentSettings.items.map(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,