add 3 placeholder buttons

src/components/AdvancedButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import PuzzleIcon from './PuzzleIcon.vue'
+</script>
+
+<template>
+  <NButton
+    secondary
+  >
+    <template #icon>
+      <NIcon>
+        <PuzzleIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>

src/components/GlobalButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import GlobalIcon from './GlobalIcon.vue'
+</script>
+
+<template>
+  <NButton
+    secondary
+  >
+    <template #icon>
+      <NIcon>
+        <GlobalIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>

src/components/GlobalIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'PhGlobe',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24m88 104a87.6 87.6 0 0 1-3.33 24h-38.51a157.4 157.4 0 0 0 0-48h38.51a87.6 87.6 0 0 1 3.33 24m-114 40h52a115.1 115.1 0 0 1-26 45a115.3 115.3 0 0 1-26-45m-3.9-16a140.8 140.8 0 0 1 0-48h59.88a140.8 140.8 0 0 1 0 48ZM40 128a87.6 87.6 0 0 1 3.33-24h38.51a157.4 157.4 0 0 0 0 48H43.33A87.6 87.6 0 0 1 40 128m114-40h-52a115.1 115.1 0 0 1 26-45a115.3 115.3 0 0 1 26 45m52.33 0h-35.62a135.3 135.3 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.3 135.3 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6M49.63 168h35.66a135.3 135.3 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168m98.78 45.6a135.3 135.3 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6" /></svg>
+</template>

src/components/PaletteIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'MaterialSymbolsPaletteOutline',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-5.5-9q.65 0 1.075-.425T8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13m3-4q.65 0 1.075-.425T11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9m5 0q.65 0 1.075-.425T16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9m3 4q.65 0 1.075-.425T19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13M12 20q.225 0 .363-.125t.137-.325q0-.35-.375-.825T11.75 17.3q0-1.05.725-1.675T14.25 15H16q1.65 0 2.825-.962T20 11.05q0-3.025-2.312-5.038T12.2 4Q8.8 4 6.4 6.325T4 12q0 3.325 2.338 5.663T12 20" /></svg>
+</template>

src/components/PuzzleIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'MdiPuzzle',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.5 11H19V7a2 2 0 0 0-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1A2.5 2.5 0 0 0 8 3.5V5H4a2 2 0 0 0-2 2v3.8h1.5c1.5 0 2.7 1.2 2.7 2.7S5 16.2 3.5 16.2H2V20a2 2 0 0 0 2 2h3.8v-1.5c0-1.5 1.2-2.7 2.7-2.7s2.7 1.2 2.7 2.7V22H17a2 2 0 0 0 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5" /></svg>
+</template>

src/components/StatusArea.vue

@@ -4,6 +4,9 @@ import { NModal, NSelect, NSpace } from 'naive-ui'
 import { GearButton, InputMethodConfig } from 'fcitx5-config-vue'
 import { inputMethod, inputMethods, loading } from '../fcitx'
 import MenuButton from './MenuButton.vue'
+import GlobalButton from './GlobalButton.vue'
+import ThemeButton from './ThemeButton.vue'
+import AdvancedButton from './AdvancedButton.vue'
 
 const options = computed(() => {
   return inputMethods.value.map(({ displayName, name }) => ({
@@ -25,6 +28,9 @@ const showModal = ref(false)
     />
     <GearButton @click="showModal = true" />
     <MenuButton />
+    <GlobalButton />
+    <ThemeButton />
+    <AdvancedButton />
     <NModal
       v-model:show="showModal"
       preset="card"

src/components/ThemeButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import PaletteIcon from './PaletteIcon.vue'
+</script>
+
+<template>
+  <NButton
+    secondary
+  >
+    <template #icon>
+      <NIcon>
+        <PaletteIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>