@plutocms/supabase 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.2.2](https://github.com/plutocms/supabase/compare/v0.2.1...v0.2.2) (2026-09-10)
+
+
+### Bug Fixes
+
+* **deps:** require pluto 0.3.2 ([6a6382a](https://github.com/plutocms/supabase/commit/6a6382aed8103a58f8b586df82e8e36e6e7c1f02))
+
+## [0.2.1](https://github.com/plutocms/supabase/compare/v0.2.0...v0.2.1) (2026-09-09)
+
+
+### Bug Fixes
+
+* **admin:** register navbar and isolate layer styles ([#37](https://github.com/plutocms/supabase/issues/37)) ([38853b9](https://github.com/plutocms/supabase/commit/38853b93d2664b583cc2b1c993c937cc8e895354))
+
 ## [0.2.0](https://github.com/plutocms/supabase/compare/v0.1.2...v0.2.0) (2026-09-09)
 
 

package/FEATURES.md

@@ -0,0 +1,7 @@
+# Features
+
+This file lists every implemented feature of this project. Each entry links to a skill file
+with full detail, so this file stays short.
+
+See the workspace-level `CLAUDE.md` (one directory up) for the delegation, writing, and git
+policies shared by every project here.

package/app/assets/css/tailwind.css

@@ -1,5 +1,6 @@
-@import '@nuxt/ui' source(none);
-@import 'tailwindcss' source(none);
+@import '@nuxt/ui';
+@import 'tailwindcss';
 
+@source '../..';
 @source '../../../node_modules/.c12/*/app/**';
 @source '@plutocms/pluto/app/**/*';

package/app/components/navbar/NavbarAdmin.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
+import { UDropdownMenu } from '#components'
 import { domainFromUrl } from '#imports'
 
 const host = useRequestURL().host
@@ -13,6 +13,24 @@ function openSidebar() {
 
 const { isLoggedIn, user, logout } = await useAuth()
 
+const displayName = computed(() => {
+  return (
+    user.value?.display_name ||
+    user.value?.full_name ||
+    user.value?.name ||
+    user.value?.username ||
+    'User'
+  )
+})
+
+const shortDisplayName = computed(() => displayName.value.split(' ')[0])
+
+const userMenuLabel = computed(() => {
+  return user.value?.username
+    ? `${displayName.value} (${user.value.username})`
+    : displayName.value
+})
+
 const has_settings_modified = useState<boolean>('has_settings_modified')
 
 const { data: settingsData, status } = await useFetch('/api/settings', {
@@ -27,10 +45,14 @@ const maybeDevUrl = computed(() => {
   return settingsData.value?.settings.website_url || ''
 })
 
-const items = ref<DropdownMenuItem[][]>([
+type DropdownItems = NonNullable<
+  Parameters<typeof UDropdownMenu>[0]['items']
+>
+
+const items = computed<DropdownItems>(() => [
   [
     {
-      label: `${user.value?.display_name} (${user.value?.username})` || 'User',
+      label: userMenuLabel.value,
       avatar: {
         icon: 'lucide:user',
         class: 'bg-green-600',
@@ -170,7 +192,7 @@ defineShortcuts(extractShortcuts(items.value))
                     root: 'rounded-xl',
                     icon: 'text-white text-lg',
                   }"
-                  :alt="user?.value?.display_name || 'User Avatar'"
+                  :alt="displayName"
                   size="sm"
                   icon="lucide:user"
                   class="bg-green-600"
@@ -179,7 +201,7 @@ defineShortcuts(extractShortcuts(items.value))
                 <span
                   class="light:text-zinc-800 hidden text-sm font-bold dark:text-white lg:inline"
                 >
-                  {{ user?.display_name.split(' ')[0] || 'User' }}
+                  {{ shortDisplayName }}
                 </span>
               </div>
             </button>

package/app/components/navbar/NavbarAdminProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const route = useRoute()
+const session = useSupabaseSession()
+
+const shouldShowNavbar = computed(() => {
+  return route.path === '/admin'
+    || route.path.startsWith('/admin/')
+    || Boolean(session.value)
+})
+</script>
+
+<template>
+  <NavbarAdmin v-if="shouldShowNavbar" />
+</template>

package/app/composables/auth.ts

@@ -7,15 +7,46 @@ interface PlutoSupabaseAuthOptions {
   route?: RouteLocationNormalizedGeneric
 }
 
+interface PlutoUserMetadata {
+  display_name?: string
+  full_name?: string
+  name?: string
+  username?: string
+  is_admin?: boolean
+  [key: string]: unknown
+}
+
 export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   const toast = useToast()
 
   const supabase = useSupabaseClient()
   const supabaseSession = useSupabaseSession()
 
-  const supabaseUser = await supabase.auth.getUser()
+  const supabaseUser = useSupabaseUser()
+  const userMetadata = useState<PlutoUserMetadata | null>(
+    'pluto-auth-user-metadata',
+    () => null
+  )
+
+  const { data: authenticatedUser } = await supabase.auth.getUser()
+
+  if (authenticatedUser.user?.user_metadata) {
+    userMetadata.value = authenticatedUser.user.user_metadata
+  }
+
+  watch(
+    supabaseUser,
+    (currentUser) => {
+      if (currentUser?.user_metadata) {
+        userMetadata.value = currentUser.user_metadata
+      }
+    },
+    { immediate: true }
+  )
 
-  const user = computed(() => supabaseUser.data.user?.user_metadata ?? null)
+  const user = computed(
+    () => supabaseUser.value?.user_metadata ?? userMetadata.value
+  )
   const isLoggedIn = computed<boolean>(() => !!supabaseSession.value)
   const isSubmitting = ref<boolean>(false)
 
@@ -94,6 +125,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
   async function logout(options?: LogoutOptions) {
     await supabase.auth.signOut()
+    userMetadata.value = null
 
     if (options?.showToast) {
       console.warn(`User logged out`)

package/app/plugins/navbar-admin.ts

@@ -0,0 +1,7 @@
+import NavbarAdminProvider from '../components/navbar/NavbarAdminProvider.vue'
+
+export default defineNuxtPlugin(() => {
+  const { registerNavbar } = useNavbarAdmin()
+
+  registerNavbar(NavbarAdminProvider)
+})

package/nuxt.config.ts

@@ -12,6 +12,8 @@ export default defineNuxtConfig({
     name: 'supabase',
   },
 
+  css: ['#layers/supabase/app/assets/css/tailwind.css'],
+
   runtimeConfig: {
     supabaseUrl: process.env.SUPABASE_URL,
     supabaseKey: process.env.SUPABASE_KEY,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "trustedDependencies": [
     "@parcel/watcher",
     "@plutocms/pluto",
@@ -38,8 +38,8 @@
   "dependencies": {
     "@nuxt/ui": "^4.9.0",
     "@nuxtjs/supabase": "^2.0.9",
-    "@plutocms/pluto": "^0.3.0",
-    "@plutocms/utils": "^0.2.0",
+    "@plutocms/pluto": "^0.3.2",
+    "@plutocms/utils": "^0.2.1",
     "postgres": "^3.4.9",
     "supabase": "^2.109.1",
     "yup": "1.7.1"