add initial bottom bar

+ use a hacky grid to position bottom bar for chrome compatibility

src/assets/scss/Global/app-grid.scss

@@ -1,20 +1,17 @@
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
-  grid-template-rows: 42px 1fr max-content;
+  grid-template-rows: 43px calc(100vh - (8.5rem + 13px)) max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
-    "l-sidebar content r-sidebar"
     "bottombar bottombar bottombar";
-  height: calc(100vh);
+  height: 100%;
   gap: 1rem;
   padding: $small 0;
   margin: 0 auto;
   margin-top: -$small;
   max-width: 1720px;
-  // padding-right: $medium;
-  // border-right: solid 1px $gray4;
   padding-top: $small;
 }
 
@@ -34,7 +31,6 @@
   grid-template-areas:
     "l-sidebar nav"
     "l-sidebar content"
-    "l-sidebar content"
     "l-sidebar content";
 }
 
@@ -43,7 +39,6 @@
     grid-template-areas:
       "l-sidebar nav"
       "l-sidebar content"
-      "l-sidebar content"
       "l-sidebar bottombar";
   }
 }
@@ -53,15 +48,17 @@
   grid-template-areas:
     "l-sidebar nav"
     "l-sidebar content"
-    "l-sidebar content"
     "l-sidebar content";
 }
 
 #acontent {
   grid-area: content;
-  overflow: hidden auto;
+  // overflow: hidden;
   margin-right: calc(0rem - ($medium + 2px));
   padding-right: calc($medium);
+  height: 100%;
+  // outline: solid;
+  // margin-top: -$small;
 
   .nav {
     margin: $small;
@@ -92,6 +89,7 @@
 }
 
 #gsearch-input {
+  // display: none !important;
   grid-area: search-input;
 }
 

src/assets/scss/Global/index.scss

@@ -34,6 +34,7 @@ body {
 
   #app {
     width: 100%;
+    height: 100%;
     margin: 0 auto;
   }
 

src/assets/scss/index.scss

@@ -10,6 +10,6 @@
 
 @font-face {
     font-family: "SFCompactDisplay";
-    src: url("../googlesans.ttf");
+    src: url("../sf-compact.woff") format("woff");
 }
 

src/components/RightSideBar/NowPlayingRight.vue

@@ -1,46 +1,73 @@
 <template>
-  <div class="b-bar bg-primary pad-medium noscroll" v-if="settings.show_alt_np">
+  <div class="b-bar">
-    <div class="info">
+    <div class="centered">
-      <img
+      <div class="inner">
-        :src="paths.images.thumb.large + queue.currenttrack?.image"
+        <RouterLink
-        alt=""
+          title="go to album"
-        class="rounded shadow-lg"
+          :to="{
-      />
+            name: Routes.album,
-      <div class="tags">
+            params: {
-        <div class="np-artist ellip">
+              hash: queue.currenttrack.albumhash,
-          <span
+            },
-            v-for="artist in putCommas(
+          }"
-              queue.currenttrack?.artist || ['♥ Hello ♥']
+        >
-            )"
+          <img
-          >
+            class="rounded-sm"
-            {{ artist }}
+            :src="paths.images.thumb.small + queue.currenttrack.image"
-          </span>
+            alt=""
+          />
+        </RouterLink>
+
+        <div class="info">
+          <div class="with-title">
+            <div class="time time-current">
+              <span>
+                {{ formatSeconds(queue.duration.current) }}
+              </span>
+            </div>
+            <div class="tags">
+              <div class="title ellip">
+                {{ queue.currenttrack.title }}
+              </div>
+              <ArtistName
+                :artists="queue.currenttrack.artist"
+                :albumartist="queue.currenttrack.albumartist"
+                class="artist"
+              />
+            </div>
+            <div class="time time-full">
+              <span>
+                {{
+                  formatSeconds(
+                    queue.currenttrack ? queue.currenttrack.duration : 0
+                  )
+                }}
+              </span>
+            </div>
+          </div>
+
+          <Progress />
         </div>
-        <div class="np-title ellip">
+        <div class="buttons">
-          {{ queue.currenttrack?.title || "Play something"}}
+          <HotKeys />
         </div>
       </div>
-    </div>
+      <div class=""></div>
-    <Progress />
-    <div class="time">
-      <span class="current">{{ formatSeconds(queue.duration.current) }}</span>
-      <HotKeys />
-      <span class="full">{{
-        formatSeconds(queue.currenttrack ? queue.currenttrack.duration : 0)
-      }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import "@/assets/scss/BottomBar/BottomBar.scss";
-import useSettingsStore from "@/stores/settings";
-import { formatSeconds, putCommas } from "@/utils";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
-import Progress from "../LeftSidebar/NP/Progress.vue";
-
 import { paths } from "@/config";
 import useQStore from "@/stores/queue";
+import { formatSeconds } from "@/utils";
+
+import { Routes } from "@/composables/enums";
+import useSettingsStore from "@/stores/settings";
+
+import ArtistName from "../shared/ArtistName.vue";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import Progress from "../LeftSidebar/NP/Progress.vue";
 
 const queue = useQStore();
 const settings = useSettingsStore();
@@ -48,51 +75,126 @@ const settings = useSettingsStore();
 
 <style lang="scss">
 .b-bar {
+  height: 65px;
+  background-color: rgb(22, 22, 22);
   display: grid;
-  grid-template-rows: 1fr max-content;
+  align-items: center;
-  gap: 1rem;
+  z-index: 1;
-  // padding: 1rem;
+  border-top: solid 1px $gray3;
-  padding-bottom: 1rem;
-  position: relative;
-  height: 55px;
-  // width: 100%;
 
-  .time {
+  .centered {
+    width: 50rem;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
     align-items: center;
 
-    .full {
+    .inner {
-      text-align: end;
+      display: grid;
+      height: 3rem;
+      grid-template-columns: max-content 1fr max-content;
+      gap: 1rem;
+      align-items: center;
     }
-  }
 
-  .info {
+    // background-color: $gray5;
-    display: grid;
+    width: max-content;
-    grid-template-columns: max-content 1fr;
+    padding: $small $medium;
-    gap: 1rem;
+    margin: 0 auto;
 
     img {
-      height: 6rem;
+      height: 2.75rem;
-      width: auto;
+      width: 100%;
+      aspect-ratio: 1;
+      object-fit: cover;
+      cursor: pointer;
     }
 
-    .tags {
+    .info {
-      display: flex;
+      width: 30rem;
-      flex-direction: column;
+      // width: 100%;
-      justify-content: flex-end;
-      gap: $smaller;
 
-      .np-title {
+      .with-title {
-        font-size: 1.15rem;
+        display: grid;
-        font-weight: bold;
+        grid-template-columns: max-content 1fr max-content;
+        align-items: flex-end;
+        gap: $smaller;
       }
 
-      .np-artist {
+      .time {
-        opacity: 0.75;
+        font-size: 12px;
-        font-size: 0.9rem;
+        height: fit-content;
+        width: 3rem;
+
+        span {
+          background-color: $gray3;
+          border-radius: $smaller;
+          padding: 0 $smaller;
+        }
       }
+
+      .time-full {
+        text-align: end;
+      }
+
+      .tags {
+        font-size: small;
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        place-items: center;
+
+        .title {
+          font-weight: bold;
+        }
+
+        .artist {
+          opacity: 0.75;
+          margin-bottom: -$smaller;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .buttons {
+      width: 9rem;
     }
   }
+  // width: 100%;
+
+  // .time {
+  //   display: grid;
+  //   grid-template-columns: repeat(3, 1fr);
+  //   align-items: center;
+
+  //   .full {
+  //     text-align: end;
+  //   }
+  // }
+
+  // .info {
+  //   display: grid;
+  //   grid-template-columns: max-content 1fr;
+  //   gap: 1rem;
+
+  //   img {
+  //     height: 6rem;
+  //     width: auto;
+  //   }
+
+  //   .tags {
+  //     display: flex;
+  //     flex-direction: column;
+  //     justify-content: flex-end;
+  //     gap: $smaller;
+
+  //     .np-title {
+  //       font-size: 1.15rem;
+  //       font-weight: bold;
+  //     }
+
+  //     .np-artist {
+  //       opacity: 0.75;
+  //       font-size: 0.9rem;
+  //     }
+  //   }
+  // }
 }
 </style>

src/components/shared/ArtistName.vue

@@ -5,6 +5,7 @@
     class="ellip"
     :style="{
       fontSize: small ? '0.85rem' : smaller ? 'small' : '',
+      padding: '0 .25rem'
     }"
   >
     <div v-if="artists === null || artists.length === 0">

src/layouts/HeaderAndVList.vue

@@ -2,7 +2,7 @@
   <div class="header-list-layout">
     <div
       v-bind="containerProps"
-      style="height: calc(100vh - 4.25rem)"
+      style="height: calc(100vh - 8.75rem)"
       :style="{ paddingTop: !no_header ? headerHeight - 64 + 16 + 'px' : 0 }"
       @scroll="handleScroll"
     >