@plutocms/supabase 0.1.2 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* make admin account views responsive ([#35](https://github.com/plutocms/supabase/issues/35)) ([cfa5bf0](https://github.com/plutocms/supabase/commit/cfa5bf0b902e0180272eb40d0d170589442ea179))
+
 ## [0.1.2](https://github.com/plutocms/supabase/compare/v0.1.1...v0.1.2) (2026-09-08)
 
 

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,13 +1,36 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
+import { UDropdownMenu } from '#components'
 import { domainFromUrl } from '#imports'
 
 const host = useRequestURL().host
 
 const route = useRoute()
+const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
+
+function openSidebar() {
+  isSidebarOpen.value = true
+}
 
 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', {
@@ -22,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',
@@ -81,8 +108,20 @@ defineShortcuts(extractShortcuts(items.value))
 
 <template>
   <PlutoNavbarAdmin>
-    <div class="flex h-full items-stretch justify-between px-4">
-      <div class="flex items-center gap-x-3">
+    <div
+      class="flex h-full min-w-0 items-stretch justify-between gap-1 px-2 lg:px-4"
+    >
+      <div class="flex min-w-0 items-center gap-x-1 lg:gap-x-3">
+        <UButton
+          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"
@@ -96,8 +135,8 @@ defineShortcuts(extractShortcuts(items.value))
           </NuxtLink>
         </div>
 
-        <div class="h-full">
-          <ul class="flex h-full items-center text-sm">
+        <div class="min-w-0 h-full overflow-hidden">
+          <ul class="flex h-full min-w-0 items-center text-sm">
             <NavbarAdminActionButton
               :show="route.path.startsWith('/admin')"
               :title="`Visit ${domainFromUrl(maybeDevUrl)}`"
@@ -129,7 +168,7 @@ defineShortcuts(extractShortcuts(items.value))
         </div>
       </div>
 
-      <div class="flex items-center gap-3">
+      <div class="flex shrink-0 items-center gap-1 lg:gap-3">
         <ColorModeButton />
 
         <div class="h-full">
@@ -140,7 +179,11 @@ defineShortcuts(extractShortcuts(items.value))
             }"
             :modal="false"
           >
-            <button class="group h-full py-1">
+            <button
+              class="group h-full py-1"
+              aria-label="Open user menu"
+              type="button"
+            >
               <div
                 class="flex h-full items-center gap-x-2 rounded-sm rounded-l-xl pr-2 pl-0.5 group-hover:bg-white/20"
               >
@@ -149,16 +192,16 @@ 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"
                 />
 
                 <span
-                  class="light:text-zinc-800 text-sm font-bold dark:text-white"
+                  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/pages/admin/(auth)/confirm.vue

@@ -9,8 +9,8 @@ useHead({
 </script>
 
 <template>
-  <div class="grid h-full place-items-center">
-    <UCard class="w-100">
+  <div class="grid min-h-dvh place-items-center p-4">
+    <UCard class="w-full max-w-100">
       <div class="space-y-6 py-10">
         <div class="text-center space-y-4">
           <hgroup class="flex flex-col gap-y-1">

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

@@ -22,8 +22,8 @@ async function submitForm() {
 </script>
 
 <template>
-  <div class="grid h-full place-items-center">
-    <UCard class="w-100">
+  <div class="grid min-h-dvh place-items-center p-4">
+    <UCard class="w-full max-w-100">
       <div v-if="isEmailSent" class="space-y-6 py-10">
         <div class="text-center space-y-4">
           <hgroup class="flex flex-col gap-y-1">
@@ -68,9 +68,16 @@ async function submitForm() {
             />
           </UFormField>
 
-          <div class="flex items-center justify-between gap-x-4">
+          <div
+            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+          >
             <UFormField>
-              <UButton :loading="isSubmitting" type="submit" icon="lucide:send">
+              <UButton
+                :loading="isSubmitting"
+                type="submit"
+                icon="lucide:send"
+                class="w-full justify-center sm:w-auto"
+              >
                 Send Reset Link
               </UButton>
             </UFormField>

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

@@ -25,8 +25,8 @@ function submitForm() {
 </script>
 
 <template>
-  <div class="grid h-full place-items-center">
-    <UCard class="w-100">
+  <div class="grid min-h-dvh place-items-center p-4">
+    <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>
@@ -49,12 +49,15 @@ function submitForm() {
             />
           </UFormField>
 
-          <div class="flex items-center justify-between gap-x-4">
+          <div
+            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+          >
             <UFormField>
               <UButton
                 :loading="isSubmitting"
                 type="submit"
                 icon="lucide:log-in"
+                class="w-full justify-center sm:w-auto"
               >
                 Login
               </UButton>
@@ -67,7 +70,9 @@ function submitForm() {
             </UFormField>
           </div>
 
-          <div class="flex items-center justify-between">
+          <div
+            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+          >
             <UButton
               variant="link"
               icon="lucide:arrow-left"

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

@@ -68,8 +68,8 @@ async function submitForm() {
 </script>
 
 <template>
-  <div class="grid h-full place-items-center">
-    <UCard class="w-100">
+  <div class="grid min-h-dvh place-items-center p-4">
+    <UCard class="w-full max-w-120">
       <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
         <div class="text-center space-y-4">
           <hgroup class="flex flex-col gap-y-1">
@@ -118,7 +118,7 @@ async function submitForm() {
             />
           </UFormField>
 
-          <div class="flex gap-x-4">
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <UFormField label="Username" required>
               <UInput
                 v-model="form.username"
@@ -159,7 +159,9 @@ async function submitForm() {
             />
           </UFormField>
 
-          <div class="flex items-center justify-between gap-x-4">
+          <div
+            class="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+          >
             <UFormField>
               <UButton
                 to="/admin/login"
@@ -176,6 +178,7 @@ async function submitForm() {
                 :disabled="isSubmitting || !passwordMatch"
                 :loading="isSubmitting"
                 type="submit"
+                class="w-full justify-center sm:w-auto"
               >
                 Create account
               </UButton>

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

@@ -48,8 +48,8 @@ async function submitForm() {
 </script>
 
 <template>
-  <div class="grid h-full place-items-center">
-    <UCard class="w-100">
+  <div class="grid min-h-dvh place-items-center p-4">
+    <UCard class="w-full max-w-100">
       <div v-if="isPasswordUpdated" class="space-y-6 py-10">
         <div class="text-center space-y-4">
           <hgroup class="flex flex-col gap-y-1">
@@ -109,13 +109,16 @@ async function submitForm() {
             />
           </UFormField>
 
-          <div class="flex items-center justify-between gap-x-4">
+          <div
+            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+          >
             <UFormField>
               <UButton
                 :loading="isSubmitting"
                 :disabled="!passwordMatch"
                 type="submit"
                 icon="lucide:lock-keyhole"
+                class="w-full justify-center sm:w-auto"
               >
                 Update Password
               </UButton>

package/app/pages/admin/settings.vue

@@ -68,12 +68,16 @@ async function submitForm() {
 
 <template>
   <AdminView>
-    <h1 class="text-4xl font-bold">Settings</h1>
+    <h1 class="text-3xl font-bold lg:text-4xl">Settings</h1>
 
     <UCard>
       <UForm :schema="schema" :state="form" @submit="submitForm">
         <div class="flex flex-col gap-y-6">
-          <UFormField label="Website Title" name="website_title" class="w-1/2">
+          <UFormField
+            label="Website Title"
+            name="website_title"
+            class="w-full lg:w-1/2"
+          >
             <UInput
               v-model="form.website_title"
               placeholder="e.g. My Website"
@@ -83,7 +87,7 @@ async function submitForm() {
           <UFormField
             label="Website Description"
             name="website_description"
-            class="w-1/2"
+            class="w-full lg:w-1/2"
           >
             <UInput
               v-model="form.website_description"
@@ -91,7 +95,11 @@ async function submitForm() {
             />
           </UFormField>
 
-          <UFormField label="Website URL" name="website_url" class="w-1/2">
+          <UFormField
+            label="Website URL"
+            name="website_url"
+            class="w-full lg:w-1/2"
+          >
             <UInput
               v-model="form.website_url"
               type="url"
@@ -99,12 +107,13 @@ async function submitForm() {
             />
           </UFormField>
 
-          <div>
+          <div class="flex">
             <UButton
               :loading="isSubmitting"
               :disabled="isSubmitting"
               type="submit"
               icon="lucide:save"
+              class="w-full justify-center sm:w-auto"
             >
               Save
             </UButton>

package/app/pages/admin/setup.vue

@@ -123,8 +123,8 @@ function handleStepChange(step: number) {
 
 <template>
   <UApp>
-    <div class="flex justify-center items-center h-screen">
-      <UCard class="w-125">
+    <div class="flex min-h-dvh items-center justify-center p-4">
+      <UCard class="w-full max-w-125">
         <div class="flex flex-col gap-y-8">
           <UStepper ref="stepper" v-model="currentStep" :items="items" linear />
 
@@ -205,7 +205,7 @@ function handleStepChange(step: number) {
                       </p>
 
                       <div>
-                        <UPopover :content="{ side: 'right' }" arrow>
+                        <UPopover :content="{ side: 'bottom' }" arrow>
                           <UButton
                             icon="lucide:lightbulb"
                             label="Technical details"
@@ -284,13 +284,14 @@ function handleStepChange(step: number) {
           </div>
 
           <div class="flex justify-end">
-            <div>
+            <div class="w-full sm:w-auto">
               <UButton
                 v-if="stepper?.hasNext"
                 :form="currentStepId"
                 :loading="currentLoading"
                 leading-icon="lucide:check"
                 type="submit"
+                class="w-full justify-center sm:w-auto"
               >
                 {{ currentStepSubmitLabel }}
               </UButton>

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.1.2",
+  "version": "0.2.1",
   "trustedDependencies": [
     "@parcel/watcher",
     "@plutocms/pluto",
@@ -38,8 +38,8 @@
   "dependencies": {
     "@nuxt/ui": "^4.9.0",
     "@nuxtjs/supabase": "^2.0.9",
-    "@plutocms/pluto": "^0.1.0",
-    "@plutocms/utils": "^0.1.0",
+    "@plutocms/pluto": "^0.3.1",
+    "@plutocms/utils": "^0.2.1",
     "postgres": "^3.4.9",
     "supabase": "^2.109.1",
     "yup": "1.7.1"