@plutocms/supabase 0.18.1 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.20.0](https://github.com/plutocms/supabase/compare/v0.19.0...v0.20.0) (2026-10-31)
+
+
+### Features
+
+* section tabs on the Users and Roles pages ([#163](https://github.com/plutocms/supabase/issues/163)) ([876abf6](https://github.com/plutocms/supabase/commit/876abf637520f0059a29216a3cb6629980ad02e7))
+
+## [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)
 
 

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

@@ -14,7 +14,7 @@ SUPABASE_URL=your-supabase-url
 SUPABASE_KEY=your-publishable-supabase-key
 ```
 
-2. Install the layer. It brings `@nuxtjs/supabase`, `@plutocms/core` and `@plutocms/utils`, so you do not add them:
+2. Install the layer. It brings `@nuxtjs/supabase` and `@plutocms/core`, so you do not add them:
 
 ```bash
 npm i @plutocms/supabase

package/app/pages/admin/roles.vue

@@ -0,0 +1,263 @@
+<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>
+      <!-- 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>
+
+      <PlutoAdminNavTabs />
+
+      <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>
+
+        <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>