Improve create & edit playlist UX

src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js

@@ -33,26 +33,34 @@ export default defineComponent({
     newPlaylistVideoObject: function () {
       return this.$store.getters.getNewPlaylistVideoObject
     },
+
+    playlistWithNameExists() {
+      // Don't show the message with no name input
+      const playlistName = this.playlistName
+      if (this.playlistName === '') { return false }
+
+      return this.allPlaylists.some((playlist) => {
+        return playlist.playlistName === playlistName
+      })
+    },
   },
   mounted: function () {
     this.playlistName = this.newPlaylistVideoObject.title
     // Faster to input required playlist name
     nextTick(() => this.$refs.playlistNameInput.focus())
   },
   methods: {
+    handlePlaylistNameInput(input) {
+      this.playlistName = input.trim()
+    },
+
     createNewPlaylist: function () {
       if (this.playlistName === '') {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]'))
         return
       }
 
-      const nameExists = this.allPlaylists.findIndex((playlist) => {
-        return playlist.playlistName === this.playlistName
-      })
-      if (nameExists !== -1) {
-        showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]'))
-        return
-      }
+      // Duplicate playlist check moved to template
 
       const playlistObject = {
         playlistName: this.playlistName,

src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue

@@ -15,13 +15,19 @@
         :value="playlistName"
         :maxlength="255"
         class="playlistNameInput"
-        @input="(input) => playlistName = input"
+        @input="(input) => handlePlaylistNameInput(input)"
         @click="createNewPlaylist"
       />
     </ft-flex-box>
+    <ft-flex-box v-if="playlistWithNameExists">
+      <p>
+        {{ $t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]') }}
+      </p>
+    </ft-flex-box>
     <ft-flex-box>
       <ft-button
         :label="$t('User Playlists.CreatePlaylistPrompt.Create')"
+        :disabled="playlistWithNameExists"
         @click="createNewPlaylist"
       />
       <ft-button

src/renderer/components/playlist-info/playlist-info.js

@@ -279,7 +279,9 @@ export default defineComponent({
 
       this.showAddToPlaylistPromptForManyVideos({
         videos: this.videos,
-        newPlaylistDefaultProperties: { title: this.title },
+        newPlaylistDefaultProperties: {
+          title: this.channelName === '' ? this.title : `${this.title} | ${this.channelName}`,
+        },
       })
     },