make songcard less rounded

+ show track bitrate on master flag hover

package.json

@@ -27,7 +27,7 @@
     "vue-router": "^4.1.3",
     "vue-template-compiler": "^2.0.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",
-    "webpack": "^5.76.0"
+    "webpack": "^5.74.0"
   },
   "devDependencies": {
     "@nextcss/color-tools": "^1.0.7",

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;

src/components/nav/Titles/SettingsTitle.vue

@@ -14,5 +14,6 @@ import Nav from "@/components/SettingsView/Nav.vue";
 .settings-nav {
   display: grid;
   grid-template-columns: 1fr max-content;
+  align-items: center;
 }
 </style>

src/components/shared/MasterFlag.vue

@@ -1,7 +1,22 @@
 <template>
-  <span class="master-flag" title="Master audio file">M</span>
+  <span
+    v-if="store.show_master_quality_flag && bitrate > 1024"
+    class="master-flag"
+    :title="'Master audio bitrate - ' + `${bitrate} Kbps`"
+    >M</span
+  >
 </template>
 
+<script setup lang="ts">
+import useSettingsStore from "@/stores/settings";
+
+defineProps<{
+  bitrate: number;
+}>();
+
+const store = useSettingsStore();
+</script>
+
 <style lang="scss">
 .master-flag {
   font-size: 10px;

src/components/shared/SongItem.vue

@@ -33,7 +33,7 @@
           <span class="title ellip">
             {{ track.title }}
           </span>
-          <MasterFlag v-if="track.bitrate > 1024" />
+          <MasterFlag :bitrate="track.bitrate" />
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
@@ -169,37 +169,37 @@ onBeforeUnmount(() => {
   border: solid 1px transparent;
   position: relative;
 
-  .top-drop,
-  .bottom-drop {
-    display: flex;
-    align-items: center;
+  // .top-drop,
+  // .bottom-drop {
+  //   display: flex;
+  //   align-items: center;
 
-    z-index: 20;
-    position: absolute;
-    height: 32px;
-    width: 100%;
-    left: 0;
+  //   z-index: 20;
+  //   position: absolute;
+  //   height: 32px;
+  //   width: 100%;
+  //   left: 0;
 
-    &.active {
-      &::before {
-        content: "";
-        position: absolute;
-        height: 1px;
-        width: 100%;
-        background-color: $red;
-        left: 0;
-        top: 50%;
-      }
-    }
-  }
+  //   &.active {
+  //     &::before {
+  //       content: "";
+  //       position: absolute;
+  //       height: 1px;
+  //       width: 100%;
+  //       background-color: $red;
+  //       left: 0;
+  //       top: 50%;
+  //     }
+  //   }
+  // }
 
-  .top-drop {
-    top: -16px;
-  }
+  // .top-drop {
+  //   top: -16px;
+  // }
 
-  .bottom-drop {
-    bottom: -16px;
-  }
+  // .bottom-drop {
+  //   bottom: -16px;
+  // }
 
   .song-title {
     .with-flag {

src/components/shared/TrackItem.vue

@@ -23,8 +23,10 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip" v-tooltip>
-        {{ track.title }}
+      <div class="title" v-tooltip>
+        <span class="ellip">
+          {{ track.title }}
+        </span>
       </div>
       <hr />
       <div class="artist">
@@ -58,15 +60,17 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import DelSvg from "@/assets/icons/plus.svg";
-import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
-import ArtistName from "./ArtistName.vue";
-import HeartSvg from "./HeartSvg.vue";
-import favoriteHandler from "@/composables/favoriteHandler";
 import { favType } from "@/composables/enums";
+import favoriteHandler from "@/composables/favoriteHandler";
+import { showTrackContextMenu as showContext } from "@/composables/context";
+
+import HeartSvg from "./HeartSvg.vue";
+import MasterFlag from "./MasterFlag.vue";
+import ArtistName from "./ArtistName.vue";
+import DelSvg from "@/assets/icons/plus.svg";
 
 const props = defineProps<{
   track: Track;

src/interfaces/settings.ts

@@ -11,7 +11,7 @@ export interface Setting {
   options?: SettingOption[];
   inactive?: () => boolean;
   action: (arg0?: any) => void;
-  source: (() => any) | null;
+  state: (() => any) | null;
   button_text?: () => string;
   defaultAction?: () => void;
 }

src/settings/general/context-children-show-mode.ts

@@ -20,7 +20,7 @@ const context_children_show_mode: Setting = {
       value: mode.hover,
     },
   ],
-  source: () => settings().contextChildrenShowMode,
+  state: () => settings().contextChildrenShowMode,
   action: (value: mode) => settings().setContextChildrenShowMode(value),
   defaultAction: () => settings().toggleContextChildrenShowMode(),
 };

src/settings/general/extend-width.ts

@@ -9,7 +9,7 @@ const settings = useSettingsStore;
 const extend_to_full_width: Setting = {
   title: appWidthStrings.settings.extend,
   type: SettingType.binary,
-  source: () => settings().extend_width,
+  state: () => settings().extend_width,
   action: () => settings().toggleExtendWidth(),
   inactive: () => !settings().can_extend_width,
 };

src/settings/general/index.ts

@@ -5,6 +5,7 @@ import extendWidth from "./extend-width";
 import nowPlaying from "./now-playing-group";
 import sidebarSettings from "./sidebar";
 import rootDirSettings from "./root-dirs";
+import masterFlag from "./master-flag";
 
 const npStrings = strings.nowPlayingStrings;
 const rootRootStrings = strings.manageRootDirsStrings;
@@ -16,6 +17,7 @@ export default {
       settings: [
         ...sidebarSettings,
         ...extendWidth,
+        ...masterFlag,
         ...contextChildrenShowMode,
       ],
     },

src/settings/general/master-flag.ts

@@ -0,0 +1,16 @@
+import { SettingType } from "../enums";
+import { Setting } from "@/interfaces/settings";
+import { showMasterFlag } from "./../strings";
+
+import useSettingsStore from "@/stores/settings";
+
+const settings = useSettingsStore;
+
+const show_master_flag: Setting = {
+  title: showMasterFlag.settings.show_flag,
+  type: SettingType.binary,
+  state: () => settings().show_master_quality_flag,
+  action: () => settings().toggleShowMasterQualityFlag(),
+};
+
+export default [show_master_flag];

src/settings/general/now-playing-group.ts

@@ -9,7 +9,7 @@ const settings = useSettingsStore;
 const disable_np_img: Setting = {
   title: data.settings.album_art,
   type: SettingType.binary,
-  source: () => settings().use_np_img,
+  state: () => settings().use_np_img,
   action: () => settings().toggleUseNPImg(),
 };
 

src/settings/general/root-dirs.ts

@@ -11,7 +11,7 @@ const text = data.settings;
 const change_root_dirs: Setting = {
   title: text.change,
   type: SettingType.button,
-  source: null,
+  state: null,
   button_text: () =>
     `\xa0 \xa0 ${
       useSettingsStore().root_dirs.length ? "Modify" : "Configure"
@@ -22,7 +22,7 @@ const change_root_dirs: Setting = {
 const list_root_dirs: Setting = {
   title: text.list_root_dirs,
   type: SettingType.list,
-  source: () =>
+  state: () =>
     useSettingsStore().root_dirs.map((d) => ({
       title: d,
       buttontext: "remove",

src/settings/general/sidebar.ts

@@ -9,7 +9,7 @@ const settings = useSettingsStore;
 const use_sidebar: Setting = {
   title: sidebarStrings.settings.use_sidebar,
   type: SettingType.binary,
-  source: () => settings().use_sidebar,
+  state: () => settings().use_sidebar,
   action: () => settings().toggleDisableSidebar(),
 };
 

src/settings/strings.ts

@@ -35,6 +35,12 @@ export const contextChildrenShowModeStrings = <S>{
   },
 };
 
+export const showMasterFlag = <S>{
+  settings: {
+    show_flag: "Show M (Master) flag on track with bitrate higher than 1024 Kbps",
+  },
+};
+
 export const showFoldersAsStrings = <S>{
   settings: { show_folders_as: "Show folders as" },
 };

src/stores/settings/index.ts

@@ -15,6 +15,7 @@ export default defineStore("settings", {
     root_dir_set: false,
     root_dirs: <string[]>[],
     folder_list_mode: false,
+    show_master_quality_flag: true,
   }),
   actions: {
     toggleUseNPImg() {
@@ -61,6 +62,9 @@ export default defineStore("settings", {
     toggleFolderListMode() {
       this.folder_list_mode = !this.folder_list_mode;
     },
+    toggleShowMasterQualityFlag(){
+      this.show_master_quality_flag = !this.show_master_quality_flag
+    }
   },
   getters: {
     can_extend_width(): boolean {

src/views/Favorites.vue

@@ -103,6 +103,17 @@ async function handlePlay(index: number) {
 
     .artist-top-tracks {
       margin-top: 0;
+      padding-right: $small;
+
+      h3 {
+        padding-right: $smaller;
+      }
+    }
+  }
+
+  .fav-artists {
+    h3 {
+      padding-right: $medium;
     }
   }
 

yarn.lock

@@ -2008,10 +2008,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.76.0:
-  version "5.76.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.0.tgz#f9fb9fb8c4a7dbdcd0d56a98e56b8a942ee2692c"
-  integrity sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==
+webpack@^5.74.0:
+  version "5.75.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.75.0.tgz#1e440468647b2505860e94c9ff3e44d5b582c152"
+  integrity sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"