💄 Better speed dial

src/layouts/master.vue

@@ -83,22 +83,6 @@
   <v-main id="main">
     <router-view />
   </v-main>
-
-  <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
-          transition="scroll-y-reverse-transition">
-    <template v-slot:activator="{ props }">
-      <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
-             :active="id.userinfo.isLoggedIn" />
-    </template>
-
-    <div class="flex flex-col items-center gap-4 mb-4">
-      <v-btn variant="elevated" color="secondary" icon="mdi-newspaper-variant" @click="editor.show.article = true" />
-      <v-btn variant="elevated" color="accent" icon="mdi-camera-iris" @click="editor.show.moment = true" />
-    </div>
-  </v-menu>
-
-  <post-tools />
-  <realm-tools />
 </template>
 
 <script setup lang="ts">
@@ -123,7 +107,6 @@ const safeAreaBottom = computed(() => {
 })
 
 const id = useUserinfo()
-const editor = useEditor()
 
 const username = computed(() => {
   if (id.userinfo.isLoggedIn) {
@@ -154,10 +137,3 @@ const drawerOpen = ref(true)
 const drawerMini = ref(false)
 </script>
 
-<style scoped>
-.editor-fab {
-  position: fixed !important;
-  bottom: 16px;
-  right: 20px;
-}
-</style>

src/layouts/plaza.vue

@@ -0,0 +1,65 @@
+<template>
+  <router-view />
+
+  <v-fab
+    appear
+    class="editor-fab"
+    color="primary"
+    size="64"
+    :active="id.userinfo.isLoggedIn"
+  >
+    <v-icon icon="mdi-pencil" />
+
+    <v-speed-dial
+      target=".editor-fab"
+      activator="parent"
+      location="top center"
+      class="editor-speed-dial"
+      transition="slide-y-reverse-transition"
+      open-on-hover
+      open-on-click
+    >
+      <v-btn
+        key="article"
+        variant="elevated"
+        color="secondary"
+        icon="mdi-newspaper-variant"
+        @click="editor.show.article = true"
+      />
+      <v-btn
+        key="moment"
+        variant="elevated"
+        color="accent"
+        icon="mdi-camera-iris"
+        @click="editor.show.moment = true"
+      />
+    </v-speed-dial>
+  </v-fab>
+
+  <post-tools />
+  <realm-tools />
+</template>
+
+<script setup lang="ts">
+import PostTools from "@/components/publish/PostTools.vue"
+import RealmTools from "@/components/realms/RealmTools.vue"
+import { useEditor } from "@/stores/editor"
+import { useUserinfo } from "@/stores/userinfo"
+
+const id = useUserinfo()
+const editor = useEditor()
+</script>
+
+<style scoped>
+.editor-fab {
+  position: fixed !important;
+  bottom: 16px;
+  right: 20px;
+}
+
+.editor-speed-dial {
+  position: fixed !important;
+  bottom: 16px;
+  right: 20px;
+}
+</style>