feat: separate discs in album page

+ remove tooltip markup
+ refactor css classnames

src/components/AlbumView/AlbumDiscBar.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="album_disc_header no-select"
+    v-if="album_disc.is_album_disc_number"
+  >
+    <div class="disc_number">Disc {{ album_disc.album_page_disc_number }}</div>
+    <div></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AlbumDisc } from "@/interfaces";
+
+defineProps<{
+  album_disc: AlbumDisc;
+}>();
+</script>
+
+<style lang="scss">
+.album_disc_header {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: center;
+  padding-left: 1rem;
+  height: $song-item-height;
+
+  .disc_number {
+    font-size: $medium;
+    opacity: 0.75;
+  }
+}
+</style>

src/components/AlbumView/Header.vue

@@ -10,7 +10,7 @@
         : '',
     }"
   >
-    <div class="big-img noscroll" :class="{ imgSmall: widthIsSmall }">
+    <div class="big-img no-scroll" :class="{ imgSmall: widthIsSmall }">
       <img :src="imguri.thumb.large + album.image" class="rounded" />
     </div>
     <div
@@ -59,13 +59,13 @@
 import { ref } from "vue";
 
 import { paths } from "@/config";
-import useNavStore from "@/stores/nav";
-import { AlbumInfo } from "../../interfaces";
-import useAlbumStore from "@/stores/pages/album";
-import { playSources } from "../../composables/enums";
-import { useVisibility, formatSeconds } from "@/utils";
-import { getButtonColor, isLight } from "../../composables/colors/album";
 import { isSmall as widthIsSmall } from "@/stores/content-width";
+import useNavStore from "@/stores/nav";
+import useAlbumStore from "@/stores/pages/album";
+import { formatSeconds, useVisibility } from "@/utils";
+import { getButtonColor, isLight } from "../../composables/colors/album";
+import { playSources } from "../../composables/enums";
+import { AlbumInfo } from "../../interfaces";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 

src/components/BottomBar.vue

@@ -71,9 +71,9 @@ import { formatSeconds } from "@/utils";
 import { Routes } from "@/composables/enums";
 import useSettingsStore from "@/stores/settings";
 
-import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";
 
 import HeartSvg from "@/assets/icons/heart.svg";
 // import PlusSvg from "@/assets/icons/plus.svg";
@@ -159,7 +159,7 @@ const settings = useSettingsStore();
       }
 
       .time {
-        font-size: 12px;
+        font-size: $medium;
         height: fit-content;
         width: 3rem;
 
@@ -187,7 +187,7 @@ const settings = useSettingsStore();
         .artist {
           opacity: 0.75;
           margin-bottom: -$smaller;
-          font-size: 12px;
+          font-size: $medium;
         }
       }
     }

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hotkeys rounded-sm noscroll">
+  <div class="hotkeys rounded-sm no-scroll">
     <button @click.prevent="q.playPrev">
       <PrevSvg />
     </button>
@@ -16,8 +16,7 @@
 <script setup lang="ts">
 import useQStore from "@/stores/queue";
 
-import NextSvg from "../../../assets/icons/next.svg";
-import PrevSvg from "../../../assets/icons/next.svg";
+import { default as NextSvg, default as PrevSvg } from "../../../assets/icons/next.svg";
 import PauseSvg from "../../../assets/icons/pause.svg";
 import PlaySvg from "../../../assets/icons/play.svg";
 

src/components/LeftSidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-auto-animate class="l-sidebar noscroll">
+  <div v-auto-animate class="l-sidebar no-scroll">
     <div class="withlogo">
       <Logo />
       <Navigation />
@@ -11,8 +11,8 @@
 
 <script setup lang="ts">
 import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import NowPlayingImage from "./NowPlayingImg.vue";
 import Logo from "@/components/Logo.vue";
+import NowPlayingImage from "./NowPlayingImg.vue";
 
 import useSettingsStore from "@/stores/settings";
 

src/components/PlaylistView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-header image rounded noscroll"
+    class="p-header image rounded no-scroll"
     ref="playlistheader"
     :style="[
       {

src/components/PlaylistsList/PlaylistCard.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: playlist.playlistid } }"
-    class="p-card rounded noscroll"
+    class="p-card rounded no-scroll"
   >
     <img
       :src="imguri + playlist.thumb"

src/components/RightSideBar/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="r-sidebar">
     <SearchInput />
-    <div v-auto-animate class="r-content noscroll" >
+    <div v-auto-animate class="r-content no-scroll" >
       <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
         <DashBoard />
       </div>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -2,7 +2,7 @@
   <div id="right-tabs" class="rounded">
     <div class="tab-buttons-wrapper">
       <Teleport :disabled="!isOnSearchPage" to="#nav-tab-headers">
-        <div class="tabheaders rounded-sm noscroll">
+        <div class="tabheaders rounded-sm no-scroll">
           <div
             class="tab"
             v-for="tab in tabs"

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="tracks-results" class="noscroll">
+  <div id="tracks-results" class="no-scroll">
     <div v-if="search.tracks.value.length">
       <TrackComponent
         v-for="(track, index) in search.tracks.value"

src/components/modals/updatePlaylist.vue

@@ -159,22 +159,5 @@ function update_playlist(e: Event) {
       background-color: $gray4;
     }
   }
-
-  textarea {
-    width: 100%;
-    max-width: 28rem;
-    max-height: 5rem;
-    color: $white;
-    background-color: $gray2;
-    border: none;
-    font-family: inherit;
-    padding: $small;
-    outline: none;
-    margin: $small 0;
-
-    &:focus {
-      outline: solid 2px $gray1;
-    }
-  }
 }
 </style>

src/components/nav/Search.vue

@@ -1,39 +0,0 @@
-<template>
-  <div id="nav-search">
-    <form>
-      <input
-        type="search"
-        name=""
-        id=""
-        placeholder="Search here"
-        class="rounded"
-      />
-    </form>
-  </div>
-</template>
-
-<style lang="scss">
-#nav-search {
-  // border: solid 1px $gray2;
-
-  form {
-    display: flex;
-    gap: $small;
-    padding: 0;
-    margin: 0;
-
-    input[type="search"] {
-      background-color: $gray5;
-      border: none;
-      padding: $small;
-      width: 100%;
-      color: $white;
-      font-size: 1rem;
-
-      &:focus {
-        outline: solid $accent;
-      }
-    }
-  }
-}
-</style>

src/components/nav/Titles/QueueTitle.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="nav-queue-title">
-    <div class="first noscroll">
+    <div class="first no-scroll">
       <router-link :to="(location as RouteLocationRaw)">
-        <button>Go to source</button>
+        <button class="btn-active">Go to source</button>
       </router-link>
       <div class="playing-from">
         <div class="border rounded-sm pad-sm">

src/components/shared/SongItem.vue

@@ -12,11 +12,8 @@
       <HeartSvg />
     </div>
     <div class="flex">
-      <div v-auto-animate @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
-        <img
-          :src="imguri + track.image"
-          class="album-art image rounded-sm"
-        />
+      <div @click.prevent="emitUpdate" class="thumbnail">
+        <img :src="imguri + track.image" class="album-art image rounded-sm" />
         <div
           class="now-playing-track-indicator image"
           v-if="isCurrent"
@@ -24,11 +21,7 @@
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div
-          class="title ellip"
-          @click.pre@dblclick.prevent="emitUpdate"
-          ref="artisttitle"
-        >
+        <div class="title ellip" @click.prevent="emitUpdate" ref="artisttitle">
           {{ track.title }}
         </div>
         <div class="isSmallArtists" style="display: none">
@@ -58,7 +51,7 @@
     <div class="song-duration">{{ formatSeconds(track.duration) }}</div>
     <div
       class="options-icon circular"
-      :class="{ options_button_clicked }"
+      :class="{ 'btn-active': options_button_clicked }"
       @click.stop="showMenu"
       @dblclick.stop="() => {}"
     >
@@ -72,7 +65,7 @@ import { ref } from "vue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
-import { Track } from "@/interfaces";
+import { AlbumDisc, Track } from "@/interfaces";
 import { formatSeconds } from "@/utils";
 
 import HeartSvg from "@/assets/icons/heart.svg";
@@ -87,7 +80,7 @@ const artisttitle = ref<HTMLElement | null>(null);
 
 const props = defineProps<{
   track: Track;
-  index: number | string;
+  index: Number | String;
   isCurrent: Boolean;
   isCurrentPlaying: Boolean;
   no_album?: Boolean;
@@ -107,12 +100,14 @@ function showMenu(e: Event) {
 </script>
 
 <style lang="scss">
+
+
 .songlist-item {
   display: grid;
   grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2.5rem 2.5rem;
   align-items: center;
   justify-content: flex-start;
-  height: 3.75rem;
+  height: $song-item-height;
   gap: 1rem;
   user-select: none;
   padding-left: $small;
@@ -190,16 +185,11 @@ function showMenu(e: Event) {
     width: 2rem;
 
     svg {
-      transition: all 0.2s ease-in;
-      stroke: $track-btn-svg;
-
-      circle {
-        fill: $track-btn-svg;
-      }
+      stroke: $white;
     }
 
     &:hover {
-      background-color: $gray5;
+      background-color: $darkestblue;
     }
   }