[web] Fix icon when track is not playable

Spotify tracks that are not playable have now a "not allowed" cursor when hovered.
Moreover, the Bulma CSS class is now used for clickable items instead of a custom one.

web-src/src/components/ListAlbums.vue

@@ -13,11 +13,11 @@
           :artwork_url="album.item.artwork_url"
           :artist="album.item.artist"
           :album="album.item.name"
-          class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+          class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
           @click="show_album_details_modal = true"
         />
       </div>
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <div style="margin-top: 0.7rem">
           <h1 class="title is-6" v-text="album.item.name" />
           <h2 class="subtitle is-7 has-text-grey">

web-src/src/components/ListArtists.vue

@@ -14,7 +14,7 @@
       class="media"
       @click="open_artist(artist.item)"
     >
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <h1 class="title is-6" v-text="artist.item.name" />
       </div>
       <div class="media-right">

web-src/src/components/ListComposers.vue

@@ -14,7 +14,7 @@
       class="media"
       @click="open_composer(composer.item)"
     >
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <h1 class="title is-6" v-text="composer.item.name" />
       </div>
       <div class="media-right">

web-src/src/components/ListDirectories.vue

@@ -4,12 +4,12 @@
     class="media"
     @click="open_parent_directory()"
   >
-    <figure class="media-left fd-has-action">
+    <figure class="media-left is-clickable">
       <span class="icon"
         ><mdicon name="subdirectory-arrow-left" size="16"
       /></span>
     </figure>
-    <div class="media-content fd-has-action is-clipped">
+    <div class="media-content is-clickable is-clipped">
       <h1 class="title is-6">..</h1>
     </div>
     <div class="media-right">
@@ -18,10 +18,10 @@
   </div>
   <template v-for="directory in directories" :key="directory.path">
     <div class="media" @click="open_directory(directory)">
-      <figure class="media-left fd-has-action">
+      <figure class="media-left is-clickable">
         <span class="icon"><mdicon name="folder" size="16" /></span>
       </figure>
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <h1
           class="title is-6"
           v-text="directory.path.substring(directory.path.lastIndexOf('/') + 1)"

web-src/src/components/ListGenres.vue

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div v-else-if="genre.isItem" class="media" @click="open_genre(genre.item)">
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <h1 class="title is-6" v-text="genre.item.name" />
       </div>
       <div class="media-right">

web-src/src/components/ListItemQueueItem.vue

@@ -5,7 +5,7 @@
         ><mdicon name="drag-horizontal" size="16"
       /></span>
     </div>
-    <div class="media-content fd-has-action is-clipped" @click="play">
+    <div class="media-content is-clickable is-clipped" @click="play">
       <h1
         class="title is-6"
         :class="{

web-src/src/components/ListPlaylists.vue

@@ -6,12 +6,12 @@
     :playlist="playlist"
     @click="open_playlist(playlist.item)"
   >
-    <figure class="media-left fd-has-action">
+    <figure class="media-left is-clickable">
       <span class="icon"
         ><mdicon :name="icon_name(playlist.item)" size="16"
       /></span>
     </figure>
-    <div class="media-content fd-has-action is-clipped">
+    <div class="media-content is-clickable is-clipped">
       <h1 class="title is-6" v-text="playlist.item.name" />
     </div>
     <div class="media-right">

web-src/src/components/ListTracks.vue

@@ -13,10 +13,10 @@
       :class="{ 'with-progress': show_progress }"
       @click="play_track(index, track.item)"
     >
-      <figure v-if="show_icon" class="media-left fd-has-action">
+      <figure v-if="show_icon" class="media-left is-clickable">
         <span class="icon"><mdicon name="file-outline" size="16" /></span>
       </figure>
-      <div class="media-content fd-has-action is-clipped">
+      <div class="media-content is-clickable is-clipped">
         <h1
           class="title is-6"
           :class="{

web-src/src/components/NavbarBottom.vue

@@ -146,7 +146,7 @@
                     class="button is-white is-small"
                     :class="{ 'is-loading': loading }"
                     ><span
-                      class="icon fd-has-action"
+                      class="icon is-clickable"
                       :class="{
                         'has-text-grey-light': !playing && !loading,
                         'is-loading': loading
@@ -269,7 +269,7 @@
                   :class="{ 'is-loading': loading }"
                 >
                   <span
-                    class="icon fd-has-action"
+                    class="icon is-clickable"
                     :class="{
                       'has-text-grey-light': !playing && !loading,
                       'is-loading': loading

web-src/src/components/NavbarItemOutput.vue

@@ -5,7 +5,7 @@
         <div class="level-item" style="flex-grow: 0">
           <a class="button is-white is-small">
             <span
-              class="icon fd-has-action"
+              class="icon is-clickable"
               :class="{ 'has-text-grey-light': !output.selected }"
               @click="set_enabled"
               ><mdicon :name="type_class" size="18" :title="output.type"

web-src/src/components/SpotifyListItemAlbum.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="media">
-    <div v-if="$slots['artwork']" class="media-left fd-has-action">
+    <div v-if="$slots['artwork']" class="media-left is-clickable">
       <slot name="artwork" />
     </div>
-    <div class="media-content fd-has-action is-clipped">
+    <div class="media-content is-clickable is-clipped">
       <h1 class="title is-6" v-text="album.name" />
       <h2 class="subtitle is-7 has-text-grey">
         <b v-text="album.artists[0].name" />

web-src/src/components/SpotifyListItemArtist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" @click="open_artist">
+    <div class="media-content is-clickable is-clipped" @click="open_artist">
       <h1 class="title is-6" v-text="artist.name" />
     </div>
     <div class="media-right">

web-src/src/components/SpotifyListItemPlaylist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" @click="open_playlist">
+    <div class="media-content is-clickable is-clipped" @click="open_playlist">
       <h1 class="title is-6" v-text="playlist.name" />
       <h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
     </div>

web-src/src/components/SpotifyListItemTrack.vue

@@ -3,7 +3,8 @@
     <div
       class="media-content is-clipped"
       :class="{
-        'is-clickable': track.is_playable
+        'is-clickable': track.is_playable,
+        'fd-is-not-allowed': !track.is_playable
       }"
       @click="play"
     >

web-src/src/mystyles.scss

@@ -66,8 +66,8 @@ a.navbar-item {
   margin-left: auto;
 }
 
-.fd-has-action {
+.fd-is-not-allowed {
-  cursor: pointer;
+  cursor: not-allowed;
 }
 
 .fd-is-movable {

web-src/src/pages/PageAlbum.vue

@@ -23,7 +23,7 @@
         :artwork_url="album.artwork_url"
         :artist="album.artist"
         :album="album.name"
-        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
         @click="show_album_details_modal = true"
       />
     </template>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -23,7 +23,7 @@
         :artwork_url="album.artwork_url"
         :artist="album.artist"
         :album="album.name"
-        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
         @click="show_album_details_modal = true"
       />
     </template>

web-src/src/pages/PageNowPlaying.vue

@@ -5,7 +5,7 @@
         :artwork_url="now_playing.artwork_url"
         :artist="now_playing.artist"
         :album="now_playing.album"
-        class="fd-has-action fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
+        class="is-clickable fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
         @click="open_dialog(now_playing)"
       />
       <div class="fd-has-padding-left-right">

web-src/src/pages/SpotifyPageAlbum.vue

@@ -27,7 +27,7 @@
         :artwork_url="artwork_url"
         :artist="album.artist"
         :album="album.name"
-        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
         @click="show_album_details_modal = true"
       />
     </template>

web-src/src/pages/SpotifyPageArtist.vue

@@ -33,7 +33,7 @@
             :artwork_url="artwork_url(album)"
             :artist="album.artist"
             :album="album.name"
-            class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+            class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
             :maxwidth="64"
             :maxheight="64"
           />

web-src/src/pages/SpotifyPageBrowse.vue

@@ -18,7 +18,7 @@
               :artwork_url="artwork_url(album)"
               :artist="album.artist"
               :album="album.name"
-              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
               :maxwidth="64"
               :maxheight="64"
             />

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -17,7 +17,7 @@
               :artwork_url="artwork_url(album)"
               :artist="album.artist"
               :album="album.name"
-              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
               :maxwidth="64"
               :maxheight="64"
             />

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -66,7 +66,6 @@ import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
-import { mdiAxe } from '@mdi/js'
 
 const PAGE_SIZE = 50
 

web-src/src/pages/SpotifyPageSearch.vue

@@ -160,7 +160,7 @@
               :artwork_url="artwork_url(album)"
               :artist="album.artist"
               :album="album.name"
-              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
               :maxwidth="64"
               :maxheight="64"
             />