feat(status): show visibility icon when non-public

closes #920

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 />

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>

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>