@plutocms/supabase 0.9.1 → 0.10.0

package/.prettierignore

@@ -0,0 +1,2 @@
+# Agent skill files keep their own formatting. Prettier must not rewrite them.
+.agents/**/*.md

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.10.0](https://github.com/plutocms/supabase/compare/v0.9.1...v0.10.0) (2026-10-18)
+
+
+### Features
+
+* **i18n:** store each user's admin language ([#79](https://github.com/plutocms/supabase/issues/79)) ([2ca171a](https://github.com/plutocms/supabase/commit/2ca171a97acbc2de4537b82b6718acbcc2c1fbd5))
+* **i18n:** translate the supabase admin pages ([#82](https://github.com/plutocms/supabase/issues/82)) ([bae1372](https://github.com/plutocms/supabase/commit/bae1372fdb89414fcb20ec74c428812f25077f6b))
+
 ## [0.9.1](https://github.com/plutocms/supabase/compare/v0.9.0...v0.9.1) (2026-10-18)
 
 

package/FEATURES.md

@@ -13,3 +13,9 @@ policies shared by every project here.
 - Content adapter: a Supabase/PostgREST-backed `PlutoContentAdapter`, plugging any layer's
   declared content type into `@plutocms/pluto`'s generic content routes.
   @.claude/skills/content-adapter/SKILL.md
+- Profile language: stores each user's admin language in `profiles.locale`, written through a
+  security-definer function, and plugs it into pluto's i18n as a locale driver.
+  @.claude/skills/profile-language/SKILL.md
+- Admin translation: every admin page, component, toast, and server message of this layer is
+  translated (`en`, `pt-BR`) in the `supabase.*` namespace of pluto's i18n system.
+  @.claude/skills/admin-translation/SKILL.md

package/app/components/EnvPersistWarning.vue

@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 
 const toast = useToast()
+const { t } = usePlutoI18n()
 
 const envLine = computed(() => `DATABASE_URL="${props.connectionString}"`)
 
@@ -22,15 +23,15 @@ async function copyEnvLine() {
     await navigator.clipboard.writeText(envLine.value)
 
     toast.add({
-      title: 'Copied',
-      description: 'The DATABASE_URL line is on your clipboard.',
+      title: t('supabase.envWarning.copied'),
+      description: t('supabase.envWarning.copiedDescription'),
       icon: 'lucide:check-circle',
       color: 'success',
     })
   } catch {
     toast.add({
-      title: 'Could not copy',
-      description: 'Select and copy the line by hand instead.',
+      title: t('supabase.envWarning.copyFailed'),
+      description: t('supabase.envWarning.copyFailedDescription'),
       icon: 'lucide:circle-x',
       color: 'error',
     })
@@ -40,24 +41,40 @@ async function copyEnvLine() {
 
 <template>
   <UAlert
+    :title="t('supabase.envWarning.title')"
     color="warning"
     variant="outline"
     icon="lucide:triangle-alert"
-    title="Connection string not saved automatically"
   >
     <template #description>
       <div class="flex flex-col gap-y-3">
         <p>
-          The database change already succeeded. Pluto could not write
-          <code>DATABASE_URL</code> to your project's
-          <code>.env</code> file, so it will ask again next time unless you
-          add it by hand:
+          <SupabaseMessageParts :message="t('supabase.envWarning.intro')">
+            <template #variable>
+              <code>DATABASE_URL</code>
+            </template>
+            <template #file>
+              <code>.env</code>
+            </template>
+          </SupabaseMessageParts>
         </p>
 
         <ol class="list-inside list-decimal">
-          <li>Open (or create) <code>.env</code> in your project's root folder.</li>
-          <li>Add this line. Replace any existing <code>DATABASE_URL</code> line with it.</li>
-          <li>Restart the server.</li>
+          <li>
+            <SupabaseMessageParts :message="t('supabase.envWarning.step1')">
+              <template #file>
+                <code>.env</code>
+              </template>
+            </SupabaseMessageParts>
+          </li>
+          <li>
+            <SupabaseMessageParts :message="t('supabase.envWarning.step2')">
+              <template #variable>
+                <code>DATABASE_URL</code>
+              </template>
+            </SupabaseMessageParts>
+          </li>
+          <li>{{ t('supabase.envWarning.step3') }}</li>
         </ol>
 
         <div class="flex items-center gap-x-2">
@@ -68,11 +85,11 @@ async function copyEnvLine() {
           </code>
 
           <UButton
+            :aria-label="t('supabase.envWarning.copyLine')"
             icon="lucide:copy"
             variant="soft"
             color="neutral"
             size="sm"
-            aria-label="Copy the DATABASE_URL line"
             @click="copyEnvLine"
           />
         </div>

package/app/components/SupabaseMessageParts.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// Renders one translated message that holds links or markup in the middle of
+// a sentence. Each `{name}` in the message becomes the slot with that name.
+// The word order stays in the translation, so each language can move the
+// parts. Example: <SupabaseMessageParts :message="t('…')"><template #link>…
+const props = defineProps<{
+  /** The translated message. Write each slot as `{name}`. */
+  message: string
+}>()
+
+const parts = computed(() =>
+  props.message
+    .split(/(\{\w+\})/)
+    .filter((part) => part !== '')
+    .map((part) => {
+      const slot = /^\{(\w+)\}$/.exec(part)?.[1]
+
+      return slot ? { slot } : { text: part }
+    })
+)
+</script>
+
+<template>
+  <template v-for="(part, index) in parts" :key="index">
+    <slot v-if="part.slot" :name="part.slot" />
+
+    <template v-else>{{ part.text }}</template>
+  </template>
+</template>

package/app/components/migrations/MigrationsBanner.vue

@@ -2,11 +2,10 @@
 // Renders nothing when there is no logged-in admin (status reads as null)
 // or when no layer is pending. See `useMigrations` for the 401/403 handling.
 const { status, pendingCount } = useMigrations()
+const { t } = usePlutoI18n()
 
 const title = computed(() =>
-  pendingCount.value === 1
-    ? '1 layer needs a database migration'
-    : `${pendingCount.value} layers need a database migration`
+  t('supabase.migrations.banner', pendingCount.value)
 )
 </script>
 
@@ -19,7 +18,7 @@ const title = computed(() =>
     icon="lucide:triangle-alert"
   >
     <template #description>
-      <ULink to="/admin/migrations" class="underline"> Go to Migrations </ULink
+      <ULink to="/admin/migrations" class="underline"> {{ t('supabase.migrations.goTo') }} </ULink
       >.
     </template>
   </UAlert>

package/app/components/navbar/NavbarAdmin.vue

@@ -11,6 +11,8 @@ function openSidebar() {
   isSidebarOpen.value = true
 }
 
+const { t } = usePlutoI18n()
+
 const { isLoggedIn, user, logout } = await useAuth()
 
 const displayName = computed(() => {
@@ -19,7 +21,7 @@ const displayName = computed(() => {
     user.value?.full_name ||
     user.value?.name ||
     user.value?.username ||
-    'User'
+    t('supabase.navbar.defaultUserName')
   )
 })
 
@@ -66,7 +68,7 @@ const items = computed<DropdownItems>(() => [
 
   [
     {
-      label: 'Settings',
+      label: t('pluto.common.settings'),
       icon: 'i-lucide-cog',
       type: 'link',
       to: '/admin/settings',
@@ -81,7 +83,7 @@ const items = computed<DropdownItems>(() => [
 
   [
     {
-      label: 'Pluto on GitHub',
+      label: t('supabase.navbar.github'),
       icon: 'i-simple-icons-github',
       type: 'link',
       to: 'https://github.com/ojvribeiro/pluto',
@@ -92,7 +94,7 @@ const items = computed<DropdownItems>(() => [
 
   [
     {
-      label: 'Logout',
+      label: t('supabase.navbar.logout'),
       icon: 'i-lucide-log-out',
       kbds: ['meta', 'shift', 'q'],
       class: 'cursor-pointer',
@@ -113,18 +115,18 @@ defineShortcuts(extractShortcuts(items.value))
     >
       <div class="flex min-w-0 items-center gap-x-1 lg:gap-x-3">
         <UButton
+          :aria-label="t('supabase.navbar.openNavigation')"
           class="lg:hidden"
           icon="lucide:menu"
           color="neutral"
           variant="ghost"
-          aria-label="Open navigation"
           square
           @click="openSidebar"
         />
 
         <div class="h-full shrink-0 py-1">
           <NuxtLink
-            title="Go to dashboard home"
+            :title="t('supabase.navbar.goHome')"
             to="/admin/home"
             class="group block h-full"
           >
@@ -139,7 +141,11 @@ defineShortcuts(extractShortcuts(items.value))
           <ul class="flex h-full min-w-0 items-center text-sm">
             <NavbarAdminActionButton
               :show="route.path.startsWith('/admin')"
-              :title="`Visit ${domainFromUrl(maybeDevUrl)}`"
+              :title="
+                t('supabase.navbar.visitSite', {
+                  domain: domainFromUrl(maybeDevUrl),
+                })
+              "
               :icon="
                 status === 'pending'
                   ? 'lucide:loader-circle'
@@ -147,8 +153,8 @@ defineShortcuts(extractShortcuts(items.value))
               "
               :disabled="status === 'pending'"
               :to="maybeDevUrl"
+              :label="t('supabase.navbar.viewSite')"
               target="_blank"
-              label="View site"
             />
 
             <ClientOnly>
@@ -180,8 +186,8 @@ defineShortcuts(extractShortcuts(items.value))
             :modal="false"
           >
             <button
+              :aria-label="t('supabase.navbar.openUserMenu')"
               class="group h-full py-1"
-              aria-label="Open user menu"
               type="button"
             >
               <div

package/app/components/settings/SettingsGeneralPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { field } = usePlutoSettings()
+const { t } = usePlutoI18n()
 
 const websiteTitle = field('website_title')
 const websiteDescription = field('website_description')
@@ -8,22 +9,36 @@ const websiteUrl = field('website_url')
 
 <template>
   <div class="flex flex-col gap-y-6">
-    <UFormField label="Website Title" class="w-full lg:w-1/2">
-      <UInput v-model="websiteTitle" placeholder="e.g. My Website" />
+    <UFormField
+      :label="t('supabase.settings.general.websiteTitle')"
+      class="w-full lg:w-1/2"
+    >
+      <UInput
+        v-model="websiteTitle"
+        :placeholder="t('supabase.settings.general.websiteTitlePlaceholder')"
+      />
     </UFormField>
 
-    <UFormField label="Website Description" class="w-full lg:w-1/2">
+    <UFormField
+      :label="t('supabase.settings.general.websiteDescription')"
+      class="w-full lg:w-1/2"
+    >
       <UInput
         v-model="websiteDescription"
-        placeholder="e.g. My Website Description"
+        :placeholder="
+          t('supabase.settings.general.websiteDescriptionPlaceholder')
+        "
       />
     </UFormField>
 
-    <UFormField label="Website URL" class="w-full lg:w-1/2">
+    <UFormField
+      :label="t('supabase.settings.general.websiteUrl')"
+      class="w-full lg:w-1/2"
+    >
       <UInput
         v-model="websiteUrl"
+        :placeholder="t('supabase.settings.general.websiteUrlPlaceholder')"
         type="url"
-        placeholder="e.g. https://example.com"
       />
     </UFormField>
   </div>

package/app/composables/auth.ts

@@ -29,6 +29,11 @@ export const allowedUnauthenticatedPaths: RouteLocationRaw[] = [
 
 export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   const toast = useToast()
+  // Read at setup, while the Nuxt context exists. The functions below run
+  // later, after an await, when the context is gone.
+  const { t, te } = usePlutoI18n()
+  const authErrorText = (error: unknown) =>
+    resolveAuthErrorText(error, { t, te })
 
   const supabase = useSupabaseClient()
   const supabaseSession = useSupabaseSession()
@@ -79,8 +84,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
         console.error(`Error signing in user: ${error?.message}`)
 
         toast.add({
-          title: 'Could not log in',
-          description: error?.message,
+          title: t('supabase.auth.toasts.loginFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -133,7 +138,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       console.warn(`User logged out`)
 
       toast.add({
-        title: 'Logged out successfully',
+        title: t('supabase.auth.toasts.loggedOut'),
         icon: 'lucide:check',
         color: 'success',
       })
@@ -160,8 +165,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
       if (error) {
         toast.add({
-          title: 'Could not send reset email',
-          description: error.message,
+          title: t('supabase.auth.toasts.resetFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -172,9 +177,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       return { success: true }
     } catch (error) {
       toast.add({
-        title: 'Could not send reset email',
-        description:
-          error instanceof Error ? error.message : 'An unknown error occurred.',
+        title: t('supabase.auth.toasts.resetFailed'),
+        description: authErrorText(error),
         icon: 'lucide:circle-x',
         color: 'error',
       })
@@ -193,8 +197,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
       if (error) {
         toast.add({
-          title: 'Could not update password',
-          description: error.message,
+          title: t('supabase.auth.toasts.updateFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -203,7 +207,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       }
 
       toast.add({
-        title: 'Password updated successfully',
+        title: t('supabase.auth.toasts.passwordUpdated'),
         icon: 'lucide:check',
         color: 'success',
       })
@@ -211,9 +215,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       return { success: true }
     } catch (error) {
       toast.add({
-        title: 'Could not update password',
-        description:
-          error instanceof Error ? error.message : 'An unknown error occurred.',
+        title: t('supabase.auth.toasts.updateFailed'),
+        description: authErrorText(error),
         icon: 'lucide:circle-x',
         color: 'error',
       })

package/app/pages/admin/(auth)/confirm.vue

@@ -3,8 +3,10 @@ definePageMeta({
   layout: 'auth',
 })
 
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Account Verification',
+  title: () => t('supabase.auth.confirm.pageTitle'),
 })
 </script>
 
@@ -18,17 +20,16 @@ useHead({
               <UIcon name="lucide:mail-check" class="inline-block" />
             </span>
 
-            <h1 class="text-3xl font-bold">Account verified!</h1>
+            <h1 class="text-3xl font-bold">{{ t('supabase.auth.confirm.title') }}</h1>
           </hgroup>
 
           <p>
-            Your account has been successfully verified. You can now start using
-            the Dashboard.
+            {{ t('supabase.auth.confirm.description') }}
           </p>
 
           <div class="flex items-center justify-center gap-x-4">
             <UButton to="/admin" color="primary" icon="lucide:layout-dashboard">
-              Go to Dashboard
+              {{ t('supabase.auth.confirm.goToDashboard') }}
             </UButton>
           </div>
         </div>

package/app/pages/admin/(auth)/forgot-password.vue

@@ -3,8 +3,10 @@ definePageMeta({
   layout: 'auth',
 })
 
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Forgot Password',
+  title: () => t('supabase.auth.forgot.pageTitle'),
 })
 
 const { isSubmitting, requestPasswordReset } = await useAuth()
@@ -31,18 +33,20 @@ async function submitForm() {
               <UIcon name="lucide:mail" class="inline-block" />
             </span>
 
-            <h1 class="text-3xl font-bold">Check your inbox</h1>
+            <h1 class="text-3xl font-bold">{{ t('supabase.auth.forgot.sentTitle') }}</h1>
           </hgroup>
 
           <p>
-            If an account exists for <strong>{{ email }}</strong
-            >, a password reset link has been sent. Check your email and follow
-            the link.
+            <SupabaseMessageParts :message="t('supabase.auth.forgot.sentDescription')">
+              <template #email>
+                <strong>{{ email }}</strong>
+              </template>
+            </SupabaseMessageParts>
           </p>
 
           <div class="flex items-center justify-center">
             <UButton variant="link" to="/admin/login" class="px-0">
-              Back to Login
+              {{ t('supabase.auth.backToLogin') }}
             </UButton>
           </div>
         </div>
@@ -51,13 +55,13 @@ async function submitForm() {
       <form v-else @submit.prevent="submitForm">
         <div class="flex flex-col gap-y-6">
           <hgroup class="flex flex-col gap-y-1">
-            <h1 class="text-3xl font-bold">Forgot Password</h1>
+            <h1 class="text-3xl font-bold">{{ t('supabase.auth.forgot.title') }}</h1>
             <p class="text-sm text-muted">
-              Enter your email and we'll send you a reset link.
+              {{ t('supabase.auth.forgot.description') }}
             </p>
           </hgroup>
 
-          <UFormField label="Email">
+          <UFormField :label="t('supabase.auth.fields.email')">
             <UInput
               v-model="email"
               placeholder="victor@example.com"
@@ -78,13 +82,13 @@ async function submitForm() {
                 icon="lucide:send"
                 class="w-full justify-center sm:w-auto"
               >
-                Send Reset Link
+                {{ t('supabase.auth.forgot.submit') }}
               </UButton>
             </UFormField>
 
             <UFormField>
               <UButton variant="link" to="/admin/login" class="px-0">
-                Back to Login
+                {{ t('supabase.auth.backToLogin') }}
               </UButton>
             </UFormField>
           </div>

package/app/pages/admin/(auth)/login.vue

@@ -8,8 +8,10 @@ definePageMeta({
   layout: 'auth',
 })
 
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Login',
+  title: () => t('supabase.auth.login.title'),
 })
 
 const { isSubmitting, login } = await useAuth()
@@ -29,9 +31,9 @@ function submitForm() {
     <UCard class="w-full max-w-100">
       <form @submit.prevent="submitForm">
         <div class="flex flex-col gap-y-6">
-          <h1 class="text-3xl font-bold">Login</h1>
+          <h1 class="text-3xl font-bold">{{ t('supabase.auth.login.title') }}</h1>
 
-          <UFormField label="Email">
+          <UFormField :label="t('supabase.auth.fields.email')">
             <UInput
               v-model="form.email"
               placeholder="victor@example.com"
@@ -40,7 +42,7 @@ function submitForm() {
             />
           </UFormField>
 
-          <UFormField label="Password">
+          <UFormField :label="t('supabase.auth.fields.password')">
             <UInput
               v-model="form.password"
               placeholder="••••"
@@ -59,13 +61,13 @@ function submitForm() {
                 icon="lucide:log-in"
                 class="w-full justify-center sm:w-auto"
               >
-                Login
+                {{ t('supabase.auth.login.submit') }}
               </UButton>
             </UFormField>
 
             <UFormField>
               <UButton variant="link" to="/admin/signup" class="px-0">
-                Create Account
+                {{ t('supabase.auth.login.createAccount') }}
               </UButton>
             </UFormField>
           </div>
@@ -79,11 +81,11 @@ function submitForm() {
               to="/"
               class="px-0"
             >
-              Back to Home
+              {{ t('supabase.auth.login.backToHome') }}
             </UButton>
 
             <UButton variant="link" to="/admin/forgot-password" class="px-0">
-              Forgot password?
+              {{ t('supabase.auth.login.forgotPassword') }}
             </UButton>
           </div>
         </div>