@plutocms/pluto 0.10.0 → 0.12.0

package/app/components/Pluto/Content/PlutoContentList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
+import type { ButtonProps, TableColumn } from '@nuxt/ui'
 
 const props = defineProps<{
   /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
@@ -13,7 +13,9 @@ if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/index.vue`) already
   // resolves the type and 404s before this component ever mounts, so this
   // should not normally happen.
-  console.error(`PlutoContentList: content type "${props.type}" was not found in the registry.`)
+  console.error(
+    `PlutoContentList: content type "${props.type}" was not found in the registry.`
+  )
 }
 
 const { can } = usePlutoPermissions()
@@ -21,24 +23,63 @@ const { can } = usePlutoPermissions()
 // "No capability declared" means the operation is open to anyone who can
 // reach this page — never call can('') as a stand-in for that.
 const canWrite = computed(
-  () => !contentType.value?.capabilities?.write || can(contentType.value.capabilities.write)
+  () =>
+    !contentType.value?.capabilities?.write ||
+    can(contentType.value.capabilities.write)
 )
 const canDelete = computed(
-  () => !contentType.value?.capabilities?.delete || can(contentType.value.capabilities.delete)
+  () =>
+    !contentType.value?.capabilities?.delete ||
+    can(contentType.value.capabilities.delete)
 )
 
-const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+const basePath = computed(
+  () => contentType.value?.basePath ?? `/admin/content/${props.type}`
+)
 
 // newPath/editPath exist so an already-deployed layer's URLs never have
 // to change to adopt this component — see the doc comments on
 // PlutoContentType.newPath/editPath for why a single basePath cannot
 // always express both.
-const newPath = computed(() => contentType.value?.newPath ?? `${basePath.value}/new`)
+const newPath = computed(
+  () => contentType.value?.newPath ?? `${basePath.value}/new`
+)
 function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
 
-const { items, pending, refresh, remove } = usePlutoContentList(props.type)
+const { items, pending, error, refresh, remove } = usePlutoContentList(props.type)
+
+// What to show while the list has no rows. With rows, the list shows
+// them, and a failed refresh shows an alert above them instead.
+const emptyState = computed<'loading' | 'error' | 'empty' | null>(() => {
+  if (items.value.length > 0) {
+    return null
+  }
+  if (pending.value) {
+    return 'loading'
+  }
+  return error.value ? 'error' : 'empty'
+})
+
+function retry() {
+  refresh().catch(() => {})
+}
+
+// Buttons navigate with `navigateTo`, not `to`: `to` is typed per app
+// through typed pages, so a computed button list cannot type it here.
+const emptyActions = computed<ButtonProps[]>(() => {
+  const type = contentType.value
+  if (!type) {
+    return []
+  }
+  if (emptyState.value === 'error') {
+    return [{ label: 'Try again', icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
+  }
+  return canWrite.value
+    ? [{ label: `New ${type.label}`, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
+    : []
+})
 
 const listFields = computed(() =>
   (contentType.value?.fields ?? [])
@@ -47,7 +88,10 @@ const listFields = computed(() =>
 )
 
 const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
-  ...listFields.value.map((field) => ({ accessorKey: field.name, header: field.label })),
+  ...listFields.value.map((field) => ({
+    accessorKey: field.name,
+    header: field.label,
+  })),
   { id: 'actions', header: '' },
 ])
 
@@ -75,132 +119,172 @@ async function confirmDelete() {
 </script>
 
 <template>
-  <div v-if="contentType">
-    <Modal v-model="isDeleteModalOpen" :custom-size="480">
-      <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
-
-      <ModalContent>
-        <p>Do you really want to remove this item?</p>
-      </ModalContent>
-
-      <ModalFooter>
-        <div class="flex items-center gap-4">
-          <UButton icon="lucide:x" variant="ghost" color="neutral" @click="closeDeleteModal">
-            Cancel
-          </UButton>
-
-          <UButton icon="lucide:trash" color="error" @click="confirmDelete">Remove</UButton>
-        </div>
-      </ModalFooter>
-    </Modal>
-
-    <AdminView>
-      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <hgroup class="flex items-center justify-between gap-x-3 lg:justify-start">
-          <h1 class="text-3xl font-bold lg:text-4xl">{{ contentType.labelPlural }}</h1>
-
+  <PlutoViewAdminPanel v-if="contentType">
+    <template #toolbar>
+      <PlutoViewToolbar :title="contentType.labelPlural">
+        <template #trailing>
           <UButton
             :loading="pending"
             icon="lucide:refresh-ccw"
             variant="ghost"
             title="Refresh"
             square
-            @click="refresh()"
+            @click="retry"
           />
-        </hgroup>
+        </template>
 
-        <div v-if="canWrite" class="flex lg:shrink-0">
-          <UButton
-            :to="newPath"
-            icon="lucide:plus"
-            as="NuxtLink"
-            class="flex-1 justify-center lg:flex-none"
-          >
-            Add {{ contentType.labelPlural }}
+        <template v-if="canWrite" #right>
+          <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
+            New {{ contentType.label }}
           </UButton>
-        </div>
-      </div>
+        </template>
+      </PlutoViewToolbar>
+    </template>
 
-      <div class="grid gap-3 lg:hidden">
-        <UCard v-for="item in items" :key="item.id">
-          <div class="flex flex-col gap-4">
-            <div class="min-w-0">
-              <NuxtLink
-                :to="editPath(item.id)"
-                class="block truncate text-lg font-semibold hover:underline"
-              >
-                {{ item[contentType.titleField] }}
-              </NuxtLink>
+    <UEmpty
+      v-if="emptyState === 'loading'"
+      :title="`Loading ${contentType.labelPlural.toLowerCase()}…`"
+      variant="naked"
+      loading
+    />
+
+    <UEmpty
+      v-else-if="emptyState === 'error'"
+      :title="`Could not load ${contentType.labelPlural.toLowerCase()}`"
+      :actions="emptyActions"
+      description="Check your connection and try again."
+      icon="lucide:circle-alert"
+      variant="naked"
+    />
+
+    <UEmpty
+      v-else-if="emptyState === 'empty'"
+      :title="`No ${contentType.labelPlural.toLowerCase()} yet`"
+      :description="canWrite ? `Create the first ${contentType.label.toLowerCase()} to see it here.` : 'There is nothing here yet.'"
+      :icon="contentType.icon ?? 'lucide:inbox'"
+      :actions="emptyActions"
+      variant="naked"
+    />
+
+    <UAlert
+      v-if="!emptyState && error"
+      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      :title="`Could not refresh ${contentType.labelPlural.toLowerCase()}`"
+      description="The list below may be out of date."
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-alert"
+    />
+
+    <div v-if="!emptyState" class="grid gap-3 lg:hidden">
+      <UCard v-for="item in items" :key="item.id">
+        <div class="flex flex-col gap-4">
+          <div class="min-w-0">
+            <NuxtLink
+              :to="editPath(item.id)"
+              class="block truncate text-lg font-semibold hover:underline"
+            >
+              {{ item[contentType.titleField] }}
+            </NuxtLink>
+          </div>
+
+          <dl class="grid grid-cols-2 gap-3 text-sm">
+            <div v-for="field in listFields" :key="field.name">
+              <dt class="text-muted">{{ field.label }}</dt>
+              <dd class="font-medium">{{ item[field.name] }}</dd>
             </div>
+          </dl>
 
-            <dl class="grid grid-cols-2 gap-3 text-sm">
-              <div v-for="field in listFields" :key="field.name">
-                <dt class="text-muted">{{ field.label }}</dt>
-                <dd class="font-medium">{{ item[field.name] }}</dd>
-              </div>
-            </dl>
+          <div class="border-default flex gap-2 border-t pt-3">
+            <UButton
+              v-if="canWrite"
+              :to="editPath(item.id)"
+              icon="lucide:pen-line"
+              color="neutral"
+              variant="soft"
+              class="flex-1 justify-center"
+            >
+              Edit
+            </UButton>
+
+            <UButton
+              v-if="canDelete"
+              icon="lucide:trash"
+              color="error"
+              variant="soft"
+              class="flex-1 justify-center"
+              @click="openDeleteModal(item.id)"
+            >
+              Remove
+            </UButton>
+          </div>
+        </div>
+      </UCard>
+    </div>
 
-            <div class="flex gap-2 border-t border-default pt-3">
-              <UButton
+    <UCard v-if="!emptyState" :ui="{ body: 'sm:p-0 p-0' }" class="hidden lg:block">
+      <div class="overflow-x-auto">
+        <UTable
+          :data="items"
+          :columns="columns"
+          :loading="pending"
+          empty="No items yet."
+        >
+          <template #actions-cell="{ row }">
+            <div class="flex justify-end gap-3">
+              <NuxtLink
                 v-if="canWrite"
-                :to="editPath(item.id)"
-                icon="lucide:pen-line"
-                color="neutral"
-                variant="soft"
-                class="flex-1 justify-center"
+                :to="editPath(row.original.id)"
+                class="text-info px-0 py-0.5 hover:underline"
               >
                 Edit
-              </UButton>
+              </NuxtLink>
 
-              <UButton
+              <button
                 v-if="canDelete"
-                icon="lucide:trash"
-                color="error"
-                variant="soft"
-                class="flex-1 justify-center"
-                @click="openDeleteModal(item.id)"
+                type="button"
+                class="text-error cursor-pointer px-0 py-0.5 hover:underline"
+                @click="openDeleteModal(row.original.id)"
               >
                 Remove
-              </UButton>
+              </button>
             </div>
-          </div>
-        </UCard>
+          </template>
+        </UTable>
       </div>
+    </UCard>
+  </PlutoViewAdminPanel>
 
-      <UCard :ui="{ body: 'sm:p-0 p-0' }" class="hidden lg:block">
-        <div class="overflow-x-auto">
-          <UTable :data="items" :columns="columns" :loading="pending" empty="No items yet.">
-            <template #actions-cell="{ row }">
-              <div class="flex justify-end gap-3">
-                <NuxtLink
-                  v-if="canWrite"
-                  :to="editPath(row.original.id)"
-                  class="text-info px-0 py-0.5 hover:underline"
-                >
-                  Edit
-                </NuxtLink>
-
-                <button
-                  v-if="canDelete"
-                  type="button"
-                  class="text-error cursor-pointer px-0 py-0.5 hover:underline"
-                  @click="openDeleteModal(row.original.id)"
-                >
-                  Remove
-                </button>
-              </div>
-            </template>
-          </UTable>
-        </div>
-      </UCard>
-    </AdminView>
-  </div>
-
-  <AdminView v-else>
+  <PlutoViewAdminPanel v-else>
     <UAlert
       :description="`No content type named &quot;${type}&quot; is registered.`"
       color="error"
       title="Content type not found"
     />
-  </AdminView>
+  </PlutoViewAdminPanel>
+
+  <Modal v-model="isDeleteModalOpen" :custom-size="480">
+    <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
+
+    <ModalContent>
+      <p>Do you really want to remove this item?</p>
+    </ModalContent>
+
+    <ModalFooter>
+      <div class="flex items-center gap-4">
+        <UButton
+          icon="lucide:x"
+          variant="ghost"
+          color="neutral"
+          @click="closeDeleteModal"
+        >
+          Cancel
+        </UButton>
+
+        <UButton icon="lucide:trash" color="error" @click="confirmDelete">
+          Remove
+        </UButton>
+      </div>
+    </ModalFooter>
+  </Modal>
 </template>

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,13 @@
 <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. See admin-theme.css.
+  -->
   <nav
-    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-14 shrink-0 border-b lg:h-10 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
   >
     <slot />
   </nav>