use v-auto-animate small parts of the UI

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^1.0.0-beta.3",
     "@popperjs/core": "^2.11.6",
     "@vueuse/components": "^9.2.0",
     "@vueuse/core": "^8.5.0",

src/App.vue

@@ -8,7 +8,7 @@
     :class="{
       noSidebar: !settings.use_sidebar || !xl,
       NoSideBorders: !xxl,
-      extendWidth: settings.extend_width && settings.extend_width_enabled,
+      extendWidth: settings.extend_width && settings.can_extend_width,
     }"
   >
     <LeftSidebar />
@@ -16,7 +16,6 @@
     <div id="acontent" v-element-size="updateContentElemSize">
       <router-view />
     </div>
-    <!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
     <RightSideBar v-if="settings.use_sidebar && xl" />
     <BottomBar />
   </section>

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

@@ -76,11 +76,6 @@ $g-border: solid 1px $gray5;
     //reduce width to match #acontent
     width: calc(100% - 1rem);
   }
-
-  // show scrollbars on search page
-  // .search-view {
-  //   margin-right: -1rem;
-  // }
 }
 
 #app-grid.NoSideBorders {

src/components/AlbumView/Header.vue

@@ -19,7 +19,7 @@
     >
       <div class="album-info">
         <div class="top">
-          <div class="h">
+          <div v-auto-animate class="h">
             <span v-if="album.is_soundtrack">Soundtrack</span>
             <span v-else-if="album.is_compilation">Compilation</span>
             <span v-else-if="album.is_single">Single</span>

src/components/BottomBar.vue

@@ -104,7 +104,6 @@ const settings = useSettingsStore();
   }
 
   .centered {
-    width: 50rem;
     display: grid;
     align-items: center;
     width: max-content;
@@ -150,8 +149,7 @@ const settings = useSettingsStore();
     }
 
     .info {
-      width: 30rem;
+      max-width: 30rem;
-      // width: 100%;
 
       .with-title {
         display: grid;
@@ -208,44 +206,5 @@ const settings = useSettingsStore();
     display: grid;
     place-content: end;
   }
-  // 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/LeftSidebar/NP/HotKeys.vue

@@ -3,7 +3,7 @@
     <button @click.prevent="q.playPrev">
       <PrevSvg />
     </button>
-    <button @click.prevent="q.playPause">
+    <button v-auto-animate @click.prevent="q.playPause">
       <PauseSvg v-if="q.playing" />
       <PlaySvg v-else />
     </button>

src/components/LeftSidebar/index.vue

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

src/components/RightSideBar/Main.vue

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

src/components/RightSideBar/Queue.vue

@@ -7,7 +7,7 @@
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
   >
-    <div class="inner" v-bind="wrapperProps">
+    <div class="inner" v-bind="wrapperProps" >
       <TrackItem
         style="height: 64px"
         v-for="t in tracks"

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="artists-results">
+  <div class="artists-results" v-auto-animate>
     <div
+      v-auto-animate
       class="search-results-grid"
       v-if="album_grid == true && search.albums.value.length"
     >
       <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
     </div>
     <div
+      v-auto-animate
       class="search-results-grid"
       v-else-if="!album_grid && search.artists.value.length"
     >

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -16,7 +16,7 @@
       </Teleport>
     </div>
 
-    <div id="tab-content">
+    <div id="tab-content" v-auto-animate>
       <slot />
     </div>
   </div>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tracks-results" class="noscroll">
-    <div v-if="search.tracks.value.length">
+    <div v-if="search.tracks.value.length" v-auto-animate>
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.trackid"

src/components/RightSideBar/SearchInput.vue

@@ -2,6 +2,7 @@
   <div class="gsearch-input">
     <div id="ginner" tabindex="0" ref="inputRef">
       <button
+        v-auto-animate
         :title="
           tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'
         "

src/components/nav/NavBar.vue

@@ -10,7 +10,10 @@
           v-if="$route.name == Routes.album || $route.name == Routes.playlist"
           :header_shown="nav.h_visible"
         />
-        <SettingsTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
+        <SettingsTitle
+          v-if="$route.name == Routes.settings"
+          :text="'Settings'"
+        />
         <FolderTitle v-if="$route.name == Routes.folder" :subPaths="subPaths" />
         <SearchTitle v-if="$route.name == Routes.search" />
         <PlaylistsTitle v-if="$route.name == Routes.playlists" />
@@ -43,7 +46,6 @@ const nav = useNavStore();
 
 const subPaths = ref<subPath[]>([]);
 
-
 watch(
   () => route.name,
   (newRoute) => {

src/components/nav/Titles/Folder.vue

@@ -121,13 +121,10 @@ onUpdated(() => {
           }
         }
 
-        // .inthisfolder > .text {
+        .inthisfolder > .text {
-        //   color: #fff;
+          background-color: $gray;
-        //   font-weight: bold;
+          transition: all 0.5s;
-        //   background-color: $gray;
+        }
-
-        //   transition: all 0.5s;
-        // }
       }
     }
   }

src/components/shared/SongItem.vue

@@ -12,7 +12,7 @@
       <HeartSvg />
     </div>
     <div class="flex">
-      <div @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
+      <div v-auto-animate @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
         <img
           loading="lazy"
           :src="imguri + track.image"

src/main.ts

@@ -1,9 +1,8 @@
-import "./assets/scss/index.scss";
-
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-
+import "./assets/scss/index.scss";
 
 import App from "./App.vue";
 import router from "./router";
@@ -16,5 +15,6 @@ pinia.use(piniaPluginPersistedstate);
 app.use(pinia);
 app.use(router);
 app.directive("tooltip", vTooltip);
+app.use(autoAnimatePlugin);
 
-app.mount("#app")
+app.mount("#app");

src/settings/general/extend-width.ts

@@ -9,7 +9,7 @@ const extend_to_full_width: Setting = {
   type: SettingType.binary,
   source: () => settings().extend_width,
   action: () => settings().toggleExtendWidth(),
-  inactive: () => !settings().extend_width_enabled,
+  inactive: () => !settings().can_extend_width,
 };
 
 export default [extend_to_full_width];

src/stores/settings/index.ts

@@ -19,7 +19,7 @@ export default defineStore("settings", {
     },
   },
   getters: {
-    extend_width_enabled(): boolean {
+    can_extend_width(): boolean {
      return xxl.value
     },
   },

yarn.lock

@@ -22,6 +22,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@formkit/auto-animate@^1.0.0-beta.3":
+  version "1.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.3.tgz#d5eb724ccb44afba9348df32ce0b8bb10037a7ee"
+  integrity sha512-glsi+ytwQpxT/Ctr9GtcIfVr4dO6mJ04mQbNU8MFSdCdqMopHtyfU5Fib0+9lNFIeR0luY4/0NW95/2R5pKsag==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.3.tgz#f2564c744b387775b436418491f15fce6601f63e"