From c74ef1e6325bd82a0f5715ad40197c6f1da2d6fb Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 17 Jun 2026 13:55:43 +0200
Subject: [PATCH] feat(playlists): move the new-playlist input to the top of
 the rail

---
 frontend/src/components/Playlists.tsx | 30 +++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index 93512f0..8bf346e 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -580,6 +580,21 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
             </button>
           </div>
         )}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (newName.trim()) createMut.mutate(newName.trim());
+          }}
+          className="flex items-center gap-1.5 mb-3 pb-3 border-b border-border"
+        >
+          <Plus className="w-4 h-4 text-muted shrink-0" />
+          <input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder={t("playlists.newPlaylist")}
+            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+          />
+        </form>
         {playlists.length === 0 && !listQuery.isLoading && (
           <div className="text-xs text-muted px-1 py-2">{t("playlists.noneYet")}</div>
         )}
@@ -618,21 +633,6 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
             </button>
           ))}
         </div>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            if (newName.trim()) createMut.mutate(newName.trim());
-          }}
-          className="flex items-center gap-1.5 mt-3 pt-3 border-t border-border"
-        >
-          <Plus className="w-4 h-4 text-muted shrink-0" />
-          <input
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            placeholder={t("playlists.newPlaylist")}
-            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
-          />
-        </form>
       </aside>
 
       <main className="flex-1 min-w-0 overflow-y-auto p-4">