🔷 some refactors

src/assets/css/global.scss

@@ -59,21 +59,6 @@ a {
   display: none;
 }
 
-button {
-  border: none;
-  outline: none;
-  color: inherit;
-  font-size: 1rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  background-color: $blue;
-  border-radius: $small;
-
-  &:hover {
-    background-color: $red !important;
-  }
-}
 
 .l-container {
   display: grid;

src/components/AlbumView/Header.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="album-h">
     <div class="a-header rounded">
-      <div
-        class="image art shadow-lg rounded"
-        :style="{
-          backgroundImage: `url(&quot;${props.album.image}&quot;)`,
-        }"
-      ></div>
+      <div class="art">
+        <div
+          class="image shadow-lg"
+          :style="{
+            backgroundImage: `url(&quot;${props.album.image}&quot;)`,
+          }"
+        ></div>
+      </div>
       <div class="info">
         <div class="top">
           <div class="h">Album</div>
-          <div class="separator no-border"></div>
-          <div class="title">{{ props.album.album }}</div>
-          <div class="artist">{{ props.album.artist }}</div>
+          <div class="title ellip">{{ props.album.album }}</div>
         </div>
-        <div class="separator no-border"></div>
         <div class="bottom">
-          <div class="stats shadow-sm">
+          <div class="stats">
             {{ props.album.count }} Tracks •
             {{ perks.formatSeconds(props.album.duration, "long") }} •
-            {{ props.album.date }}
+            {{ props.album.date }} • {{ props.album.artist }}
           </div>
           <PlayBtnRect :source="playSources.album" />
         </div>
@@ -40,56 +39,51 @@ const props = defineProps<{
 
 <style lang="scss">
 .album-h {
-  height: 14rem;
+  height: 16rem;
 }
 
 .a-header {
-  position: relative;
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 13rem 1fr;
   padding: 1rem;
   height: 100%;
   background-color: $gray4;
-  background-image: linear-gradient(
-    to bottom,
-    $gray3 0%,
-    $gray3 25%,
-    $gray3 35%,
-    $gray4 50%,
-    $gray 75%,
-    $black 100%
-  );
+  background-image: linear-gradient(37deg, $black 20%, $gray5, $black 90%);
 
   .art {
-    position: absolute;
-    width: 12rem;
-    height: 12rem;
+    width: 100%;
+    height: 100%;
     left: 1rem;
+    display: flex;
+    align-items: flex-end;
+
+    .image {
+      width: 12rem;
+      height: 12rem;
+    }
   }
 
   .info {
     width: 100%;
-    height: calc(100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    margin-left: 13rem;
 
     .top {
       .h {
         color: #ffffffcb;
       }
+
       .title {
-        font-size: 2rem;
+        font-size: 2.5rem;
         font-weight: 1000;
         color: white;
         text-transform: capitalize;
       }
 
       .artist {
-        margin-top: $small;
-        font-size: 1.5rem;
-        color: #fffffff1;
+        font-size: 1.15rem;
+        color: #ffffffe0;
       }
     }
 
@@ -98,16 +92,13 @@ const props = defineProps<{
     }
 
     .bottom {
-      position: relative;
+      margin-top: $smaller;
 
       .stats {
-        background-color: $red;
-        padding: $small;
         border-radius: $small;
-        position: absolute;
-        right: 0;
-        bottom: 0;
         font-weight: bold;
+        font-size: 0.8rem;
+        margin-bottom: 0.75rem;
       }
 
       .play {

src/components/FolderView/SongList.vue

@@ -84,6 +84,9 @@ function updateQueue(track: Track) {
   overflow-y: auto;
 
   .current {
+    a {
+      color: inherit;
+    }
     color: $red;
   }
 

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <PlayingFrom :from="queue.from" />
       <UpNext :next="queue.next" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <TrackItem
@@ -13,6 +12,7 @@
           :isPlaying="queue.playing"
         />
       </div>
+      <PlayingFrom :from="queue.from" />
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ function playThis(track: Track) {
 
 <style lang="scss">
 .up-next {
-  padding: $small $small $small 0;
+  padding: $small $small 0 0;
   overflow: hidden;
   height: 100%;
 
@@ -46,13 +46,13 @@ function playThis(track: Track) {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content max-content 1fr;
+    grid-template-rows: max-content 1fr max-content;
+    gap: $small;
 
     .scrollable-r {
       height: 100%;
       padding: $small;
       overflow: auto;
-      // background-color: $card-dark;
       scrollbar-color: grey transparent;
     }
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -103,7 +103,6 @@ function goTo() {
   background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
   background-size: 120%;
   padding: 0.75rem;
-  margin-bottom: $small;
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
@@ -115,7 +114,7 @@ function goTo() {
   .abs {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: .9rem;
     background-color: $gray;
     padding: $smaller;

src/components/RightSideBar/queue/upNext.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-item border" @click="playNext">
-    <div class="h">#Up_Next</div>
+    <div class="h">Up Next</div>
     <div class="itemx  shadow">
       <div
         class="album-art image"
@@ -34,7 +34,6 @@ const props = defineProps<{
 <style lang="scss">
 .main-item {
   border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
   position: relative;
 
   &:hover {
@@ -49,7 +48,7 @@ const props = defineProps<{
   .h {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: 0.9rem;
     background-color: $accent;
     padding: $smaller;

src/composables/playlists.ts

@@ -60,7 +60,6 @@ async function getAllPlaylists(): Promise<Playlist[]> {
 
 async function addTrackToPlaylist(playlist: Playlist, track: Track) {
   const uri = `${state.settings.uri}/playlist/${playlist.playlistid}/add`;
-  console.log(track.trackid, playlist.playlistid);
 
   await axios
     .post(uri, { track: track.trackid })
@@ -114,10 +113,30 @@ async function getPlaylist(pid: string) {
   return playlist;
 }
 
+async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
+  const uri = state.settings.uri + "/playlist/" + pid + "/update";
+
+  await axios
+    .put(uri, playlist, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    })
+    .then((res) => {
+      pStore.updatePInfo(res.data.data);
+      new Notification("Playlist updated!");
+    })
+    .catch((err) => {
+      new Notification("Something funny happened!", NotifType.Error);
+      throw new Error(err);
+    });
+}
+
 export {
   createNewPlaylist,
   getAllPlaylists,
   addTrackToPlaylist,
   getPTracks,
   getPlaylist,
+  updatePlaylist,
 };

src/interfaces.ts

@@ -52,10 +52,11 @@ interface Playlist {
   playlistid: string;
   name: string;
   description?: string;
-  image?: string;
+  image?: string | FormData;
   tracks?: Track[];
   count?: number;
-  lastUpdated?: number;
+  lastUpdated?: string;
+  color?: string;
 }
 
 interface Notif {

src/views/Playlists.vue

@@ -25,8 +25,8 @@ const pStore = usePStore();
 
   .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    gap: $small;
   }
 }
 </style>