From 97db706186fcbf07bbfb060753d2bbe941380e45 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 9 Dec 2022 06:11:21 +0300
Subject: [PATCH] redesign toast notifications

---
 src/assets/icons/toast/check.svg      |  6 +++
 src/assets/icons/toast/error.svg      |  6 +++
 src/assets/icons/toast/info.svg       |  6 +++
 src/assets/icons/toast/ok.svg         |  6 +++
 src/assets/icons/toast/working.svg    |  6 +++
 src/assets/scss/Global/index.scss     |  5 --
 src/components/ArtistView/Header.vue  |  1 -
 src/components/Notification.vue       | 75 ++++++++++++++++++++-------
 src/components/shared/PlayBtnRect.vue |  2 +-
 src/composables/enums.ts              |  7 +--
 src/composables/fetch/album.ts        | 13 ++++-
 src/composables/usePlayFrom.ts        | 16 ++++--
 src/stores/pages/album.ts             |  7 ++-
 13 files changed, 115 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/icons/toast/check.svg
 create mode 100644 src/assets/icons/toast/error.svg
 create mode 100644 src/assets/icons/toast/info.svg
 create mode 100644 src/assets/icons/toast/ok.svg
 create mode 100644 src/assets/icons/toast/working.svg

diff --git a/src/assets/icons/toast/check.svg b/src/assets/icons/toast/check.svg
new file mode 100644
index 00000000..65575a39
--- /dev/null
+++ b/src/assets/icons/toast/check.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
+<g id="surface79322138">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.574219 4.953125 C 22.980469 5.214844 23.09375 5.757812 22.832031 6.164062 L 12.0625 22.789062 C 11.914062 23.019531 11.664062 23.164062 11.390625 23.183594 C 11.371094 23.1875 11.347656 23.1875 11.328125 23.1875 C 11.078125 23.1875 10.835938 23.078125 10.667969 22.890625 L 5.246094 16.726562 C 4.925781 16.363281 4.960938 15.808594 5.324219 15.488281 C 5.6875 15.171875 6.238281 15.207031 6.558594 15.570312 L 11.21875 20.867188 L 21.363281 5.210938 C 21.625 4.804688 22.167969 4.691406 22.574219 4.953125 Z M 22.574219 4.953125 "/>
+</g>
+</svg>
diff --git a/src/assets/icons/toast/error.svg b/src/assets/icons/toast/error.svg
new file mode 100644
index 00000000..a5061e87
--- /dev/null
+++ b/src/assets/icons/toast/error.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
+<g id="surface79432257">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 5.214844 C 13.210938 5.214844 12.5 5.625 12.105469 6.308594 L 4.253906 19.90625 C 3.859375 20.589844 3.859375 21.410156 4.253906 22.09375 C 4.652344 22.777344 5.359375 23.1875 6.148438 23.1875 L 21.851562 23.1875 C 22.640625 23.1875 23.347656 22.777344 23.746094 22.09375 C 24.140625 21.410156 24.140625 20.589844 23.746094 19.90625 L 15.894531 6.308594 C 15.5 5.625 14.789062 5.214844 14 5.214844 Z M 14 6.964844 C 14.074219 6.964844 14.265625 6.988281 14.378906 7.183594 L 22.230469 20.78125 C 22.34375 20.980469 22.269531 21.152344 22.230469 21.21875 C 22.191406 21.285156 22.078125 21.4375 21.851562 21.4375 L 6.148438 21.4375 C 5.921875 21.4375 5.808594 21.285156 5.769531 21.21875 C 5.730469 21.152344 5.65625 20.980469 5.769531 20.78125 L 13.621094 7.183594 C 13.734375 6.988281 13.925781 6.964844 14 6.964844 Z M 13.992188 10.058594 C 13.691406 10.058594 13.445312 10.152344 13.253906 10.335938 C 13.066406 10.523438 12.976562 10.753906 12.984375 11.03125 L 13.125 16.214844 C 13.140625 16.792969 13.433594 17.085938 14.007812 17.085938 C 14.5625 17.085938 14.84375 16.792969 14.851562 16.214844 L 15.015625 11.042969 C 15.023438 10.765625 14.929688 10.53125 14.730469 10.34375 C 14.535156 10.152344 14.289062 10.058594 13.992188 10.058594 Z M 14 18.238281 C 13.328125 18.238281 12.902344 18.808594 12.902344 19.289062 C 12.902344 19.769531 13.3125 20.339844 14 20.339844 C 14.6875 20.339844 15.097656 19.800781 15.097656 19.289062 C 15.097656 18.777344 14.671875 18.238281 14 18.238281 Z M 14 18.238281 "/>
+</g>
+</svg>
diff --git a/src/assets/icons/toast/info.svg b/src/assets/icons/toast/info.svg
new file mode 100644
index 00000000..36fc150b
--- /dev/null
+++ b/src/assets/icons/toast/info.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
+<g id="surface79671233">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 4.375 C 8.683594 4.375 4.375 8.683594 4.375 14 C 4.375 19.316406 8.683594 23.625 14 23.625 C 19.316406 23.625 23.625 19.316406 23.625 14 C 23.625 8.683594 19.316406 4.375 14 4.375 Z M 14 6.125 C 18.347656 6.125 21.875 9.652344 21.875 14 C 21.875 18.347656 18.347656 21.875 14 21.875 C 9.652344 21.875 6.125 18.347656 6.125 14 C 6.125 9.652344 9.652344 6.125 14 6.125 Z M 14 9.1875 C 13.273438 9.1875 12.6875 9.773438 12.6875 10.5 C 12.6875 11.226562 13.273438 11.8125 14 11.8125 C 14.726562 11.8125 15.3125 11.226562 15.3125 10.5 C 15.3125 9.773438 14.726562 9.1875 14 9.1875 Z M 14 13.125 C 13.515625 13.125 13.125 13.515625 13.125 14 L 13.125 18.375 C 13.125 18.859375 13.515625 19.25 14 19.25 C 14.484375 19.25 14.875 18.859375 14.875 18.375 L 14.875 14 C 14.875 13.515625 14.484375 13.125 14 13.125 Z M 14 13.125 "/>
+</g>
+</svg>
diff --git a/src/assets/icons/toast/ok.svg b/src/assets/icons/toast/ok.svg
new file mode 100644
index 00000000..0304ea1e
--- /dev/null
+++ b/src/assets/icons/toast/ok.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
+<g id="surface79451713">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.703125 15.355469 C 22.628906 15.773438 22.449219 16.152344 22.203125 16.476562 C 22.667969 17.058594 22.851562 17.796875 22.671875 18.554688 C 22.550781 19.082031 22.265625 19.539062 21.886719 19.886719 C 22.15625 20.265625 22.3125 20.71875 22.3125 21.203125 C 22.3125 22.542969 21.121094 23.59375 19.597656 23.59375 L 13.121094 23.613281 C 11.023438 23.613281 9.042969 22.796875 7.558594 21.316406 C 6.070312 19.828125 5.25 17.851562 5.25 15.75 C 5.25 11.828125 6.660156 10.425781 7.59375 9.5 L 7.695312 9.398438 C 7.988281 9.101562 8.527344 8.707031 9.210938 8.203125 C 10.59375 7.179688 12.914062 5.464844 13.339844 4.308594 C 13.683594 3.382812 14.109375 2.230469 15.75 2.230469 C 16.480469 2.230469 17.152344 2.683594 17.550781 3.445312 C 17.929688 4.175781 18.496094 6.132812 16.472656 9.625 L 19.757812 9.625 C 21.167969 9.625 22.3125 10.699219 22.3125 12.015625 C 22.3125 12.4375 22.191406 12.832031 21.984375 13.175781 C 22.574219 13.746094 22.851562 14.519531 22.703125 15.355469 Z M 19.597656 21.84375 C 20.121094 21.84375 20.5625 21.550781 20.5625 21.203125 C 20.5625 20.851562 20.203125 20.5625 19.757812 20.5625 L 17.9375 20.5625 C 17.453125 20.5625 17.0625 20.171875 17.0625 19.6875 C 17.0625 19.203125 17.453125 18.8125 17.9375 18.8125 L 20.226562 18.8125 C 20.609375 18.8125 20.894531 18.472656 20.96875 18.15625 C 21.015625 17.949219 21 17.679688 20.71875 17.441406 C 20.558594 17.476562 20.394531 17.5 20.226562 17.5 L 17.9375 17.5 C 17.453125 17.5 17.0625 17.109375 17.0625 16.625 C 17.0625 16.140625 17.453125 15.75 17.9375 15.75 L 20.226562 15.75 C 20.617188 15.75 20.917969 15.394531 20.980469 15.050781 C 21.046875 14.667969 20.820312 14.417969 20.542969 14.261719 C 20.25 14.355469 19.933594 14.40625 19.597656 14.40625 L 17.945312 14.4375 C 17.46875 14.4375 17.070312 14.054688 17.0625 13.578125 C 17.054688 13.09375 17.4375 12.695312 17.921875 12.6875 L 19.582031 12.65625 C 20.121094 12.65625 20.5625 12.363281 20.5625 12.015625 C 20.5625 11.664062 20.203125 11.375 19.757812 11.375 L 14.875 11.375 C 14.550781 11.375 14.25 11.195312 14.097656 10.902344 C 13.949219 10.613281 13.972656 10.265625 14.15625 10 C 16.121094 7.1875 16.417969 5.234375 16.039062 4.339844 C 15.921875 4.058594 15.777344 3.984375 15.742188 3.976562 C 15.386719 3.976562 15.328125 3.976562 14.984375 4.917969 C 14.375 6.5625 11.992188 8.324219 10.25 9.609375 C 9.675781 10.035156 9.136719 10.433594 8.929688 10.636719 L 8.828125 10.738281 C 8.015625 11.550781 7 12.554688 7 15.75 C 7 17.386719 7.636719 18.921875 8.792969 20.078125 C 9.949219 21.230469 11.488281 21.863281 13.117188 21.863281 Z M 19.597656 21.84375 "/>
+</g>
+</svg>
diff --git a/src/assets/icons/toast/working.svg b/src/assets/icons/toast/working.svg
new file mode 100644
index 00000000..1c40de8f
--- /dev/null
+++ b/src/assets/icons/toast/working.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
+<g id="surface79447169">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 17.703125 16.027344 C 19.269531 17.59375 20.132812 19.679688 20.125 21.898438 C 20.121094 22.855469 19.332031 23.625 18.375 23.625 L 9.625 23.625 C 8.667969 23.625 7.878906 22.855469 7.875 21.898438 C 7.867188 19.679688 8.730469 17.597656 10.296875 16.027344 L 11.449219 14.875 C 11.683594 14.640625 11.8125 14.332031 11.8125 14 C 11.8125 13.667969 11.683594 13.359375 11.449219 13.125 L 10.261719 11.9375 C 8.722656 10.398438 7.875 8.351562 7.875 6.175781 C 7.875 5.164062 8.660156 4.375 9.621094 4.375 L 18.378906 4.375 C 19.339844 4.375 20.125 5.164062 20.125 6.132812 C 20.125 8.351562 19.277344 10.398438 17.738281 11.9375 L 16.550781 13.125 C 16.316406 13.359375 16.1875 13.667969 16.1875 14 C 16.1875 14.332031 16.316406 14.640625 16.550781 14.875 Z M 18.023438 21.121094 L 14.605469 17.859375 C 14.265625 17.535156 13.734375 17.535156 13.394531 17.859375 L 9.976562 21.121094 C 9.691406 21.394531 9.886719 21.875 10.28125 21.875 L 17.71875 21.875 C 18.113281 21.875 18.308594 21.394531 18.023438 21.121094 Z M 18.023438 21.121094 "/>
+</g>
+</svg>
diff --git a/src/assets/scss/Global/index.scss b/src/assets/scss/Global/index.scss
index 2d1a94bf..4471eb81 100644
--- a/src/assets/scss/Global/index.scss
+++ b/src/assets/scss/Global/index.scss
@@ -2,11 +2,6 @@
   "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
   "./search-tabheaders.scss";
 
-:root {
-  --separator: #ffffff46;
-  --green: #4ad168;
-}
-
 * {
   box-sizing: border-box;
 }
diff --git a/src/components/ArtistView/Header.vue b/src/components/ArtistView/Header.vue
index cfacbe7d..8626c243 100644
--- a/src/components/ArtistView/Header.vue
+++ b/src/components/ArtistView/Header.vue
@@ -62,7 +62,6 @@ const artist = useArtistPageStore();
   position: absolute;
   opacity: 0.25;
   margin-right: -1rem;
-
 }
 .artist-page-header {
   height: 18rem;
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 10c796b0..1ca181e7 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -1,16 +1,12 @@
 <template>
   <div class="toasts" v-if="notifStore.notifs">
     <div
-      class="new-notif rounded"
-      :class="[
-        { 'notif-error': notif.type == NotifType.Error },
-        {
-          'notif-info': notif.type == NotifType.Info,
-        },
-      ]"
+      class="new-notif rounded-sm"
+      :class="notif.type"
       v-for="notif in notifStore.notifs"
     >
-      <div class="ellip">{{ notif.text }}</div>
+      <component :is="getSvg(notif.type)" class="notif-icon" />
+      <div class="notif-text ellip">{{ notif.text }}</div>
     </div>
   </div>
 </template>
@@ -18,7 +14,25 @@
 <script setup lang="ts">
 import { useNotifStore, NotifType } from "../stores/notification";
 
+import ErrorSvg from "../assets/icons/toast/error.svg";
+import InfoSvg from "../assets/icons/toast/info.svg";
+import SuccessSvg from "../assets/icons/toast/ok.svg";
+import WorkingSvg from "../assets/icons/toast/working.svg";
+
 const notifStore = useNotifStore();
+
+function getSvg(notif: NotifType) {
+  switch (notif) {
+    case NotifType.Error:
+      return ErrorSvg;
+    case NotifType.Info:
+      return InfoSvg;
+    case NotifType.Success:
+      return SuccessSvg;
+    case NotifType.Working:
+      return WorkingSvg;
+  }
+}
 </script>
 <style lang="scss">
 .toasts {
@@ -29,27 +43,48 @@ const notifStore = useNotifStore();
   z-index: 100;
   display: flex;
   flex-direction: column-reverse;
-  gap: $small;
+  gap: 1rem;
 }
 
 .new-notif {
   width: 20rem;
-  height: 3.5rem;
-  bottom: 2rem;
-  padding: $small;
-  background: linear-gradient(to top right, #021b79, #0575e6);
+  height: 4rem;
+  background-color: $gray;
   display: grid;
   place-items: center;
-  align-items: center;
-  box-shadow: 0px 0px 2rem rgb(0, 0, 0);
-  font-size: .85rem;
+  box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.466);
+  font-size: 0.85rem;
+  padding: 1rem;
+
+  grid-template-columns: 2rem 3fr;
+  gap: $small;
+
+  .notif-text {
+    width: 100%;
+  }
 }
 
-.notif-error {
-  background: linear-gradient(to top right, #cf0b25, #e60518);
+.new-notif.error {
+  $bg: rgb(236, 31, 31);
+  $bg1: rgba(236, 31, 31, 0.15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
 }
 
-.notif-info {
-  background: linear-gradient(to top right, $gray4, $gray3);
+.new-notif.info {
+  $bg: rgb(28, 102, 238);
+  $bg1: rgba(31, 144, 236, 0.15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
+}
+
+.new-notif.success {
+  $bg: rgb(5, 167, 53);
+  $bg1: rgba(5, 167, 54, .15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
+}
+
+.new-notif.working {
+  $bg: $gray4;
+  $bg1: rgba(128, 128, 128, 0.151);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
 }
 </style>
diff --git a/src/components/shared/PlayBtnRect.vue b/src/components/shared/PlayBtnRect.vue
index e81f1dc6..83ae39a6 100644
--- a/src/components/shared/PlayBtnRect.vue
+++ b/src/components/shared/PlayBtnRect.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="playbtnrect" @click="usePlayFrom(source, useQStore, store)">
+  <button class="playbtnrect shadow-sm" @click="usePlayFrom(source, useQStore, store)">
     <playBtnSvg />
     <div class="text">Play</div>
   </button>
diff --git a/src/composables/enums.ts b/src/composables/enums.ts
index 31cb6055..a34026f0 100644
--- a/src/composables/enums.ts
+++ b/src/composables/enums.ts
@@ -8,9 +8,10 @@ export enum playSources {
 }
 
 export enum NotifType {
-  Success,
-  Info,
-  Error,
+  Success = "success",
+  Info = "info",
+  Error = "error",
+  Working = "working",
 }
 
 export enum FromOptions {
diff --git a/src/composables/fetch/album.ts b/src/composables/fetch/album.ts
index 9fba7663..e7f3fab5 100644
--- a/src/composables/fetch/album.ts
+++ b/src/composables/fetch/album.ts
@@ -87,10 +87,19 @@ const getAlbumsFromArtist = async (
   return [];
 };
 
+async function getAlbumTracks(albumhash: string): Promise<Track[]> {
+  const { data } = await useAxios({
+    url: albumUrl + `/${albumhash}a/` + "tracks",
+    get: true,
+  });
+
+  return data.tracks;
+}
+
 export {
-  getAlbumData as getAlbumTracks,
+  getAlbumData as getAlbum,
+  getAlbumTracks,
   getAlbumArtists,
   getAlbumBio,
   getAlbumsFromArtist,
 };
-
diff --git a/src/composables/usePlayFrom.ts b/src/composables/usePlayFrom.ts
index eebf5bfc..ec709aaf 100644
--- a/src/composables/usePlayFrom.ts
+++ b/src/composables/usePlayFrom.ts
@@ -1,15 +1,15 @@
-import { playSources } from "@/composables/enums";
+import { NotifType, playSources } from "@/composables/enums";
 
+import { useNotifStore } from "@/stores/notification";
 import useAStore from "@/stores/pages/album";
 import useArtistPageStore from "@/stores/pages/artist";
 import useFStore from "@/stores/pages/folder";
 import usePStore from "@/stores/pages/playlist";
 import useQStore from "@/stores/queue";
 import useSettingsStore from "@/stores/settings";
-import { useNotifStore } from "@/stores/notification";
 
-import { getArtistTracks } from "./fetch/artists";
 import { getAlbumTracks } from "./fetch/album";
+import { getArtistTracks } from "./fetch/artists";
 
 const queue = useQStore;
 const folder = useFStore;
@@ -97,8 +97,14 @@ async function playFromAlbumCard(
 ) {
   const qu = queue();
 
-  const tracks = await getAlbumTracks(albumhash, useNotifStore);
-  qu.playFromAlbum(albumname, albumhash, tracks.tracks);
+  const tracks = await getAlbumTracks(albumhash);
+
+  if (tracks.length === 0) {
+    useNotifStore().showNotification("Album tracks not found", NotifType.Error);
+    return;
+  }
+
+  qu.playFromAlbum(albumname, albumhash, tracks);
   qu.play();
 }
 
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index 97531d4e..83f52cd6 100644
--- a/src/stores/pages/album.ts
+++ b/src/stores/pages/album.ts
@@ -7,10 +7,9 @@ import { FuseTrackOptions } from "@/composables/enums";
 import { maxAbumCards } from "@/stores/content-width";
 
 import {
-  getAlbumsFromArtist,
-  getAlbumTracks,
+    getAlbum, getAlbumsFromArtist
 } from "../../composables/fetch/album";
-import { Album, Artist, FuseResult, Track } from "../../interfaces";
+import { Album, FuseResult, Track } from "../../interfaces";
 import { useNotifStore } from "../notification";
 
 interface Disc {
@@ -62,7 +61,7 @@ export default defineStore("album", {
      * @param hash title of the album
      */
     async fetchTracksAndArtists(hash: string) {
-      const album = await getAlbumTracks(hash, useNotifStore);
+      const album = await getAlbum(hash, useNotifStore);
       this.rawTracks = album.tracks;
       this.info = album.info;
     },