fix(ui): [WIP] replace buttons

front/src/components/admin/SignupFormBuilder.vue

@@ -72,14 +72,14 @@ const move = (idx: number, increment: number) => {
         :class="[{active: !isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = false"
       >
-        {{ t('components.admin.SignupFormBuilder.Button.edit') }}
+        {{ t('components.admin.SignupFormBuilder.button.edit') }}
       </Button>
       <Button
         color="primary"
         :class="[{active: isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = true"
       >
-        {{ t('components.admin.SignupFormBuilder.Button.preview') }}
+        {{ t('components.admin.SignupFormBuilder.button.preview') }}
       </Button>
     </div>
     <div

front/src/components/auth/ApplicationForm.vue

@@ -7,6 +7,8 @@ import { computedEager } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { uniq } from 'lodash-es'
 
+import Button from '~/components/ui/Button.vue'
+
 import useScopes from '~/composables/auth/useScopes'
 
 interface Events {
@@ -198,8 +200,8 @@ const allScopes = computed(() => {
         </div>
       </div>
     </div>
-    <button
-      :class="['ui', {'loading': isLoading}, 'success', 'button']"
+    <Button
+      :is-loading="isLoading"
       type="submit"
     >
       <span v-if="app !== null">
@@ -208,6 +210,6 @@ const allScopes = computed(() => {
       <span v-else>
         {{ t('components.auth.ApplicationForm.button.create') }}
       </span>
-    </button>
+    </Button>
   </form>
 </template>

front/src/components/auth/Settings.vue

@@ -16,6 +16,7 @@ import useLogger from '~/composables/useLogger'
 import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import Button from '~/components/ui/Button.vue'
 
 const SETTINGS_ORDER: FieldId[] = ['summary', 'privacy_level']
 
@@ -336,12 +337,12 @@ fetchOwnedApps()
               :field-id="f.id"
             />
           </div>
-          <button
-            :class="['ui', { loading: isLoading }, 'button']"
+          <Button
+            is-loading="true"
             type="submit"
           >
             {{ t('components.auth.Settings.button.updateSettings') }}
-          </button>
+          </Button>
         </form>
       </section>
       <section class="ui text container">
@@ -471,13 +472,12 @@ fetchOwnedApps()
           {{ t('components.auth.Settings.description.contentFilters') }}
         </p>
 
-        <button
-          class="ui icon button"
+        <Button
+          icon="bi-arrow-clockwise"
           @click="store.dispatch('moderation/fetchContentFilters')"
         >
-          <i class="refresh icon" />&nbsp;
           {{ t('components.auth.Settings.button.refresh') }}
-        </button>
+        </Button>
         <h3 class="ui header">
           {{ t('components.auth.Settings.header.hiddenArtists') }}
         </h3>
@@ -507,12 +507,11 @@ fetchOwnedApps()
                 <human-date :date="filter.creation_date" />
               </td>
               <td>
-                <button
-                  class="ui basic tiny button"
+                <Button
                   @click="store.dispatch('moderation/deleteContentFilter', filter.uuid)"
                 >
                   {{ t('components.auth.Settings.button.delete') }}
-                </button>
+                </Button>
               </td>
             </tr>
           </tbody>
@@ -532,13 +531,13 @@ fetchOwnedApps()
         <p>
           {{ t('components.auth.Settings.description.authorizedApps') }}
         </p>
-        <button
-          :class="['ui', 'icon', { loading: isLoadingApps }, 'button']"
+        <Button
+          icon="bi-arrow-clockwise"
+          :is-loading="isLoadingApps"
           @click="fetchApps()"
         >
-          <i class="refresh icon" />&nbsp;
           {{ t('components.auth.Settings.button.refresh') }}
-        </button>
+        </Button>
         <table
           v-if="apps.length > 0"
           class="ui compact very basic unstackable table"
@@ -659,8 +658,10 @@ fetchOwnedApps()
                 >
                   {{ t('components.auth.Settings.button.edit') }}
                 </router-link>
-                <dangerous-button
-                  :class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']"
+                <Button
+                  color="destructive"
+                  :is-loading="isDeleting.has(app.client_id)"
+                  class="tiny"
                   @confirm="deleteApp(app.client_id)"
                 >
                   {{ t('components.auth.Settings.button.remove') }}
@@ -679,7 +680,7 @@ fetchOwnedApps()
                       {{ t('components.auth.Settings.button.removeApp') }}
                     </div>
                   </template>
-                </dangerous-button>
+                </Button>
               </td>
             </tr>
           </tbody>
@@ -765,12 +766,11 @@ fetchOwnedApps()
               required
             />
           </div>
-          <button
+          <Button
             type="submit"
-            class="ui button"
           >
             {{ t('components.auth.Settings.button.update') }}
-          </button>
+          </Button>
         </form>
       </section>
       <section class="ui text container">

front/src/components/auth/SubsonicTokenForm.vue

@@ -7,6 +7,7 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import Button from '~/components/ui/Button.vue'
 
 const { t } = useI18n()
 const store = useStore()
@@ -147,9 +148,10 @@ fetchToken()
           :default-show="showToken"
         />
       </div>
-      <dangerous-button
+      <Button
         v-if="token"
-        :class="['ui', {'loading': isLoading}, 'button']"
+        color="destructive"
+        :is-loading="isLoading"
         :action="requestNewToken"
       >
         {{ t('components.auth.SubsonicTokenForm.button.newPassword') }}
@@ -168,18 +170,18 @@ fetchToken()
             {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
           </div>
         </template>
-      </dangerous-button>
-      <button
+      </Button>
+      <Button
         v-else
-        color=""
-        :class="['ui', {'loading': isLoading}, 'button']"
+        :is-loading="isLoading"
         @click="requestNewToken"
       >
         {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
-      </button>
-      <dangerous-button
+      </Button>
+      <Button
         v-if="token"
-        :class="['ui', {'loading': isLoading}, 'warning', 'button']"
+        :is-loading="isLoading"
+        color="destructive"
         :action="disable"
       >
         {{ t('components.auth.SubsonicTokenForm.button.disable') }}
@@ -198,7 +200,7 @@ fetchToken()
             {{ t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
           </div>
         </template>
-      </dangerous-button>
+      </Button>
     </template>
   </form>
 </template>

front/src/components/channels/AlbumModal.vue

@@ -2,6 +2,8 @@
 import type { Channel } from '~/types'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import ChannelAlbumForm from '~/components/channels/AlbumForm.vue'
+import Button from '~/components/ui/Button.vue'
+
 import { watch, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -56,16 +58,16 @@ defineExpose({
       />
     </div>
     <div class="actions">
-      <button class="ui basic cancel button">
+      <Button color="secondary">
         {{ t('components.channels.AlbumModal.button.cancel') }}
-      </button>
-      <button
-        :class="['ui', 'primary', {loading: isLoading}, 'button']"
+      </Button>
+      <Button
+        :is-loading="isLoading"
         :disabled="!submittable"
         @click.stop.prevent="albumForm.submit()"
       >
         {{ t('components.channels.AlbumModal.button.create') }}
-      </button>
+      </Button>
     </div>
   </semantic-modal>
 </template>

front/src/components/library/ArtistDetail.vue

@@ -12,6 +12,7 @@ import axios from 'axios'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import AlbumCard from '~/components/album/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -77,12 +78,12 @@ const loadMoreAlbums = async () => {
         >
           {{ t('components.library.ArtistDetail.link.filter') }}
         </router-link>
-        <button
-          class="ui basic tiny button"
+        <Button
+          class="tiny"
           @click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
         >
           {{ t('components.library.ArtistDetail.button.filter') }}
-        </button>
+        </Button>
       </div>
     </div>
     <section
@@ -106,13 +107,13 @@ const loadMoreAlbums = async () => {
         />
       </div>
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="loadMoreAlbumsUrl !== null"
-        :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
+        :is-loading="isLoadingMoreAlbums"
         @click="loadMoreAlbums()"
       >
         {{ t('components.library.ArtistDetail.button.more') }}
-      </button>
+      </Button>
     </section>
     <section
       v-if="tracks.length > 0"