start migration to <script setup>

src/components/FolderView/SongList.vue

@@ -4,6 +4,7 @@
       <table>
         <thead>
           <tr>
+            <th class="index"></th>
             <th class="track-header">Track</th>
             <th class="artists-header">Artist</th>
             <th class="album-header">Album</th>
@@ -12,9 +13,10 @@
         </thead>
         <tbody>
           <SongItem
-            v-for="song in props.songs"
+            v-for="(song, index) in props.songs"
             :key="song"
             :song="song"
+            :index="index + 1"
             @updateQueue="updateQueue"
             @loadAlbum="loadAlbum"
           />
@@ -34,12 +36,13 @@
 <script setup>
 import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
-// import { defineProps } from 'vue';
+import { useRoute } from "vue-router";
+
 import SongItem from "../shared/SongItem.vue";
+
 import routeLoader from "@/composables/routeLoader.js";
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
-import { useRoute } from "vue-router";
 
 const props = defineProps({
   songs: {
@@ -48,7 +51,6 @@ const props = defineProps({
   }
 });
 
-
 let route;
 
 const search_query = ref(state.search_query);
@@ -144,6 +146,10 @@ table {
         display: none;
       }
     }
+
+    th.index {
+      width: 2rem;
+    }
   }
 }
 </style>

src/components/Search/AlbumGrid.vue

@@ -37,13 +37,16 @@ export default {
 
   margin-left: $small;
   margin-top: $small;
-  padding:  $small 0;
+  padding: $small 0;
+  overflow-x: hidden;
 
   .grid {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+
     flex-wrap: wrap;
     padding: 0 0 0 $small;
     gap: $small;
   }
 }
-</style>
+</style>

src/components/Search/TracksGrid.vue

@@ -4,7 +4,12 @@
     <div class="items">
       <table>
         <tbody>
-          <SongItem v-for="track in tracks" :key="track" :song="track" />
+          <SongItem
+            v-for="(track, index) in props.tracks"
+            :key="track"
+            :song="track"
+            :index="index + 1"
+          />
         </tbody>
       </table>
       <LoadMore v-if="more" @loadMore="loadMore" />
@@ -12,26 +17,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import SongItem from "@/components/shared/SongItem.vue";
 import LoadMore from "./LoadMore.vue";
 
-export default {
-  props: ["tracks", "more"],
-  components: {
-    SongItem,
-    LoadMore,
+const props = defineProps({
+  tracks: {
+    type: Object,
+    required: true,
   },
-  setup(props, { emit }) {
-    function loadMore() {
-      emit("loadMore", "tracks");
-    }
+  more: {
+    type: Boolean,
+    required: true,
+  },
+});
 
-    return {
-      loadMore,
-    };
-  },
-};
+const emit = defineEmits(["loadMore"])
+
+function loadMore() {
+  emit("loadMore", "tracks");
+}
 </script>
 
 <style lang="scss">
@@ -40,4 +45,4 @@ export default {
   margin-left: $small;
   padding: $small;
 }
-</style>
+</style>

src/components/shared/SongItem.vue

@@ -1,14 +1,10 @@
 <template>
-  <tr
-    class="songlist-item"
-    :class="{ current: current.id == song.id }"
-  >
+  <tr class="songlist-item" :class="{ current: current.id == song.id }">
+    <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
         class="album-art rounded image"
-        :style="{
-          backgroundImage: `url(&quot;${song.image}&quot;)`,
-        }"
+        :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
       >
         <div
           class="now-playing-track image"
@@ -20,9 +16,9 @@
         <span class="ellip">{{ song.title }}</span>
         <div class="separator no-border"></div>
         <div class="artist ellip">
-          <span v-for="artist in putCommas(song.artists)" :key="artist">{{
-            artist
-          }}</span>
+          <span v-for="artist in putCommas(song.artists)" :key="artist">
+            {{ artist }}
+          </span>
         </div>
       </div>
     </td>
@@ -44,9 +40,7 @@
         {{ song.album }}
       </div>
     </td>
-    <td class="song-duration">
-      {{ song.length }}
-    </td>
+    <td class="song-duration">{{ song.length }}</td>
   </tr>
 </template>
 
@@ -55,15 +49,15 @@ import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
 
 export default {
-  props: ["song"],
-  emits: ['updateQueue', 'loadAlbum'],
+  props: ["song", "index"],
+  emits: ["updateQueue", "loadAlbum"],
   setup(props, { emit }) {
     function emitUpdate(song) {
       emit("updateQueue", song);
     }
 
     function emitLoadAlbum(title, artist) {
-      console.log('hii')
+      console.log("hii");
       emit("loadAlbum", title, artist);
     }
 
@@ -80,8 +74,19 @@ export default {
 
 <style lang="scss">
 .songlist-item {
+  .index {
+    color: grey;
+    font-size: 0.8rem;
+    text-align: center;
+    width: 2rem;
+
+    @include phone-only {
+      display: none;
+    }
+  }
+
   @include phone-only {
-    border: solid;
+    width: 100%;
 
     td {
       background-color: #14161a;
@@ -126,21 +131,37 @@ export default {
     padding: $small;
   }
 
+  td:first-child {
+    border-radius: $small 0 0 $small;
+  }
+
+  td:nth-child(2){
+    border-radius: 0 $small $small 0;
+
+    @include phone-only {
+      border-radius: $small;
+    }
+  }
+
   &:hover {
     & {
       & td {
         background-color: rgb(5, 80, 150);
       }
 
-      & td:first-child {
+      td:first-child {
         border-radius: $small 0 0 $small;
+      }
+
+      td:nth-child(2) {
+        border-radius: 0;
 
         @include phone-only {
           border-radius: $small;
         }
       }
 
-      td:nth-child(2) {
+      td:nth-child(3) {
         @include tablet-portrait {
           border-radius: 0 $small $small 0 !important;
         }
@@ -150,9 +171,10 @@ export default {
         }
       }
 
-      & > td:nth-child(3) {
+      & > td:nth-child(4) {
         @include tablet-landscape {
           border-radius: 0 $small $small 0 !important;
+          // border: solid red !important;
         }
       }
 
@@ -180,4 +202,4 @@ export default {
     }
   }
 }
-</style>
+</style>