From 7cf63c9333cb0e981ac038887f946c68b31ead5c Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Sat, 15 Jan 2022 19:36:22 +0000
Subject: [PATCH] Allow to create posts with followers-only visibility setting

---
 src/api/posts.ts                  | 14 +++++++++++++-
 src/components/Post.vue           |  7 ++++++-
 src/components/PostEditor.vue     | 32 +++++++++++++++----------------
 src/components/VisibilityIcon.vue |  1 +
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/api/posts.ts b/src/api/posts.ts
index 02bdf2d..2ab6ea8 100644
--- a/src/api/posts.ts
+++ b/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;
diff --git a/src/components/Post.vue b/src/components/Post.vue
index d44228a..1eb106f 100644
--- a/src/components/Post.vue
+++ b/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)
   }
diff --git a/src/components/PostEditor.vue b/src/components/PostEditor.vue
index 279794f..7f5257a 100644
--- a/src/components/PostEditor.vue
+++ b/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
   }
diff --git a/src/components/VisibilityIcon.vue b/src/components/VisibilityIcon.vue
index 625a03c..ba96525 100644
--- a/src/components/VisibilityIcon.vue
+++ b/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>