@plutocms/pluto 0.10.0 → 0.12.0

package/app/components/Pluto/View/PlutoViewAdminPanel.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { SplitterItem } from '@nuxt/ui'
+
+const props = withDefaults(
+  defineProps<{
+    /** Drop the max-width container in the main region. Default 'container'. */
+    width?: 'container' | 'full'
+    /**
+     * Whether the aside is open. Pass the same value as the aside's
+     * `v-model:open`. While it is open on desktop, the aside sits in a
+     * resizable panel. The panel width persists across visits.
+     */
+    asideOpen?: boolean
+  }>(),
+  {
+    width: 'container',
+    asideOpen: false,
+  }
+)
+
+const slots = useSlots()
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+
+// The splitter works in percentages of the row width. The aside limits
+// are in px, so convert them against the measured row width. Do not use
+// the splitter's `sizeUnit: 'px'`: when the panel joins with the aside
+// already open (a reload), reka-ui skips the px conversion and reads the
+// px value as a raw size.
+const rowEl = ref<HTMLElement>()
+const { width: rowWidth } = useElementSize(rowEl)
+const toPercent = (px: number) => Math.min(100, (px / rowWidth.value) * 100)
+
+// On mobile the aside is a slideover, so it needs no panel. Wait for the
+// row to have a width, so the px-to-percent conversion is correct.
+const resizable = computed(() => rowWidth.value > 0 && Boolean(slots.aside) && props.asideOpen && isDesktop.value)
+provide(plutoViewAsideResizableKey, resizable)
+
+const ASIDE_MIN = 240
+const ASIDE_MAX = 560
+
+// Keep the aside width in px ourselves, so it stays the same when the
+// window size changes between visits.
+const asideWidth = useCookie<number>('pluto-view-aside-width', { default: () => 320 })
+const asideEl = ref<HTMLElement>()
+
+// Snapshot the width when the panel opens. A reactive `defaultSize` would
+// rebuild the panel on every save.
+const clampAside = (px: number) => Math.min(ASIDE_MAX, Math.max(ASIDE_MIN, px))
+const asideDefault = ref(0)
+watch(resizable, (value) => {
+  if (value) {
+    asideDefault.value = toPercent(clampAside(asideWidth.value))
+  }
+}, { immediate: true })
+
+function onDragging(_index: number, dragging: boolean) {
+  if (!dragging && asideEl.value) {
+    asideWidth.value = Math.round(asideEl.value.getBoundingClientRect().width)
+  }
+}
+
+// `id` and `order` let the splitter add and remove the aside panel as the
+// aside opens and closes.
+const items = computed<SplitterItem[]>(() => [
+  { id: 'pluto-view-main', slot: 'main', order: 1 },
+  ...(resizable.value
+    ? [{ id: 'pluto-view-aside', slot: 'aside', order: 2, defaultSize: asideDefault.value, minSize: toPercent(ASIDE_MIN), maxSize: toPercent(ASIDE_MAX) }]
+    : []),
+])
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden">
+    <div class="shrink-0">
+      <slot name="toolbar" />
+    </div>
+
+    <div ref="rowEl" class="flex min-h-0 flex-1 overflow-hidden">
+      <USplitter
+        id="pluto-view"
+        :items="items"
+        :ui="{
+          root: 'min-h-0 flex-1',
+          handle: 'w-px bg-(--ui-border) transition-colors hover:bg-primary data-[resize-handle-state=drag]:bg-primary',
+        }"
+        @dragging="onDragging"
+      >
+        <template #main>
+          <main class="min-h-0 w-full overflow-y-auto">
+            <!--
+              'container' matches AdminView's own padding/gap classes, so a view
+              moving from AdminView to this panel looks the same. 'full' adds
+              none — a focus-layout consumer (e.g. a rich text editor) supplies
+              its own padding instead.
+            -->
+            <UContainer
+              v-if="width === 'container'"
+              class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
+            >
+              <slot />
+            </UContainer>
+            <slot v-else />
+          </main>
+        </template>
+
+        <template #aside>
+          <div ref="asideEl" class="h-full w-full">
+            <slot name="aside" />
+          </div>
+        </template>
+      </USplitter>
+
+      <!-- Closed or mobile: the aside renders outside the splitter. -->
+      <div v-if="!resizable" class="shrink-0">
+        <slot name="aside" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Pluto/View/PlutoViewAside.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+// Do NOT use UDashboardSidebar here. Nuxt UI's UDashboardSidebar listens to
+// a GLOBAL `dashboard:sidebar:toggle` runtime hook, not a per-instance one.
+// A second instance of it (this aside) would open and close in lockstep
+// with the app's own LEFT sidebar from admin.vue. This component is a
+// hand-built stand-in instead: a plain `<aside>` on desktop, a `USlideover`
+// on mobile, both bound to the same `open` model.
+withDefaults(
+  defineProps<{
+    title?: string
+    /**
+     * Desktop width, in px. Default 320. Ignored inside a
+     * PlutoViewAdminPanel that gets `aside-open`: its resizable panel sets
+     * the width.
+     */
+    width?: number
+  }>(),
+  {
+    width: 320,
+  }
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+function close() {
+  open.value = false
+}
+
+// Open the slideover on mobile only. A `lg:hidden` class alone is not
+// enough: an open slideover is a modal dialog, so it disables pointer
+// events on the rest of the page even while it is hidden. On desktop, the
+// page then stops taking clicks as soon as the aside opens. It also mounts
+// the slot a second time.
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+const resizable = inject(plutoViewAsideResizableKey, ref(false))
+const slideoverOpen = computed({
+  get: () => open.value && !isDesktop.value,
+  set: (value: boolean) => {
+    open.value = value
+  },
+})
+</script>
+
+<template>
+  <!--
+    Inside a resizable PlutoViewAdminPanel the splitter panel owns the
+    width and its handle draws the border. Elsewhere, keep the fixed width.
+  -->
+  <aside
+    v-if="open"
+    :style="resizable ? undefined : { width: `${width}px` }"
+    :class="resizable ? 'w-full' : 'border-default shrink-0 border-s'"
+    class="hidden h-full flex-col lg:flex"
+  >
+    <div class="border-default flex h-12 shrink-0 items-center justify-between gap-1.5 border-b px-4">
+      <h2 class="text-highlighted truncate text-sm font-semibold">{{ title }}</h2>
+      <UButton
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        square
+        @click="close"
+      />
+    </div>
+    <div class="min-h-0 flex-1 overflow-y-auto p-4">
+      <slot />
+    </div>
+  </aside>
+
+  <USlideover
+    v-model:open="slideoverOpen"
+    :title="title"
+    side="right"
+  >
+    <template #body>
+      <slot />
+    </template>
+  </USlideover>
+</template>

package/app/components/Pluto/View/PlutoViewToolbar.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  icon?: string
+  /** Path for a back button, rendered before the title. */
+  backTo?: string
+}>()
+
+defineSlots<{
+  left?: () => unknown
+  title?: () => unknown
+  default?: () => unknown
+  right?: () => unknown
+  trailing?: () => unknown
+}>()
+</script>
+
+<template>
+  <!--
+    `:toggle="false"` is load-bearing. UDashboardNavbar's default toggle
+    button calls Nuxt UI's global `dashboard:sidebar:toggle` hook, which
+    controls the app-level LEFT sidebar from admin.vue. This is a SECOND,
+    page-local navbar — its own toggle would open and close the wrong
+    sidebar, so it must never render one.
+  -->
+  <UDashboardNavbar
+    :title="title"
+    :icon="icon"
+    :toggle="false"
+    :ui="{ root: 'h-12 border-muted' }"
+  >
+    <template v-if="$slots.left" #left>
+      <slot name="left" />
+    </template>
+
+    <template v-if="backTo || icon" #leading>
+      <UButton
+        v-if="backTo"
+        :to="backTo"
+        icon="i-lucide-arrow-left"
+        color="neutral"
+        variant="ghost"
+        square
+      />
+      <UIcon v-if="icon" :name="icon" class="me-1.5 size-5 shrink-0 self-center" />
+    </template>
+
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+
+    <template v-if="$slots.right" #right>
+      <slot name="right" />
+    </template>
+
+    <template v-if="$slots.trailing" #trailing>
+      <slot name="trailing" />
+    </template>
+  </UDashboardNavbar>
+</template>

package/app/composables/pluto-admin-theme.ts

@@ -0,0 +1,14 @@
+/**
+ * Puts `data-pluto-admin` on <html> while the calling component is mounted.
+ * `app/assets/css/admin-theme.css` keys the admin's own palette, chart
+ * colors, surfaces, and font on that attribute, so the consumer app's
+ * public-site theme (its app.config colors and @theme) does not reach the
+ * admin. The attribute sits on <html>, not on a layout wrapper, so it also
+ * covers overlays that render at the end of <body>.
+ *
+ * Call it from every admin layout. `useHead` removes the attribute when the
+ * layout unmounts, so the public site never gets it.
+ */
+export function usePlutoAdminTheme() {
+  useHead({ htmlAttrs: { 'data-pluto-admin': '' } })
+}

package/app/composables/pluto-command-palette.ts

@@ -0,0 +1,59 @@
+import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+
+/**
+ * Builds the admin command palette groups (`UDashboardSearch` in the
+ * admin layout, opened with Cmd/Ctrl+K):
+ *
+ * - "Create": one "New <label>" command for each content type the user
+ *   can write.
+ * - "Go to": every admin nav item and nav child, from `usePlutoAdminNav`.
+ *
+ * Each destination shows once. A nav link to a create path (for example
+ * "Create new post") is dropped, because the "Create" group has it.
+ *
+ * Commands navigate with `navigateTo` in `onSelect`, not with `to`. `to`
+ * is typed per app through typed pages, so it differs in every app that
+ * extends this layer. The admin layout's sidebar uses the same approach.
+ */
+export function usePlutoCommandPalette() {
+  const { items: navItems } = usePlutoAdminNav()
+  const { items: contentTypes } = usePlutoContentTypes()
+  const { can } = usePlutoPermissions()
+
+  return computed<CommandPaletteGroup<CommandPaletteItem>[]>(() => {
+    const seen = new Set<string>()
+
+    function command(label: string, path: string, extra: Partial<CommandPaletteItem> = {}): CommandPaletteItem[] {
+      if (seen.has(path)) {
+        return []
+      }
+      seen.add(path)
+      return [{ label, ...extra, onSelect: () => navigateTo(path) }]
+    }
+
+    const create = contentTypes.value.flatMap(({ type }) => {
+      // "No capability declared" means the operation is open to anyone who
+      // can reach the admin, the same rule as PlutoContentForm.
+      if (type.capabilities?.write && !can(type.capabilities.write)) {
+        return []
+      }
+      const basePath = type.basePath ?? `/admin/content/${type.name}`
+      return command(`New ${type.label}`, type.newPath ?? `${basePath}/new`, {
+        icon: 'lucide:plus',
+        suffix: type.labelPlural,
+      })
+    })
+
+    const goTo = navItems.value.flatMap((item) => [
+      ...(item.to ? command(item.label, item.to, { icon: item.icon }) : []),
+      ...(item.children ?? []).flatMap((child) =>
+        child.to ? command(child.label, child.to, { icon: item.icon, suffix: item.label }) : []
+      ),
+    ])
+
+    return [
+      { id: 'pluto-create', label: 'Create', items: create },
+      { id: 'pluto-go-to', label: 'Go to', items: goTo },
+    ].filter((group) => group.items.length > 0)
+  })
+}

package/app/composables/pluto-content-actions.ts

@@ -0,0 +1,17 @@
+/**
+ * The `PlutoContentAction` entries that apply to one content type, at one
+ * placement. Matches an entry whose `contentType` is `typeName` or `'*'`,
+ * the same matching rule `usePlutoContentFieldWidget` uses for field type.
+ * `placement` defaults to 'toolbar', matching `PlutoContentAction.placement`.
+ */
+export function usePlutoContentActions(typeName: string, placement: 'toolbar' | 'aside' = 'toolbar') {
+  const registry = usePlutoRegistry()
+
+  return computed(() =>
+    registry.contentActions.list.value.filter(
+      (action) =>
+        (action.contentType === typeName || action.contentType === '*') &&
+        (action.placement ?? 'toolbar') === placement
+    )
+  )
+}

package/app/composables/pluto-content-activity.ts

@@ -0,0 +1,37 @@
+export interface PlutoContentActivitySeries {
+  name: string
+  label: string
+  labelPlural: string
+  icon?: string
+  points: PlutoContentActivityPoint[]
+}
+
+/**
+ * Weekly creation counts for every registered content type, from
+ * `GET /api/_pluto/content-activity/<type>`. Types whose adapter cannot count
+ * by creation date are left out.
+ *
+ * The fixed `useAsyncData` key shares one fetch between every caller, so the
+ * dashboard tiles ("+N this week") and the activity chart do not fetch twice.
+ */
+export function usePlutoContentActivity(weeks = 12) {
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  return useAsyncData(
+    `pluto-content-activity-${weeks}`,
+    async () => {
+      const series = await Promise.all(
+        contentTypes.value.map(async ({ type }): Promise<PlutoContentActivitySeries | null> => {
+          const activity = await $fetch<PlutoContentActivity>(`/api/_pluto/content-activity/${type.name}`, {
+            query: { weeks },
+          })
+          return activity.supported
+            ? { name: type.name, label: type.label, labelPlural: type.labelPlural, icon: type.icon, points: activity.points }
+            : null
+        })
+      )
+      return series.filter((entry): entry is PlutoContentActivitySeries => entry !== null)
+    },
+    { default: () => [] as PlutoContentActivitySeries[], server: false }
+  )
+}

package/app/composables/pluto-content-stats.ts

@@ -0,0 +1,78 @@
+export interface PlutoContentStat {
+  name: string
+  label: string
+  labelPlural: string
+  icon?: string
+  /** Admin list path for the content type. */
+  path: string
+  total: number
+  /** Present only for a content type with a status workflow. */
+  published?: number
+  /** Present only for a content type with a status workflow. */
+  drafts?: number
+}
+
+/**
+ * Counts the items of every registered content type, for the dashboard.
+ *
+ * Each count is a list request with `limit=1`, so the adapter returns the
+ * count without the rows. A type with a status workflow gets a second
+ * request with `published=1`. Drafts are the total minus the published
+ * count. An adapter that does not return `total` gets one request without
+ * a limit, and the count is the number of rows.
+ */
+export function usePlutoContentStats() {
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  const stats = ref<PlutoContentStat[]>([])
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function count(typeName: string, published: boolean): Promise<number> {
+    const url = `/api/_pluto/content/${typeName}`
+    const query = published ? { limit: 1, published: 1 } : { limit: 1 }
+    const result = await $fetch<PlutoContentListResult>(url, { query })
+    if (result.total !== undefined) {
+      return result.total
+    }
+    const all = await $fetch<PlutoContentListResult>(url, { query: published ? { published: 1 } : {} })
+    return all.data.length
+  }
+
+  async function refresh(): Promise<void> {
+    pending.value = true
+    error.value = null
+
+    try {
+      stats.value = await Promise.all(
+        contentTypes.value.map(async ({ type }) => {
+          const [total, published] = await Promise.all([
+            count(type.name, false),
+            type.status ? count(type.name, true) : Promise.resolve(undefined),
+          ])
+
+          return {
+            name: type.name,
+            label: type.label,
+            labelPlural: type.labelPlural,
+            icon: type.icon,
+            path: type.basePath ?? `/admin/content/${type.name}`,
+            total,
+            ...(published === undefined ? {} : { published, drafts: Math.max(0, total - published) }),
+          }
+        })
+      )
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Same pattern as usePlutoContentList: fetch right away, and keep a
+  // failure in `error` instead of an unhandled rejection.
+  refresh().catch(() => {})
+
+  return { stats, pending, error, refresh }
+}

package/app/composables/pluto-extension.ts

@@ -28,5 +28,6 @@ export function definePlutoExtension(definition: PlutoExtension): void {
   )
   registry.contentTypes.set(definition.id, definition.contentTypes ?? [])
   registry.contentFieldWidgets.set(definition.id, definition.contentFieldWidgets ?? [])
+  registry.contentActions.set(definition.id, definition.contentActions ?? [])
   registry.mediaAdapters.set(definition.id, definition.mediaAdapters ?? [])
 }

package/app/composables/pluto-registry.ts

@@ -25,6 +25,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       permissionsDrivers: createOwnedRegistry<PlutoPermissionsDriver>(),
       contentTypes: createOwnedRegistry<PlutoContentTypeEntry>(),
       contentFieldWidgets: createOwnedRegistry<PlutoContentFieldWidget>(),
+      contentActions: createOwnedRegistry<PlutoContentAction>(),
       mediaAdapters: createOwnedRegistry<PlutoMediaAdapterEntry>(),
     }
   }

package/app/composables/pluto-view.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * `PlutoViewAdminPanel` provides this key. It is `true` while the panel
+ * holds its aside in a resizable splitter panel (desktop, aside open).
+ * `PlutoViewAside` then fills that panel instead of using its own fixed
+ * `width`.
+ */
+export const plutoViewAsideResizableKey: InjectionKey<Ref<boolean>> = Symbol('plutoViewAsideResizable')

package/app/layouts/admin.vue

@@ -28,76 +28,73 @@ function toMenuItem(item: PlutoNavItem): SidebarMenuItem {
 const { items: navItems } = usePlutoAdminNav()
 const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 
-const route = useRoute()
+// This key is a cross-repo contract: `supabase`'s own mobile navbar
+// (`app/components/navbar/NavbarAdmin.vue`) writes to this exact state key
+// to open the sidebar from its own hamburger button. Keep the name as-is.
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
 
-function closeSidebar() {
-  isSidebarOpen.value = false
-}
+const commandGroups = usePlutoCommandPalette()
+
+// Keep the consumer app's public-site theme out of the admin.
+usePlutoAdminTheme()
 
-watch(
-  () => route.fullPath,
-  closeSidebar
-)
+// Start the dashboard group below the fixed admin navbar. An inline `top`
+// overrides the `top: 0` from the group's `inset-0` base class, whatever
+// order the classes merge in. Do not use a class replacer function here:
+// in @nuxt/ui 4.12 a replacer only runs for themes with slots, and the
+// group theme has only `base`, so the replacer was silently ignored.
+const groupStyle = { top: 'var(--ui-header-height)' }
 </script>
 
 <template>
-  <div
-    class="dark:bg-admin-content light:bg-white font-outfit flex h-full min-h-0 grow flex-col overflow-hidden"
+  <UDashboardGroup
+    :style="groupStyle"
+    storage="cookie"
+    storage-key="pluto-admin"
+    unit="rem"
   >
-    <div class="relative flex min-h-0 flex-1 items-stretch">
-      <Transition name="sidebar-fade">
-        <button
-          v-if="isSidebarOpen"
-          type="button"
-          aria-label="Close navigation"
-          class="fixed inset-x-0 top-14 bottom-0 z-40 bg-black/50 backdrop-blur-xs lg:hidden"
-          @click="closeSidebar"
-        />
-      </Transition>
+    <UDashboardSidebar
+      id="admin"
+      v-model:open="isSidebarOpen"
+      :default-size="16"
+      :min-size="12"
+      :max-size="24"
+      :ui="{
+        root: 'min-h-0 bg-(--pluto-admin-sidebar)',
+        content: 'lg:hidden w-[min(18rem,85vw)] bg-(--pluto-admin-sidebar)',
+        header: 'h-auto py-3',
+      }"
+      resizable
+    >
+      <!--
+        The search button must sit inside UDashboardGroup. Outside it, the
+        button has no dashboard context and its click does nothing.
+      -->
+      <template #header>
+        <UDashboardSearchButton class="w-full" />
+      </template>
 
-      <aside
-        :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-        class="dark:bg-admin-sidebar light:bg-zinc-100 border-default fixed inset-y-14 left-0 z-50 flex w-[min(18rem,85vw)] shrink-0 flex-col border-r px-3 py-4 shadow-2xl transition-transform duration-200 lg:static lg:inset-auto lg:z-auto lg:w-64 lg:translate-x-0 lg:shadow-none"
-      >
-        <div class="mb-3 flex items-center justify-between px-2 lg:hidden">
-          <span class="text-muted text-sm font-semibold">Navigation</span>
-          <UButton
-            icon="lucide:x"
-            color="neutral"
-            variant="ghost"
-            aria-label="Close navigation"
-            square
-            @click="closeSidebar"
-          />
-        </div>
+      <UNavigationMenu
+        :items="menu"
+        :ui="{ link: 'gap-x-2.5 py-2', linkLeadingIcon: 'size-[18px]' }"
+        orientation="vertical"
+        variant="pill"
+        class="data-[orientation=vertical]:w-full"
+      />
+    </UDashboardSidebar>
 
-        <UNavigationMenu
-          :items="menu"
-          :ui="{
-            link: 'text-base gap-x-3 font-normal',
-          }"
-          orientation="vertical"
-          class="data-[orientation=vertical]:w-full"
-          highlight
-        />
-      </aside>
-
-      <div class="min-w-0 grow overflow-x-hidden overflow-y-auto">
+    <UDashboardPanel
+      :ui="{
+        root: 'min-h-0 bg-(--pluto-admin-canvas)',
+        body: 'p-0 gap-0 overflow-x-hidden',
+      }"
+    >
+      <template #body>
         <slot />
-      </div>
-    </div>
-  </div>
-</template>
+      </template>
+    </UDashboardPanel>
 
-<style scoped>
-.sidebar-fade-enter-active,
-.sidebar-fade-leave-active {
-  transition: opacity 200ms ease;
-}
-
-.sidebar-fade-enter-from,
-.sidebar-fade-leave-to {
-  opacity: 0;
-}
-</style>
+    <!-- Cmd/Ctrl+K. See usePlutoCommandPalette for the commands. -->
+    <UDashboardSearch :groups="commandGroups" placeholder="Search pages and actions…" />
+  </UDashboardGroup>
+</template>

package/app/layouts/auth.vue

@@ -1,7 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+usePlutoAdminTheme()
+</script>
 
 <template>
-  <div class="bg-admin-content font-outfit flex min-h-dvh grow flex-col">
+  <div class="flex min-h-dvh grow flex-col bg-(--pluto-admin-canvas)">
     <slot />
   </div>
 </template>