From e0fb7f0fc414c2f68419234c2ae963913b49ff28 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 12 Dec 2024 10:46:36 +0100
Subject: [PATCH] [WIP] replace `semantic-modal` with `ui/Modal` component

---
 front/src/components/ShortcutsModal.vue | 24 ++++++------------------
 front/src/components/Sidebar.vue        |  1 +
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 33b0f05c8..07b56f4eb 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -1,21 +1,10 @@
 <script setup lang="ts">
-import SemanticModal from '~/components/semantic/Modal.vue'
-import { useVModel } from '@vueuse/core'
+import Modal from '~/components/ui/Modal.vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-interface Events {
-  (e: 'update:show', show: boolean): void
-}
 
-interface Props {
-  show: boolean
-}
-
-const emit = defineEmits<Events>()
-const props = defineProps<Props>()
-
-const showRef = useVModel(props, 'show', emit)
+const model = defineModel<boolean>()
 
 const { t } = useI18n()
 const general = computed(() => [
@@ -108,10 +97,9 @@ const player = computed(() => [
 </script>
 
 <template>
-  <semantic-modal v-model:show="showRef">
-    <header class="header">
-      {{ t('components.ShortcutsModal.header.modal') }}
-    </header>
+  <Modal
+    :title="t('components.ShortcutsModal.header.modal')"
+    v-model="model">
     <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>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index cb500ac7f..9fa6c6b0c 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -306,6 +306,7 @@ onMounted(() => {
           </div>
         </Modal>
         <Modal
+          :title="labels.theme"
           ref="themeModal"
           v-model:show="isThemeModalOpen"
           :fullscreen="false"