Allow to create posts with followers-only visibility setting

src/api/posts.ts

@@ -25,6 +25,18 @@ export async function uploadAttachment(
   return data
 }
 
+export enum Visibility {
+  Public = "public",
+  Followers = "private",
+  Direct = "direct",
+}
+
+export const VISIBILITY_MAP = {
+  [Visibility.Public]: "Public",
+  [Visibility.Followers]: "Followers",
+  [Visibility.Direct]: "Direct",
+}
+
 export interface Mention {
   id: string;
   username: string;
@@ -40,7 +52,7 @@ export interface Post {
   content: string;
   in_reply_to_id: string | null;
   reblog: Post | null;
-  visibility: "public" | "direct";
+  visibility: Visibility;
   replies_count: number;
   favourites_count: number;
   reblogs_count: number;

src/components/Post.vue

@@ -27,7 +27,7 @@
       <a
         class="icon icon-small"
         :href="post.uri"
-        :title="'Visibility: ' + post.visibility"
+        :title="visibilityDisplay"
         target="_blank"
         rel="noreferrer"
       >
@@ -202,6 +202,7 @@ import { Prop } from "vue-property-decorator"
 
 import { makePermanent, getSignature, mintToken, onTokenMinted } from "@/api/nft"
 import {
+  VISIBILITY_MAP,
   Mention,
   Post,
   getPost,
@@ -285,6 +286,10 @@ export default class PostComponent extends Vue {
     }
   }
 
+  get visibilityDisplay(): string {
+    return VISIBILITY_MAP[this.post.visibility]
+  }
+
   formatDate(isoDate: string): string {
     return formatDate(isoDate)
   }

src/components/PostEditor.vue

@@ -48,24 +48,14 @@
             <visibility-icon :visibility="visibility"></visibility-icon>
           </button>
           <ul v-if="visibilityMenuVisible" class="dropdown-menu">
-            <li>
+            <li v-for="[value, display] in visibilityMap" :key="value">
               <a
                 class="icon"
-                title="Public"
-                @click="hideVisibilityMenu(); visibility = 'public'"
+                :title="display"
+                @click="hideVisibilityMenu(); visibility = value"
               >
-                <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>
+                <visibility-icon :visibility="value"></visibility-icon>
+                <span>{{ display }}</span>
               </a>
             </li>
           </ul>
@@ -99,7 +89,13 @@
 import { Options, Vue, setup } from "vue-class-component"
 import { Prop } from "vue-property-decorator"
 
-import { Post, createPost, Attachment, uploadAttachment } from "@/api/posts"
+import {
+  VISIBILITY_MAP,
+  Post,
+  createPost,
+  Attachment,
+  uploadAttachment,
+} from "@/api/posts"
 import { User } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import VisibilityIcon from "@/components/VisibilityIcon.vue"
@@ -166,6 +162,10 @@ export default class PostEditor extends Vue {
     )
   }
 
+  get visibilityMap() {
+    return Object.entries(VISIBILITY_MAP)
+  }
+
   toggleVisibilityMenu() {
     this.visibilityMenuVisible = !this.visibilityMenuVisible
   }

src/components/VisibilityIcon.vue

@@ -1,5 +1,6 @@
 <template>
   <img v-if="visibility === 'public'" :src="require('@/assets/feather/globe.svg')">
+  <img v-else-if="visibility === 'private'" :src="require('@/assets/feather/lock.svg')">
   <img v-else-if="visibility === 'direct'" :src="require('@/assets/forkawesome/envelope-o.svg')">
 </template>