@plutocms/supabase 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.6.0](https://github.com/plutocms/supabase/compare/v0.5.0...v0.6.0) (2026-09-12)
+
+
+### Features
+
+* **settings:** generic, namespaced setting keys ([#51](https://github.com/plutocms/supabase/issues/51)) ([2410552](https://github.com/plutocms/supabase/commit/2410552ce6c880ecec1fac6f0b84852ef8612bea))
+
 ## [0.5.0](https://github.com/plutocms/supabase/compare/v0.4.1...v0.5.0) (2026-09-12)
 
 

package/app/components/settings/SettingsGeneralPanel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { field } = usePlutoSettings()
+
+const websiteTitle = field('website_title')
+const websiteDescription = field('website_description')
+const websiteUrl = field('website_url')
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-6">
+    <UFormField label="Website Title" class="w-full lg:w-1/2">
+      <UInput v-model="websiteTitle" placeholder="e.g. My Website" />
+    </UFormField>
+
+    <UFormField label="Website Description" class="w-full lg:w-1/2">
+      <UInput
+        v-model="websiteDescription"
+        placeholder="e.g. My Website Description"
+      />
+    </UFormField>
+
+    <UFormField label="Website URL" class="w-full lg:w-1/2">
+      <UInput
+        v-model="websiteUrl"
+        type="url"
+        placeholder="e.g. https://example.com"
+      />
+    </UFormField>
+  </div>
+</template>

package/app/plugins/pluto-extension.ts

@@ -1,8 +1,40 @@
 import NavbarAdminProvider from '../components/navbar/NavbarAdminProvider.vue'
+import SettingsGeneralPanel from '../components/settings/SettingsGeneralPanel.vue'
 
 export default defineNuxtPlugin(() => {
   definePlutoExtension({
     id: 'supabase',
     navbar: { id: 'admin-navbar', component: NavbarAdminProvider },
+    settingsPanels: [
+      {
+        id: 'general',
+        order: 0,
+        title: 'General',
+        icon: 'lucide:globe',
+        component: SettingsGeneralPanel,
+      },
+    ],
+    settingsDriver: {
+      id: 'supabase',
+      load: async () => {
+        const response = await $fetch<{ settings: Record<string, string> }>(
+          '/api/settings'
+        )
+        return response.settings
+      },
+      save: async (patch) => {
+        await $fetch('/api/settings/update', {
+          method: 'POST',
+          body: patch,
+        })
+
+        // NavbarAdmin.vue watches this to refresh its own /api/settings
+        // read (it shows the site's own URL) — the settings page saving
+        // through the new registry must still trigger it, exactly like
+        // the old page did.
+        const hasSettingsModified = useState<number>('has_settings_modified')
+        hasSettingsModified.value = Date.now()
+      },
+    },
   })
 })

package/db/migrations/003_settings_generic_keys.sql

@@ -0,0 +1,37 @@
+-- Generic settings keys
+--
+-- public.settings has been a fixed 3-value enum since 001_baseline.sql —
+-- a layer other than @plutocms/supabase could never add its own setting
+-- without altering a shared type. This adds a free-text, namespaced key
+-- column alongside the enum column, without removing the enum column
+-- yet. Dropping setting_name and the TSettings enum is left for a later
+-- migration, once no shipped code writes it, to keep this one cheap to
+-- reason about and its effects easy to undo.
+--
+-- Key format: lowercase segments separated by dots, e.g. 'website_title'
+-- or 'blog.posts_per_page'. A layer other than core must namespace its
+-- keys with its own name, so two layers can never collide.
+
+alter table public.settings add column if not exists setting_key text;
+
+update public.settings set setting_key = setting_name::text where setting_key is null;
+
+alter table public.settings alter column setting_name drop not null;
+
+create unique index if not exists settings_setting_key_key on public.settings (setting_key);
+
+do $$
+begin
+  if not exists (
+    select 1 from pg_constraint
+     where conname = 'settings_setting_key_format'
+       and conrelid = 'public.settings'::regclass
+  ) then
+    alter table public.settings
+      add constraint settings_setting_key_format
+      check (setting_key ~ '^[a-z0-9_]+(?:\.[a-z0-9_]+)*$') not valid;
+  end if;
+end
+$$;
+
+alter table public.settings validate constraint settings_setting_key_format;

package/nuxt.config.ts

@@ -35,12 +35,6 @@ export default defineNuxtConfig({
     },
   },
 
-  vite: {
-    optimizeDeps: {
-      include: ['yup'],
-    },
-  },
-
   eslint: {
     config: {
       nuxt: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "trustedDependencies": [
     "@parcel/watcher",
     "@plutocms/pluto",
@@ -42,8 +42,7 @@
     "@plutocms/pluto": "^0.4.0",
     "@plutocms/utils": "^0.2.1",
     "postgres": "^3.4.9",
-    "supabase": "^2.109.1",
-    "yup": "1.7.1"
+    "supabase": "^2.109.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.2.0",

package/server/api/settings/index.get.ts

@@ -3,24 +3,23 @@ import { serverSupabaseClient } from '#supabase/server'
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient<Database>(event)
 
-  const { data } = await client.from('settings').select('*')
+  const { data } = await client
+    .from('settings')
+    .select('setting_key, setting_name, setting_value')
 
-  type SettingsKey =
-    Database['public']['Tables']['settings']['Row']['setting_name']
-
-  // @ts-expect-error: Object.fromEntries may not infer the correct type for settings
-  const settings: Record<SettingsKey, string> = {
-    ...Object.fromEntries(
-      data?.map((item) => [item.setting_name, item.setting_value]) || []
-    ),
-  }
+  const settings: Record<string, string> = {}
 
   data?.forEach((item) => {
-    if (!item.setting_name || !item.setting_value) {
+    // setting_key is null only for a row written before
+    // db/migrations/003_settings_generic_keys.sql backfilled it — fall
+    // back to the enum column so a mid-migration read never drops a row.
+    const key = item.setting_key ?? item.setting_name
+
+    if (!key || !item.setting_value) {
       return
     }
 
-    settings[item.setting_name] = item.setting_value
+    settings[key] = item.setting_value
   })
 
   return { settings }

package/server/api/settings/update.post.ts

@@ -1,36 +1,30 @@
 import { serverSupabaseClient } from '#supabase/server'
 import { requireAdmin } from '../../utils/admin-guard'
 
-// Mirrors the TSettings enum in db/migrations/001_baseline.sql. The Postgres enum
-// already rejects an unknown key at the DB level (as a raw constraint
-// error) — this turns that into a clean 400 instead.
-const KNOWN_SETTING_KEYS = [
-  'website_title',
-  'website_url',
-  'website_description',
-] as const
+// A key is lowercase segments separated by dots, e.g. 'website_title' or
+// 'blog.posts_per_page'. Mirrors the settings_setting_key_format check
+// constraint in db/migrations/003_settings_generic_keys.sql — this turns
+// a violation into a clean 400 instead of a raw Postgres error. A layer
+// other than core must namespace its own keys so two layers can never
+// collide.
+const SETTING_KEY_PATTERN = /^[a-z0-9_]+(?:\.[a-z0-9_]+)*$/
+const MAX_SETTING_VALUE_LENGTH = 10_000
 
 export default defineEventHandler(async (event) => {
   await requireAdmin(event)
 
-  type SettingName =
-    Database['public']['Tables']['settings']['Insert']['setting_name']
-  type FormBody = Record<SettingName, string>
-
   const client = await serverSupabaseClient<Database>(event)
-  const body = await readBody<FormBody>(event)
+  const body = await readBody<Record<string, unknown>>(event)
 
   if (!body || typeof body !== 'object') {
     throw createError({ statusCode: 400, statusMessage: 'No payload sent.' })
   }
 
   const transformed = Object.entries(body).map(([key, value]) => {
-    if (
-      !KNOWN_SETTING_KEYS.includes(key as (typeof KNOWN_SETTING_KEYS)[number])
-    ) {
+    if (!SETTING_KEY_PATTERN.test(key)) {
       throw createError({
         statusCode: 400,
-        statusMessage: `Unknown setting: ${key}`,
+        statusMessage: `Invalid setting key: ${key}`,
       })
     }
 
@@ -41,15 +35,22 @@ export default defineEventHandler(async (event) => {
       })
     }
 
+    if (value.length > MAX_SETTING_VALUE_LENGTH) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: `Setting "${key}" is too long.`,
+      })
+    }
+
     return {
-      setting_name: key as SettingName,
+      setting_key: key,
       setting_value: value,
     }
   })
 
   const { data, error } = await client
     .from('settings')
-    .upsert(transformed, { onConflict: 'setting_name' })
+    .upsert(transformed, { onConflict: 'setting_key' })
     .select()
 
   if (error) {

package/shared/types/supabase.ts

@@ -256,17 +256,20 @@ export type Database = {
       settings: {
         Row: {
           id: number
-          setting_name: Database["public"]["Enums"]["tsettings"]
+          setting_key: string | null
+          setting_name: Database["public"]["Enums"]["tsettings"] | null
           setting_value: string
         }
         Insert: {
           id?: number
-          setting_name: Database["public"]["Enums"]["tsettings"]
+          setting_key?: string | null
+          setting_name?: Database["public"]["Enums"]["tsettings"] | null
           setting_value: string
         }
         Update: {
           id?: number
-          setting_name?: Database["public"]["Enums"]["tsettings"]
+          setting_key?: string | null
+          setting_name?: Database["public"]["Enums"]["tsettings"] | null
           setting_value?: string
         }
         Relationships: []

package/app/pages/admin/settings.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { object, string } from 'yup'
-
-type Form = Partial<
-  Record<
-    Database['public']['Tables']['settings']['Insert']['setting_name'],
-    string
-  >
->
-
-useHead({
-  title: 'Settings',
-})
-
-const toast = useToast()
-
-const has_settings_modified = useState('has_settings_modified', () => {
-  return Date.now()
-})
-
-const { data } = await useFetch('/api/settings')
-
-const schema = object({
-  website_title: string().required().label('Website Title'),
-  website_description: string().required().label('Website Description'),
-  website_url: string().url().required().label('Website URL'),
-})
-
-const form = ref<Form>({
-  website_title: data.value?.settings.website_title || '',
-  website_description: data.value?.settings.website_description || '',
-  website_url: data.value?.settings.website_url || '',
-})
-
-const isSubmitting = ref<boolean>(false)
-
-async function submitForm() {
-  const payload = form.value
-
-  isSubmitting.value = true
-
-  try {
-    await $fetch('/api/settings/update', {
-      method: 'POST',
-      body: payload,
-    })
-
-    toast.add({
-      title: 'Settings updated successfully',
-      color: 'success',
-    })
-
-    has_settings_modified.value = Date.now()
-  } catch (error) {
-    if (import.meta.dev) {
-      console.error('Error updating settings:', error)
-    }
-
-    toast.add({
-      title: 'Failed to update settings.',
-      color: 'error',
-    })
-  } finally {
-    isSubmitting.value = false
-  }
-}
-</script>
-
-<template>
-  <AdminView>
-    <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-full lg:w-1/2"
-          >
-            <UInput
-              v-model="form.website_title"
-              placeholder="e.g. My Website"
-            />
-          </UFormField>
-
-          <UFormField
-            label="Website Description"
-            name="website_description"
-            class="w-full lg:w-1/2"
-          >
-            <UInput
-              v-model="form.website_description"
-              placeholder="e.g. My Website Description"
-            />
-          </UFormField>
-
-          <UFormField
-            label="Website URL"
-            name="website_url"
-            class="w-full lg:w-1/2"
-          >
-            <UInput
-              v-model="form.website_url"
-              type="url"
-              placeholder="e.g. https://example.com"
-            />
-          </UFormField>
-
-          <div class="flex">
-            <UButton
-              :loading="isSubmitting"
-              :disabled="isSubmitting"
-              type="submit"
-              icon="lucide:save"
-              class="w-full justify-center sm:w-auto"
-            >
-              Save
-            </UButton>
-          </div>
-        </div>
-      </UForm>
-    </UCard>
-  </AdminView>
-</template>