client: improve quick access

- default to opened sidebar

src/App.vue

@@ -53,7 +53,7 @@ export default {
   },
 
   setup() {
-    const collapsed = ref(true);
+    const collapsed = ref(false);
 
     perks.readQueue();
 

src/assets/css/global.scss

@@ -12,7 +12,9 @@ body {
   margin: 0;
   background: #0d0e0e;
   color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  font-size: 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
 }
 
 .heading {
@@ -37,7 +39,7 @@ a {
 }
 
 .separator {
-  border-top: .1px $separator solid;
+  border-top: 0.1px $separator solid;
   color: transparent;
   margin: $small 0 $small 0;
 }
@@ -72,13 +74,6 @@ a {
   z-index: -1;
 }
 
-.collapsed .l-sidebar {
-  width: 70px;
-  transition-timing-function: ease-in-out;
-  transition-duration: 0.3s;
-  transition-property: width;
-}
-
 .l-sidebar {
   width: 15em;
   grid-area: l-sidebar;
@@ -86,11 +81,14 @@ a {
   margin: 0.5rem 0 0.5rem 0.5rem;
   border-radius: 0.5rem;
   background-color: #131313b2;
-  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-  transition-duration: 0.3s;
-  transition-property: width;
 }
 
+.collapsed .l-sidebar {
+  width: 70px;
+  transition: all 0.3s ease;
+}
+
+
 .ellip {
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -175,7 +173,6 @@ a {
   background: rgb(163, 163, 163);
 }
 
-
 @-webkit-keyframes similarAlbums {
   0% {
     background-position: 0% 38%;
@@ -219,4 +216,4 @@ a {
   100% {
     background-position: 0% 38%;
   }
-}
+}

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 {