rewrite recommendation component with script setup

src/App.vue

@@ -42,7 +42,7 @@ const queue = useQStore();
 const app_dom = document.getElementById("app");
 
 queue.readQueue();
-useShortcuts(queue);
+useShortcuts(useQStore);
 
 app_dom.addEventListener("click", (e) => {
   if (context_store.visible) {

src/components/RightSideBar/Home/Main.vue

@@ -14,7 +14,7 @@
 </style>
 
 <script setup lang="ts">
-import Recommendations from "../Recommendation.vue";
+import Recommendations from "./Recommendation.vue";
 import UpNext from "../queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();

src/components/RightSideBar/Home/Recommendation.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="r-tracks rounded border">
+    <div class="heading">Similar tracks</div>
+    <div class="tracks">
+      <div class="song-item" v-for="song in songs" :key="song.artist">
+        <img src="../../../assets/images/null.webp" class="rounded" />
+        <div class="tags">
+          <div class="title">{{ song.title }}</div>
+          <div class="artist">{{ song.artist }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const songs = [
+  {
+    title: "Imagine",
+    artist: "John Lennon",
+  },
+  {
+    title: "Mockingbird",
+    artist: "Eminem",
+  },
+];
+</script>
+
+<style lang="scss">
+.r-tracks {
+  margin: 0.5rem 0 0.5rem 0;
+  padding: 0.5rem;
+
+  .heading {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .tracks .song-item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+
+    img {
+      width: 3rem;
+      aspect-ratio: 1;
+      margin-right: $small;
+    }
+
+    .title {
+      margin: 0;
+    }
+
+    .artist {
+      font-size: small;
+      color: rgba(255, 255, 255, 0.637);
+      margin: 0;
+    }
+
+    &:hover {
+      background-color: #3a39393d;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/RightSideBar/Recommendation.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="r-tracks rounded border">
-    <div class="heading">Similar Tracks</div>
-    <div class="tracks">
-      <div class="song-item" v-for="song in songs" :key="song">
-        <div class="album-art image"></div>
-        <div class="tags">
-          <p class="title">{{ song.title }}</p>
-          <hr />
-          <p class="artist">{{ song.artist }}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    const songs = [
-      {
-        title: "Imagine",
-        artist: "John Lennon",
-      },
-      {
-        title: "Mockingbird",
-        artist: "Eminem",
-      },
-    ];
-
-    const r_albums = ["Crybaby", "Everybody's Everything", "Castles II"];
-
-    return { songs, r_albums };
-  },
-};
-</script>
-
-<style lang="scss">
-.r-tracks {
-  margin: 0.5rem 0 0.5rem 0;
-  padding: 0.5rem;
-
-  .heading {
-    font-size: 1.25rem;
-    margin-bottom: 0.5rem !important;
-  }
-}
-
-.r-tracks .tracks .song-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-}
-
-.r-tracks .tracks .song-item:hover {
-  background-color: #3a39393d;
-  cursor: pointer;
-}
-
-.r-tracks .tracks .song-item hr {
-  border: none;
-  margin: 0.1rem;
-}
-
-.r-tracks .tracks .song-item .album-art {
-  width: 3rem;
-  height: 3rem;
-  background-color: #ccc;
-  margin: 0 0.5rem 0 0;
-  border-radius: 0.5rem;
-  background-image: url(../../assets/images/null.webp);
-}
-
-.r-tracks .tracks .song-item .artist {
-  font-size: small;
-  color: rgba(255, 255, 255, 0.637);
-  margin: 0;
-}
-
-.r-tracks .tracks .song-item .title {
-  margin: 0;
-}
-</style>

src/composables/useKeyboard.ts

@@ -1,4 +1,4 @@
-import { Store } from "pinia";
+import useQStore from "@/stores/queue"
 
 let key_down_fired = false;
 
@@ -8,7 +8,8 @@ function focusSearchBox() {
   elem.focus();
 }
 
-export default function (queue: any) {
+export default function (queue: typeof useQStore) {
+  const q = queue()
   window.addEventListener("keydown", (e: any) => {
     let target = e.target;
     let ctrlKey = e.ctrlKey;
@@ -29,7 +30,7 @@ export default function (queue: any) {
               key_down_fired = false;
             }, 1000);
 
-            queue.playNext();
+            q.playNext();
           }
         }
         break;
@@ -39,7 +40,7 @@ export default function (queue: any) {
           if (!key_down_fired) {
             key_down_fired = true;
 
-            queue.playPrev();
+            q.playPrev();
 
             setTimeout(() => {
               key_down_fired = false;
@@ -55,7 +56,7 @@ export default function (queue: any) {
             e.preventDefault();
             key_down_fired = true;
 
-            queue.playPause();
+            q.playPause();
           }
         }
 

src/router/index.js

@@ -87,7 +87,6 @@ const routes = [
   },
   {
     path: "/:pathMatch(.*)",
-    // alias: "*",
     component: () => import("../views/NotFound.vue"),
   },
 ];