[web] Use "button" tag instead of "a" tag

web-src/src/pages/PagePlaylistTracks.vue

@@ -10,16 +10,13 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a
-            class="button is-small is-rounded"
-            @click="show_details_modal = true"
-          >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
-          </a>
-          <a class="button is-small is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
-            <span v-text="$t('page.playlist.shuffle')" />
-          </a>
+          <control-button :handler="showDetails" icon="dots-horizontal" />
+          <control-button
+            :disabled="tracks.count === 0"
+            :handler="play"
+            icon="shuffle"
+            label="page.playlist.shuffle"
+          />
         </div>
       </template>
       <template #content>
@@ -37,6 +34,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlButton from '@/components/ControlButton.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
@@ -58,7 +56,12 @@ const dataObject = {
 
 export default {
   name: 'PagePlaylistTracks',
-  components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
+  components: {
+    ContentWithHeading,
+    ControlButton,
+    ListTracks,
+    ModalDialogPlaylist
+  },
 
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
@@ -86,6 +89,9 @@ export default {
   methods: {
     play() {
       webapi.player_play_uri(this.uris, true)
+    },
+    showDetails() {
+      this.show_details_modal = true
     }
   }
 }