Merge branch 'add-drag,-drop-and-reorder'

Author: cwilvx

src/components/AlbumView/ArtistAlbums.vue

@@ -53,7 +53,7 @@ defineProps<{
   h3 {
     display: grid;
     grid-template-columns: 1fr max-content;
-    align-items: center;
+    align-items: baseline;
     padding: 0 $medium;
     margin-bottom: $small;
   }

src/components/AlbumView/Header.vue

@@ -3,14 +3,18 @@
     class="album-header-ambient rounded"
     style="height: 100%; width: 100%"
     :style="{
-      boxShadow: album.colors[0] ? `0 .5rem 2rem ${album.colors[0]}` : '0 .5rem 2rem black',
+      boxShadow: album.colors[0]
+        ? `0 .5rem 2rem ${album.colors[0]}`
+        : '0 .5rem 2rem black',
     }"
   ></div>
   <div
     class="a-header rounded"
     ref="albumheaderthing"
     :style="{
-      backgroundColor: album.colors[0] ? getBackgroundColor(album.colors[0]) : '',
+      backgroundColor: album.colors[0]
+        ? getBackgroundColor(album.colors[0])
+        : '',
       height: `${heightLarge ? '24rem' : '18rem'}`,
     }"
   >
@@ -59,7 +63,7 @@
       </div>
       <Motion
         class="art"
-        v-if="!isMedium"
+        v-if="!isMedium && !isSmall"
         :initial="{ opacity: 0, x: 10 }"
         :animate="{
           opacity: 1,
@@ -78,10 +82,14 @@
         >
           <img
             :src="imguri.artist.small + a.image"
-            class="shadow-lg circular"
+            class="circular"
             loading="lazy"
             :title="a.name"
-            :style="{ border: `solid 2px ${album.colors[0]}` }"
+            :style="{
+              border: `solid 4px ${
+                album.colors[0] ? getBackgroundColor(album.colors[0]) : ''
+              }`,
+            }"
           />
         </RouterLink>
       </Motion>
@@ -90,9 +98,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { storeToRefs } from "pinia";
 import { Routes } from "@/router";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
 import { paths } from "@/config";
 import useNavStore from "@/stores/nav";
@@ -101,18 +109,18 @@ import {
   albumHeaderSmall,
   heightLarge,
   isMedium,
+  isSmall,
 } from "@/stores/content-width";
 
-import { getTextColor, getBackgroundColor } from "@/utils/colortools/shift";
+import { getBackgroundColor, getTextColor } from "@/utils/colortools/shift";
 
-import { isLight } from "@/composables/colors/album";
-import { formatSeconds, useVisibility } from "@/utils";
 import { favType, playSources } from "@/composables/enums";
+import { formatSeconds, useVisibility } from "@/utils";
 
+import ArtistName from "@/components/shared/ArtistName.vue";
+import favoriteHandler from "@/composables/favoriteHandler";
 import HeartSvg from "../shared/HeartSvg.vue";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
-import favoriteHandler from "@/composables/favoriteHandler";
-import ArtistName from "@/components/shared/ArtistName.vue";
 
 const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
@@ -219,9 +227,14 @@ function handleFav() {
       max-width: 10rem;
       flex-wrap: wrap;
 
+      .shadow-inset {
+        height: max-content;
+      }
+
       img {
         height: 3rem;
         background-color: $gray;
+        margin-left: -1.5rem;
       }
 
       a {
@@ -230,7 +243,10 @@ function handleFav() {
 
       a:hover {
         img {
-          border: solid 2px white !important;
+          z-index: 100;
+          border-color: $pink !important;
+          // margin-right: 1.5rem;
+          // border: solid 2px white !important;
         }
       }
     }

src/components/ArtistView/TopTracks.vue

@@ -39,6 +39,7 @@ defineProps<{
 
   .section-title {
     margin-left: 0;
+    align-items: baseline;
   }
 
   .error {

src/components/BottomBar/Left.vue

@@ -34,8 +34,11 @@
         "
         class="artist"
       />
-      <div v-tooltip class="title ellip">
-        {{ queue.currenttrack?.title || "Hello there" }}
+      <div v-tooltip class="title">
+        <span class="ellip">
+          {{ queue.currenttrack?.title || "Hello there" }}
+        </span>
+        <MasterFlag :bitrate="queue.currenttrack?.bitrate || 0" />
       </div>
     </div>
   </div>
@@ -51,6 +54,7 @@ import useColorStore from "@/stores/colors";
 import useSettingsStore from "@/stores/settings";
 import useQStore from "@/stores/queue";
 import HeartSvg from "../shared/HeartSvg.vue";
+import MasterFlag from "../shared/MasterFlag.vue";
 
 const queue = useQStore();
 const settings = useSettingsStore();
@@ -96,6 +100,8 @@ const emit = defineEmits<{
     .title {
       color: $white;
       font-weight: bold;
+      display: flex;
+      align-items: center;
     }
   }
 }

src/components/LeftSidebar/NP/SongCard.vue

@@ -9,7 +9,7 @@
     }"
     :exit="{ opacity: 0, scale: 0.9 }"
   >
-    <div class="sidebar-songcard rounded" v-wave>
+    <div class="sidebar-songcard rounded-sm" v-wave>
       <router-link
         :to="{
           name: 'AlbumView',
@@ -21,7 +21,7 @@
         <img
           :src="imguri + q.currenttrack?.image"
           alt=""
-          class="l-image rounded force-lm"
+          class="l-image rounded-sm force-lm"
         />
       </router-link>
       <div

src/components/PlaylistView/ArtistsList.vue

@@ -36,7 +36,7 @@ defineProps<{
     display: flex;
     justify-content: space-between;
     padding-left: $medium;
-    align-items: center;
+    align-items: baseline;
     margin-bottom: $small;
   }
 

src/components/SettingsView/Content.vue

@@ -20,7 +20,7 @@ defineProps<{
 <style lang="scss">
 .settingscontent {
   width: 100%;
-  // max-width: 40rem;
   margin: 0 auto;
+  padding-bottom: 2rem;
 }
 </style>

src/components/SettingsView/Group.vue

@@ -26,12 +26,12 @@
           <Switch
             v-if="setting.type == SettingType.binary"
             @click="setting.action()"
-            :state="setting.source && setting.source()"
+            :state="setting.state && setting.state()"
           />
           <Select
             v-if="setting.type === SettingType.select"
             :options="setting.options"
-            :source="setting.source !== null ? setting.source : () => ''"
+            :source="setting.state !== null ? setting.state : () => ''"
             :setterFn="setting.action"
           />
           <button
@@ -44,7 +44,7 @@
 
         <List
           icon="folder"
-          :items="setting.source !== null ? setting.source() : []"
+          :items="setting.state !== null ? setting.state() : []"
           v-if="setting.type === SettingType.list"
         />
       </div>

src/components/nav/Titles/PlaylistsTitle.vue

@@ -19,6 +19,7 @@ const { showNewPlaylistModal } = useModalStore();
 .playlists-nav {
   display: grid;
   grid-template-columns: 1fr max-content;
+  align-items: center;
 
   button {
     padding-right: $small;

src/components/nav/Titles/SearchTitle.vue

@@ -33,6 +33,7 @@ const tabs = ["tracks", "albums", "artists"];
   display: grid;
   grid-template-columns: 1fr max-content;
   gap: 1rem;
+
   
   .buttons-area {
     position: relative;