@plutocms/pluto 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
 
+## [0.13.0](https://github.com/plutocms/pluto/compare/v0.12.0...v0.13.0) (2026-10-18)
+
+
+### Features
+
+* **admin:** mount the aside once and keep it mounted on mobile ([#158](https://github.com/plutocms/pluto/issues/158)) ([dcca464](https://github.com/plutocms/pluto/commit/dcca464ead4ec5f46b2c26c0eea0f94260553ac9))
+* **content:** page and virtualize long content lists ([#154](https://github.com/plutocms/pluto/issues/154)) ([b8d35b0](https://github.com/plutocms/pluto/commit/b8d35b05230169713a3e7cacbdfd95f52c72936a))
+
+
+### Bug Fixes
+
+* **admin:** darken the navbar and sidebar in dark mode ([#159](https://github.com/plutocms/pluto/issues/159)) ([011fd2f](https://github.com/plutocms/pluto/commit/011fd2f616daf961486e99f69a0e8f0f0db5e51f))
+* **admin:** make the navbar near black in light mode too ([#160](https://github.com/plutocms/pluto/issues/160)) ([f39656a](https://github.com/plutocms/pluto/commit/f39656a5b52081c05e8128b4d0828970b96a14e5))
+* **admin:** use a dim dark gray instead of pitch black in dark mode ([#156](https://github.com/plutocms/pluto/issues/156)) ([500c900](https://github.com/plutocms/pluto/commit/500c900783980d760d6fade406dfc15334a61a4e))
+* **admin:** use the theme text color in the modal ([#157](https://github.com/plutocms/pluto/issues/157)) ([e73c613](https://github.com/plutocms/pluto/commit/e73c613eead017fabbae66ef6f6a7624ec5a5a04))
+
 ## [0.12.0](https://github.com/plutocms/pluto/compare/v0.11.0...v0.12.0) (2026-10-17)
 
 

package/app/assets/css/admin-theme.css

@@ -9,6 +9,10 @@
  * - `[data-pluto-admin-scope]`: for admin chrome that also shows on the
  *   public site, such as the admin navbar for a logged-in admin.
  *
+ * `[data-pluto-admin-dark]` takes the dark tokens in both color modes. The
+ * admin navbar is near black in light mode too, so its text and buttons need
+ * the dark values.
+ *
  * Every value is a literal. The consumer app styles its public site through
  * its own app.config colors and @theme. Both reach the admin unless the admin
  * pins its own values: app.config colors set Nuxt UI's --ui-color-* scales on
@@ -149,17 +153,18 @@
   --ui-chart-5: oklch(58.8% 0.158 241.966); /* sky-600 */
   --ui-chart-6: oklch(53.2% 0.157 131.589); /* lime-700 */
 
-  /* Surfaces */
+  /* Surfaces. The navbar is near black in both modes. */
   --pluto-admin-canvas: #fff;
   --pluto-admin-sidebar: oklch(98.5% 0 none);
-  --pluto-admin-navbar: #fff;
+  --pluto-admin-navbar: oklch(14.1% 0.005 285.823);
 
   --ui-radius: 0.375rem;
   --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
 }
 
 :root[data-pluto-admin].dark,
-.dark [data-pluto-admin-scope] {
+.dark [data-pluto-admin-scope],
+[data-pluto-admin-dark] {
   --ui-primary: var(--ui-color-primary-400);
   --ui-secondary: var(--ui-color-secondary-400);
   --ui-success: var(--ui-color-success-400);
@@ -173,7 +178,7 @@
   --ui-text: var(--ui-color-neutral-200);
   --ui-text-highlighted: #fff;
   --ui-text-inverted: var(--ui-color-neutral-900);
-  --ui-bg: var(--ui-color-neutral-900);
+  --ui-bg: oklch(24% 0.006 286);
   --ui-bg-muted: var(--ui-color-neutral-800);
   --ui-bg-elevated: var(--ui-color-neutral-800);
   --ui-bg-accented: var(--ui-color-neutral-700);
@@ -190,10 +195,14 @@
   --ui-chart-5: oklch(58.8% 0.158 241.966); /* sky-600 */
   --ui-chart-6: oklch(64.8% 0.2 131.684); /* lime-600 */
 
-  /* Cards (--ui-bg, zinc-900) sit one step above the canvas (zinc-950). */
-  --pluto-admin-canvas: oklch(14.1% 0.005 285.823);
-  --pluto-admin-sidebar: oklch(14.1% 0.005 285.823);
+  /*
+   * Four steps, darkest at the top: a near-black navbar, a darker sidebar,
+   * a dim dark gray canvas (not pitch black), and cards (--ui-bg) one step
+   * above the canvas.
+   */
   --pluto-admin-navbar: oklch(14.1% 0.005 285.823);
+  --pluto-admin-sidebar: oklch(17.5% 0.0055 286);
+  --pluto-admin-canvas: oklch(21% 0.006 285.885);
 }
 
 :root[data-pluto-admin] body {

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

@@ -48,7 +48,31 @@ function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
 
-const { items, pending, error, refresh, remove } = usePlutoContentList(props.type)
+// Load the list 50 rows at a time. The table is virtualized, so only the
+// visible rows render, and the next page loads when the user scrolls near
+// the end of the table (or of the card list, on mobile).
+const PAGE_SIZE = 50
+const { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove } = usePlutoContentList(
+  props.type,
+  { pageSize: PAGE_SIZE }
+)
+
+const tableRef = useTemplateRef<{
+ $el: HTMLElement
+}>('table')
+const mobileListRef = useTemplateRef<HTMLElement>('mobileList')
+
+function loadMoreSafely() {
+  // A failure lands in `error`, and the alert offers "Try again".
+  loadMore().catch(() => {})
+}
+
+// Stop while an error shows, so a failing page does not load in a loop.
+const canLoadMore = () => hasMore.value && !error.value
+useInfiniteScroll(() => tableRef.value?.$el, loadMoreSafely, { distance: 240, canLoadMore })
+useInfiniteScroll(mobileListRef, loadMoreSafely, { distance: 240, canLoadMore })
+
+const number = new Intl.NumberFormat()
 
 // 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.
@@ -119,7 +143,7 @@ async function confirmDelete() {
 </script>
 
 <template>
-  <PlutoViewAdminPanel v-if="contentType">
+  <PlutoViewAdminPanel v-if="contentType" fill>
     <template #toolbar>
       <PlutoViewToolbar :title="contentType.labelPlural">
         <template #trailing>
@@ -176,8 +200,12 @@ async function confirmDelete() {
       icon="lucide:circle-alert"
     />
 
-    <div v-if="!emptyState" class="grid gap-3 lg:hidden">
-      <UCard v-for="item in items" :key="item.id">
+    <div
+      v-if="!emptyState"
+      ref="mobileList"
+      class="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto lg:hidden"
+    >
+      <UCard v-for="item in items" :key="item.id" class="shrink-0">
         <div class="flex flex-col gap-4">
           <div class="min-w-0">
             <NuxtLink
@@ -222,15 +250,18 @@ async function confirmDelete() {
       </UCard>
     </div>
 
-    <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 }">
+    <UTable
+      v-if="!emptyState"
+      ref="table"
+      :data="items"
+      :columns="columns"
+      :loading="pending || loadingMore"
+      class="ring-default hidden min-h-0 flex-1 rounded-lg ring lg:block"
+      empty="No items yet."
+      sticky
+      virtualize
+    >
+      <template #actions-cell="{ row }">
             <div class="flex justify-end gap-3">
               <NuxtLink
                 v-if="canWrite"
@@ -249,10 +280,15 @@ async function confirmDelete() {
                 Remove
               </button>
             </div>
-          </template>
-        </UTable>
-      </div>
-    </UCard>
+      </template>
+    </UTable>
+
+    <p v-if="!emptyState" class="text-muted shrink-0 text-xs tabular-nums" aria-live="polite">
+      Showing {{ number.format(items.length) }}
+      <template v-if="total !== undefined">of {{ number.format(total) }}</template>
+      {{ contentType.labelPlural.toLowerCase() }}
+      <template v-if="loadingMore">· Loading more…</template>
+    </p>
   </PlutoViewAdminPanel>
 
   <PlutoViewAdminPanel v-else>

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

@@ -3,11 +3,14 @@
 <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.
+    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="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

@@ -11,10 +11,17 @@ const props = withDefaults(
      * 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,
   }
 )
 
@@ -86,7 +93,7 @@ const items = computed<SplitterItem[]>(() => [
         @dragging="onDragging"
       >
         <template #main>
-          <main class="min-h-0 w-full overflow-y-auto">
+          <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
@@ -95,6 +102,7 @@ const items = computed<SplitterItem[]>(() => [
             -->
             <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 />

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

@@ -26,11 +26,11 @@ 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({
@@ -47,10 +47,10 @@ const slideoverOpen = computed({
     width and its handle draws the border. Elsewhere, keep the fixed width.
   -->
   <aside
-    v-if="open"
+    v-if="open && isDesktop"
     :style="resizable ? undefined : { width: `${width}px` }"
     :class="resizable ? 'w-full' : 'border-default shrink-0 border-s'"
-    class="hidden h-full flex-col lg:flex"
+    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>
@@ -67,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-content-list.ts

@@ -1,3 +1,13 @@
+export interface PlutoContentListOptions {
+  /**
+   * Rows per request. Set it to load the list page by page: the first page
+   * on creation, the next pages through `loadMore()`. Leave it unset for one
+   * request that returns every row (an adapter can cap that request; the
+   * Supabase adapter returns at most 1000 rows).
+   */
+  pageSize?: number
+}
+
 /**
  * Fetches one content type's list of items, for the generic list page
  * (`PlutoContentList`).
@@ -15,25 +25,86 @@
  * of `await`ing the composable's own return value through a hand-rolled
  * `.then()`.
  */
-export function usePlutoContentList(typeName: string) {
+export function usePlutoContentList(typeName: string, options: PlutoContentListOptions = {}) {
+  const { pageSize } = options
+  const url = `/api/_pluto/content/${typeName}`
+
   const items = ref<PlutoContentItem[]>([])
   const total = ref<number | undefined>(undefined)
   const pending = ref(false)
+  const loadingMore = ref(false)
+  /** `true` while more pages exist. Always `false` without `pageSize`. */
+  const hasMore = ref(false)
   const error = ref<unknown>(null)
 
+  // A refresh() while a page is in flight makes that page stale. Each fetch
+  // remembers the generation it started in, and drops its result when a
+  // newer refresh() has started since.
+  let generation = 0
+
+  function fetchPage(offset: number): Promise<PlutoContentListResult> {
+    return pageSize === undefined
+      ? $fetch<PlutoContentListResult>(url)
+      : $fetch<PlutoContentListResult>(url, { query: { limit: pageSize, offset } })
+  }
+
+  function updateHasMore(lastPageLength: number) {
+    if (pageSize === undefined) {
+      hasMore.value = false
+      return
+    }
+    // Without a total, a full page means there may be another one.
+    hasMore.value = total.value === undefined ? lastPageLength === pageSize : items.value.length < total.value
+  }
+
   async function refresh(): Promise<void> {
+    const current = ++generation
     pending.value = true
     error.value = null
 
     try {
-      const result = await $fetch<PlutoContentListResult>(`/api/_pluto/content/${typeName}`)
+      const result = await fetchPage(0)
+      if (current !== generation) {
+        return
+      }
       items.value = result.data
       total.value = result.total
+      updateHasMore(result.data.length)
     } catch (caught) {
-      error.value = caught
+      if (current === generation) {
+        error.value = caught
+      }
+      throw caught
+    } finally {
+      if (current === generation) {
+        pending.value = false
+      }
+    }
+  }
+
+  /** Appends the next page. Does nothing without `pageSize`, without more pages, or while a fetch runs. */
+  async function loadMore(): Promise<void> {
+    if (!hasMore.value || pending.value || loadingMore.value) {
+      return
+    }
+    const current = generation
+    loadingMore.value = true
+
+    try {
+      const result = await fetchPage(items.value.length)
+      if (current !== generation) {
+        return
+      }
+      items.value = [...items.value, ...result.data]
+      total.value = result.total ?? total.value
+      updateHasMore(result.data.length)
+    } catch (caught) {
+      if (current === generation) {
+        error.value = caught
+      }
       throw caught
     } finally {
-      pending.value = false
+      loadingMore.value = false
     }
   }
 
@@ -47,14 +118,24 @@ export function usePlutoContentList(typeName: string) {
 
   async function remove(id: string | number): Promise<void> {
     try {
-      await $fetch(`/api/_pluto/content/${typeName}/${id}`, { method: 'DELETE' })
+      await $fetch(`${url}/${id}`, { method: 'DELETE' })
     } catch (caught) {
       error.value = caught
       throw caught
     }
 
-    await refresh()
+    if (pageSize === undefined) {
+      await refresh()
+      return
+    }
+
+    // Paged: drop the row in place, so the user keeps the pages already
+    // loaded and the scroll position.
+    items.value = items.value.filter((item) => item.id !== id)
+    if (total.value !== undefined) {
+      total.value = Math.max(0, total.value - 1)
+    }
   }
 
-  return { items, total, pending, error, refresh, remove }
+  return { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",

package/scripts/generate-admin-theme.cjs

@@ -13,7 +13,12 @@ const scales = Object.entries(roles).map(([role, hue]) => `  /* ${role}: ${hue}
 const semantic = (shade) => Object.keys(roles).filter((r) => r !== 'neutral').map((r) => `  --ui-${r}: var(--ui-color-${r}-${shade});`).join('\n')
 const n = (s) => `var(--ui-color-neutral-${s})`
 const neutralLight = { 'text-dimmed': n(400), 'text-muted': n(500), 'text-toned': n(600), 'text': n(700), 'text-highlighted': n(900), 'text-inverted': '#fff', 'bg': '#fff', 'bg-muted': n(50), 'bg-elevated': n(100), 'bg-accented': n(200), 'bg-inverted': n(900), 'border': n(200), 'border-muted': n(200), 'border-accented': n(300), 'border-inverted': n(900) }
-const neutralDark = { 'text-dimmed': n(500), 'text-muted': n(400), 'text-toned': n(300), 'text': n(200), 'text-highlighted': '#fff', 'text-inverted': n(900), 'bg': n(900), 'bg-muted': n(800), 'bg-elevated': n(800), 'bg-accented': n(700), 'bg-inverted': '#fff', 'border': n(800), 'border-muted': n(700), 'border-accented': n(700), 'border-inverted': '#fff' }
+// Dark cards sit one step above the zinc-900 canvas: between zinc-900 and
+// zinc-800. The chart palette passes the dataviz checks on this surface.
+const CARD_DARK = 'oklch(24% 0.006 286)'
+// The dark sidebar sits between the zinc-950 navbar and the zinc-900 canvas.
+const SIDEBAR_DARK = 'oklch(17.5% 0.0055 286)'
+const neutralDark = { 'text-dimmed': n(500), 'text-muted': n(400), 'text-toned': n(300), 'text': n(200), 'text-highlighted': '#fff', 'text-inverted': n(900), 'bg': CARD_DARK, 'bg-muted': n(800), 'bg-elevated': n(800), 'bg-accented': n(700), 'bg-inverted': '#fff', 'border': n(800), 'border-muted': n(700), 'border-accented': n(700), 'border-inverted': '#fff' }
 const tokens = (o) => Object.entries(o).map(([k, val]) => `  --ui-${k}: ${val};`).join('\n')
 // Validated with the dataviz palette checks on white (light) and zinc-900
 // (dark). Re-run the checks before you change a slot.
@@ -32,6 +37,10 @@ const css = `/*
  * - \`[data-pluto-admin-scope]\`: for admin chrome that also shows on the
  *   public site, such as the admin navbar for a logged-in admin.
  *
+ * \`[data-pluto-admin-dark]\` takes the dark tokens in both color modes. The
+ * admin navbar is near black in light mode too, so its text and buttons need
+ * the dark values.
+ *
  * Every value is a literal. The consumer app styles its public site through
  * its own app.config colors and @theme. Both reach the admin unless the admin
  * pins its own values: app.config colors set Nuxt UI's --ui-color-* scales on
@@ -59,27 +68,32 @@ ${tokens(neutralLight)}
 
 ${chart(chartLight)}
 
-  /* Surfaces */
+  /* Surfaces. The navbar is near black in both modes. */
   --pluto-admin-canvas: #fff;
   --pluto-admin-sidebar: ${v('zinc-50')};
-  --pluto-admin-navbar: #fff;
+  --pluto-admin-navbar: ${v('zinc-950')};
 
   --ui-radius: 0.375rem;
   --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
 }
 
 :root[data-pluto-admin].dark,
-.dark [data-pluto-admin-scope] {
+.dark [data-pluto-admin-scope],
+[data-pluto-admin-dark] {
 ${semantic(400)}
 
 ${tokens(neutralDark)}
 
 ${chart(chartDark)}
 
-  /* Cards (--ui-bg, zinc-900) sit one step above the canvas (zinc-950). */
-  --pluto-admin-canvas: ${v('zinc-950')};
-  --pluto-admin-sidebar: ${v('zinc-950')};
+  /*
+   * Four steps, darkest at the top: a near-black navbar, a darker sidebar,
+   * a dim dark gray canvas (not pitch black), and cards (--ui-bg) one step
+   * above the canvas.
+   */
   --pluto-admin-navbar: ${v('zinc-950')};
+  --pluto-admin-sidebar: ${SIDEBAR_DARK};
+  --pluto-admin-canvas: ${v('zinc-900')};
 }
 
 :root[data-pluto-admin] body {