feat: add toast component

src/App.vue

@@ -17,6 +17,7 @@
           ) === false
         "
     /></transition>
+    <Toast />
     <GlobalEvents :filter="globalEventFilter" @keydown.space="play" />
   </div>
 </template>
@@ -24,6 +25,7 @@
 <script>
 import Navbar from "./components/Navbar.vue";
 import Player from "./components/Player.vue";
+import Toast from "./components/Toast.vue";
 import GlobalEvents from "vue-global-events";
 import { ipcRenderer } from "./electron/ipcRenderer";
 
@@ -33,6 +35,7 @@ export default {
     Navbar,
     Player,
     GlobalEvents,
+    Toast,
   },
   data() {
     return {

src/components/Toast.vue

@@ -0,0 +1,51 @@
+<template>
+  <transition name="fade">
+    <div class="toast" v-show="toast.show">{{ toast.text }}</div>
+  </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Toast",
+  computed: {
+    ...mapState(["toast"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.toast {
+  position: fixed;
+  bottom: 64px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  color: var(--color-text);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 6px 12px;
+  z-index: 100;
+}
+
+[data-theme="dark"] {
+  .toast {
+    background: rgba(46, 46, 46, 0.68);
+    backdrop-filter: blur(16px) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

src/components/TrackList.vue

@@ -9,21 +9,21 @@
         </div>
       </div>
       <hr />
-      <div class="item" @click="play">Play</div>
+      <div class="item" @click="play">{{ $t("contextMenu.play") }}</div>
-      <div class="item" @click="playNext">Play Next</div>
+      <div class="item" @click="playNext">{{ $t("contextMenu.playNext") }}</div>
       <div
         class="item"
         @click="like"
         v-show="!isRightClickedTrackLiked && accountLogin"
       >
-        Save to my Liked Songs
+        {{ $t("contextMenu.saveToMyLikedSongs") }}
       </div>
       <div
         class="item"
         @click="like"
         v-show="isRightClickedTrackLiked && accountLogin"
       >
-        Remove from my Liked Songs
+        {{ $t("contextMenu.removeFromMyLikedSongs") }}
       </div>
     </ContextMenu>
     <TrackListItem
@@ -105,7 +105,7 @@ export default {
   },
   methods: {
     ...mapMutations(["updateLikedSongs"]),
-    ...mapActions(["nextTrack", "playTrackOnListByID"]),
+    ...mapActions(["nextTrack", "playTrackOnListByID", "showToast"]),
     openMenu(e, track) {
       if (!track.playable) {
         return;
@@ -158,8 +158,10 @@ export default {
       likeATrack({ id, like }).then((data) => {
         if (data.code !== 200) return;
         if (like === false) {
+          this.showToast(this.$t("toast.removedFromMyLikedSongs"));
           this.updateLikedSongs(likedSongs.filter((d) => d !== id));
         } else {
+          this.showToast(this.$t("toast.savedToMyLikedSongs"));
           likedSongs.push(id);
           this.updateLikedSongs(likedSongs);
         }

src/store/actions.js

@@ -143,4 +143,21 @@ export default {
       dispatch("nextTrack");
     });
   },
+  showToast({ state, commit }, text) {
+    if (state.toast.timer !== null) {
+      clearTimeout(state.toast.timer);
+      commit("updateToast", { show: false, text: "", timer: null });
+    }
+    commit("updateToast", {
+      show: true,
+      text,
+      timer: setTimeout(() => {
+        commit("updateToast", {
+          show: false,
+          text: state.toast.text,
+          timer: null,
+        });
+      }, 3200),
+    });
+  },
 };

src/store/mutations.js

@@ -120,4 +120,7 @@ export default {
       }
     );
   },
+  updateToast(state, toast) {
+    state.toast = toast;
+  },
 };

src/store/state.js

@@ -7,6 +7,11 @@ export default {
     clickObjectID: 0,
     showMenu: false,
   },
+  toast: {
+    show: false,
+    text: "",
+    timer: null,
+  },
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
   data: JSON.parse(localStorage.getItem("data")),