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/overview/Overview.vue

@@ -2,7 +2,7 @@
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
@@ -10,7 +10,7 @@ import StatsOverview from './components/StatsOverview.vue';
 
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const stats = ref({
     totalVideos: 0,

src/routes/overview/components/NameGradient.vue

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

src/routes/overview/components/QuickActions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import Chart from '@/components/icons/Chart.vue';
 import Credit from '@/components/icons/Credit.vue';
 import Upload from '@/components/icons/Upload.vue';
@@ -17,7 +17,7 @@ defineProps<Props>();
 
 const uiState = useUIState();
 const router = useRouter();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const quickActions = computed(() => [
     {

src/routes/overview/components/RecentVideos.vue

@@ -2,7 +2,7 @@
 import { ModelVideo } from '@/api/client';
 import EmptyState from '@/components/dashboard/EmptyState.vue';
 import { formatDate, formatDuration } from '@/lib/utils';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRouter } from 'vue-router';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
 defineProps<Props>();
 
 const router = useRouter();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const getStatusClass = (status?: string) => {
     switch (status?.toLowerCase()) {

src/routes/overview/components/Referral.vue

@@ -28,11 +28,11 @@
 <script lang="ts" setup>
 import { useAuthStore } from '@/stores/auth';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
 const isCopied = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const url = computed(() => `${location.origin}/ref/${auth.user?.username || ''}`);
 

src/routes/overview/components/StatsOverview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import StatsCard from '@/components/dashboard/StatsCard.vue';
 import { formatBytes } from '@/lib/utils';
 
@@ -15,7 +15,7 @@ interface Props {
 }
 
 defineProps<Props>();
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>

src/routes/overview/components/StorageUsage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { formatBytes } from '@/lib/utils';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 interface Props {
     loading: boolean;
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const storagePercentage = computed(() => {
     return Math.round((props.stats.storageUsed / props.stats.storageLimit) * 100);

src/routes/overview/components/WelcomeBanner.vue

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