feat: add i18n support and fix table pagination

- Add comprehensive i18n for all pages, layouts, and components
- Add language switcher in app header and dashboard command palette
- Fix LinksTable pagination using server-side total instead of client-side count
- Replace getPaginationRowModel with manualPagination for proper server-side paging

Author: DemoMacro

.vite-hooks/pre-commit

@@ -0,0 +1 @@
+vp staged

CLAUDE.md

@@ -63,12 +63,24 @@ These commands map to their corresponding tools. For example, `vp dev --port 300
 
 - **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
 - **Always use Vite commands to run tools:** Don't attempt to run `vp vitest` or `vp oxlint`. They do not exist. Use `vp test` and `vp lint` instead.
-- **Running scripts:** Vite+ commands take precedence over `package.json` scripts. If there is a `test` script defined in `scripts` that conflicts with the built-in `vp test` command, run it using `vp run test`.
+- **Running scripts:** Vite+ built-in commands (`vp dev`, `vp build`, `vp test`, etc.) always run the Vite+ built-in tool, not any `package.json` script of the same name. To run a custom script that shares a name with a built-in command, use `vp run <script>`. For example, if you have a custom `dev` script that runs multiple services concurrently, run it with `vp run dev`, not `vp dev` (which always starts Vite's dev server).
 - **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
 - **Use Vite+ wrappers for one-off binaries:** Use `vp dlx` instead of package-manager-specific `dlx`/`npx` commands.
 - **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
 - **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vp lint --type-aware` works out of the box.
 
+## CI Integration
+
+For GitHub Actions, consider using [`voidzero-dev/setup-vp`](https://github.com/voidzero-dev/setup-vp) to replace separate `actions/setup-node`, package-manager setup, cache, and install steps with a single action.
+
+```yaml
+- uses: voidzero-dev/setup-vp@v1
+  with:
+    cache: true
+- run: vp check
+- run: vp test
+```
+
 ## Review Checklist for Agents
 
 - [ ] Run `vp install` after pulling remote changes and before getting started.

app/components/OrgsMenu.vue

@@ -4,6 +4,8 @@ import type { Organization } from "better-auth/plugins";
 
 import { authClient } from "~/utils/auth";
 
+const { t } = useI18n();
+
 defineProps<{
   collapsed?: boolean;
 }>();
@@ -46,7 +48,7 @@ const currentEntity = computed(() => {
     };
   }
   return {
-    label: "Select Organization",
+    label: t("common.selectOrganization"),
     icon: "i-lucide-users",
     type: "none",
   };
@@ -65,8 +67,8 @@ async function switchContext(entityId: string) {
 
     if (error) {
       toast.add({
-        title: "Switch Failed",
-        description: error.message || "Failed to switch to organization",
+        title: t("common.failedToSwitchOrg"),
+        description: error.message || t("common.failedToSwitchOrg"),
         color: "error",
       });
       return;
@@ -76,19 +78,19 @@ async function switchContext(entityId: string) {
     const org = orgList?.find((o: Organization) => o.id === entityId);
     const isPersonal = org?.slug?.startsWith("user_");
     toast.add({
-      title: isPersonal ? "Personal Workspace" : "Switched to Organization",
+      title: isPersonal ? t("common.personalWorkspace") : t("common.switchedToOrg"),
       description: isPersonal
-        ? "You are now in your personal workspace"
-        : `You are now working in ${org?.name || "the organization"}`,
+        ? t("common.inPersonalWorkspace")
+        : t("common.nowInOrg", { name: org?.name || "..." }),
       color: "success",
     });
 
     // useActiveOrganization hook will auto-update
     // useAsyncData with watch will auto-refetch organizations
   } catch (error) {
     toast.add({
-      title: "Switch Failed",
-      description: error instanceof Error ? error.message : "An error occurred",
+      title: t("common.failedToSwitchOrg"),
+      description: error instanceof Error ? error.message : t("common.unexpectedError"),
       color: "error",
     });
   } finally {
@@ -129,7 +131,7 @@ const items = computed<DropdownMenuItem[][]>(() => {
     organizationOptions,
     [
       {
-        label: "Create organization",
+        label: t("dashboard.createOrg"),
         icon: "i-lucide-circle-plus",
         onSelect: () => navigateTo("/dashboard/create-org"),
       },

app/components/UserMenu.vue

@@ -3,6 +3,8 @@ import type { DropdownMenuItem } from "@nuxt/ui";
 
 import { authClient } from "~/utils/auth";
 
+const { t } = useI18n();
+
 defineProps<{
   collapsed?: boolean;
 }>();
@@ -41,8 +43,8 @@ async function handleSignOut() {
 
     if (error) {
       toast.add({
-        title: "Sign Out Error",
-        description: error.message || "Failed to sign out",
+        title: t("common.signOutError"),
+        description: error.message || t("common.failedToSignOut"),
         color: "error",
       });
       return;
@@ -52,16 +54,16 @@ async function handleSignOut() {
     await authClient.getSession();
 
     toast.add({
-      title: "Signed Out",
-      description: "You have been successfully signed out",
+      title: t("common.signedOut"),
+      description: t("common.signedOutDesc"),
       color: "success",
     });
 
     await navigateTo("/");
   } catch (error) {
     toast.add({
-      title: "Sign Out Error",
-      description: "An error occurred while signing out",
+      title: t("common.signOutError"),
+      description: t("common.signOutErrorDesc"),
       color: "error",
     });
   }
@@ -81,43 +83,43 @@ const items = computed<DropdownMenuItem[][]>(() => {
     ],
     [
       {
-        label: isInAdmin.value ? "Go to Dashboard" : "Dashboard",
+        label: isInAdmin.value ? t("common.goToDashboard") : t("dashboard.title"),
         icon: "i-lucide-layout-dashboard",
         onSelect: navigateToDashboard,
       },
       ...(isAdmin.value
         ? [
             {
-              label: "Admin",
+              label: t("admin.title"),
               icon: "i-lucide-shield",
               onSelect: navigateToAdmin,
             },
           ]
         : []),
       {
-        label: "Profile",
+        label: t("dashboard.profile"),
         icon: "i-lucide-user",
         onSelect: () => navigateTo("/dashboard/settings"),
       },
       {
-        label: "Security",
+        label: t("common.security"),
         icon: "i-lucide-shield",
         onSelect: () => navigateTo("/dashboard/settings/security"),
       },
       {
-        label: "Invitations",
+        label: t("dashboard.invitations"),
         icon: "i-lucide-mail",
         onSelect: () => navigateTo("/dashboard/settings/invitations"),
       },
       {
-        label: "API Keys",
+        label: t("dashboard.apiKeys"),
         icon: "i-lucide-key",
         onSelect: () => navigateTo("/dashboard/apikeys"),
       },
     ],
     [
       {
-        label: "Sign Out",
+        label: t("common.signOut"),
         icon: "i-lucide-log-out",
         color: "error",
         onSelect: handleSignOut,

app/components/dashboard/DomainDeleteModal.vue

@@ -4,6 +4,8 @@ import type { Domain } from "~~/shared/types/domain";
 
 import { authClient } from "~/utils/auth";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   domain: Domain | null;
 }>();
@@ -19,7 +21,7 @@ const loading = ref(false);
 
 const schema = z.object({
   confirmText: z.string().refine((val) => val === props.domain?.domainName, {
-    message: "Please enter domain name to confirm deletion",
+    message: t("dashboard.enterDomainConfirm"),
   }),
 });
 
@@ -32,8 +34,8 @@ const state = reactive<Partial<Schema>>({
 async function deleteDomain() {
   if (!props.domain?.id) {
     toast.add({
-      title: "Error",
-      description: "Domain ID is required",
+      title: t("common.error"),
+      description: t("dashboard.domainIdRequired"),
       color: "error",
     });
     return;
@@ -47,16 +49,16 @@ async function deleteDomain() {
 
     if (result.error) {
       toast.add({
-        title: "Error",
-        description: result.error.message || "Failed to delete domain",
+        title: t("common.error"),
+        description: result.error.message || t("dashboard.failedToCreateDomain"),
         color: "error",
       });
       return;
     }
 
     toast.add({
-      title: "Success",
-      description: `Domain ${props.domain.domainName} has been deleted`,
+      title: t("common.success"),
+      description: t("dashboard.domainDeleted", { name: props.domain.domainName }),
       color: "success",
     });
 
@@ -65,8 +67,8 @@ async function deleteDomain() {
     state.confirmText = "";
   } catch (error) {
     toast.add({
-      title: "Error",
-      description: "An unexpected error occurred",
+      title: t("common.error"),
+      description: t("common.unexpectedError"),
       color: "error",
     });
   } finally {
@@ -76,29 +78,34 @@ async function deleteDomain() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Delete Domain" description="This action cannot be undone">
+  <UModal
+    v-model:open="open"
+    :title="t('dashboard.deleteDomain')"
+    :description="t('dashboard.cannotBeUndone')"
+  >
     <slot />
 
     <template #body>
       <div class="space-y-4">
-        <UAlert v-if="domain" color="error" icon="i-lucide-alert-triangle" title="Warning">
+        <UAlert
+          v-if="domain"
+          color="error"
+          icon="i-lucide-alert-triangle"
+          :title="t('common.warning')"
+        >
           <template #description>
             <div class="space-y-1">
-              <p>You are about to delete the domain:</p>
+              <p>{{ t("dashboard.confirmDeleteDomainDesc") }}</p>
               <p class="font-mono text-sm font-semibold">{{ domain.domainName }}</p>
-              <p class="text-xs">
-                This action cannot be undone. All links associated with this domain will need to be
-                reassigned before deletion.
-              </p>
             </div>
           </template>
         </UAlert>
 
         <UForm :schema="schema" :state="state" class="space-y-4" @submit="deleteDomain">
           <UFormField
             name="confirmText"
-            :label="`Type '${domain?.domainName}' to confirm`"
-            description="Please enter the domain name to confirm deletion"
+            :label="t('common.typeToConfirm', { name: domain?.domainName })"
+            :description="t('dashboard.enterDomainConfirm')"
           >
             <UInput
               v-model="state.confirmText"
@@ -109,7 +116,9 @@ async function deleteDomain() {
           </UFormField>
 
           <div class="flex justify-end gap-2">
-            <UButton variant="outline" @click="open = false" :disabled="loading"> Cancel </UButton>
+            <UButton variant="outline" @click="open = false" :disabled="loading">
+              {{ t("common.cancel") }}
+            </UButton>
             <UButton
               color="error"
               type="submit"
@@ -119,7 +128,7 @@ async function deleteDomain() {
               <template #leading>
                 <UIcon name="i-lucide-trash" />
               </template>
-              Delete Domain
+              {{ t("dashboard.deleteDomain") }}
             </UButton>
           </div>
         </UForm>