From 416baf7731f6f76a0e72963daa8b8ad12fa7fe90 Mon Sep 17 00:00:00 2001
From: Qijia Liu <liumeo@pku.edu.cn>
Date: Mon, 23 Sep 2024 00:29:04 -0400
Subject: [PATCH] advanced config; tooltip

---
 src/components/StatusArea.vue | 43 +++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/StatusArea.vue b/src/components/StatusArea.vue
index 944d5ae..0402263 100644
--- a/src/components/StatusArea.vue
+++ b/src/components/StatusArea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { NModal, NSelect, NSpace } from 'naive-ui'
-import { GearButton, GlobalConfig, InputMethodConfig, ThemeConfig } from 'fcitx5-config-vue'
+import { NModal, NSelect, NSpace, NTooltip } from 'naive-ui'
+import { AdvancedConfig, GearButton, GlobalConfig, InputMethodConfig, ThemeConfig } from 'fcitx5-config-vue'
 import { inputMethod, inputMethods, loading } from '../fcitx'
 import MenuButton from './MenuButton.vue'
 import GlobalButton from './GlobalButton.vue'
@@ -16,12 +16,13 @@ const options = computed(() => {
 })
 
 const showModal = ref(false)
-const modalType = ref<'im' | 'global' | 'theme'>('im')
+const modalType = ref<'im' | 'global' | 'theme' | 'advanced'>('im')
 
 const titleMap = {
-  im: 'Input Method Config',
+  im: 'Input Method',
   global: 'Global Config',
-  theme: 'Theme Config',
+  theme: 'Theme Editor',
+  advanced: 'Advanced',
 }
 </script>
 
@@ -33,11 +34,31 @@ const titleMap = {
       :loading="loading"
       :options="options"
     />
-    <GearButton @click="modalType = 'im'; showModal = true" />
+    <NTooltip>
+      <template #trigger>
+        <GearButton @click="modalType = 'im'; showModal = true" />
+      </template>
+      {{ titleMap.im }}
+    </NTooltip>
     <MenuButton />
-    <GlobalButton @click="modalType = 'global'; showModal = true" />
-    <ThemeButton @click="modalType = 'theme'; showModal = true" />
-    <AdvancedButton />
+    <NTooltip>
+      <template #trigger>
+        <GlobalButton @click="modalType = 'global'; showModal = true" />
+      </template>
+      {{ titleMap.global }}
+    </NTooltip>
+    <NTooltip>
+      <template #trigger>
+        <ThemeButton @click="modalType = 'theme'; showModal = true" />
+      </template>
+      {{ titleMap.theme }}
+    </NTooltip>
+    <NTooltip>
+      <template #trigger>
+        <AdvancedButton @click="modalType = 'advanced'; showModal = true" />
+      </template>
+      {{ titleMap.advanced }}
+    </NTooltip>
     <NModal
       v-model:show="showModal"
       preset="card"
@@ -57,6 +78,10 @@ const titleMap = {
         v-else-if="modalType === 'theme'"
         @close="showModal = false"
       />
+      <AdvancedConfig
+        v-else
+        @close="showModal = false"
+      />
     </NModal>
   </NSpace>
 </template>