From a463cc305ae7a52857ca64cac95638a5a67133d3 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 6 Feb 2025 17:51:23 +0100
Subject: [PATCH] chore(front): replace semantic-modal with Modal component (+
 some modernization)

---
 front/src/components/SetInstanceModal.vue     | 16 ++--
 front/src/components/audio/podcast/Modal.vue  | 29 ++++---
 front/src/components/audio/track/Modal.vue    | 28 ++++---
 front/src/components/channels/AlbumModal.vue  | 29 +++----
 front/src/components/channels/UploadModal.vue | 23 ++----
 front/src/components/common/LoginModal.vue    | 31 ++++----
 .../src/components/federation/FetchButton.vue | 15 ++--
 .../src/components/library/AlbumDropdown.vue  | 28 +++----
 .../components/library/ImportStatusModal.vue  | 17 ++---
 .../src/components/library/radios/Filter.vue  | 13 ++--
 .../manage/moderation/InstancePolicyModal.vue | 25 +++----
 .../src/components/moderation/FilterModal.vue | 29 +++----
 .../src/components/moderation/ReportModal.vue | 32 ++++----
 front/src/components/semantic/Modal.vue       | 33 --------
 front/src/views/auth/ProfileOverview.vue      | 60 +++++++--------
 front/src/views/channels/DetailBase.vue       | 75 +++++++------------
 16 files changed, 184 insertions(+), 299 deletions(-)
 delete mode 100644 front/src/components/semantic/Modal.vue

diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index 23926979b..148adb520 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import axios from 'axios'
 import { uniq } from 'lodash-es'
 import { useVModel } from '@vueuse/core'
 import { ref, computed, watch, nextTick } from 'vue'
 import { useStore } from '~/store'
-// import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 interface Props {
   show: boolean
@@ -63,13 +65,13 @@ const checkAndSwitch = async (url: string) => {
 </script>
 
 <template>
-  <semantic-modal
-    v-model:show="show"
-    @update:show="isError = false"
+  <Modal :title="t('views.ChooseInstance.header.chooseInstance')"
+    v-model="show"
+    @update="isError = false"
   >
     <h3 class="header">
       <!-- TODO: translate -->
-      Choose your instance
+
       <!-- <translate translate-context="Popup/Instance/Title">
       </translate> -->
     </h3>
@@ -177,5 +179,5 @@ const checkAndSwitch = async (url: string) => {
         </translate> -->
       </button>
     </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/audio/podcast/Modal.vue b/front/src/components/audio/podcast/Modal.vue
index c4839480f..65794d8bc 100644
--- a/front/src/components/audio/podcast/Modal.vue
+++ b/front/src/components/audio/podcast/Modal.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, SimpleArtist as Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
-// import type { Track } from '~/types'
 
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import { computed, ref } from 'vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
@@ -93,13 +92,14 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <semantic-modal
+  <Modal
+    :title="track.title"
     ref="modal"
-    v-model:show="show"
+    v-model="show"
     :scrolling="true"
-    :additional-classes="['scrolling-track-options']"
+    class="scrolling-track-options"
   >
-    <div class="header">
+    <template #topright>
       <div class="ui large centered rounded image">
         <img
           v-if="track.album && track.album.cover && track.album.cover.urls.original"
@@ -122,7 +122,7 @@ const labels = computed(() => ({
           class="ui centered image"
         >
         <img
-          v-else-if="!!track.artist_credit?.length && track.artist_credit[0].artist.cover"
+          v-else-if="!!track.artist_credit?.length && track.artist_credit[0].artist.attachment_cover"
           v-lazy="
             getArtistCoverUrl(track.artist_credit)
           "
@@ -136,13 +136,10 @@ const labels = computed(() => ({
           src="../../../assets/audio/default-cover.png"
         >
       </div>
-      <h3 class="track-modal-title">
-        {{ track.title }}
-      </h3>
       <h4 class="track-modal-subtitle">
         {{ generateTrackCreditString(track) }}
       </h4>
-    </div>
+    </template>
     <div class="ui hidden divider" />
     <div class="content">
       <div class="ui one column unstackable grid">
@@ -178,7 +175,7 @@ const labels = computed(() => ({
             :aria-label="labels.addToQueue"
             @click.stop.prevent="
               enqueue();
-              modal.closeModal();
+              show=false
             "
           >
             <i class="plus icon track-modal list-icon" />
@@ -192,7 +189,7 @@ const labels = computed(() => ({
             :aria-label="labels.playNext"
             @click.stop.prevent="
               enqueueNext(true);
-              modal.closeModal();
+              show=false
             "
           >
             <i class="step forward icon track-modal list-icon" />
@@ -209,7 +206,7 @@ const labels = computed(() => ({
                 type: 'similar',
                 objectId: track.id,
               });
-              modal.closeModal();
+              show=false
             "
           >
             <i class="rss icon track-modal list-icon" />
@@ -301,5 +298,5 @@ const labels = computed(() => ({
         </div>
       </div>
     </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index 6ded87397..39e1a6fe8 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, SimpleArtist as Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
-// import type { Track } from '~/types'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
+import useReport from '~/composables/moderation/useReport'
 
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
-import usePlayOptions from '~/composables/audio/usePlayOptions'
-import useReport from '~/composables/moderation/useReport'
 import { useVModel } from '@vueuse/core'
 import { generateTrackCreditString, getArtistCoverUrl } from '~/utils/utils'
+
+import Modal from '~/components/ui/Modal.vue'
+
 interface Events {
   (e: 'update:show', value: boolean): void
 }
@@ -92,11 +93,11 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <semantic-modal
+  <Modal :title="track.title"
     ref="modal"
-    v-model:show="show"
+    v-model="show"
     :scrolling="true"
-    :additional-classes="['scrolling-track-options']"
+    class="scrolling-track-options"
   >
     <div class="header">
       <div class="ui large centered rounded image">
@@ -125,9 +126,6 @@ const labels = computed(() => ({
           src="../../../assets/audio/default-cover.png"
         >
       </div>
-      <h3 class="track-modal-title">
-        {{ track.title }}
-      </h3>
       <h4 class="track-modal-subtitle">
         {{ generateTrackCreditString(track) }}
       </h4>
@@ -155,7 +153,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.addToQueue"
-            @click.stop.prevent="enqueue(); modal.closeModal()"
+            @click.stop.prevent="enqueue(); show = false"
           >
             <i class="plus icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.addToQueue }}</span>
@@ -166,7 +164,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.playNext"
-            @click.stop.prevent="enqueueNext(true);modal.closeModal()"
+            @click.stop.prevent="enqueueNext(true);show = false"
           >
             <i class="step forward icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.playNext }}</span>
@@ -177,7 +175,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.startRadio"
-            @click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
+            @click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false }"
           >
             <i class="rss icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.startRadio }}</span>
@@ -253,5 +251,5 @@ const labels = computed(() => ({
         </div>
       </div>
     </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index ba19a8795..0f5bae0e4 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Channel } from '~/types'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/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'
 
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Events {
   (e: 'created'): void
 }
@@ -36,18 +38,11 @@ defineExpose({
 </script>
 
 <template>
-  <semantic-modal
-    v-model:show="show"
+  <Modal :title="t(channel.artist.content_category === 'podcast' ? 'components.channels.AlbumModal.header.newSeries' : 'components.channels.AlbumModal.header.newAlbum')"
+    v-model="show"
     class="small"
+    :cancel="t('components.channels.AlbumModal.button.cancel')"
   >
-    <h4 class="header">
-      <span v-if="channel.content_category === 'podcast'">
-        {{ t('components.channels.AlbumModal.header.newSeries') }}
-      </span>
-      <span v-else>
-        {{ t('components.channels.AlbumModal.header.newAlbum') }}
-      </span>
-    </h4>
     <div class="scrolling content">
       <channel-album-form
         ref="albumForm"
@@ -57,10 +52,8 @@ defineExpose({
         @created="emit('created')"
       />
     </div>
-    <div class="actions">
-      <Button secondary>
-        {{ t('components.channels.AlbumModal.button.cancel') }}
-      </Button>
+    <template #actions>
+      <Spacer h grow />
       <Button
         :is-loading="isLoading"
         :disabled="!submittable"
@@ -68,6 +61,6 @@ defineExpose({
       >
         {{ t('components.channels.AlbumModal.button.create') }}
       </Button>
-    </div>
-  </semantic-modal>
+    </template>
+  </Modal>
 </template>
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index 9bd9aa0e6..116a9345a 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import ChannelUploadForm from '~/components/channels/UploadForm.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
@@ -53,24 +53,11 @@ const open = ref(false)
 </script>
 
 <template>
-  <semantic-modal
-    v-model:show="store.state.channels.showUploadModal"
+  <Modal
+    :title="t(`components.channels.UploadModal.header.${['', 'publish', 'uploadFiles', 'uploadDetails', 'processing'][step]}`)"
+    v-model="store.state.channels.showUploadModal"
     class="small"
   >
-    <h4 class="header">
-      <span v-if="step === 1">
-        {{ t('components.channels.UploadModal.header.publish') }}
-      </span>
-      <span v-else-if="step === 2">
-        {{ t('components.channels.UploadModal.header.uploadFiles') }}
-      </span>
-      <span v-else-if="step === 3">
-        {{ t('components.channels.UploadModal.header.uploadDetails') }}
-      </span>
-      <span v-else-if="step === 4">
-        {{ t('components.channels.UploadModal.header.processing') }}
-      </span>
-    </h4>
     <div class="scrolling content">
       <channel-upload-form
         ref="uploadForm"
@@ -156,5 +143,5 @@ const open = ref(false)
         {{ t('components.channels.UploadModal.button.close') }}
       </Button>
     </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/common/LoginModal.vue b/front/src/components/common/LoginModal.vue
index 438c71a4e..d0b0ad502 100644
--- a/front/src/components/common/LoginModal.vue
+++ b/front/src/components/common/LoginModal.vue
@@ -2,11 +2,14 @@
 import type { RouteLocationRaw } from 'vue-router'
 import type { Cover } from '~/types'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import Modal from '~/components/ui/Modal.vue'
+import Link from '~/components/ui/Link.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Props {
   nextRoute: RouteLocationRaw
   message: string
@@ -29,10 +32,7 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <semantic-modal v-model:show="show">
-    <h4 class="header">
-      {{ labels.header }}
-    </h4>
+  <Modal v-model="show" :title="labels.header">
     <div
       v-if="cover"
       class="image content"
@@ -60,22 +60,21 @@ const labels = computed(() => ({
         {{ message }}
       </p>
     </div>
-    <div class="actions">
-      <router-link
+    <template #actions>
+      <Spacer grow />
+      <Link
         :to="{path: '/login', query: { next: nextRoute as string }}"
-        class="ui labeled icon button"
+        icon="bi-key-fill"
       >
-        <i class="key icon" />
         {{ labels.login }}
-      </router-link>
-      <router-link
+      </Link>
+      <Link
         v-if="store.state.instance.settings.users.registration_enabled.value"
         :to="{path: '/signup'}"
-        class="ui labeled icon button"
+        icon="bi-person-fill"
       >
-        <i class="user icon" />
         {{ labels.signup }}
-      </router-link>
-    </div>
-  </semantic-modal>
+      </Link>
+    </template>
+  </Modal>
 </template>
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index d259d13df..c674f1888 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import axios from 'axios'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import { useTimeoutFn } from '@vueuse/core'
 import { ref } from 'vue'
@@ -80,13 +80,11 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
     <div>
       <slot />
     </div>
-    <semantic-modal
-      v-model:show="showModal"
+    <Modal :title="t('components.federation.FetchButton.header.refresh')"
+      v-model="showModal"
       class="small"
+      :cancel="t('components.federation.FetchButton.button.close')"
     >
-      <h3 class="header">
-        {{ t('components.federation.FetchButton.header.refresh') }}
-      </h3>
       <div class="scrolling content">
         <template v-if="data && data.status != 'pending'">
           <div
@@ -213,9 +211,6 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
         </div>
       </div>
       <div class="actions">
-        <Button color="secondary">
-          {{ t('components.federation.FetchButton.button.close') }}
-        </Button>
         <Button
           v-if="data && data.status === 'finished'"
           @click.prevent="showModal = false; emit('refresh')"
@@ -223,6 +218,6 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           {{ t('components.federation.FetchButton.button.reload') }}
         </Button>
       </div>
-    </semantic-modal>
+    </Modal>
   </div>
 </template>
diff --git a/front/src/components/library/AlbumDropdown.vue b/front/src/components/library/AlbumDropdown.vue
index 75b48db87..5cb0d6133 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -10,7 +10,8 @@ import { getDomain } from '~/utils'
 import useReport from '~/composables/moderation/useReport'
 
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+
+import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
@@ -45,7 +46,10 @@ const labels = computed(() => ({
   more: t('components.library.AlbumDropdown.button.more')
 }))
 
-const isEmbedable = computed(() => (props.isChannel && props.artistCredit[0].artist?.channel?.actor) || props.publicLibraries.length)
+// TODO: What is the condition for an album to be embeddable?
+// (a) props.publicLibraries.length
+// (b) I am the channel's artist: props.isChannel && props.artistCredit[0].artist?.channel?.actor)
+const isEmbedable = computed(() => (props.publicLibraries.length))
 const musicbrainzUrl = computed(() => props.object?.mbid ? `https://musicbrainz.org/release/${props.object.mbid}` : null)
 const discogsUrl = computed(() => `https://discogs.com/search/?type=release&title=${encodeURI(props.object?.title)}&artist=${encodeURI(props.object?.artist_credit[0].artist.name)}`)
 
@@ -56,32 +60,20 @@ const open = ref(false)
 
 <template>
   <span>
-    <semantic-modal
+    <Modal :title="t('components.library.AlbumDropdown.modal.embed.header')"
       v-if="isEmbedable"
-      v-model:show="showEmbedModal"
+      v-model="showEmbedModal"
+      :cancel="t('components.library.AlbumDropdown.button.cancel')"
     >
-      <h4 class="header">
-        {{ t('components.library.AlbumDropdown.modal.embed.header') }}
-      </h4>
       <div class="scrolling content">
         <div class="description">
           <embed-wizard
             :id="object.id"
             type="album"
           />
-
         </div>
       </div>
-      <div class="actions">
-        <Button
-          color="secondary"
-          variant="outline"
-          @click="showEmbedModal = false"
-        >
-          {{ t('components.library.AlbumDropdown.button.cancel') }}
-        </Button>
-      </div>
-    </semantic-modal>
+    </Modal>
     <Popover v-model:open="open">
       <template #default="{ toggleOpen }">
         <OptionsButton
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index 52e357153..56b6253dd 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -3,7 +3,7 @@ import type { Upload } from '~/types'
 import { useVModel } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 
 interface ErrorEntry {
@@ -76,10 +76,10 @@ const getErrorData = (upload: Upload) => {
 </script>
 
 <template>
-  <semantic-modal v-model:show="show">
-    <h4 class="header">
-      {{ t('components.library.ImportStatusModal.header.importDetail') }}
-    </h4>
+  <Modal :title="t('components.library.ImportStatusModal.header.importDetail')"
+    v-model="show"
+    :cancel="t('components.library.ImportStatusModal.button.close')"
+  >
     <div
       v-if="Object.keys(upload).length > 0"
       class="content"
@@ -183,10 +183,5 @@ const getErrorData = (upload: Upload) => {
         </template>
       </div>
     </div>
-    <div class="actions">
-      <Button color="secondary">
-        {{ t('components.library.ImportStatusModal.button.close') }}
-      </Button>
-    </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index 6f0e5b978..f4c1aa9a9 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -12,7 +12,7 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import Button from '~/components/ui/Button.vue'
 
@@ -49,6 +49,10 @@ const exclude = computed({
 })
 
 const el = useCurrentElement()
+
+// This component appears on "create new radio" and offers filters. "New filter" => Dropdown search field
+// TODO: Re-implement with <Input>, <select>
+
 onMounted(() => {
   for (const field of data.value.filter.fields) {
     const settings: SemanticUI.DropdownSettings = {
@@ -182,13 +186,10 @@ fetchCandidates()
       >
         {{ t('components.library.radios.Filter.matchingTracks', checkResult.candidates.count) }}
       </a>
-      <semantic-modal
+      <Modal :title="t('components.library.radios.Filter.matchingTracksModalHeader')"
         v-if="checkResult"
         v-model:show="showCandidadesModal"
       >
-        <h4 class="header">
-          {{ t('components.library.radios.Filter.matchingTracksModalHeader') }}
-        </h4>
         <div class="content">
           <div class="description">
             <track-table
@@ -202,7 +203,7 @@ fetchCandidates()
             {{ t('components.library.radios.Filter.cancelButton') }}
           </Button>
         </div>
-      </semantic-modal>
+      </Modal>
     </td>
     <td>
       <Button
diff --git a/front/src/components/manage/moderation/InstancePolicyModal.vue b/front/src/components/manage/moderation/InstancePolicyModal.vue
index 838e92819..316a85c64 100644
--- a/front/src/components/manage/moderation/InstancePolicyModal.vue
+++ b/front/src/components/manage/moderation/InstancePolicyModal.vue
@@ -3,12 +3,12 @@ import type { BackendError } from '~/types'
 
 import axios from 'axios'
 
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 
 interface Props {
@@ -29,6 +29,11 @@ const result = ref()
 const obj = computed(() => result.value?.results[0] ?? null)
 
 const isLoading = ref(false)
+
+watch (show, (newValue) => {
+  if (newValue) fetchData()
+})
+
 const fetchData = async () => {
   const [username, domain] = props.target.split('@')
 
@@ -67,13 +72,10 @@ const fetchData = async () => {
     <slot>
       {{ t('components.manage.moderation.InstancePolicyModal.button.show') }}
     </slot>
-    <semantic-modal
-      v-model:show="show"
-      @show="fetchData"
+    <Modal :title="t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target})"
+      v-model="show"
+      :cancel="t('components.manage.moderation.InstancePolicyModal.button.close')"
     >
-      <h4 class="header">
-        {{ t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target}) }}
-      </h4>
       <div class="content">
         <div class="description">
           <div
@@ -104,11 +106,6 @@ const fetchData = async () => {
         <div class="ui hidden divider" />
         <div class="ui hidden divider" />
       </div>
-      <div class="actions">
-        <Button color="secondary">
-          {{ t('components.manage.moderation.InstancePolicyModal.button.close') }}
-        </Button>
-      </div>
-    </semantic-modal>
+    </Modal>
   </Button>
 </template>
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index f4e36acd6..f917c8972 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -7,9 +7,11 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
 import useLogger from '~/composables/useLogger'
 
+import Modal from '~/components/ui/Modal.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 const logger = useLogger()
 const { t } = useI18n()
 
@@ -58,23 +60,15 @@ const hide = async () => {
 </script>
 
 <template>
-  <semantic-modal v-model:show="show">
-    <h4
-      v-if="type === 'artist'"
-      class="header"
-    >
-      {{ t('components.moderation.FilterModal.header.modal', {name: target?.name}) }}
-    </h4>
+  <Modal v-model="show"
+    :title="type==='artist' ? t('components.moderation.FilterModal.header.modal', {name: target?.name}) : errors.length > 0 ? t('components.moderation.FilterModal.header.failure') : ''"
+    :cancel="t('components.moderation.FilterModal.button.cancel')"
+  >
     <div class="scrolling content">
       <div class="description">
-        <div
+        <Alert red
           v-if="errors.length > 0"
-          role="alert"
-          class="ui negative message"
         >
-          <h4 class="header">
-            {{ t('components.moderation.FilterModal.header.failure') }}
-          </h4>
           <ul class="list">
             <li
               v-for="(error, key) in errors"
@@ -83,7 +77,7 @@ const hide = async () => {
               {{ error }}
             </li>
           </ul>
-        </div>
+        </Alert>
         <template v-if="type === 'artist'">
           <p>
             {{ t('components.moderation.FilterModal.warning.createFilter.listIntro') }}
@@ -109,9 +103,6 @@ const hide = async () => {
       </div>
     </div>
     <div class="actions">
-      <button class="ui basic cancel button">
-        {{ t('components.moderation.FilterModal.button.cancel') }}
-      </button>
       <button
         :class="['ui', 'success', {loading: isLoading}, 'button']"
         @click="hide"
@@ -119,5 +110,5 @@ const hide = async () => {
         {{ t('components.moderation.FilterModal.button.hide') }}
       </button>
     </div>
-  </semantic-modal>
+  </Modal>
 </template>
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index 2460d4193..f582c7f97 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -3,11 +3,13 @@ import type { BackendError } from '~/types'
 
 import axios from 'axios'
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref, watchEffect } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
+import Modal from '~/components/ui/Modal.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface ReportType {
   anonymous: boolean
   type: string
@@ -120,12 +122,14 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <semantic-modal v-model:show="show">
+  <Modal :title="target ? t('components.moderation.ReportModal.header.modal') : errors.length > 0 ? t('components.moderation.ReportModal.header.submissionFailure') : ''"
+    v-model="show"
+    :cancel="t('components.moderation.ReportModal.button.cancel')"
+  >
     <h2
       v-if="target"
       class="ui header"
     >
-      {{ t('components.moderation.ReportModal.header.modal') }}
       <div class="ui sub header">
         {{ target.typeLabel }}
         <span class="middle hyphen symbol" />
@@ -134,14 +138,9 @@ watchEffect(async () => {
     </h2>
     <div class="scrolling content">
       <div class="description">
-        <div
+        <Alert red
           v-if="errors.length > 0"
-          role="alert"
-          class="ui negative message"
         >
-          <h4 class="header">
-            {{ t('components.moderation.ReportModal.header.submissionFailure') }}
-          </h4>
           <ul class="list">
             <li
               v-for="(error, key) in errors"
@@ -150,7 +149,7 @@ watchEffect(async () => {
               {{ error }}
             </li>
           </ul>
-        </div>
+        </Alert>
       </div>
       <p>
         {{ t('components.moderation.ReportModal.description.modal') }}
@@ -238,18 +237,15 @@ watchEffect(async () => {
         </h4>
       </div>
     </div>
-    <div class="actions">
-      <button class="ui basic cancel button">
-        {{ t('components.moderation.ReportModal.button.cancel') }}
-      </button>
-      <button
+    <template #actions>
+      <Button
         v-if="canSubmit"
         :class="['ui', 'success', {loading: isLoading}, 'button']"
         type="submit"
         form="report-form"
       >
         {{ t('components.moderation.ReportModal.button.submit') }}
-      </button>
-    </div>
-  </semantic-modal>
+      </Button>
+    </template>
+  </Modal>
 </template>
diff --git a/front/src/components/semantic/Modal.vue b/front/src/components/semantic/Modal.vue
deleted file mode 100644
index 1dc713551..000000000
--- a/front/src/components/semantic/Modal.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { computed } from 'vue'
-import { useStore } from '~/store'
-import Modal from '~/components/ui/Modal.vue'
-
-interface Props {
-  fullscreen?: boolean
-  scrolling?: boolean
-  additionalClasses?: string[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  fullscreen: true,
-  scrolling: false,
-  additionalClasses: () => []
-})
-const store = useStore()
-const classes = computed(() => [
-  ...props.additionalClasses,
-  {
-    scrolling: props.scrolling,
-    'overlay fullscreen': props.fullscreen && ['phone', 'tablet'].includes(store.getters['ui/windowSize'])
-  }
-])
-
-const isOpen = ref(false)
-
-</script>
-
-<template>
-  (Semantic Modal)
-</template>
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index c1fad8de7..8261c49a1 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Actor } from '~/types'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
@@ -10,6 +9,9 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 
+import Modal from '~/components/ui/Modal.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'updated', value: Actor): void
 }
@@ -83,24 +85,16 @@ const createForm = ref()
       </library-widget>
     </div>
 
-    <semantic-modal v-model:show="showCreateModal">
-      <h4 class="header">
-        <span
-          v-if="step === 1"
-        >
-          {{ t('views.auth.ProfileOverview.modal.createChannel.header') }}
-        </span>
-        <span
-          v-else-if="category === 'podcast'"
-        >
-          {{ t('views.auth.ProfileOverview.modal.createChannel.podcast.header') }}
-        </span>
-        <span
-          v-else
-        >
-          {{ t('views.auth.ProfileOverview.modal.createChannel.artist.header') }}
-        </span>
-      </h4>
+    <Modal v-model="showCreateModal"
+      :title="t(`views.auth.ProfileOverview.modal.createChannel.${
+        step === 1 ?
+          'header' :
+        category === 'podcast' ?
+          'podcast.header'
+        :
+          'artist.header'
+      }`)"
+    >
       <div
         ref="modalContent"
         class="scrolling content"
@@ -117,37 +111,35 @@ const createForm = ref()
         />
         <div class="ui hidden divider" />
       </div>
-      <div class="actions">
-        <button
+      <template #actions>
+        <Button destructive
           v-if="step === 1"
-          class="ui basic deny button"
+          autofocus
         >
           {{ t('views.auth.ProfileOverview.button.cancel') }}
-        </button>
-        <button
+        </Button>
+        <Button secondary
           v-if="step > 1"
-          class="ui basic button"
           @click.stop.prevent="step -= 1"
         >
           {{ t('views.auth.ProfileOverview.button.previous') }}
-        </button>
-        <button
+        </Button>
+        <Button primary
           v-if="step === 1"
-          class="ui primary button"
           @click.stop.prevent="step += 1"
         >
           {{ t('views.auth.ProfileOverview.button.next') }}
-        </button>
-        <button
+        </Button>
+        <Button primary
           v-if="step === 2"
-          :class="['ui', 'primary button', { loading }]"
           type="submit"
           :disabled="!submittable && !loading"
+          :isLoading="loading"
           @click.prevent.stop="createForm.submit"
         >
           {{ t('views.auth.ProfileOverview.button.createChannel') }}
-        </button>
-      </div>
-    </semantic-modal>
+        </Button>
+      </template>
+    </Modal>
   </section>
 </template>
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 264486002..cf2885c65 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -8,14 +8,17 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+import useReport from '~/composables/moderation/useReport'
+
 import SubscribeButton from '~/components/channels/SubscribeButton.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import HumanDuration from '~/components/common/HumanDuration.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
 import RadioButton from '~/components/radios/Button.vue'
+
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 import Tabs from '~/components/ui/Tabs.vue'
@@ -24,11 +27,8 @@ import OptionsButton from '~/components/ui/button/Options.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Modal from '~/components/ui/Modal.vue'
 import Spacer from '~/components/ui/Spacer.vue'
-
-import useErrorHandler from '~/composables/useErrorHandler'
-import useReport from '~/composables/moderation/useReport'
+import Modal from '~/components/ui/Modal.vue'
 
 interface Events {
   (e: 'deleted'): void
@@ -347,13 +347,12 @@ const updateSubscriptionCount = (delta: number) => {
                 @unsubscribed="updateSubscriptionCount(-1)"
               />
 
-              <semantic-modal
+              <Modal
+                :title="t('views.channels.DetailBase.modal.embed.header')"
                 v-if="totalTracks > 0"
-                v-model:show="showEmbedModal"
+                v-model="showEmbedModal"
+                :cancel="t('views.channels.DetailBase.button.cancel')"
               >
-                <h4 class="header">
-                  {{ t('views.channels.DetailBase.modal.embed.header') }}
-                </h4>
                 <div class="scrolling content">
                   <div class="description">
                     <embed-wizard
@@ -362,28 +361,19 @@ const updateSubscriptionCount = (delta: number) => {
                     />
                   </div>
                 </div>
-                <div class="actions">
+                <template #actions>
                   <button class="ui basic deny button">
                     {{ t('views.channels.DetailBase.button.cancel') }}
                   </button>
-                </div>
-              </semantic-modal>
-              <semantic-modal
+                </template>
+              </Modal>
+              <Modal
+                :title="t(`views.channels.DetailBase.header.${
+                  object.artist?.content_category === 'podcast' ? 'podcastChannel' : 'artistChannel'
+                }`)"
                 v-if="isOwner"
-                v-model:show="showEditModal"
+                v-model="showEditModal"
               >
-                <h4 class="header">
-                  <span
-                    v-if="object.artist?.content_category === 'podcast'"
-                  >
-                    {{ t('views.channels.DetailBase.header.podcastChannel') }}
-                  </span>
-                  <span
-                    v-else
-                  >
-                    {{ t('views.channels.DetailBase.header.artistChannel') }}
-                  </span>
-                </h4>
                 <div class="scrolling content">
                   <channel-form
                     ref="editForm"
@@ -394,31 +384,29 @@ const updateSubscriptionCount = (delta: number) => {
                   />
                   <div class="ui hidden divider" />
                 </div>
-                <div class="actions">
-                  <button class="ui left floated basic deny button">
-                    {{ t('views.channels.DetailBase.button.cancel') }}
-                  </button>
-                  <button
-                    :class="['ui', 'primary', 'confirm', {loading: edit.loading}, 'button']"
+                <template #actions>
+                  <Button
+                    primary
+                    autofocus
+                    :isLoading="edit.loading"
                     :disabled="!edit.submittable"
                     @click.stop="editForm?.submit"
                   >
                     {{ t('views.channels.DetailBase.button.updateChannel') }}
-                  </button>
-                </div>
-              </semantic-modal>
+                  </Button>
+                </template>
+              </Modal>
               <Button
                 secondary
                 icon="bi-rss"
                 @click.stop.prevent="showSubscribeModal = true"
               />
-              <semantic-modal
+              <Modal
+                :title="t('views.channels.DetailBase.modal.subscribe.header')"
                 v-model:show="showSubscribeModal"
                 class="tiny"
+                :cancel="t('views.channels.DetailBase.button.cancel')"
               >
-                <h4 class="header">
-                  {{ t('views.channels.DetailBase.modal.subscribe.header') }}
-                </h4>
                 <div class="scrollable content">
                   <div class="description">
                     <template v-if="store.state.auth.authenticated">
@@ -457,12 +445,7 @@ const updateSubscriptionCount = (delta: number) => {
                     </template>
                   </div>
                 </div>
-                <div class="actions">
-                  <button class="ui basic deny button">
-                    {{ t('views.channels.DetailBase.button.cancel') }}
-                  </button>
-                </div>
-              </semantic-modal>
+              </Modal>
             </Layout>
           </Layout>
         </Layout>