client: improve quick access

- default to opened sidebar

src/components/FolderView/SongList.vue

@@ -191,13 +191,12 @@ td .artist {
 
   tbody tr {
     cursor: pointer;
-    transition: all 0.5s ease;
+    transition: all 0.1s ease;
 
     &:hover {
       & {
-        background-color: rgba(255, 174, 0, 0.534);
+        background-color: rgb(5, 80, 150);
       }
-      transform: scale(0.99);
     }
   }
 }

src/components/LeftSidebar/Navigation.vue

@@ -98,13 +98,14 @@ export default {
   background-color: transparent;
   height: 100%;
   padding: 10px;
-  transition: all 0.3s ease-in-out;
+  // transition: all .3s ease-in-out;
+  // transition-delay: 1s;
 }
 
 .collapsed .nav-button {
   font-size: smaller;
   margin-top: 5px;
-  transition: all 0.2s ease-in-out;
+  // transition: all 2s ease-in-out;
 }
 
 .side-nav-container .nav-button:hover {

src/components/LeftSidebar/PinnedStuff.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-nav-container"
+    class="side-nav-container rounded"
     :class="{ hidden: collapsed }"
     id="pinned-container"
   >
@@ -33,7 +33,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="playlists-button">
         <div class="nav-icon image" id="playlists-icon"></div>
-        <span id="text">Juice WRLD Discography</span>
+        <span id="text" class="ellip">Juice WRLD Discography</span>
       </div>
     </router-link>
     <hr />
@@ -60,13 +60,30 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+#pinned-container {
+  background-color: rgb(0, 0, 0);
+  border-top: none;
+  margin: $small;
+  padding: $small;
+
+  #text {
+    font-size: 0.9rem;
+  }
+
+  .nav-icon {
+    margin: 0 $small 0 0;
+  }
+}
+
 #pinned-container .nav-button {
+  border-radius: $small;
   color: rgba(255, 255, 255, 0.671);
+  // margin-top: $small;
 }
 
 #pinned-container .nav-button:hover {
-  background-color: rgba(5, 80, 150, 0.322);
+  background-color: rgb(5, 80, 150);
 }
 
 #pinned-container .nav-button .nav-icon {

src/components/RightSideBar/NowPlaying.vue

@@ -18,6 +18,7 @@
       </div>
     </div>
     <div class="progress">
+      <div class="duration">{{ fmtMSS(current.length) }}</div>
       <input
         id="progress"
         type="range"
@@ -60,6 +61,11 @@ export default {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
     const pos = playAudio.pos;
+    function fmtMSS(s) {
+      return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
+    }
+
+    // const duration = ref()
 
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
@@ -79,6 +85,7 @@ export default {
       pos,
       seek,
       isPlaying,
+      fmtMSS
     };
   },
 };
@@ -87,9 +94,10 @@ export default {
 <style lang="scss">
 .now-playing {
   border-radius: 0.5rem;
+  height: 14rem;
   margin-top: 1rem;
   padding: 0.5rem;
-  background-color: rgb(12, 12, 12);
+  background-color: rgb(0, 0, 0);
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -97,6 +105,14 @@ export default {
     display: flex;
     align-items: center;
     height: 1.5rem;
+    position: relative;
+
+    .duration {
+      position: absolute;
+      right: 0;
+      top: -1rem;
+      font-size: small;
+    }
 
     input {
       -webkit-appearance: none;
@@ -159,11 +175,6 @@ export default {
         border-radius: 0.5rem;
       }
 
-      & *:hover {
-        filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
-          brightness(89%) contrast(101%);
-      }
-
       #previous {
         background-image: url(../../assets/icons/previous.svg);
       }
@@ -225,6 +236,12 @@ export default {
         background-image: url(../../assets/icons/heart.svg);
       }
     }
+
+    .fav *:hover,
+    .shuffle *:hover,
+    .nav *:hover {
+      background-color: black;
+    }
   }
 
   .art-tags {