feat(front): add widget buttons

front/src/components/audio/album/Widget.vue

@@ -6,6 +6,8 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import { FwButton } from '@funkwhale/ui'
+
 import AlbumCard from '~/components/audio/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -107,13 +109,14 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.audio.album.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>

front/src/components/audio/artist/Widget.vue

@@ -8,6 +8,8 @@ import axios from 'axios'
 
 import ArtistCard from '~/components/audio/artist/Card.vue'
 
+import { FwButton } from '@funkwhale/ui'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
@@ -103,13 +105,14 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.audio.artist.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>

front/src/components/audio/track/Widget.vue

@@ -11,6 +11,8 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
+import { FwButton } from '@funkwhale/ui'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Events {
@@ -211,12 +213,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
-        :class="['ui', 'basic', 'button']"
+      <fw-button
+        outline
+        color="secondary"
         @click="fetchData(nextPage as string)"
       >
         {{ $t('components.audio.track.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>

front/src/components/playlists/Widget.vue

@@ -8,6 +8,8 @@ import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import { FwButton } from '@funkwhale/ui'
+
 import PlaylistCard from '~/components/playlists/Card.vue'
 
 interface Props {
@@ -80,24 +82,25 @@ watch(
         <i class="list icon" />
         {{ $t('components.playlists.Widget.placeholder.noPlaylists') }}
       </div>
-      <button
+      <fw-button
         v-if="$store.state.auth.authenticated"
-        class="ui success icon labeled button"
+        color="primary"
+        icon="bi-list-task"
         @click="$store.commit('playlists/chooseTrack', null)"
       >
-        <i class="list icon" />
         {{ $t('components.playlists.Widget.button.create') }}
-      </button>
+      </fw-button>
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.playlists.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>