feat(status): add visibility indicator

closes #117

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)

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>