@plutocms/supabase 0.30.0 → 0.31.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.31.1](https://github.com/plutocms/supabase/compare/v0.31.0...v0.31.1) (2026-11-14)
+
+
+### Bug Fixes
+
+* **supabase, supabase-blog:** type the translate helpers with the t of core ([#318](https://github.com/plutocms/supabase/issues/318)) ([ccdecaf](https://github.com/plutocms/supabase/commit/ccdecafea563fe43e29874b8ffb101d4cf8b8a75))
+
+## [0.31.0](https://github.com/plutocms/supabase/compare/v0.30.0...v0.31.0) (2026-11-12)
+
+
+### Features
+
+* admin UI round 5: tooltips, a playground site, new tab links; core 0.68 ([#302](https://github.com/plutocms/supabase/issues/302)) ([441d322](https://github.com/plutocms/supabase/commit/441d322a52cf31712cd7510b0876ca885698fda7))
+
 ## [0.30.0](https://github.com/plutocms/supabase/compare/v0.29.0...v0.30.0) (2026-11-10)
 
 

package/app/components/EnvPersistWarning.vue

@@ -43,7 +43,7 @@ async function copyEnvLine() {
   <UAlert
     :title="t('supabase.envWarning.title')"
     color="warning"
-    variant="outline"
+    variant="subtle"
     icon="lucide:triangle-alert"
   >
     <template #description>
@@ -84,14 +84,16 @@ async function copyEnvLine() {
             {{ envLine }}
           </code>
 
-          <UButton
-            :aria-label="t('supabase.envWarning.copyLine')"
-            icon="lucide:copy"
-            variant="soft"
-            color="neutral"
-            size="sm"
-            @click="copyEnvLine"
-          />
+          <UTooltip :text="t('supabase.envWarning.copyLine')">
+            <UButton
+              :aria-label="t('supabase.envWarning.copyLine')"
+              icon="lucide:copy"
+              variant="soft"
+              color="neutral"
+              size="sm"
+              @click="copyEnvLine"
+            />
+          </UTooltip>
         </div>
       </div>
     </template>

package/app/components/SupabaseLogo.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// The mark of Supabase, in its brand colors, for a page that connects Pluto to it (the database
+// setup). Size it with a class, such as `size-6`.
+const id = useId()
+</script>
+
+<template>
+  <svg viewBox="0 0 109 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      :fill="`url(#${id}-a)`"
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+    />
+    <path
+      :fill="`url(#${id}-b)`"
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+      fill-opacity="0.2"
+    />
+    <path
+      d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
+      fill="#3ECF8E"
+    />
+    <defs>
+      <linearGradient
+        :id="`${id}-a`"
+        x1="53.9738"
+        y1="54.974"
+        x2="94.1635"
+        y2="71.8295"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#249361" />
+        <stop offset="1" stop-color="#3ECF8E" />
+      </linearGradient>
+      <linearGradient
+        :id="`${id}-b`"
+        x1="36.1558"
+        y1="30.578"
+        x2="54.4844"
+        y2="65.0806"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/app/components/backend/SupabaseBackendDetails.vue

@@ -43,7 +43,7 @@ const host = (() => {
       :label="t('supabase.backend.openDashboard')"
       :to="dashboard"
       color="neutral"
-      icon="i-lucide-external-link"
+      trailing-icon="i-lucide-arrow-up-right"
       size="xs"
       target="_blank"
       variant="outline"

package/app/components/mail/AuthEmailsPanel.vue

@@ -72,7 +72,7 @@ const dashboardLinks = computed(() =>
           key: 'project',
           label: t('supabase.mail.authEmails.dashboardHome'),
           to: links.value.project,
-          icon: 'lucide:external-link',
+          icon: 'lucide:layout-dashboard',
         },
       ]
     : []
@@ -95,7 +95,7 @@ const dashboardLinks = computed(() =>
           :to="RESEND_SUPABASE_INTEGRATION_URL"
           target="_blank"
           rel="noopener noreferrer"
-          icon="lucide:external-link"
+          trailing-icon="i-lucide-arrow-up-right"
           color="neutral"
           variant="outline"
         >
@@ -149,6 +149,7 @@ const dashboardLinks = computed(() =>
           :icon="link.icon"
           target="_blank"
           rel="noopener noreferrer"
+          trailing-icon="i-lucide-arrow-up-right"
           color="neutral"
           variant="outline"
           size="sm"

package/app/pages/admin/migrations.vue

@@ -18,14 +18,14 @@ const { status, fetchStatus, pendingCount, refresh, runMigrations } =
 const isDev = import.meta.dev
 
 // The text of each result status that the server returns.
-const statusLabels: Record<string, string> = {
+const statusLabels = {
   applied: 'supabase.migrations.status.applied',
   skipped: 'supabase.migrations.status.skipped',
   failed: 'supabase.migrations.status.failed',
-}
+} as const
 
 function statusText(status: string): string {
-  const key = statusLabels[status]
+  const key = statusLabels[status as keyof typeof statusLabels]
 
   return key ? t(key) : status
 }
@@ -188,17 +188,20 @@ async function applyMigrations(useForm: boolean) {
 </script>
 
 <template>
-  <AdminView>
-    <h1 class="text-3xl font-bold lg:text-4xl">
-      {{ t('supabase.migrations.title') }}
-    </h1>
+  <PlutoViewAdminPanel>
+    <template #toolbar>
+      <PlutoViewToolbar
+        :title="t('supabase.migrations.title')"
+        icon="lucide:database-zap"
+      />
+    </template>
 
     <UAlert
       v-if="isReconnecting"
       :title="t('supabase.connection.restarting')"
       :description="t('supabase.migrations.reconnectingBanner')"
       color="info"
-      variant="outline"
+      variant="subtle"
       icon="lucide:refresh-cw"
     />
 
@@ -218,7 +221,7 @@ async function applyMigrations(useForm: boolean) {
             :title="t('supabase.migrations.upToDate')"
             :description="t('supabase.migrations.upToDateDescription')"
             color="success"
-            variant="outline"
+            variant="subtle"
             icon="lucide:check-circle"
           />
 
@@ -284,14 +287,12 @@ async function applyMigrations(useForm: boolean) {
                     :message="t('supabase.connection.connectionStringHelp')"
                   >
                     <template #link>
-                      <ULink
+                      <PlutoExternalLink
                         :to="`https://supabase.com/dashboard/project/${projectId}/database/settings?showConnect=true&connectTab=direct&method=transaction`"
-                        target="_blank"
                         class="underline"
-                        external
                       >
                         {{ t('supabase.connection.connectionStringHelpLink') }}
-                      </ULink>
+                      </PlutoExternalLink>
                     </template>
                   </SupabaseMessageParts>
                 </template>
@@ -310,19 +311,18 @@ async function applyMigrations(useForm: boolean) {
               <UAlert
                 color="secondary"
                 icon="lucide:badge-info"
-                variant="outline"
+                variant="subtle"
               >
                 <template #description>
                   <SupabaseMessageParts
                     :message="t('supabase.connection.passwordInfo')"
                   >
                     <template #link>
-                      <ULink
+                      <PlutoExternalLink
                         to="https://supabase.com/dashboard/project/_/database/settings"
-                        target="_blank"
                       >
                         {{ t('supabase.connection.passwordInfoLink') }}
-                      </ULink>
+                      </PlutoExternalLink>
                     </template>
                   </SupabaseMessageParts>
                 </template>
@@ -332,7 +332,7 @@ async function applyMigrations(useForm: boolean) {
                 :title="t('supabase.connection.whyTitle')"
                 :description="t('supabase.migrations.why')"
                 color="warning"
-                variant="outline"
+                variant="subtle"
                 icon="lucide:info"
               />
 
@@ -341,7 +341,7 @@ async function applyMigrations(useForm: boolean) {
                 :title="t('supabase.connection.restartTitle')"
                 :description="t('supabase.migrations.restartDescription')"
                 color="info"
-                variant="outline"
+                variant="subtle"
                 icon="lucide:refresh-cw"
               />
 
@@ -374,11 +374,13 @@ async function applyMigrations(useForm: boolean) {
       </UCard>
 
       <UCard v-if="lastRun">
-        <div class="flex flex-col gap-y-4">
+        <template #header>
           <h2 class="font-semibold">
             {{ t('supabase.migrations.lastRun') }}
           </h2>
+        </template>
 
+        <div class="flex flex-col gap-y-4">
           <EnvPersistWarning
             v-if="lastRun.success && lastRun.persisted === false"
             :connection-string="lastConnectionString"
@@ -410,7 +412,7 @@ async function applyMigrations(useForm: boolean) {
       :title="t('supabase.migrations.loadFailed')"
       :description="t('supabase.migrations.loadFailedDescription')"
       color="error"
-      variant="outline"
+      variant="subtle"
       icon="lucide:circle-x"
     >
       <template #actions>
@@ -424,5 +426,5 @@ async function applyMigrations(useForm: boolean) {
         </UButton>
       </template>
     </UAlert>
-  </AdminView>
+  </PlutoViewAdminPanel>
 </template>

package/app/pages/admin/roles.vue

@@ -124,140 +124,138 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
 </script>
 
 <template>
-  <main>
-    <AdminView>
-      <!-- The section (the Users item of the menu) and its tabs, like Settings. -->
-      <h1 class="text-3xl font-bold lg:text-4xl">
-        {{ t('supabase.access.users.title') }}
-      </h1>
+  <PlutoViewAdminPanel>
+    <!-- The section (the Users item of the menu) and its tabs, like Settings. -->
+    <template #toolbar>
+      <PlutoViewToolbar
+        :title="t('supabase.access.users.title')"
+        icon="lucide:users"
+      >
+        <template #right>
+          <UButton icon="lucide:plus" @click="openRole(null)">
+            {{ t('supabase.access.roles.create') }}
+          </UButton>
+        </template>
+      </PlutoViewToolbar>
 
       <PlutoAdminNavTabs />
+    </template>
 
-      <div class="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <h2 class="text-xl font-semibold">
-            {{ t('supabase.access.roles.title') }}
-          </h2>
-          <p class="text-muted text-sm">
-            {{ t('supabase.access.roles.description') }}
-          </p>
-        </div>
+    <p class="text-muted text-sm">
+      {{ t('supabase.access.roles.description') }}
+    </p>
 
-        <UButton icon="lucide:plus" @click="openRole(null)">
-          {{ t('supabase.access.roles.create') }}
-        </UButton>
-      </div>
+    <UAlert
+      v-if="!allowed"
+      :title="t('pluto.settings.noPermission.title')"
+      :description="
+        t('pluto.settings.noPermission.description', {
+          page: t('supabase.access.roles.title'),
+        })
+      "
+      icon="lucide:lock"
+      color="warning"
+    />
 
-      <UAlert
-        v-if="!allowed"
-        :title="t('pluto.settings.noPermission.title')"
-        :description="
-          t('pluto.settings.noPermission.description', {
-            page: t('supabase.access.roles.title'),
-          })
-        "
-        icon="lucide:lock"
-        color="warning"
-      />
-
-      <!-- Loading -->
-      <div
-        v-else-if="status === 'loading'"
-        class="flex flex-col gap-y-3"
-        aria-busy="true"
-      >
-        <USkeleton v-for="row in 3" :key="row" class="h-12 w-full" />
-      </div>
+    <!-- Loading -->
+    <div
+      v-else-if="status === 'loading'"
+      class="flex flex-col gap-y-3"
+      aria-busy="true"
+    >
+      <USkeleton v-for="row in 3" :key="row" class="h-12 w-full" />
+    </div>
 
-      <!-- Error -->
-      <UAlert
-        v-else-if="status === 'error'"
-        :title="t('supabase.access.roles.error.title')"
-        :description="loadError"
-        :actions="[
-          {
-            label: t('pluto.common.tryAgain'),
-            color: 'neutral',
-            variant: 'outline',
-            onClick: load,
-          },
-        ]"
-        color="error"
-        variant="subtle"
-        icon="lucide:circle-x"
-      />
+    <!-- Error -->
+    <UAlert
+      v-else-if="status === 'error'"
+      :title="t('supabase.access.roles.error.title')"
+      :description="loadError"
+      :actions="[
+        {
+          label: t('pluto.common.tryAgain'),
+          color: 'neutral',
+          variant: 'outline',
+          onClick: load,
+        },
+      ]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-x"
+    />
 
-      <!-- The list -->
-      <UTable
-        v-else
-        :data="roles"
-        :columns="columns"
-        class="border-default rounded-lg border"
-      >
-        <template #role-cell="{ row }">
-          <div class="flex min-w-0 flex-col">
-            <span class="flex items-center gap-2">
-              <span class="text-highlighted truncate font-medium">{{
-                row.original.label
-              }}</span>
-              <UBadge
-                v-if="row.original.is_builtin"
-                :label="t('supabase.access.roles.builtin')"
-                color="neutral"
-                variant="subtle"
-                size="sm"
-              />
-            </span>
-            <code class="text-muted truncate font-mono text-xs">{{
-              row.original.key
-            }}</code>
-          </div>
-        </template>
-
-        <template #permissions-cell="{ row }">
-          <span v-if="isFullAccess(row.original)" class="text-sm">
-            {{ t('supabase.access.roles.fullAccess') }}
-          </span>
-          <span v-else class="text-sm">
-            {{
-              t(
-                'supabase.access.roles.permissionCount',
-                row.original.capabilities.length
-              )
-            }}
+    <!-- The list -->
+    <UTable
+      v-else
+      :data="roles"
+      :columns="columns"
+      class="border-default rounded-lg border"
+    >
+      <template #role-cell="{ row }">
+        <div class="flex min-w-0 flex-col">
+          <span class="flex items-center gap-2">
+            <span class="text-highlighted truncate font-medium">{{
+              row.original.label
+            }}</span>
+            <UBadge
+              v-if="row.original.is_builtin"
+              :label="t('supabase.access.roles.builtin')"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+            />
           </span>
-        </template>
+          <code class="text-muted truncate font-mono text-xs">{{
+            row.original.key
+          }}</code>
+        </div>
+      </template>
 
-        <template #users-cell="{ row }">
-          <span class="text-sm">{{
-            t('supabase.access.roles.userCount', row.original.user_count)
-          }}</span>
-        </template>
+      <template #permissions-cell="{ row }">
+        <span v-if="isFullAccess(row.original)" class="text-sm">
+          {{ t('supabase.access.roles.fullAccess') }}
+        </span>
+        <span v-else class="text-sm">
+          {{
+            t(
+              'supabase.access.roles.permissionCount',
+              row.original.capabilities.length
+            )
+          }}
+        </span>
+      </template>
+
+      <template #users-cell="{ row }">
+        <span class="text-sm">{{
+          t('supabase.access.roles.userCount', row.original.user_count)
+        }}</span>
+      </template>
 
-        <template #actions-cell="{ row }">
-          <div class="flex justify-end">
-            <UDropdownMenu
-              :items="menuItems(row.original)"
-              :content="{ align: 'end' }"
-            >
+      <template #actions-cell="{ row }">
+        <div class="flex justify-end">
+          <UDropdownMenu
+            :items="menuItems(row.original)"
+            :content="{ align: 'end' }"
+          >
+            <UTooltip :text="row.original.label">
               <UButton
                 :aria-label="row.original.label"
                 icon="lucide:ellipsis"
                 color="neutral"
                 variant="ghost"
               />
-            </UDropdownMenu>
-          </div>
-        </template>
-      </UTable>
+            </UTooltip>
+          </UDropdownMenu>
+        </div>
+      </template>
+    </UTable>
 
-      <!-- Lazy: the chunk loads on the first open. -->
-      <RoleSlideover
-        v-if="slideoverMounted"
-        v-model:open="slideoverOpen"
-        :role="editing"
-        @saved="load"
-      />
-    </AdminView>
-  </main>
+    <!-- Lazy: the chunk loads on the first open. -->
+    <RoleSlideover
+      v-if="slideoverMounted"
+      v-model:open="slideoverOpen"
+      :role="editing"
+      @saved="load"
+    />
+  </PlutoViewAdminPanel>
 </template>