From 714b8d2bb1d48cf544af003170297f2d008f25f5 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: Sat, 26 Nov 2022 11:02:26 +0800
Subject: [PATCH] feat(status): add visibility indicator

closes #117
---
 components/status/StatusCard.vue    |  2 +-
 components/status/StatusDetails.vue | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 0f5e405a..207468a0 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -21,7 +21,7 @@ const rebloggedBy = $computed(() => props.status.reblog ? props.status.account :
 const el = ref<HTMLElement>()
 const router = useRouter()
 
-function onclick(e: MouseEvent) {
+function onclick(e: MouseEvent | KeyboardEvent) {
   const path = e.composedPath() as HTMLElement[]
   const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
   if (!el)
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 42950191..08510df7 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -12,6 +12,8 @@ const status = $computed(() => {
 })
 
 const date = useFormattedDateTime(status.createdAt)
+
+const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
 </script>
 
 <template>
@@ -28,10 +30,15 @@ const date = useFormattedDateTime(status.createdAt)
         :status="status"
       />
     </StatusSpoiler>
-    <div>
-      <span op50 text-sm>
-        {{ date }} {{ status.application?.name ? `· ${status.application?.name}` : '' }}
-      </span>
+    <div flex="~ gap-1" items-center op50 text-sm>
+      <div>{{ date }}</div>
+      <div>·</div>
+      <CommonTooltip :content="visibility.label" placement="bottom">
+        <div :class="visibility.icon" />
+      </CommonTooltip>
+      <div v-if="status.application?.name">
+        · {{ status.application?.name }}
+      </div>
     </div>
     <StatusActions :status="status" border="t base" pt-2 />
   </div>