feat: prevent closing the settings panel when it has a child dialog

* style: adjust `ChildSettingsDialog` styles

src/components/Settings/Settings.vue

@@ -15,6 +15,9 @@ const { t } = useI18n()
 const settingsMenu = { General, Appearance, SearchPage, Home, About }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
+const preventCloseSettings = ref<boolean>(false)
+
+provide('preventCloseSettings', preventCloseSettings)
 
 const settingsMenuItems = computed(() => {
   return [
@@ -64,6 +67,8 @@ onMounted(() => {
 })
 
 function handleClose() {
+  if (preventCloseSettings.value)
+    return
   emit('close')
 }
 
@@ -88,12 +93,20 @@ function setCurrentTitle() {
     max-w-900px max-h-800px transform="~ translate-x--1/2 translate-y--1/2"
     z-9999 flex justify-between items-center
   >
-    <aside class="group" shrink-0 p="x-4" pos="absolute left--42px" z-2>
+    <aside
+      class="group" shrink-0 p="x-4" pos="absolute left--42px" z-2
+      :style="{
+        pointerEvents: preventCloseSettings ? 'none' : ''
+      }"
+    >
       <ul
         flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-2" p-2 shadow="$bew-shadow-3"
-        scale="group-hover:105" duration-300
+        scale="group-hover:105" duration-300 overflow-hidden
         backdrop-glass
       >
+        <!-- mask -->
+        <div v-if="preventCloseSettings" pos="absolute top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" />
+
         <li v-for="item in settingsMenuItems" :key="item.value">
           <a
             cursor-pointer w="40px group-hover:150px" h-40px

src/components/Settings/components/ChildSettingsDialog.vue

@@ -12,10 +12,10 @@ function handleClose() {
 </script>
 
 <template>
-  <div pos="absolute top-0 left-0" w-full h-full bg="black opacity-60" z-1 @click="handleClose" />
+  <div pos="fixed top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" rounded="$bew-radius" z-1 />
   <div
-    pos="absolute top-1/2 left-1/2" bg="$bew-elevated-1" backdrop-glass w="90%" h="85%" rounded="$bew-radius"
-    transform="translate--1/2" z-2 overflow-hidden shadow="$bew-shadow-3"
+    pos="absolute top-1/2 left-1/2" bg="$bew-elevated-solid-1" w="90%" h="85%" rounded="$bew-radius"
+    transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow-hidden
   >
     <header
       pos="fixed top-0 left-0" w-full h-80px px-8 flex items-center justify-between

src/components/Settings/components/Home.vue

@@ -10,6 +10,8 @@ const { t } = useI18n()
 const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
 const showSearchPageModeSharedSettings = ref<boolean>(false)
 
+const preventCloseSettings = inject('preventCloseSettings') as Ref<boolean>
+
 function handleAuthorize() {
   grantAccessKey(t, authorizeBtn.value)
 }
@@ -17,6 +19,16 @@ function handleAuthorize() {
 function handleRevoke() {
   revokeAccessKey()
 }
+
+function handleOpenSearchPageModeSharedSettings() {
+  showSearchPageModeSharedSettings.value = true
+  preventCloseSettings.value = true
+}
+
+function handleCloseSearchPageModeSharedSettings() {
+  showSearchPageModeSharedSettings.value = false
+  preventCloseSettings.value = false
+}
 </script>
 
 <template>
@@ -83,14 +95,14 @@ function handleRevoke() {
       <template #desc>
         <span color="$bew-warning-color">Those settings are used in common with the search page</span>
       </template>
-      <Button type="secondary" block center @click="showSearchPageModeSharedSettings = true">
+      <Button type="secondary" block center @click="handleOpenSearchPageModeSharedSettings">
         Open Settings...
       </Button>
 
       <ChildSettingsDialog
         v-if="showSearchPageModeSharedSettings"
         title="Settings shared with the search page"
-        @close="showSearchPageModeSharedSettings = false"
+        @close="handleCloseSearchPageModeSharedSettings"
       >
         <template #desc>
           <span color="$bew-warning-color">Those settings are used in common with the search page</span>