[WIP] replace `semantic-modal` with `ui/Modal` component

front/src/components/ShortcutsModal.vue

@@ -1,21 +1,10 @@
 <script setup lang="ts">
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
-import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-interface Events {
-  (e: 'update:show', show: boolean): void
-}
 
-interface Props {
+const model = defineModel<boolean>()
-  show: boolean
-}
-
-const emit = defineEmits<Events>()
-const props = defineProps<Props>()
-
-const showRef = useVModel(props, 'show', emit)
 
 const { t } = useI18n()
 const general = computed(() => [
@@ -108,10 +97,9 @@ const player = computed(() => [
 </script>
 
 <template>
-  <semantic-modal v-model:show="showRef">
+  <Modal
-    <header class="header">
+    :title="t('components.ShortcutsModal.header.modal')"
-      {{ t('components.ShortcutsModal.header.modal') }}
+    v-model="model">
-    </header>
     <section class="scrolling content">
       <div class="ui stackable two column grid">
         <div class="column">
@@ -157,5 +145,5 @@ const player = computed(() => [
         {{ t('components.ShortcutsModal.button.close') }}
       </button>
     </footer>
-  </semantic-modal>
+  </Modal>
 </template>

front/src/components/Sidebar.vue

@@ -306,6 +306,7 @@ onMounted(() => {
           </div>
         </Modal>
         <Modal
+          :title="labels.theme"
           ref="themeModal"
           v-model:show="isThemeModalOpen"
           :fullscreen="false"