search: fix track list

src/search/SearchResult.vue

@@ -10,46 +10,23 @@
       <AlbumList :items="result.albums"/>
     </div>
 
-    <div>
-      <h5 class="text-uppercase">Tracks</h5>
-        <b-table-simple hover>
-      <!-- <thead>
-        <tr>
-          <th class="text-left"></th>
-          <th class="text-left">Title</th>
-          <th class="text-left">Artist</th>
-          <th class="text-left">Album</th>
-          <th class="text-left">Duration</th>
-          <th class="text-left">Actions</th>
-        </tr>
-      </thead> -->
-      <tbody>
-        <tr v-for="(item, index) in result.tracks">
-          <td>
-            <span  @click="play(index)">
-              <Icon icon="play-fill"/>
-            </span>
-          </td>
-          <td>{{ item.title }}</td>
-          <td>{{ item.artist }}</td>
-          <td>{{ item.album }}</td>
-          <!-- <td>{{ item.duration | duration }}</td> -->
-        </tr>
-      </tbody>
-    </b-table-simple>
-
-  </div>
+    <div v-if="result.tracks.length > 0">
+      <h1>Tracks</h1>
+      <TrackList :tracks="result.tracks" showAlbum/>
+    </div>
   </div>
 </template>
 <script lang="ts">
   import Vue from "vue";
   import AlbumList from "@/library/album/AlbumList.vue";
   import ArtistList from "@/library/artist/ArtistList.vue";
+  import TrackList from "@/library/TrackList.vue"
 
   export default Vue.extend({
     components: {
       AlbumList,
       ArtistList,
+      TrackList,
     },
     props: {
       query: String,