fix conflicts

src/components/ChannelPage.vue

@@ -22,6 +22,19 @@
             }"
         ></button>
 
+        <!-- RSS Feed button -->
+        <a
+            aria-label="RSS feed"
+            title="RSS feed"
+            role="button"
+            v-if="channel.id"
+            :href="`https://www.youtube.com/feeds/videos.xml?channel_id=${channel.id}`"
+            target="_blank"
+            class="btn flex-col ml-3"
+        >
+            <font-awesome-icon icon="rss" />
+        </a>
+
         <hr />
 
         <div class="video-grid">

src/components/ModalComponent.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="modal">
-        <div>
+        <div @click="handleClick">
             <div class="modal-container">
+                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
                 <slot></slot>
             </div>
         </div>
@@ -23,6 +24,10 @@ export default {
             } else return;
             event.preventDefault();
         },
+        handleClick(event) {
+            if (event.target !== event.currentTarget) return;
+            this.$emit("close");
+        },
     },
 };
 </script>
@@ -37,6 +42,10 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto min-w-[20vw];
+    @apply w-min m-auto min-w-[20vw] relative;
+}
+
+.modal-container > button {
+    @apply absolute right-50 top-30;
 }
 </style>

src/components/PlaylistAddModal.vue

@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex pp-playlist-add-modal-top">
-            <h6 class="w-max inline-block" v-t="'actions.select_playlist'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
         <select class="select w-full mt-3" v-model="selectedPlaylist">
             <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
         </select>

src/components/PlaylistsPage.vue

@@ -16,7 +16,8 @@
                     v-text="playlist.name"
                 />
             </router-link>
-            <button class="btn h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
+            <button class="btn h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
+            <button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
         </div>
     </div>
     <br />
@@ -46,6 +47,31 @@ export default {
                 this.playlists = json;
             });
         },
+        renamePlaylist(id) {
+            const newName = prompt(this.$t("actions.new_playlist_name"));
+            if (!newName) return;
+            this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    playlistId: id,
+                    newName: newName,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            }).then(json => {
+                if (json.error) alert(json.error);
+                else {
+                    this.playlists.forEach((playlist, index) => {
+                        if (playlist.id == id) {
+                            this.playlists[index].name = newName;
+                            return;
+                        }
+                    });
+                }
+            });
+        },
         deletePlaylist(id) {
             if (confirm(this.$t("actions.delete_playlist_confirm")))
                 this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {

src/components/ShareModal.vue

@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex justify-between">
-            <h3 v-t="'actions.share'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <h2 v-t="'actions.share'" />
         <div class="flex justify-between mt-4">
             <label v-t="'actions.with_timecode'" for="withTimeCode" />
             <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
@@ -16,7 +13,7 @@
             <label v-t="'actions.time_code'" />
             <input class="input w-300" type="text" v-model="timeStamp" />
         </div>
-        <h6 class="mb-2" v-text="generatedLink" />
+        <a :href="generatedLink" target="_blank"><h6 class="mb-2" v-text="generatedLink" /></a>
         <div class="flex justify-end mt-4">
             <button class="btn" style="margin-right: 15rem" v-t="'actions.follow_link'" @click="followLink()" />
             <button class="btn" v-t="'actions.copy_link'" @click="copyLink()" />

src/locales/en.json

@@ -98,6 +98,8 @@
         "backup_preferences": "Backup preferences",
         "restore_preferences": "Restore preferences",
         "back_to_home": "Back to home",
+        "rename_playlist": "Rename playlist",
+        "new_playlist_name": "New playlist name",
         "share": "Share",
         "with_timecode": "Share with time code",
         "piped_link": "Piped link",