remove @vueuse/motion

+ remove unused data folder

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^8.5.0",
-    "@vueuse/motion": "^2.0.0-beta.18",
     "axios": "^0.26.1",
     "defu": "^6.0.0",
     "mitt": "^3.0.0",

src/components/AlbumView/Header.vue

@@ -12,12 +12,11 @@
       <img
         :src="imguri + album.image"
         alt=""
-        v-motion-slide-from-left
         class="rounded shadow-lg"
       />
     </div>
     <div class="info" :class="{ nocontrast: isLight() }">
-      <div class="top" v-motion-slide-from-top>
+      <div class="top">
         <div class="h">
           <span v-if="album.is_soundtrack">Soundtrack</span>
           <span v-else-if="album.is_compilation">Compilation</span>

src/components/LeftSidebar/Navigation.vue

@@ -5,7 +5,7 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu.params }"
     >
-      <div class="nav-button" id="home-button" v-motion-slide-from-left-100>
+      <div class="nav-button" id="home-button">
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>

src/components/Logo.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="logo-container"
-    v-motion-slide-from-top
   >
     <router-link :to="{ name: 'Home' }">
       <div id="logo" class="rounded"></div

src/components/PlaylistView/Header.vue

@@ -37,7 +37,7 @@
         <div class="type">Playlist</div>
       </div>
     </div>
-    <div class="last-updated" v-motion-slide-from-right>
+    <div class="last-updated">
       <span class="status"
         >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
       >

src/components/RightSideBar/Search/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="name == s.currentTab" v-motion-slide-visible-top>
+  <div v-show="name == s.currentTab">
     <slot />
   </div>
 </template>

src/components/nav/NavBar.vue

@@ -81,8 +81,6 @@ watch(
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
-  // border-bottom: 1px solid $gray3;
-  // padding-bottom: $small;
 
   .left {
     display: grid;
@@ -94,7 +92,6 @@ watch(
       .title {
         font-size: 1.5rem;
         font-weight: bold;
-        margin-top: $smaller;
         display: flex;
       }
     }

src/components/nav/Titles/APTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="title albumnavtitle" v-motion-slide-from-left-100>
+  <div class="title albumnavtitle">
     <PlayBtn :source="things.source" :store="things.store" />
     <div class="ellip">
       {{ things.text }}
@@ -44,14 +44,8 @@ const things = computed(() => {
 
 <style lang="scss">
 .albumnavtitle {
-  padding-left: 3rem;
+  display: flex;
-
+  align-items: center;
-  .play-btn {
+  gap: $small;
-    position: absolute;
-    left: $smaller;
-    top: -$smaller;
-    height: 2.25rem;
-    aspect-ratio: 1;
-  }
 }
 </style>

src/components/nav/Titles/Folder.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="folder-nav-title">
-    <div class="folder" v-motion-slide-from-left-100>
+    <div class="folder">
       <div class="fname">
         <div class="icon image"></div>
         <div class="paths">
@@ -9,7 +9,6 @@
             v-for="path in subPaths"
             :key="path.path"
             :class="{ inthisfolder: path.active }"
-            v-motion-slide-from-left-100
             @click="
               $router.push({ name: 'FolderView', params: { path: path.path } })
             "

src/components/nav/Titles/Playlists.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="title"
-    v-motion-slide-from-left-100
   >
     Playlists
   </div>

src/data/folders.js

@@ -1,92 +0,0 @@
-const folders = [
-  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },
-];
-
-export default {
-  folders,
-};

src/data/songs.js

@@ -1,58 +0,0 @@
-const songs = [
-  {
-    title: "Doom",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Girl Of My Dreams",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Suga [BTS]"],
-    duration: "03:14",
-  },
-  {
-    title: "Feline",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Polo G, ", "Lil Yachty"],
-    duration: "03:14",
-  },
-  {
-    title: "Rockstar In His Prime",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Is this love",
-    album: "Fighting Demons",
-    artists: ["Bob Marley"],
-    duration: "03:14",
-  },
-  {
-    title: "I'm a little teapot",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Don't stop me now",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-];
-
-export default {
-  songs,
-};

src/main.js

@@ -1,18 +1,15 @@
 import "./registerServiceWorker";
 import "../src/assets/css/global.scss";
 
-import { MotionPlugin } from "@vueuse/motion";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "./App.vue";
 import router from "./router";
-import CustomTransitions from "./transitions";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
-app.use(MotionPlugin, CustomTransitions);
 
 app.mount("#app");

src/transitions.ts

@@ -1,59 +0,0 @@
-export default {
-  directives: {
-    "slide-from-left": {
-      initial: {
-        opacity: 0,
-        x: 0,
-        y: 20,
-      },
-      enter: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-          duration: 100,
-          ease: "circInOut",
-        },
-      },
-    },
-    "slide-from-left-100": {
-      initial: {
-        opacity: 0,
-        x: -20,
-      },
-      visible: {
-        opacity: 1,
-        x: 0,
-        transition: {
-          delay: 100,
-        },
-      },
-    },
-    "slide-from-top": {
-      initial: {
-        y: -20,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-    "slide-from-right": {
-      initial: {
-        x: 20,
-        opacity: 0,
-      },
-      enter: {
-        x: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-  },
-};