playlist: add delete button to details page

src/playlist/Playlist.vue

@@ -1,6 +1,13 @@
 <template>
   <Spinner :data="playlist" v-slot="{ data }">
-    <h1>{{ data.name }}</h1>
+    <div class="d-flex justify-content-between">
+      <h1>{{ data.name }}</h1>
+      <OverflowMenu>
+        <b-dropdown-item-btn @click="deletePlaylist()" variant="danger">
+          Delete playlist
+        </b-dropdown-item-btn>
+      </OverflowMenu>
+    </div>
     <TrackList :tracks="data.tracks" show-album @remove="remove(index)">
       <template v-slot:context-menu="{index}">
         <b-dropdown-item-button @click="remove(index)">
@@ -13,6 +20,7 @@
 <script lang="ts">
 import Vue from "vue";
 import TrackList from "@/library/TrackList.vue";
+import { mapActions } from 'vuex';
 
 export default Vue.extend({
   components: {
@@ -42,7 +50,12 @@ export default Vue.extend({
       console.log("remove: " + index)
       this.$api.removeFromPlaylist(this.id, index.toString());
       this.playlist.tracks.splice(index, 1);
-    }
+    },
+    deletePlaylist() {
+      this.$store.dispatch("deletePlaylist", this.id).then(() => {
+        this.$router.replace({name: "playlists"})
+      })
+    },
   }
 });
 </script>

src/style/theme.scss

@@ -3,7 +3,7 @@ $theme-elevated: rgb(25, 25, 25);
 $theme-text: #ccc;
 
 $primary: #09f;
-$danger: #e54b4b;
+$danger: #ff4141;
 
 $body-bg: $theme-base;
 $body-color: $theme-text;