feat: ✨ Implement internationalization

components/notes/content.vue

@@ -41,6 +41,7 @@ import { cn } from "@/lib/utils";
 import type { Attachment, Emoji, Status } from "@versia/client/types";
 import { TriangleAlert } from "lucide-vue-next";
 import { Button } from "~/components/ui/button";
+import { languageTag } from "~/paraglide/runtime";
 import { type BooleanSetting, SettingIds } from "~/settings";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import Attachments from "./attachments.vue";
@@ -75,7 +76,7 @@ const isOverflowing = computed(() => {
 
 const characterCount = plainContent?.length;
 const formattedCharacterCount = characterCount
-    ? new Intl.NumberFormat("en-us").format(characterCount)
+    ? new Intl.NumberFormat(languageTag()).format(characterCount)
     : undefined;
 </script>
 

components/notes/header.vue

@@ -50,6 +50,7 @@ import type {
     UseTimeAgoUnitNamesDefault,
 } from "@vueuse/core";
 import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
+import { languageTag } from "~/paraglide/runtime";
 import { SettingIds } from "~/settings";
 import Avatar from "../profiles/avatar.vue";
 import SmallCard from "../profiles/small-card.vue";
@@ -89,7 +90,7 @@ const timeAgo = useTimeAgo(createdAt, {
         invalid: "",
     } as UseTimeAgoMessages<UseTimeAgoUnitNamesDefault>,
 });
-const fullTime = new Intl.DateTimeFormat("en-US", {
+const fullTime = new Intl.DateTimeFormat(languageTag(), {
     dateStyle: "medium",
     timeStyle: "short",
 }).format(createdAt);

components/notes/menu.vue

@@ -84,7 +84,7 @@ const _delete = async () => {
         <DropdownMenuTrigger as-child>
             <slot />
         </DropdownMenuTrigger>
-        <DropdownMenuContent class="w-56">
+        <DropdownMenuContent class="min-w-56">
             <DropdownMenuLabel>Note Actions</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>

components/notes/reblog-header.vue

@@ -3,13 +3,14 @@
         <Repeat class="size-4 text-primary" />
         <Avatar class="size-6 border" :src="avatar" :name="displayName" />
         <span class="font-semibold" v-render-emojis="emojis">{{ displayName }}</span>
-        reblogged
+        {{ m.large_vivid_horse_catch() }}
     </NuxtLink>
 </template>
 
 <script lang="ts" setup>
 import type { Emoji } from "@versia/client/types";
 import { Repeat } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
 import Avatar from "../profiles/avatar.vue";
 
 const { url } = defineProps<{