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/components/DashboardNav.vue

@@ -6,14 +6,14 @@ import SettingsIcon from "@/components/icons/SettingsIcon.vue";
 // import Upload from "@/components/icons/Upload.vue";
 import { cn } from "@/lib/utils";
 import { computed, createStaticVNode, ref } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import NotificationDrawer from "./NotificationDrawer.vue";
 
 const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/15 flex press-animated items-center justify-center shrink-0";
 const homeHoist = createStaticVNode(`<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />`, 1);
 const notificationPopover = ref<InstanceType<typeof NotificationDrawer>>();
 const isNotificationOpen = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleNotificationClick = (event: Event) => {
     notificationPopover.value?.toggle(event);

src/components/GlobalUploadIndicator.vue

@@ -3,13 +3,13 @@ import { useUploadQueue } from '@/composables/useUploadQueue';
 import UploadQueueItem from '@/routes/upload/components/UploadQueueItem.vue';
 import { useUIState } from '@/stores/uiState';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const { items, completeCount, pendingCount, startQueue, removeItem, cancelItem, removeAll } = useUploadQueue();
 const uiState = useUIState();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const isCollapsed = ref(false);
 

src/components/NotificationDrawer.vue

@@ -2,7 +2,7 @@
 import NotificationItem from '@/routes/notification/components/NotificationItem.vue';
 import { onClickOutside } from '@vueuse/core';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 // Ensure client-side only rendering to avoid hydration mismatch
 const isMounted = ref(false);
@@ -28,7 +28,7 @@ interface Notification {
 
 const visible = ref(false);
 const drawerRef = ref(null);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 // Mock notifications data
 const notifications = computed<Notification[]>(() => [

src/components/app/AppDialog.vue

@@ -2,7 +2,7 @@
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 // Ensure client-side only rendering to avoid hydration mismatch
 const isMounted = ref(false);
@@ -26,7 +26,7 @@ const emit = defineEmits<{
   (e: 'close'): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const close = () => {
   emit('update:visible', false);

src/components/app/AppToastHost.vue

@@ -6,11 +6,11 @@ import XCircleIcon from '@/components/icons/XCircleIcon.vue';
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
 import { onBeforeUnmount, watchEffect } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useAppToast, type AppToastSeverity } from '@/composables/useAppToast';
 
 const { toasts, remove } = useAppToast();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const timers = new Map<string, ReturnType<typeof setTimeout>>();
 

src/components/dashboard/StatsCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { VNode } from 'vue';
 
 interface Trend {
@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
   color: 'primary'
 });
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 // const gradients = {
 //   primary: 'from-primary/20 to-primary/5',