From 88c31c5082e8c3ba8e9e64906378ea68f8c8d1e2 Mon Sep 17 00:00:00 2001
From: angel <angel@sillyangel.dev>
Date: Sun, 25 Jan 2026 02:06:15 +0000
Subject: [PATCH] feat: add sidebar customization to start screen with default
 shortcuts

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

diff --git a/.env.local b/.env.local
index c96c342..f063de8 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=e5bd720
+NEXT_PUBLIC_COMMIT_SHA=4721c05
diff --git a/app/components/start-screen.tsx b/app/components/start-screen.tsx
index 4d4a143..00ff390 100644
--- a/app/components/start-screen.tsx
+++ b/app/components/start-screen.tsx
@@ -45,7 +45,21 @@ export function LoginForm({
     return true;
   });
 
-  // New settings - removed sidebar and standalone lastfm options
+  // Sidebar shortcuts setting - default to 'playlists'
+  const [sidebarShortcuts, setSidebarShortcuts] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('sidebar-layout-settings');
+      if (saved) {
+        try {
+          const parsed = JSON.parse(saved);
+          return parsed.shortcuts || 'playlists';
+        } catch (e) {
+          return 'playlists';
+        }
+      }
+    }
+    return 'playlists';
+  });
 
   // Check if Navidrome is configured via environment variables
   const hasEnvConfig = React.useMemo(() => {
@@ -175,6 +189,23 @@ export function LoginForm({
     // Save all settings
     localStorage.setItem('lastfm-scrobbling-enabled', scrobblingEnabled.toString());
     
+    // Save sidebar settings with default items
+    const defaultItems = [
+      {"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"}
+    ];
+    
+    localStorage.setItem('sidebar-layout-settings', JSON.stringify({
+      items: defaultItems,
+      shortcuts: sidebarShortcuts,
+      showIcons: true
+    }));
+    
     // Mark onboarding as complete
     localStorage.setItem('onboarding-completed', '1.1.0');
     
@@ -296,6 +327,28 @@ export function LoginForm({
                 </p>
               </div>
 
+              {/* Sidebar Shortcuts Selection */}
+              <div className="grid gap-3">
+                <Label htmlFor="sidebar-shortcuts">Sidebar Shortcuts</Label>
+                <Select value={sidebarShortcuts} onValueChange={setSidebarShortcuts}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="playlists">Playlists Only</SelectItem>
+                    <SelectItem value="both">Playlists + Artists</SelectItem>
+                    <SelectItem value="none">None</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-sm text-muted-foreground">
+                  {sidebarShortcuts === 'playlists' 
+                    ? "Show only playlist shortcuts in the sidebar" 
+                    : sidebarShortcuts === 'both'
+                    ? "Show both playlist and artist shortcuts in the sidebar"
+                    : "Hide all shortcuts from the sidebar"}
+                </p>
+              </div>
+
               <div className="flex flex-col gap-3">
                 <Button onClick={handleFinishSetup} className="w-full">
                   <FaCheck className="w-4 h-4 mr-2" />