💄 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>

src/router/index.ts

@@ -10,25 +10,42 @@ const router = createRouter({
       children: [
         {
           path: "/",
-          name: "explore",
-          component: () => import("@/views/explore.vue")
+          component: () => import("@/layouts/plaza.vue"),
+          children: [
+            {
+              path: "/",
+              name: "explore",
+              component: () => import("@/views/explore.vue")
+            },
+
+            {
+              path: "/p/moments/:alias",
+              name: "posts.details.moments",
+              component: () => import("@/views/posts/moments.vue")
+            },
+            {
+              path: "/p/articles/:alias",
+              name: "posts.details.articles",
+              component: () => import("@/views/posts/articles.vue")
+            },
+
+            {
+              path: "/realms/:realmId",
+              name: "realms.page",
+              component: () => import("@/views/realms/page.vue")
+            }
+          ]
         },
 
         {
-          path: "/p/moments/:alias",
-          name: "posts.details.moments",
-          component: () => import("@/views/posts/moments.vue")
-        },
-        {
-          path: "/p/articles/:alias",
-          name: "posts.details.articles",
-          component: () => import("@/views/posts/articles.vue")
-        },
-
-        {
-          path: "/realms/:realmId",
-          name: "realms.page",
-          component: () => import("@/views/realms/page.vue")
+          path: "/chat",
+          children: [
+            {
+              path: ":channel",
+              name: "chat.channel",
+              component: () => import("@/views/chat/channel.vue")
+            }
+          ]
         },
 
         {

src/scripts/request.ts

@@ -3,7 +3,8 @@ import { Preferences } from "@capacitor/preferences"
 
 const serviceMap: { [id: string]: string } = {
   interactive: "https://co.solsynth.dev",
-  identity: "https://id.solsynth.dev"
+  identity: "https://id.solsynth.dev",
+  messaging: "http://localhost:8447",
 }
 
 export async function request(service: string, input: string, init?: RequestInit, noRetry?: boolean) {

src/views/chat/channel.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-app-bar :order="5" color="grey-lighten-3">
+    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
+      <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" />
+
+      <h2 class="ml-2 text-lg font-500">{{ metadata?.name }}</h2>
+
+      <p class="ml-3 text-xs opacity-80">{{ metadata?.description }}</p>
+    </div>
+  </v-app-bar>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { useRoute } from "vue-router"
+import { ref } from "vue"
+
+const route = useRoute()
+
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+const metadata = ref<any>(null)
+
+async function readMetadata() {
+  loading.value = true
+  const res = await request("messaging", `/api/channels/${route.params.channel}`)
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    error.value = null
+    metadata.value = await res.json()
+  }
+  loading.value = false
+}
+
+readMetadata()
+</script>