replace vue-i18n with i18next-vue

Complete the i18n migration by switching runtime setup and remaining components to i18next-vue, and add shared locale constants/helpers for SSR and client language handling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/routes/upload/components/BulkActions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     pendingCount?: number;
@@ -9,7 +9,7 @@ defineProps<{
 
 const category = ref('');
 const visibility = ref('public');
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>

src/routes/upload/components/InfoTip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>

src/routes/upload/components/RemoteUrlForm.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{ maxUrls?: number }>();
 const urls = ref('');
 
 const emit = defineEmits<{ submit: [urls: string[]] }>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleSubmit = () => {
     const limit = props.maxUrls ?? 5;

src/routes/upload/components/UploadDropzone.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{ maxFiles?: number }>();
 const emit = defineEmits<{ filesSelected: [files: FileList] }>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const isDragOver = ref(false);
 let dragCounter = 0;

src/routes/upload/components/UploadModeToggle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     modelValue: 'local' | 'remote';
@@ -11,7 +11,7 @@ const emit = defineEmits<{
     'update:modelValue': [value: 'local' | 'remote'];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const modeList = computed<{ id: 'local' | 'remote'; label: string; icon: string }[]>(() => [
     {

src/routes/upload/components/UploadQueue.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UploadQueueItem from './UploadQueueItem.vue';
 import type { QueueItem } from '@/composables/useUploadQueue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     items?: QueueItem[];
@@ -17,7 +17,7 @@ const emit = defineEmits<{
     startQueue: [];
 }>()
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>

src/routes/upload/components/UploadQueueItem.vue

@@ -2,7 +2,7 @@
 import FileUploadType from '@/components/icons/FileUploadType.vue';
 import type { QueueItem } from '@/composables/useUploadQueue';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     item: QueueItem;
@@ -13,7 +13,7 @@ const emit = defineEmits<{
     cancel: [id: string];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const statusLabel = computed(() => {
     switch (props.item.status) {