fix app grid layout issues

+ fully move now playing to bottom bar
+ add hover state to playlist card
+ handle playing tracks from queue page

src/App.vue

@@ -7,9 +7,8 @@
     id="app-grid"
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
-      disableSidebar: !settings.use_sidebar,
+      noSidebar: !settings.use_sidebar || !xl,
       extendWidth: settings.extend_width && settings.extend_width_enabled,
-      isSmall: !xl,
       addBorderRight: xxl && !settings.extend_width,
     }"
   >
@@ -18,9 +17,9 @@
     <div id="acontent" v-element-size="updateContentElemSize">
       <router-view />
     </div>
-    <NowPlayingRight />
     <!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
     <RightSideBar v-if="settings.use_sidebar && xl" />
+    <NowPlayingRight />
   </section>
 </template>
 

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

@@ -1,99 +1,31 @@
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
-  grid-template-rows: 43px calc(100vh - (6.5rem + 13px)) max-content;
+  grid-template-rows: max-content 1fr 5rem;
   grid-template-areas:
     "l-sidebar nav r-sidebar"
     "l-sidebar content r-sidebar"
     "bottombar bottombar bottombar";
-  height: 100%;
+
   gap: 0 1.5rem;
-  padding: $small 0;
-  // margin: 0 auto;
-  margin-top: -$small;
-  padding-top: $small;
-}
-
-#app-grid.extendWidth {
-  padding-right: 0;
-  border-right: none;
-  max-width: 100%;
-}
-
-// #app-grid.addBorderRight {
-//   // border-right: solid 1px $gray4;
-//   // padding-right: $medium;
-// }
-
-#app-grid.isSmall {
-  grid-template-columns: min-content 1fr;
-  grid-template-areas:
-    "l-sidebar nav"
-    "l-sidebar content"
-    "bottombar bottombar";
-}
-
-#app-grid.showAltNP {
-  @include tablet-landscape {
-    grid-template-areas:
-      "l-sidebar nav"
-      "l-sidebar content"
-      "bottombar bottombar";
-  }
-}
-
-#app-grid.disableSidebar {
-  grid-template-columns: min-content 1fr;
-  grid-template-areas:
-    "l-sidebar nav"
-    "l-sidebar content"
-    "bottombar bottombar";
+  height: 100%;
 }
 
 #acontent {
   grid-area: content;
-  // margin-right: calc(0rem - ($medium + 2px));
-  // padding-right: calc($medium);
-  // height: 100%;
+  margin-right: calc(0rem - ($medium + 2px));
+  padding-right: calc($medium);
 
-  overflow: auto;
-
-
-  .nav {
-    margin: $small;
-    width: calc(100% - 1rem);
-  }
-}
-
-#app-grid.isSmall,
-#app-grid.disableSidebar {
-  #acontent {
-    margin-right: -$small;
-    padding-right: calc($small - 1px);
-
-    .search-view {
-      margin-right: -0.8rem;
-    }
-  }
-}
-
-#tabs {
-  grid-area: tabs;
-  height: 3.5rem;
-  margin-top: -$small;
+  overflow: hidden;
 }
 
 .r-sidebar {
   grid-area: r-sidebar;
 }
 
-// #gsearch-input {
-//   // display: none !important;
-//   grid-area: search-input;
-// }
-
 .topnav {
   grid-area: nav;
+  margin: 1rem 0;
 }
 
 .l-sidebar {
@@ -101,14 +33,41 @@
   grid-area: l-sidebar;
   display: grid;
   grid-template-rows: 1fr max-content;
-  background-color: rgb(22, 22, 22);
-  height: 100vh;
-  margin-top: -$small;
-  // margin-left: -$small;
+  border-top: none !important;
+  border-bottom: none !important;
 }
 
 .b-bar {
   grid-area: bottombar;
-  width: 100%;
-  margin-bottom: -$small;
+}
+
+// ====== MODIFIERS =======
+
+#app-grid.extendWidth {
+  padding-right: 0;
+  border-right: none;
+  max-width: 100%;
+}
+
+#app-grid.noSidebar {
+  grid-template-columns: min-content 1fr;
+  grid-template-areas:
+    "l-sidebar nav"
+    "l-sidebar content"
+    "bottombar bottombar";
+
+  #acontent {
+    margin-right: 0 !important;
+    padding-right: 1rem !important;
+  }
+
+  .topnav {
+    //reduce width to match #acontent
+    width: calc(100% - 1rem);
+  }
+
+  // show scrollbars on search page
+  .search-view {
+    margin-right: -1rem;
+  }
 }

src/assets/scss/Global/index.scss

@@ -28,9 +28,10 @@ body {
     "Segoe UI Symbol";
   font-size: 1rem;
   image-rendering: -webkit-optimize-contrast;
-  height: calc(100vh - 1rem);
-  width: calc(100vw - 1.5rem);
+  height: 100vh;
+  width: 100vw;
   overflow: hidden;
+  margin: 0;
 
   #app {
     width: 100%;

src/components/LeftSidebar/NP/HotKeys.vue

@@ -27,7 +27,7 @@ const q = useQStore();
 <style lang="scss">
 .hotkeys {
   display: grid;
-  grid-template-columns: repeat(3, 2rem);
+  grid-template-columns: 2rem 4rem 2rem;
   gap: 1rem;
   width: 100%;
 

src/components/LeftSidebar/NP/SongCard.vue

@@ -1,39 +1,21 @@
 <template>
   <div class="sidebar-songcard">
-    <div class="art">
-      <router-link
-        :to="{
-          name: 'AlbumView',
-          params: {
-            hash: track?.albumhash ? track.albumhash : ' ',
-          },
-        }"
-      >
-        <img
-          :src="imguri + track?.image"
-          alt=""
-          class="l-image rounded force-lm"
-        />
-      </router-link>
-      <div id="bitrate" v-if="track?.bitrate">
-        {{ track.filetype }}• {{ track.bitrate }}
-      </div>
-      <div class="heart rounded-sm" @click="heartClicked = !heartClicked">
-        <HeartSvg v-if="!heartClicked" />
-        <HeartFilledSvg v-else />
-      </div>
-    </div>
-
-    <div class="bottom">
-      <div class="title ellip t-center" v-tooltip>
-        {{ track?.title || "♥ Hello ♥" }}
-      </div>
-      <ArtistName
-        :artists="track?.artist || []"
-        :albumartist="track?.albumartist || 'Play something'"
-        :small="true"
-        class="artists"
+    <router-link
+      :to="{
+        name: 'AlbumView',
+        params: {
+          hash: track?.albumhash ? track.albumhash : ' ',
+        },
+      }"
+    >
+      <img
+        :src="imguri + track?.image"
+        alt=""
+        class="l-image rounded force-lm"
       />
+    </router-link>
+    <div id="bitrate" v-if="track?.bitrate" title="file type • bitrate">
+      {{ track.filetype }} • {{ track.bitrate }}
     </div>
   </div>
 </template>
@@ -43,78 +25,37 @@ import { ref } from "vue";
 
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
-import ArtistName from "@/components/shared/ArtistName.vue";
-
-import HeartSvg from "@/assets/icons/heart.svg";
-import HeartFilledSvg from "@/assets/icons/heart.fill.svg";
 
 defineProps<{
   track: Track | null;
 }>();
 
-const heartClicked = ref<boolean>(false);
-
 const imguri = paths.images.thumb.large;
 </script>
 
 <style lang="scss">
 .sidebar-songcard {
-  .art {
-    width: 100%;
-    aspect-ratio: 1;
-    place-items: center;
-    margin-bottom: $small;
-    position: relative;
-
-    .heart {
-      position: absolute;
-      bottom: -$smaller;
-      right: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: $smaller;
-    }
-
-    img {
-      width: 100%;
-      height: auto;
-      aspect-ratio: 1;
-      object-fit: cover;
-      cursor: pointer;
-      margin-bottom: 2rem;
-    }
-
-    #bitrate {
-      position: absolute;
-      font-size: 0.75rem;
-      width: max-content;
-      padding: 0.2rem 0.35rem;
-      bottom: $smaller;
-      left: 0;
-      background-color: $gray4;
-      border-radius: $smaller;
-      text-transform: uppercase;
-    }
-  }
-
-  .bottom {
-    display: grid;
-    gap: $smaller;
-  }
-
-  .title {
-    font-weight: 900;
-    margin: 0 auto;
-  }
+  width: 100%;
+  position: relative;
   
-  .artists {
-    opacity: 0.5;
-    margin: 0 auto;
+  img {
+    cursor: pointer;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
 
-    &:hover {
-      text-decoration: underline 1px !important;
-    }
+  #bitrate {
+    position: absolute;
+    font-size: 0.75rem;
+    width: max-content;
+    padding: 0.2rem 0.35rem;
+    bottom: $medium;
+    left: $small;
+    background-color: $gray4;
+    border-radius: $smaller;
+    text-transform: uppercase;
   }
 }
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -11,7 +11,12 @@
           separator: menu.separator,
         }"
       ></div>
-      <div class="nav-button" id="home-button" v-else>
+      <div
+        class="nav-button"
+        :class="{ active: $route.name === menu.route_name }"
+        id="home-button"
+        v-else
+      >
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -69,16 +74,27 @@ const menus = [
 .side-nav-container {
   text-transform: capitalize;
   margin-top: 1rem;
+  // background-color: rgba(255, 255, 255, 0.075);
+  // padding: $small;
 
   .nav-button {
-    border-radius: $small;
+    border-radius: $medium;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     padding: $small 0;
+    position: relative;
+
+    &.active::before {
+      content: "•";
+      position: absolute;
+      left: -$small;
+      top: $medium;
+      opacity: 0.75;
+    }
 
     &:hover {
-      background-color: $gray3;
+      background-color: $darkestblue;
     }
 
     .in {

src/components/LeftSidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l-sidebar noscroll">
+  <div class="l-sidebar noscroll border">
     <div class="withlogo">
       <Logo />
       <Navigation />

src/components/LeftSidebar/nowPlaying.vue

@@ -1,67 +1,17 @@
 <template>
   <div class="now-playing-card t-center rounded">
     <SongCard :track="queue.currenttrack" />
-    <div class="l-track-time">
-      <span class="rounded">{{ formatSeconds(duration.current) }}</span>
-      <!-- <HeartSvg /> -->
-      <span class="rounded">{{ formatSeconds(duration.full) }}</span>
-    </div>
-    <Progress />
-    <HotKeys />
   </div>
 </template>
 
 <script setup lang="ts">
 import useQStore from "../../stores/queue";
-import { formatSeconds } from "@/utils";
-
-import HotKeys from "./NP/HotKeys.vue";
-import Progress from "./NP/Progress.vue";
 import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
-const { duration } = queue;
 </script>
 <style lang="scss">
 .now-playing-card {
   padding: 1rem;
-  width: 100%;
-  display: grid;
-  grid-template-rows: 1fr max-content max-content max-content;
-  gap: 1rem;
-
-  .l-track-time {
-    display: flex;
-    justify-content: space-between;
-    opacity: 0.8;
-
-    span {
-      font-size: small;
-      padding: $smaller;
-    }
-  }
-
-  &:hover {
-    ::-moz-range-thumb {
-      height: 0.8rem;
-    }
-
-    ::-webkit-slider-thumb {
-      height: 0.8rem;
-    }
-
-    ::-ms-thumb {
-      height: 0.8rem;
-    }
-  }
-
-  .context_on {
-    background-color: $accent;
-  }
-
-  .menu {
-    right: $small;
-    transform: rotate(90deg);
-  }
 }
 </style>

src/components/PlaylistsList/PlaylistCard.vue

@@ -38,7 +38,7 @@ const props = defineProps<{
 
   &:hover {
     transition: all .25s ease;
-    background-color: $darkestblue;
+    background-color: $gray3;
     background-blend-mode: screen;
   }
 

src/components/RightSideBar/Main.vue

@@ -35,21 +35,16 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
-  overflow: hidden;
-  // padding: $small;
   display: grid;
   grid-template-rows: max-content 1fr;
-  // gap: 1rem;
-  margin-top: -$small;
-  border-top: none;
-  border-bottom: none;
   background-color: rgb(22, 22, 22);
   padding-bottom: 1rem;
+  border-top: none;
+  border-bottom: none;
 
   .gsearch-input {
-    height: 42px;
-    margin: $small;
-    margin-bottom: 1rem;
+    height: 2.5rem;
+    margin: 1rem;
   }
 
   .r-content {

src/components/RightSideBar/NowPlayingRight.vue

@@ -74,7 +74,7 @@ import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import HeartSvg from "../../assets/icons/heart.svg";
-import PlusSvg from "../../assets/icons/plus.svg";
+// import PlusSvg from "../../assets/icons/plus.svg";
 
 const queue = useQStore();
 const settings = useSettingsStore();
@@ -82,13 +82,28 @@ const settings = useSettingsStore();
 
 <style lang="scss">
 .b-bar {
-  height: 65px;
+  // height: 100%;
   background-color: rgb(22, 22, 22);
   display: grid;
   align-items: center;
   z-index: 1;
   border-top: solid 1px $gray3;
 
+
+  &:hover {
+    ::-moz-range-thumb {
+      height: 0.8rem;
+    }
+
+    ::-webkit-slider-thumb {
+      height: 0.8rem;
+    }
+
+    ::-ms-thumb {
+      height: 0.8rem;
+    }
+  }
+
   .centered {
     width: 50rem;
     display: grid;
@@ -181,7 +196,6 @@ const settings = useSettingsStore();
     }
 
     .buttons {
-      // width: 10rem;
       height: 3.25rem;
       margin-top: -$smaller;
       background-color: rgba(255, 255, 255, 0.048);

src/components/shared/SongItem.vue

@@ -124,7 +124,7 @@ function showMenu(e: Event) {
   }
 
   &:hover {
-    background-color: $gray4;
+    background-color: $gray5;
 
     .index {
       .text {

src/layouts/HeaderAndVList.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- JCOMMENT: 64 is single item height, 24 is gap height -->
+  <!-- JUST A COMMENT: 64 is single item height, 24 is gap height -->
   <div class="header-list-layout">
     <div
       v-bind="containerProps"
-      style="height: calc(100vh - 8.5rem); margin-top: 1rem"
+      style="height: 100%;"
       :style="{ paddingTop: !no_header ? headerHeight - 64 + 24 + 'px' : 0 }"
       @scroll="handleScroll"
     >
@@ -61,6 +61,7 @@ import useQStore from "@/stores/queue";
 
 import SongItem from "@/components/shared/SongItem.vue";
 
+// EMITS & PROPS
 const emit = defineEmits<{
   (e: "playFromPage", index: number): void;
 }>();
@@ -71,14 +72,14 @@ const props = defineProps<{
   no_header?: boolean;
 }>();
 
+// QUEUE
 const queue = useQStore();
-const source = computed(() => props.tracks);
+function updateQueue(index: number) {
+  emit("playFromPage", index);
+}
 
-// element refs + sizes
-const header = ref<HTMLElement>();
+// SCROLLABLE AREA
 const scrollable = ref<HTMLElement>();
-
-const { height: headerHeight } = useElementSize(header);
 const { width } = useElementSize(scrollable);
 
 const brk = {
@@ -88,8 +89,9 @@ const brk = {
 
 const isSmall = computed(() => width.value < brk.sm);
 const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
-// ---
 
+// VIRTUAL LIST
+const source = computed(() => props.tracks);
 const {
   list: tracks,
   containerProps,
@@ -99,9 +101,9 @@ const {
   overscan: 15,
 });
 
-function updateQueue(index: number) {
-  emit("playFromPage", index);
-}
+// HEADER
+const header = ref<HTMLElement>();
+const { height: headerHeight } = useElementSize(header);
 
 function handleScroll(e: Event) {
   const scrollTop = (e.target as HTMLElement).scrollTop;
@@ -117,10 +119,19 @@ function handleScroll(e: Event) {
 <style lang="scss">
 .header-list-layout {
   margin-right: calc(0rem - ($medium));
+  height: 100%;
 
   .scrollable {
     padding-right: calc(1rem - $small + 2px);
     scrollbar-width: thin;
+
+    .current {
+      background-color: $gray5;
+
+      a {
+        color: inherit;
+      }
+    }
   }
 
   .scrollable.isSmall {

src/views/QueueView.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="queue-view">
-    <Layout :tracks="queue.tracklist" :no_header="true"> </Layout>
+  <div class="queue-view" style="height: 100%">
+    <Layout
+      :tracks="queue.tracklist"
+      :no_header="true"
+      @playFromPage="playFromQueue"
+    >
+    </Layout>
   </div>
 </template>
 
@@ -9,4 +14,8 @@ import useQStore from "@/stores/queue";
 import Layout from "@/layouts/HeaderAndVList.vue";
 
 const queue = useQStore();
+
+function playFromQueue(index: number) {
+  queue.play(index);
+}
 </script>