From ec7ca4ddf18a38cf6f51d38b540eecc9858f3c98 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 26 May 2023 17:59:46 +0200
Subject: [PATCH] feat(post): show post visibily in PostListItem component

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Post/PostListItem.vue | 23 +++++++++++++++++++++++
 js/src/views/Posts/PostView.vue         | 10 +++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index 8871a2850..649679b62 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -47,6 +47,24 @@
           </template>
         </i18n-t>
       </p>
+      <p
+        v-if="post.visibility === PostVisibility.UNLISTED"
+        class="flex gap-2 items-center"
+      >
+        <Link :size="16" />
+        {{ t("Accessible only by link") }}
+      </p>
+      <p
+        v-else-if="post.visibility === PostVisibility.PRIVATE"
+        class="flex gap-2 items-center"
+      >
+        <Lock :size="16" />
+        {{
+          t("Accessible only to members", {
+            group: post.attributedTo?.name,
+          })
+        }}
+      </p>
     </div>
   </router-link>
 </template>
@@ -61,7 +79,11 @@ import { formatDateTimeString } from "@/filters/datetime";
 import Tag from "vue-material-design-icons/Tag.vue";
 import AccountEdit from "vue-material-design-icons/AccountEdit.vue";
 import Clock from "vue-material-design-icons/Clock.vue";
+import Lock from "vue-material-design-icons/Lock.vue";
+import Link from "vue-material-design-icons/Link.vue";
 import MbzTag from "@/components/TagElement.vue";
+import { PostVisibility } from "@/types/enums";
+import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
   defineProps<{
@@ -71,6 +93,7 @@ const props = withDefaults(
   { isCurrentActorMember: false }
 );
 
+const { t } = useI18n({ useScope: "global" });
 const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
 const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
diff --git a/js/src/views/Posts/PostView.vue b/js/src/views/Posts/PostView.vue
index a77fc7a70..59ac9500e 100644
--- a/js/src/views/Posts/PostView.vue
+++ b/js/src/views/Posts/PostView.vue
@@ -78,13 +78,16 @@
                   })
                 }}
               </span>
-              <span v-if="post.visibility === PostVisibility.UNLISTED" class="">
-                <o-icon icon="link" size="small" />
+              <span
+                v-if="post.visibility === PostVisibility.UNLISTED"
+                class="flex gap-2 items-center"
+              >
+                <Link :size="16" />
                 {{ t("Accessible only by link") }}
               </span>
               <span
                 v-else-if="post.visibility === PostVisibility.PRIVATE"
-                class=""
+                class="flex gap-2 items-center"
               >
                 <Lock :size="16" />
                 {{
@@ -275,6 +278,7 @@ import Pencil from "vue-material-design-icons/Pencil.vue";
 import Delete from "vue-material-design-icons/Delete.vue";
 import Share from "vue-material-design-icons/Share.vue";
 import Flag from "vue-material-design-icons/Flag.vue";
+import Link from "vue-material-design-icons/Link.vue";
 import { Dialog } from "@/plugins/dialog";
 import { useI18n } from "vue-i18n";
 import { Notifier } from "@/plugins/notifier";