@plutocms/supabase 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.19.0](https://github.com/plutocms/supabase/compare/v0.18.1...v0.19.0) (2026-10-31)
+
+
+### Features
+
+* a top-level Users menu with Users and Roles ([#158](https://github.com/plutocms/supabase/issues/158)) ([1fc3cdf](https://github.com/plutocms/supabase/commit/1fc3cdfa1859b8e0a512c71ec54bd64cc6cab79b))
+
+## [0.18.1](https://github.com/plutocms/supabase/compare/v0.18.0...v0.18.1) (2026-10-31)
+
+
+### Bug Fixes
+
+* apps that extend the layer no longer get the ESLint module or an install script ([#151](https://github.com/plutocms/supabase/issues/151)) ([818bf93](https://github.com/plutocms/supabase/commit/818bf93a44cea01e6a1b237ace33a325f45de590))
+
 ## [0.18.0](https://github.com/plutocms/supabase/compare/v0.17.0...v0.18.0) (2026-10-30)
 
 

package/FEATURES.md

@@ -11,7 +11,7 @@ policies shared by every project here.
 - Permissions storage: role-based capabilities backing server route guards and RLS policies, and
   the admin-only access API (invite, roles) of migration 008.
   @.claude/skills/permissions-storage/SKILL.md
-- Users and Roles: the Users and Roles tabs of Settings (invite, edit roles, revoke, copy invite
+- Users and Roles: the Users item of the admin menu, with the Users and Roles pages (invite, edit roles, revoke, copy invite
   link, roles editor), invites through Pluto mail, and a guide for the Supabase sign-in emails.
   @.claude/skills/users-and-roles/SKILL.md
 - Content adapter: a Supabase/PostgREST-backed `PlutoContentAdapter`, plugging any layer's

package/README.md

@@ -116,7 +116,7 @@ a page of another site cannot call them. A failure is an HTTP error with a trans
 
 The public content of the Supabase layers is read through the public API of core,
 `GET /api/pluto/v1/content/<type>` (and `/<id or slug>`). See
-[the public API](https://pluto.vulmix.dev/core/public-api). The routes are anonymous. This layer
+[the public API](https://pluto.vulmix.dev/docs/core/public-api). The routes are anonymous. This layer
 reads for them with an anon client that has no user session, so Row Level Security applies as for
 an anonymous visitor, and the answer is the same for everyone. A CDN can cache it. The adapter
 never uses the service role key for a read. The adapter also supports the `filters` of a public

package/app/pages/admin/roles.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+// The Roles page (`/admin/roles`, admin only, a child of the Users item of the
+// admin menu). A role is a set of capabilities. An admin creates, edits and
+// deletes roles. The `admin` role is built in: it opens read-only, and it
+// cannot be deleted. Without admin rights, the page shows an alert and loads
+// nothing. See the users-and-roles skill.
+import type { DropdownMenuItem, TableColumn } from '@nuxt/ui'
+import type { AccessRole } from '../../../shared/types/access'
+import { ADMIN_ROLE_KEY } from '../../utils/access-ui'
+
+// The slideover and the modal load on demand. They stay out of the page chunk.
+const RoleSlideover = defineAsyncComponent(
+  () => import('../../components/access/RoleSlideover.vue')
+)
+const DeleteRoleModal = defineAsyncComponent(
+  () => import('../../components/access/DeleteRoleModal.vue')
+)
+
+const { t } = usePlutoI18n()
+const overlay = useOverlay()
+const errorText = usePlutoErrorText()
+
+useHead({
+  title: () => t('supabase.access.roles.title'),
+})
+
+const permissions = usePlutoPermissions()
+const allowed = computed(() => permissions.isAdmin.value)
+
+const roles = ref<AccessRole[]>([])
+const status = ref<'loading' | 'ready' | 'error'>('loading')
+const loadError = ref('')
+
+async function load() {
+  // Keep the table on screen while it reloads after a change.
+  if (status.value !== 'ready') {
+    status.value = 'loading'
+  }
+
+  try {
+    const response = await $fetch<{ roles: AccessRole[] }>(
+      '/api/_pluto/supabase/access/roles'
+    )
+
+    roles.value = response.roles
+    status.value = 'ready'
+  } catch (error) {
+    loadError.value = errorText(error)
+    status.value = 'error'
+  }
+}
+
+watch(
+  allowed,
+  (ok) => {
+    if (ok) {
+      load()
+    }
+  },
+  { immediate: true }
+)
+
+const columns = computed<TableColumn<AccessRole>[]>(() => [
+  { id: 'role', header: t('supabase.access.roles.columns.role') },
+  { id: 'permissions', header: t('supabase.access.roles.columns.permissions') },
+  { id: 'users', header: t('supabase.access.roles.columns.users') },
+  { id: 'actions', header: '' },
+])
+
+// --- Create and edit ---
+const slideoverMounted = ref(false)
+const slideoverOpen = ref(false)
+const editing = ref<AccessRole | null>(null)
+
+function openRole(role: AccessRole | null) {
+  editing.value = role
+  slideoverMounted.value = true
+  slideoverOpen.value = true
+}
+
+// --- Delete ---
+async function openDelete(role: AccessRole) {
+  const modal = overlay.create(DeleteRoleModal)
+  const deleted = await modal.open({ role })
+
+  if (deleted) {
+    await load()
+  }
+}
+
+function isFullAccess(role: AccessRole): boolean {
+  return role.capabilities.includes('*')
+}
+
+function menuItems(role: AccessRole): DropdownMenuItem[][] {
+  const readOnly = role.key === ADMIN_ROLE_KEY
+  const main: DropdownMenuItem[] = [
+    {
+      label: readOnly
+        ? t('supabase.access.roles.menu.view')
+        : t('supabase.access.roles.menu.edit'),
+      icon: readOnly ? 'lucide:eye' : 'lucide:pencil',
+      onSelect: () => openRole(role),
+    },
+  ]
+
+  // A built-in role cannot be deleted.
+  if (role.is_builtin) {
+    return [main]
+  }
+
+  return [
+    main,
+    [
+      {
+        label: t('supabase.access.roles.menu.delete'),
+        icon: 'lucide:trash-2',
+        color: 'error',
+        onSelect: () => openDelete(role),
+      },
+    ],
+  ]
+}
+</script>
+
+<template>
+  <main>
+    <AdminView>
+      <div class="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold lg:text-4xl">
+            {{ t('supabase.access.roles.title') }}
+          </h1>
+          <p class="text-muted text-sm">
+            {{ t('supabase.access.roles.description') }}
+          </p>
+        </div>
+
+        <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"
+      />
+
+      <!-- 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"
+      />
+
+      <!-- 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
+              )
+            }}
+          </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' }"
+            >
+              <UButton
+                :aria-label="row.original.label"
+                icon="lucide:ellipsis"
+                color="neutral"
+                variant="ghost"
+              />
+            </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>
+</template>