From 477b172c6cbfd41508bf16f18ef04b09e5b0e81e Mon Sep 17 00:00:00 2001
From: angel <angel@sillyangel.dev>
Date: Sun, 25 Jan 2026 02:57:10 +0000
Subject: [PATCH] feat: add sidebar customization to start screen with default
 items (home,queue,artists,albums,playlists,favorites,settings) and
 playlists-only shortcuts

---
 .env.local                      |  2 +-
 app/components/start-screen.tsx | 46 ++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/.env.local b/.env.local
index d0e6a86..919cf84 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=b59deee
+NEXT_PUBLIC_COMMIT_SHA=ed41ad6
diff --git a/app/components/start-screen.tsx b/app/components/start-screen.tsx
index 979751b..c7fb8c5 100644
--- a/app/components/start-screen.tsx
+++ b/app/components/start-screen.tsx
@@ -18,6 +18,7 @@ import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
 import { useTheme } from '@/app/components/ThemeProvider';
 import { useToast } from '@/hooks/use-toast';
 import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaPalette, FaLastfm } from 'react-icons/fa';
+import type { SidebarItem, SidebarLayoutSettings } from '@/hooks/use-sidebar-layout';
 
 export function LoginForm({
   className,
@@ -46,7 +47,8 @@ export function LoginForm({
     return true;
   });
 
-  // New settings - removed sidebar and standalone lastfm options
+  // Sidebar settings with new defaults
+  const [sidebarShortcuts, setSidebarShortcuts] = useState<'albums' | 'playlists' | 'both'>('playlists');
 
   // Check if Navidrome is configured via environment variables
   const hasEnvConfig = React.useMemo(() => {
@@ -180,6 +182,30 @@ export function LoginForm({
     // Save all settings
     localStorage.setItem('lastfm-scrobbling-enabled', scrobblingEnabled.toString());
     
+    // Save sidebar settings with new defaults
+    const defaultSidebarItems: SidebarItem[] = [
+      { id: 'home', label: 'Home', visible: true, icon: 'home', href: '/' },
+      { id: 'queue', label: 'Queue', visible: true, icon: 'queue', href: '/queue' },
+      { id: 'artists', label: 'Artists', visible: true, icon: 'artists', href: '/library/artists' },
+      { id: 'albums', label: 'Albums', visible: true, icon: 'albums', href: '/library/albums' },
+      { id: 'playlists', label: 'Playlists', visible: true, icon: 'playlists', href: '/library/playlists' },
+      { id: 'favorites', label: 'Favorites', visible: true, icon: 'favorites', href: '/favorites' },
+      { id: 'settings', label: 'Settings', visible: true, icon: 'settings', href: '/settings' },
+      // Hidden by default
+      { id: 'search', label: 'Search', visible: false, icon: 'search', href: '/search' },
+      { id: 'radio', label: 'Radio', visible: false, icon: 'radio', href: '/radio' },
+      { id: 'browse', label: 'Browse', visible: false, icon: 'browse', href: '/browse' },
+      { id: 'songs', label: 'Songs', visible: false, icon: 'songs', href: '/library/songs' },
+      { id: 'history', label: 'History', visible: false, icon: 'history', href: '/history' },
+    ];
+
+    const sidebarSettings: SidebarLayoutSettings = {
+      items: defaultSidebarItems,
+      shortcuts: sidebarShortcuts,
+      showIcons: true,
+    };
+    localStorage.setItem('sidebar-layout-settings', JSON.stringify(sidebarSettings));
+    
     // Mark onboarding as complete
     localStorage.setItem('onboarding-completed', '1.1.0');
     
@@ -302,6 +328,24 @@ export function LoginForm({
                 </p>
               </div>
 
+              {/* Sidebar Shortcuts */}
+              <div className="grid gap-3">
+                <Label>Sidebar Shortcuts</Label>
+                <Select value={sidebarShortcuts} onValueChange={(value: 'albums' | 'playlists' | 'both') => setSidebarShortcuts(value)}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="playlists">Playlists Only</SelectItem>
+                    <SelectItem value="albums">Albums Only</SelectItem>
+                    <SelectItem value="both">Both</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-sm text-muted-foreground">
+                  Choose what shortcuts appear in your sidebar
+                </p>
+              </div>
+
               <div className="flex flex-col gap-3">
                 <Button onClick={handleFinishSetup} className="w-full">
                   <FaCheck className="w-4 h-4 mr-2" />