Allow to set visibility in post editor

src/api/posts.ts

@@ -108,6 +108,7 @@ export async function getPostContext(
 export interface PostData {
   content: string;
   in_reply_to_id: string | null;
+  visibility: string;
 }
 
 export async function createPost(
@@ -121,6 +122,7 @@ export async function createPost(
     status: postData.content,
     "media_ids[]": attachment ? [attachment.id] : null,
     in_reply_to_id: postData.in_reply_to_id,
+    visibility: postData.visibility,
   }
   const response = await http(url, {
     method: "POST",

src/components/Post.vue

@@ -21,8 +21,7 @@
         target="_blank"
         rel="noreferrer"
       >
-        <img v-if="post.visibility === 'public'" :src="require('@/assets/feather/globe.svg')">
+        <visibility-icon :visibility="post.visibility"></visibility-icon>
-        <img v-else-if="post.visibility === 'direct'" :src="require('@/assets/feather/lock.svg')">
       </a>
       <a
         v-if="inThread && post.in_reply_to_id"
@@ -109,14 +108,14 @@
         <img :src="require('@/assets/forkawesome/diamond.svg')">
       </a>
       <div
-        class="post-menu-wrapper"
+        class="dropdown-menu-wrapper"
         v-if="canSaveToIpfs() || canMintToken() || canDeletePost()"
         v-click-away="hideMenu"
       >
         <a class="icon" title="More" @click="toggleMenu()">
           <img :src="require('@/assets/feather/more-horizontal.svg')">
         </a>
-        <ul v-if="menuVisible" class="post-menu">
+        <ul v-if="menuVisible" class="dropdown-menu">
           <li v-if="canSaveToIpfs()">
             <a
               class="icon"
@@ -191,6 +190,7 @@ import {
 import Avatar from "@/components/Avatar.vue"
 import CryptoAddress from "@/components/CryptoAddress.vue"
 import PostEditor from "@/components/PostEditor.vue"
+import VisibilityIcon from "@/components/VisibilityIcon.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
 import { CRYPTOCURRENCIES } from "@/utils/cryptocurrencies"
@@ -208,6 +208,7 @@ interface PaymentOption {
     Avatar,
     CryptoAddress,
     PostEditor,
+    VisibilityIcon,
   },
 })
 export default class PostComponent extends Vue {
@@ -567,21 +568,8 @@ export default class PostComponent extends Vue {
   }
 }
 
-.post-menu-wrapper {
+.dropdown-menu-wrapper {
-  position: relative;
+  @include post-dropdown-menu;
-}
-
-.post-menu {
-  background-color: $block-background-color;
-  border: 1px solid $separator-color;
-  border-radius: $btn-border-radius;
-  display: flex;
-  flex-direction: column;
-  gap: $block-inner-padding / 2;
-  padding: $block-inner-padding / 2;
-  position: absolute;
-  white-space: nowrap;
-  z-index: 3;
 }
 
 .crypto-widget {

src/components/PostEditor.vue

@@ -30,6 +30,36 @@
             @change="uploadAttachment($event.target.files)"
           >
         </a>
+        <div
+          class="dropdown-menu-wrapper"
+          v-click-away="hideVisibilityMenu"
+        >
+          <a class="icon" title="Post visibility" @click="toggleVisibilityMenu()">
+            <visibility-icon :visibility="visibility"></visibility-icon>
+          </a>
+          <ul v-if="visibilityMenuVisible" class="dropdown-menu">
+            <li>
+              <a
+                class="icon"
+                title="Public"
+                @click="hideVisibilityMenu(); visibility = 'public'"
+              >
+                <visibility-icon :visibility="'public'"></visibility-icon>
+                <span>Public</span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="icon"
+                title="Direct"
+                @click="hideVisibilityMenu(); visibility = 'direct'"
+              >
+                <visibility-icon :visibility="'direct'"></visibility-icon>
+                <span>Direct</span>
+              </a>
+            </li>
+          </ul>
+        </div>
         <div class="character-counter" title="Characters left">
           {{ characterCounter }}
         </div>
@@ -61,6 +91,7 @@ import { Prop } from "vue-property-decorator"
 import { createPost, Attachment, uploadAttachment } from "@/api/posts"
 import { User } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
+import VisibilityIcon from "@/components/VisibilityIcon.vue"
 import { useCurrentUser } from "@/store/user"
 import { setupAutoResize } from "@/utils/autoresize"
 import { renderMarkdownLite } from "@/utils/markdown"
@@ -71,6 +102,7 @@ const POST_CHARACTER_LIMIT = 1000
 @Options({
   components: {
     Avatar,
+    VisibilityIcon,
   },
 })
 export default class PostEditor extends Vue {
@@ -79,7 +111,10 @@ export default class PostEditor extends Vue {
   inReplyTo: string | null = null
 
   content = ""
+  visibility = "public"
   attachment: Attachment | null = null
+
+  visibilityMenuVisible = false
   errorMessage: string | null = null
 
   $refs!: {
@@ -113,6 +148,14 @@ export default class PostEditor extends Vue {
     )
   }
 
+  toggleVisibilityMenu() {
+    this.visibilityMenuVisible = !this.visibilityMenuVisible
+  }
+
+  hideVisibilityMenu() {
+    this.visibilityMenuVisible = false
+  }
+
   get characterCounter(): number {
     return (POST_CHARACTER_LIMIT - this.content.length)
   }
@@ -122,6 +165,7 @@ export default class PostEditor extends Vue {
     const postData = {
       content,
       in_reply_to_id: this.inReplyTo,
+      visibility: this.visibility,
     }
     let post
     try {
@@ -198,10 +242,11 @@ textarea {
   color: $secondary-text-color;
   display: flex;
   flex-direction: row;
-  font-weight: bold;
+  gap: $block-inner-padding / 2;
   padding: $block-inner-padding / 1.5 $block-inner-padding;
 
   .character-counter {
+    font-weight: bold;
     margin-left: auto;
   }
 
@@ -210,6 +255,10 @@ textarea {
   }
 }
 
+.dropdown-menu-wrapper {
+  @include post-dropdown-menu;
+}
+
 .submit-btn-wrapper {
   align-items: center;
   display: flex;

src/components/VisibilityIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <img v-if="visibility === 'public'" :src="require('@/assets/feather/globe.svg')">
+  <img v-else-if="visibility === 'direct'" :src="require('@/assets/feather/lock.svg')">
+</template>
+
+<script setup lang="ts">
+/* eslint-disable no-undef */
+defineProps<{
+  visibility: string,
+}>()
+</script>

src/styles/_mixins.scss

@@ -82,6 +82,23 @@
   }
 }
 
+@mixin post-dropdown-menu {
+  position: relative;
+
+  .dropdown-menu {
+    background-color: $block-background-color;
+    border: 1px solid $separator-color;
+    border-radius: $btn-border-radius;
+    display: flex;
+    flex-direction: column;
+    gap: $block-inner-padding / 2;
+    padding: $block-inner-padding / 2;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 3;
+  }
+}
+
 @mixin block-btn {
   .btn {
     background-color: $btn-background-hover-color;