@plutocms/pluto 0.11.0 → 0.13.0

package/app/components/Pluto/Dashboard/PlutoDashboardContentActivity.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+// Core's activity widget: items created per week, one series per content
+// type. A trend over time, so it is a chart: an area for one series, lines
+// for several (each with a legend entry). Series colors come from the admin
+// theme's validated chart palette (--ui-chart-*). A visually hidden table
+// carries the same numbers for assistive technology.
+const WEEKS = 12
+
+const { data: series, status, refresh } = usePlutoContentActivity(WEEKS)
+
+const number = new Intl.NumberFormat()
+// The week starts are UTC dates. Format them in UTC so a viewer west of
+// UTC does not see the previous day.
+const weekLabel = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+
+const rows = computed(() => {
+  const first = series.value[0]
+  if (!first) {
+    return []
+  }
+  return first.points.map((point, index) => {
+    const row: Record<string, string | number> = { week: weekLabel.format(new Date(`${point.start}T00:00:00Z`)) }
+    for (const entry of series.value) {
+      row[entry.name] = entry.points[index]?.count ?? 0
+    }
+    return row
+  })
+})
+
+const categories = computed(() => series.value.map((entry) => ({ key: entry.name, label: entry.labelPlural })))
+
+const total = computed(() =>
+  series.value.reduce((sum, entry) => sum + entry.points.reduce((acc, point) => acc + point.count, 0), 0)
+)
+
+const chartType = computed(() => (series.value.length > 1 ? 'line' : 'area'))
+
+function retry() {
+  refresh()
+}
+</script>
+
+<template>
+  <UCard :ui="{ body: 'sm:pt-2' }" class="h-full">
+    <template #header>
+      <div class="flex items-start justify-between gap-4">
+        <div>
+          <h3 class="text-highlighted font-semibold">Content activity</h3>
+          <p class="text-muted text-sm">Items created per week, last {{ WEEKS }} weeks</p>
+        </div>
+        <div v-if="status === 'success' && series.length" class="text-right">
+          <p class="text-highlighted text-2xl font-semibold tabular-nums">{{ number.format(total) }}</p>
+          <p class="text-muted text-xs">created</p>
+        </div>
+      </div>
+    </template>
+
+    <USkeleton v-if="status === 'pending' || status === 'idle'" class="h-64 w-full" />
+
+    <UAlert
+      v-else-if="status === 'error'"
+      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-alert"
+      title="Could not load the activity"
+    />
+
+    <UEmpty
+      v-else-if="!series.length"
+      icon="lucide:chart-line"
+      title="Activity is not available"
+      description="The content backend cannot count items by creation date yet."
+      variant="naked"
+    />
+
+    <UEmpty
+      v-else-if="total === 0"
+      :title="`Nothing created in the last ${WEEKS} weeks`"
+      icon="lucide:chart-line"
+      description="New items show up here week by week."
+      variant="naked"
+    />
+
+    <template v-else>
+      <UChart
+        :type="chartType"
+        :data="rows"
+        :categories="categories"
+        :height="256"
+        :format="(value: number) => number.format(value)"
+        :aria-label="`Items created per week, last ${WEEKS} weeks`"
+        index="week"
+        curve="monotone"
+      />
+
+      <table class="sr-only">
+        <caption>Items created per week, last {{ WEEKS }} weeks</caption>
+        <thead>
+          <tr>
+            <th scope="col">Week of</th>
+            <th v-for="entry in series" :key="entry.name" scope="col">{{ entry.labelPlural }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="String(row.week)">
+            <th scope="row">{{ row.week }}</th>
+            <td v-for="entry in series" :key="entry.name">{{ row[entry.name] }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </UCard>
+</template>

package/app/components/Pluto/Dashboard/PlutoDashboardContentOverview.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+// Core's own dashboard widget: one stat tile per content type. Counts are
+// a handful of headline numbers, so they show as tiles, not as a chart. A
+// type with a status workflow also shows a meter of its published share.
+// The meter has a text label next to it, so the share never depends on
+// color alone. "+N this week" comes from the shared activity data, so it
+// costs no extra request.
+const { items: contentTypes } = usePlutoContentTypes()
+const { stats, pending, error, refresh } = usePlutoContentStats()
+const { data: activity } = usePlutoContentActivity()
+
+const number = new Intl.NumberFormat()
+
+function retry() {
+  refresh().catch(() => {})
+}
+
+function publishedPercent(stat: PlutoContentStat): number {
+  return stat.total > 0 ? Math.round(((stat.published ?? 0) / stat.total) * 100) : 0
+}
+
+/** Items created this week, or `undefined` when activity is not available. */
+function thisWeek(stat: PlutoContentStat): number | undefined {
+  return activity.value.find((entry) => entry.name === stat.name)?.points.at(-1)?.count
+}
+</script>
+
+<template>
+  <section v-if="contentTypes.length" aria-label="Content overview">
+    <UAlert
+      v-if="error && !stats.length"
+      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-alert"
+      title="Could not load the content counts"
+    />
+
+    <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <template v-if="pending && !stats.length">
+        <UCard v-for="entry in contentTypes" :key="entry.id">
+          <div class="flex flex-col gap-3">
+            <USkeleton class="h-4 w-24" />
+            <USkeleton class="h-8 w-16" />
+            <USkeleton class="h-1.5 w-full" />
+          </div>
+        </UCard>
+      </template>
+
+      <NuxtLink
+        v-for="stat in stats"
+        v-else
+        :key="stat.name"
+        :to="stat.path"
+        class="group focus-visible:outline-primary rounded-lg focus-visible:outline-2"
+      >
+        <UCard class="group-hover:ring-accented h-full transition-shadow group-hover:shadow-sm">
+          <div class="flex flex-col gap-3">
+            <div class="flex items-start justify-between gap-3">
+              <p class="text-muted text-sm font-medium">{{ stat.labelPlural }}</p>
+              <span class="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md">
+                <UIcon :name="stat.icon ?? 'lucide:file'" class="size-4" />
+              </span>
+            </div>
+
+            <div class="flex items-baseline gap-2">
+              <p class="text-highlighted text-3xl font-semibold tracking-tight tabular-nums">
+                {{ number.format(stat.total) }}
+              </p>
+              <p v-if="thisWeek(stat) !== undefined" class="text-sm">
+                <template v-if="thisWeek(stat)">
+                  <span class="text-success font-medium tabular-nums">+{{ number.format(thisWeek(stat)!) }}</span>
+                  <span class="text-muted"> this week</span>
+                </template>
+                <span v-else class="text-dimmed">none new this week</span>
+              </p>
+            </div>
+
+            <template v-if="stat.published !== undefined">
+              <div
+                :aria-valuenow="stat.published"
+                :aria-valuemax="stat.total"
+                :aria-label="`${stat.published} of ${stat.total} ${stat.labelPlural.toLowerCase()} published`"
+                role="meter"
+                aria-valuemin="0"
+                class="bg-accented flex h-1.5 overflow-hidden rounded-full"
+              >
+                <div :style="{ width: `${publishedPercent(stat)}%` }" class="bg-primary rounded-full" />
+              </div>
+
+              <p class="text-muted text-sm">
+                <span class="text-highlighted font-medium tabular-nums">{{ number.format(stat.published) }}</span>
+                published ·
+                <span class="tabular-nums">{{ number.format(stat.drafts ?? 0) }}</span>
+                {{ stat.drafts === 1 ? 'draft' : 'drafts' }}
+              </p>
+            </template>
+          </div>
+        </UCard>
+      </NuxtLink>
+    </div>
+  </section>
+</template>

package/app/components/Pluto/Dashboard/PlutoDashboardQuickActions.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// Core's quick actions widget. It reuses the command palette's commands, so
+// the two never disagree: every "New <label>" command the user can run, and
+// a few admin destinations.
+const groups = usePlutoCommandPalette()
+
+const create = computed(() => groups.value.find((group) => group.id === 'pluto-create')?.items ?? [])
+
+const goTo = computed(() =>
+  (groups.value.find((group) => group.id === 'pluto-go-to')?.items ?? [])
+    // Home is the page this widget is on.
+    .filter((item) => item.label !== 'Home')
+    .slice(0, 4)
+)
+
+function run(item: {
+ onSelect?: (event: Event) => void
+}) {
+  item.onSelect?.(new Event('select'))
+}
+</script>
+
+<template>
+  <UCard class="h-full">
+    <template #header>
+      <h3 class="text-highlighted font-semibold">Quick actions</h3>
+      <p class="text-muted text-sm">
+        Press
+        <UKbd value="meta" size="sm" />
+        <UKbd value="k" size="sm" />
+        to search everything.
+      </p>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <div v-if="create.length" class="flex flex-col gap-2">
+        <UButton
+          v-for="item in create"
+          :key="item.label"
+          :label="item.label"
+          icon="lucide:plus"
+          color="neutral"
+          variant="soft"
+          size="md"
+          class="justify-start"
+          block
+          @click="run(item)"
+        />
+      </div>
+
+      <div v-if="goTo.length" class="flex flex-col gap-1">
+        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">Go to</p>
+        <UButton
+          v-for="item in goTo"
+          :key="item.label"
+          :label="item.label"
+          :icon="typeof item.icon === 'string' ? item.icon : 'lucide:arrow-right'"
+          :ui="{ trailingIcon: 'ms-auto text-dimmed' }"
+          trailing-icon="lucide:chevron-right"
+          color="neutral"
+          variant="ghost"
+          size="md"
+          class="justify-start"
+          block
+          @click="run(item)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts"></script>
 
 <template>
+  <!--
+    `data-pluto-admin-scope` keeps the admin theme on this bar when it shows
+    on the public site for a logged-in admin. The bar is near black in both
+    color modes, so `data-pluto-admin-dark` gives it the dark tokens.
+    See admin-theme.css.
+  -->
   <nav
-    class="light:bg-white light:border-black/10 font-outfit fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
+    class="text-default fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b border-default bg-(--pluto-admin-navbar)"
+    data-pluto-admin-scope
+    data-pluto-admin-dark
   >
     <slot />
   </nav>

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

@@ -1,13 +1,79 @@
 <script setup lang="ts">
-withDefaults(
+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
+    /**
+     * Fill the main region's height, and let the content scroll inside its
+     * own region, not the whole page. For a view with one long scrolling
+     * list, such as a virtualized table. Default false.
+     */
+    fill?: boolean
   }>(),
   {
     width: 'container',
+    asideOpen: false,
+    fill: 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>
@@ -16,24 +82,44 @@ withDefaults(
       <slot name="toolbar" />
     </div>
 
-    <div class="flex flex-1 min-h-0 overflow-hidden">
-      <main class="flex-1 min-h-0 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>
-
-      <div class="shrink-0">
+    <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="fill ? 'flex flex-col overflow-hidden' : 'overflow-y-auto'" class="min-h-0 w-full">
+            <!--
+              '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="{ 'h-full min-h-0': fill }"
+              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>

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

@@ -8,7 +8,11 @@
 withDefaults(
   defineProps<{
     title?: string
-    /** Desktop width, in px. Default 320. */
+    /**
+     * Desktop width, in px. Default 320. Ignored inside a
+     * PlutoViewAdminPanel that gets `aside-open`: its resizable panel sets
+     * the width.
+     */
     width?: number
   }>(),
   {
@@ -22,12 +26,13 @@ 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.
+// Render the plain aside on desktop only, and the slideover on mobile only,
+// so the slot mounts once. CSS classes (`hidden lg:flex`, `lg:hidden`) are
+// not enough: they hide a copy, but the copy stays mounted and fetches its
+// own data. An open slideover is also a modal dialog. It disables pointer
+// events on the rest of the page even while CSS hides it.
 const isDesktop = useMediaQuery('(min-width: 64rem)')
+const resizable = inject(plutoViewAsideResizableKey, ref(false))
 const slideoverOpen = computed({
   get: () => open.value && !isDesktop.value,
   set: (value: boolean) => {
@@ -37,10 +42,15 @@ const slideoverOpen = computed({
 </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="{ width: `${width}px` }"
-    class="border-default hidden h-full shrink-0 flex-col border-s lg:flex"
+    v-if="open && isDesktop"
+    :style="resizable ? undefined : { width: `${width}px` }"
+    :class="resizable ? 'w-full' : 'border-default shrink-0 border-s'"
+    class="flex h-full flex-col"
   >
     <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>
@@ -57,9 +67,16 @@ const slideoverOpen = computed({
     </div>
   </aside>
 
+  <!--
+    `unmount-on-hide="false"` keeps the slot mounted after the first open,
+    so a reopen keeps the widget state (an open picker, a typed search) and
+    does not fetch the field options again.
+  -->
   <USlideover
+    v-if="!isDesktop"
     v-model:open="slideoverOpen"
     :title="title"
+    :unmount-on-hide="false"
     side="right"
   >
     <template #body>

package/app/components/modal/Modal.vue

@@ -40,7 +40,7 @@ const resolvedClasses = computed(() => {
       my-2 mx-2 sm:my-4 sm:mx-4
       shadow-2xl
       bg-default
-      light:text-zinc-800 dark:text-white
+      text-default
     `
 
   return twMerge([

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-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 }
+  )
+}