From 34f52c953e54fc99985a63396d64caf73e5d2428 Mon Sep 17 00:00:00 2001
From: Andy Russo <88431411+AndyRusso@users.noreply.github.com>
Date: Sat, 16 Mar 2024 20:48:24 +0500
Subject: [PATCH 1/3] feat: make CreatePlaylistModal handle Enter key

---
 src/components/CreatePlaylistModal.vue | 12 ++++++++++++
 src/components/PlaylistAddModal.vue    |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/CreatePlaylistModal.vue b/src/components/CreatePlaylistModal.vue
index 180f162a..43f026f1 100644
--- a/src/components/CreatePlaylistModal.vue
+++ b/src/components/CreatePlaylistModal.vue
@@ -24,7 +24,19 @@ export default {
             playlistName: "",
         };
     },
+    mounted() {
+        window.addEventListener("keydown", this.handleKeyDown);
+    },
+    unmounted() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+    },
     methods: {
+        handleKeyDown(event) {
+            if (event.code === "Enter") {
+                this.onCreatePlaylist();
+                event.preventDefault();
+            }
+        },
         onCreatePlaylist() {
             if (!this.playlistName) return;
 
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 79088bd5..10910b56 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -65,7 +65,7 @@ export default {
     },
     methods: {
         handleKeyDown(event) {
-            if (event.code === "Enter") {
+            if (event.code === "Enter" && !this.showCreatePlaylistModal) {
                 this.handleClick(this.selectedPlaylist);
                 event.preventDefault();
             }

From 6311eb73de02308b156db61f84adc0ff69d5d737 Mon Sep 17 00:00:00 2001
From: Andy Russo <88431411+AndyRusso@users.noreply.github.com>
Date: Sat, 16 Mar 2024 21:00:50 +0500
Subject: [PATCH 2/3] feat: PlaylistAddModal switches to created playlist

---
 src/components/CreatePlaylistModal.vue |  2 +-
 src/components/PlaylistAddModal.vue    | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/CreatePlaylistModal.vue b/src/components/CreatePlaylistModal.vue
index 43f026f1..cadcb541 100644
--- a/src/components/CreatePlaylistModal.vue
+++ b/src/components/CreatePlaylistModal.vue
@@ -43,7 +43,7 @@ export default {
             this.createPlaylist(this.playlistName).then(response => {
                 if (response.error) alert(response.error);
                 else {
-                    this.$emit("created");
+                    this.$emit("created", response.playlistId, this.playlistName);
                     this.$emit("close");
                 }
             });
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 10910b56..09cc3432 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -22,7 +22,7 @@
     <CreatePlaylistModal
         v-if="showCreatePlaylistModal"
         @close="showCreatePlaylistModal = false"
-        @created="fetchPlaylists"
+        @created="addCreatedPlaylist"
     />
 </template>
 
@@ -55,7 +55,9 @@ export default {
         };
     },
     mounted() {
-        this.fetchPlaylists();
+        this.getPlaylists().then(json => {
+            this.playlists = json;
+        });
         this.selectedPlaylist = this.getPreferenceString("selectedPlaylist" + this.hashCode(this.authApiUrl()));
         window.addEventListener("keydown", this.handleKeyDown);
         window.blur();
@@ -87,10 +89,9 @@ export default {
                 if (json.error) alert(json.error);
             });
         },
-        async fetchPlaylists() {
-            this.getPlaylists().then(json => {
-                this.playlists = json;
-            });
+        addCreatedPlaylist(playlistId, playlistName) {
+            this.playlists.push({ id: playlistId, name: playlistName });
+            this.selectedPlaylist = playlistId;
         },
     },
 };

From 256cab83a0006c9ba685a08c74634df5b15ebb58 Mon Sep 17 00:00:00 2001
From: Andy Russo <88431411+AndyRusso@users.noreply.github.com>
Date: Sat, 16 Mar 2024 21:02:19 +0500
Subject: [PATCH 3/3] feat: auto focus CreatePlaylistModal input field

---
 src/components/CreatePlaylistModal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CreatePlaylistModal.vue b/src/components/CreatePlaylistModal.vue
index cadcb541..872176f0 100644
--- a/src/components/CreatePlaylistModal.vue
+++ b/src/components/CreatePlaylistModal.vue
@@ -2,7 +2,7 @@
     <ModalComponent @close="$emit('close')">
         <div class="flex flex-col">
             <h2 v-t="'actions.create_playlist'" />
-            <input v-model="playlistName" type="text" class="input mt-2" />
+            <input ref="input" v-model="playlistName" type="text" class="input mt-2" />
             <div class="ml-auto mt-3 w-min flex">
                 <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
                 <button v-t="'actions.okay'" class="btn ml-2" @click="onCreatePlaylist" />
@@ -25,6 +25,7 @@ export default {
         };
     },
     mounted() {
+        this.$refs.input.focus();
         window.addEventListener("keydown", this.handleKeyDown);
     },
     unmounted() {