feat: add search page mode settings panel popup

src/components/Settings/components/ChildSettingsDialog.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  desc?: string
+}>()
+
+const emit = defineEmits(['close'])
+
+function handleClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div pos="absolute top-0 left-0" w-full h-full bg="black opacity-60" z-1 @click="handleClose" />
+  <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"
+  >
+    <header
+      pos="fixed top-0 left-0" w-full h-80px px-8 flex items-center justify-between
+      rounded="t-$bew-radius" z-1
+      style="
+        background: linear-gradient(var(--bew-elevated-solid-1), transparent);
+        text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
+      "
+    >
+      <div>
+        <p text-xl>
+          {{ title }}
+        </p>
+        <p text="sm $bew-text-2">
+          <slot name="desc">
+            {{ desc }}
+          </slot>
+        </p>
+      </div>
+
+      <div
+        text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px" p="1" rounded-8 cursor="pointer" backdrop-glass
+        hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
+        @click="handleClose"
+      >
+        <ic-baseline-clear />
+      </div>
+    </header>
+    <main p-8 relative h-full overflow-y-overlay>
+      <div h-80px mt--8 />
+      <slot />
+    </main>
+  </div>
+</template>

src/components/Settings/components/Home.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import SearchPage from './SearchPage.vue'
 import { grantAccessKey, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
 
 const { t } = useI18n()
 
 const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
+const showSearchPageModeSharedSettings = ref<boolean>(false)
 
 function handleAuthorize() {
   grantAccessKey(t, authorizeBtn.value)
@@ -81,9 +83,21 @@ 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>
+      <Button type="secondary" block center @click="showSearchPageModeSharedSettings = true">
         Open Settings...
       </Button>
+
+      <ChildSettingsDialog
+        v-if="showSearchPageModeSharedSettings"
+        title="Settings shared with the search page"
+        @close="showSearchPageModeSharedSettings = false"
+      >
+        <template #desc>
+          <span color="$bew-warning-color">Those settings are used in common with the search page</span>
+        </template>
+
+        <SearchPage />
+      </ChildSettingsDialog>
     </SettingsItem>
   </SettingsItemGroup>
 </template>