<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 />
</template>

<script setup lang="ts">
import { useEditor } from "@/stores/editor"
import { useUserinfo } from "@/stores/userinfo"
import PostTools from "@/components/publish/PostTools.vue"

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>
