slightly better status, internationalization

src/components/status/VulStatus.vue

@@ -1,7 +1,36 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import type Activity from "@/lib/api/entities/activity";
+import { IconWorld, IconHome, IconLock, IconMail } from "@tabler/icons-vue";
 
+const { t } = useI18n();
 defineProps<{ status: Activity }>();
+
+const statusScopeKey = ({ visibility }: Activity) => {
+	switch (visibility) {
+		case "direct":
+			return "status.visibility.directMessage";
+		case "private":
+			return "status.visibility.followersOnly";
+		case "unlisted":
+			return "status.visibility.unlisted";
+		case "public":
+			return "status.visibility.public";
+	}
+};
+
+const statusScopeIcon = ({ visibility }: Activity) => {
+	switch (visibility) {
+		case "direct":
+			return IconMail
+		case "private":
+			return IconLock
+		case "unlisted":
+			return IconHome
+		case "public":
+			return IconWorld
+	}
+}
 </script>
 
 <template>
@@ -12,8 +41,8 @@ defineProps<{ status: Activity }>();
 					class="rounded-full m-2"
 					:src="status.account.avatar"
 					width="64"
-					alt="Avatar for {{ status.account.acct }}"
-					title="Avatar for {{ status.account.acct }}"
+					:alt="t('status.avatar', { name: status.account.acct })"
+					:title="t('status.avatar', { name: status.account.acct })"
 				/>
 			</RouterLink>
 			<div class="flex flex-col my-1">
@@ -29,11 +58,10 @@ defineProps<{ status: Activity }>();
 		</div>
 		<div class="my-1 flex flex-row">
 			<span>
-				<span title="{t(statusScopeKey(status))}" aria-hidden="true">
-					<!-- <StatusScopeIcon status="{status}" /> -->
-					Public
+				<span :title="t(statusScopeKey(status))" aria-hidden="true">
+					<component :is="statusScopeIcon(status)" />
 				</span>
-				<span class="sr-only">{t(statusScopeKey(status))}</span>
+				<span class="sr-only">{{ t(statusScopeKey(status)) }}</span>
 			</span>
 			<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`">
 				{humanizeDuration(time)}