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

closes #920

components/status/StatusCard.vue

@@ -164,6 +164,8 @@ 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="~ 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)">
@@ -175,6 +177,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
                 <StatusEditIndicator :status="status" inline />
               </div>
             </div>
+          </div>
           <StatusActionsMore v-if="actions !== false" :status="status" me--2 />
         </div>
 

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">
+      <StatusVisibilityIndicator :status="status" />
-        <div :class="visibility.icon" />
-      </CommonTooltip>
       <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>