fix(front): [WIP] replace `semantic-modal` with `ui/Modal` component

front/src/components/Sidebar.vue

@@ -9,7 +9,7 @@ import { useRoute } from 'vue-router'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import UserModal from '~/components/common/UserModal.vue'
 import SearchBar from '~/components/audio/SearchBar.vue'
 import UserMenu from '~/components/common/UserMenu.vue'
@@ -97,7 +97,7 @@ const moderationNotifications = computed(() =>
     + store.state.ui.notifications.pendingReviewRequests
 )
 
-const showLanguageModal = ref(false)
+const isLanguageModalOpen = ref(false)
 const locale = ref(i18nLocale.value)
 watch(locale, (locale) => {
   setI18nLanguage(locale)
@@ -106,8 +106,8 @@ watch(locale, (locale) => {
 const isProduction = import.meta.env.PROD
 const isTauri = checkTauri()
 
-const showUserModal = ref(false)
+const isUserModalOpen = ref(false)
-const showThemeModal = ref(false)
+const isThemeModalOpen = ref(false)
 
 // const el = useCurrentElement()
 // watchEffect(() => {
@@ -243,7 +243,7 @@ onMounted(() => {
           <a
             href=""
             class="item"
-            @click.prevent.exact="showUserModal = !showUserModal"
+            @click.prevent.exact="isUserModalOpen = !isUserModalOpen"
           >
             <img
               v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
@@ -268,19 +268,21 @@ onMounted(() => {
           </a>
         </template>
         <user-modal
-          v-model:show="showUserModal"
+          v-model:show="isUserModalOpen"
-          @show-theme-modal-event="showThemeModal=true"
+          @show-theme-modal-event="isThemeModalOpen=true"
-          @show-language-modal-event="showLanguageModal=true"
+          @show-language-modal-event="isLanguageModalOpen=true"
         />
-        <semantic-modal
+        <Modal
+          :title="labels.language"
           ref="languageModal"
-          v-model:show="showLanguageModal"
+          v-model="isLanguageModalOpen"
           :fullscreen="false"
         >
+          <!-- TODO: Is this actually a popover menu, not a modal? -->
           <i
             role="button"
             class="left chevron back inside icon"
-            @click.prevent.exact="showUserModal = !showUserModal"
+            @click.prevent.exact="isUserModalOpen = !isUserModalOpen"
           />
           <div class="header">
             <h3 class="title">
@@ -302,16 +304,16 @@ onMounted(() => {
               <label :for="`${key}`">{{ language }}</label>
             </fieldset>
           </div>
-        </semantic-modal>
+        </Modal>
-        <semantic-modal
+        <Modal
           ref="themeModal"
-          v-model:show="showThemeModal"
+          v-model:show="isThemeModalOpen"
           :fullscreen="false"
         >
           <i
             role="button"
             class="left chevron back inside icon"
-            @click.prevent.exact="showUserModal = !showUserModal"
+            @click.prevent.exact="isUserModalOpen = !isUserModalOpen"
           />
           <div class="header">
             <h3 class="title">
@@ -333,7 +335,7 @@ onMounted(() => {
               <label :for="th.key">{{ th.name }}</label>
             </fieldset>
           </div>
-        </semantic-modal>
+        </Modal>
         <div class="item collapse-button-wrapper">
           <button
             :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']"