From 8fb9739f69d3a9308a2aa1e6731b65692c119252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 10 Jan 2023 15:14:22 +0800
Subject: [PATCH] feat(status): show visibility icon when non-public

closes #920
---
 components/status/StatusCard.vue              | 21 +++++++++++--------
 components/status/StatusDetails.vue           |  6 +-----
 .../status/StatusVisibilityIndicator.vue      | 15 +++++++++++++
 3 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 components/status/StatusVisibilityIndicator.vue

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 9875e3ff..9e227114 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -164,15 +164,18 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
           <div flex-auto />
           <div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
             <AccountBotIndicator v-if="status.account.bot" me-2 />
-            <div flex>
-              <CommonTooltip :content="createdAt">
-                <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
-                  <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
-                    {{ timeago }}
-                  </time>
-                </NuxtLink>
-              </CommonTooltip>
-              <StatusEditIndicator :status="status" inline />
+            <div flex="~ gap1" items-center>
+              <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
+              <div flex>
+                <CommonTooltip :content="createdAt">
+                  <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
+                    <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
+                      {{ timeago }}
+                    </time>
+                  </NuxtLink>
+                </CommonTooltip>
+                <StatusEditIndicator :status="status" inline />
+              </div>
             </div>
           </div>
           <StatusActionsMore v-if="actions !== false" :status="status" me--2 />
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 6e6fbe7e..dd53bcda 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -17,8 +17,6 @@ const status = $computed(() => {
 
 const createdAt = useFormattedDateTime(status.createdAt)
 
-const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
-
 const { t } = useI18n()
 
 useHeadFixed({
@@ -48,9 +46,7 @@ const isDM = $computed(() => status.visibility === 'direct')
         </StatusEditIndicator>
       </div>
       <div>&middot;</div>
-      <CommonTooltip :content="$t(`visibility.${visibility.value}`)" placement="bottom">
-        <div :class="visibility.icon" />
-      </CommonTooltip>
+      <StatusVisibilityIndicator :status="status" />
       <div v-if="status.application?.name">
         &middot;
       </div>
diff --git a/components/status/StatusVisibilityIndicator.vue b/components/status/StatusVisibilityIndicator.vue
new file mode 100644
index 00000000..95015897
--- /dev/null
+++ b/components/status/StatusVisibilityIndicator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { status } = defineProps<{
+  status: mastodon.v1.Status
+}>()
+
+const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
+</script>
+
+<template>
+  <CommonTooltip :content="$t(`visibility.${visibility.value}`)" placement="bottom">
+    <div :class="visibility.icon" />
+  </CommonTooltip>
+</template>