@prenta/admin 1.17.17 → 1.17.18

package/src/views/CollectionList.tsx

@@ -14,6 +14,7 @@ import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
 import { useApiData } from '../lib/useApiData.js'
+import { useVirtualWindow, VirtualTablePadding } from '../components/virtual-window.js'
 import { editPathForDoc, newPathForCollection } from '../lib/collection-routes.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import { EntryDetailPane } from '../components/collections/EntryDetailPane.js'
@@ -254,6 +255,13 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     nextCursor?: string | null
   }>(endpoint)
   const docs = data?.docs ?? []
+  const listScrollRef = useRef<HTMLDivElement>(null)
+  const listWindow = useVirtualWindow({
+    count: docs.length,
+    scrollRef: listScrollRef,
+    estimateSize: 52,
+  })
+  const listColumns = 5 + facets.length
   const total = data?.total ?? 0
   const totalPages = Math.max(1, Math.ceil(total / LIST_PAGE_SIZE))
   const pageNumber = priorCursors.length + 1
@@ -543,6 +551,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         <SplitPaneLayout className="min-h-0">
           <SplitPaneList>
             <div
+              ref={listScrollRef}
               className="h-full min-h-0 overflow-auto rounded-lg border"
               style={{ borderColor: 'var(--prenta-border, #d1d5db)' }}
             >
@@ -590,7 +599,10 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                   </tr>
                 </thead>
                 <tbody>
-                  {docs.map((doc: any) => {
+                  <VirtualTablePadding height={listWindow.paddingTop} columns={listColumns} />
+                  {listWindow.rows.map((row) => {
+                    const doc = docs[row.index]
+                    if (!doc) return null
                     const isDetail = detailId === String(doc.id)
                     return (
                       <tr
@@ -669,6 +681,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                       </tr>
                     )
                   })}
+                  <VirtualTablePadding height={listWindow.paddingBottom} columns={listColumns} />
                 </tbody>
               </table>
             </div>

package/src/views/MediaBrowser.tsx

@@ -30,6 +30,7 @@ import { parseRouteQuery } from '../router/index.js'
 import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { useVirtualWindow, VirtualTablePadding } from '../components/virtual-window.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
 import { Button } from '../components/ui/Button.js'
 import { StatusBadge } from '../components/ui/StatusBadge.js'
@@ -113,6 +114,32 @@ export interface MediaBrowserProps {
   currentPath?: string
 }
 
+function gridColumnCount(width: number, panelOpen: boolean): number {
+  if (panelOpen) {
+    if (width >= 1024) return 4
+    if (width >= 768) return 3
+    return 2
+  }
+  if (width >= 1536) return 8
+  if (width >= 1280) return 6
+  if (width >= 1024) return 5
+  if (width >= 768) return 4
+  if (width >= 640) return 3
+  return 2
+}
+
+function useGridColumns(panelOpen: boolean): number {
+  const [width, setWidth] = useState(() =>
+    typeof window === 'undefined' ? 1280 : window.innerWidth,
+  )
+  useEffect(() => {
+    const onResize = () => setWidth(window.innerWidth)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+  return gridColumnCount(width, panelOpen)
+}
+
 function buildMediaApiUrl(folderSel: FolderSelection): string {
   const base = '/media?pageSize=100'
   if (folderSel.type === 'smart') {
@@ -184,6 +211,22 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
     return results
   }, [mediaItems, searchQuery, filterType, sortConfig])
 
+  const gridColumns = useGridColumns(activeItem !== null)
+  const gridScrollRef = useRef<HTMLDivElement>(null)
+  const listScrollRef = useRef<HTMLDivElement>(null)
+  const gridRowCount = gridColumns > 0 ? Math.ceil(filteredAndSorted.length / gridColumns) : 0
+  const gridWindow = useVirtualWindow({
+    count: gridRowCount,
+    scrollRef: gridScrollRef,
+    estimateSize: 220,
+    overscan: 3,
+  })
+  const listWindow = useVirtualWindow({
+    count: filteredAndSorted.length,
+    scrollRef: listScrollRef,
+    estimateSize: 64,
+  })
+
   // Header stat pills (design `.mc-stats`): counts over the current folder
   // scope, before search/type filters, so the numbers describe the library.
   const mediaStats = useMemo(() => {
@@ -752,101 +795,119 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                   className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
                 >
                   {viewMode === 'grid' ? (
-                    <div
-                      className={`grid h-full auto-rows-min content-start gap-3 overflow-y-auto p-2 sm:gap-4 sm:p-3 ${
-                        panelOpen
-                          ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
-                          : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
-                      }`}
-                    >
-                      {filteredAndSorted.map((item) => {
-                        const isActive = activeItem?.id === item.id
-                        const hasIssues =
-                          !hasAccessibleAlt(item) || !item.title || item.usedOn?.length === 0
-                        const typeLabel = (
-                          item.name.includes('.')
-                            ? item.name.split('.').pop()!
-                            : item.format || item.type || ''
-                        )
-                          .replace(/^.*\//, '')
-                          .toUpperCase()
-                        return (
+                    <div ref={gridScrollRef} className="h-full overflow-y-auto p-2 sm:p-3">
+                      <div className="relative" style={{ height: gridRowCount * 220 }}>
+                        {gridWindow.rows.map((virtualRow) => (
                           <div
-                            key={item.id}
-                            className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
-                              isActive
-                                ? 'border-primary ring-primary/30 ring-2'
-                                : selectedMedia.includes(item.id)
-                                  ? 'border-primary/60 ring-primary/20 ring-1'
-                                  : 'border-border hover:border-input'
-                            }`}
-                            onClick={() => openDetail(item)}
-                            draggable
-                            onDragStart={(e) => handleDragStart(e, item.id)}
+                            key={virtualRow.key}
+                            className="grid gap-3 sm:gap-4"
+                            style={{
+                              position: 'absolute',
+                              top: 0,
+                              left: 0,
+                              right: 0,
+                              transform: `translateY(${virtualRow.start}px)`,
+                              gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
+                            }}
                           >
-                            <div className="relative aspect-square w-full overflow-hidden">
-                              <div className="bg-muted flex h-full w-full items-center justify-center">
-                                <MediaPreview item={item} />
-                              </div>
-                              {hasIssues && (
-                                <div
-                                  className="bg-warning absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full"
-                                  title="Needs attention"
-                                >
-                                  <AlertTriangle className="text-warning-foreground h-3 w-3" />
-                                </div>
-                              )}
-                              <div
-                                className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
-                                onClick={(e) => handleCheckbox(e, item.id)}
-                              >
-                                <div
-                                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
-                                    selectedMedia.includes(item.id)
-                                      ? 'border-primary bg-primary'
-                                      : 'border-input bg-card/80'
-                                  }`}
-                                >
-                                  {selectedMedia.includes(item.id) && (
-                                    <svg
-                                      className="text-primary-foreground h-3 w-3"
-                                      fill="none"
-                                      viewBox="0 0 12 12"
-                                    >
-                                      <path
-                                        d="M10 3L4.5 8.5L2 6"
-                                        stroke="currentColor"
-                                        strokeWidth="2"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
+                            {filteredAndSorted
+                              .slice(
+                                virtualRow.index * gridColumns,
+                                virtualRow.index * gridColumns + gridColumns,
+                              )
+                              .map((item) => {
+                                const isActive = activeItem?.id === item.id
+                                const hasIssues =
+                                  !hasAccessibleAlt(item) ||
+                                  !item.title ||
+                                  item.usedOn?.length === 0
+                                const typeLabel = (
+                                  item.name.includes('.')
+                                    ? item.name.split('.').pop()!
+                                    : item.format || item.type || ''
+                                )
+                                  .replace(/^.*\//, '')
+                                  .toUpperCase()
+                                return (
+                                  <div
+                                    key={item.id}
+                                    className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
+                                      isActive
+                                        ? 'border-primary ring-primary/30 ring-2'
+                                        : selectedMedia.includes(item.id)
+                                          ? 'border-primary/60 ring-primary/20 ring-1'
+                                          : 'border-border hover:border-input'
+                                    }`}
+                                    onClick={() => openDetail(item)}
+                                    draggable
+                                    onDragStart={(e) => handleDragStart(e, item.id)}
+                                  >
+                                    <div className="relative aspect-square w-full overflow-hidden">
+                                      <div className="bg-muted flex h-full w-full items-center justify-center">
+                                        <MediaPreview item={item} />
+                                      </div>
+                                      {hasIssues && (
+                                        <div
+                                          className="bg-warning absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full"
+                                          title="Needs attention"
+                                        >
+                                          <AlertTriangle className="text-warning-foreground h-3 w-3" />
+                                        </div>
+                                      )}
+                                      <div
+                                        className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+                                        onClick={(e) => handleCheckbox(e, item.id)}
+                                      >
+                                        <div
+                                          className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
+                                            selectedMedia.includes(item.id)
+                                              ? 'border-primary bg-primary'
+                                              : 'border-input bg-card/80'
+                                          }`}
+                                        >
+                                          {selectedMedia.includes(item.id) && (
+                                            <svg
+                                              className="text-primary-foreground h-3 w-3"
+                                              fill="none"
+                                              viewBox="0 0 12 12"
+                                            >
+                                              <path
+                                                d="M10 3L4.5 8.5L2 6"
+                                                stroke="currentColor"
+                                                strokeWidth="2"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                              />
+                                            </svg>
+                                          )}
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div className="border-border bg-card flex items-center gap-2 border-t px-2 py-1.5">
+                                      <span
+                                        className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
+                                          hasIssues ? 'bg-warning' : 'bg-success'
+                                        }`}
+                                        title={hasIssues ? 'Needs attention' : 'SEO complete'}
                                       />
-                                    </svg>
-                                  )}
-                                </div>
-                              </div>
-                            </div>
-                            <div className="border-border bg-card flex items-center gap-2 border-t px-2 py-1.5">
-                              <span
-                                className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
-                                  hasIssues ? 'bg-warning' : 'bg-success'
-                                }`}
-                                title={hasIssues ? 'Needs attention' : 'SEO complete'}
-                              />
-                              <div className="min-w-0 flex-1">
-                                <p className="text-foreground truncate text-xs font-medium">
-                                  {item.name}
-                                </p>
-                                <p className="text-muted-foreground truncate text-xs">
-                                  {[typeLabel, item.size].filter(Boolean).join(' · ')}
-                                </p>
-                              </div>
-                            </div>
+                                      <div className="min-w-0 flex-1">
+                                        <p className="text-foreground truncate text-xs font-medium">
+                                          {item.name}
+                                        </p>
+                                        <p className="text-muted-foreground truncate text-xs">
+                                          {[typeLabel, item.size].filter(Boolean).join(' · ')}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </div>
+                                )
+                              })}
                           </div>
-                        )
-                      })}
+                        ))}
+                      </div>
                     </div>
                   ) : (
-                    <div className="h-full overflow-auto">
+                    <div ref={listScrollRef} className="h-full overflow-auto">
                       {/* min-w keeps the list columns readable; narrow viewports scroll sideways. */}
                       <table className="w-full min-w-[640px]">
                         <thead className="border-border bg-muted sticky top-0 border-b">
@@ -881,7 +942,10 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                           </tr>
                         </thead>
                         <tbody className="divide-border divide-y">
-                          {filteredAndSorted.map((item) => {
+                          <VirtualTablePadding height={listWindow.paddingTop} columns={7} />
+                          {listWindow.rows.map((row) => {
+                            const item = filteredAndSorted[row.index]
+                            if (!item) return null
                             const isActive = activeItem?.id === item.id
                             const hasIssues =
                               !hasAccessibleAlt(item) || !item.title || item.usedOn?.length === 0
@@ -938,6 +1002,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                               </tr>
                             )
                           })}
+                          <VirtualTablePadding height={listWindow.paddingBottom} columns={7} />
                         </tbody>
                       </table>
                     </div>

package/src/views/Pages/PagesListView.tsx

@@ -19,6 +19,7 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { useVirtualWindow, VirtualTablePadding } from '../../components/virtual-window.js'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import {
@@ -206,6 +207,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   }, [tags])
 
   const displayGroups = useMemo(() => groupPages(pages, groupBy, tags), [pages, groupBy, tags])
+  const tableRows = useMemo(() => {
+    const rows: Array<
+      | { kind: 'header'; key: string; label: string; color: string | null; count: number }
+      | { kind: 'page'; page: Page }
+    > = []
+    for (const group of displayGroups) {
+      if (grouped && group.pages.length > 0) {
+        rows.push({
+          kind: 'header',
+          key: group.key,
+          label: group.label,
+          color: group.color,
+          count: group.pages.length,
+        })
+      }
+      for (const pageRow of group.pages) rows.push({ kind: 'page', page: pageRow })
+    }
+    return rows
+  }, [displayGroups, grouped])
+  const listScrollRef = useRef<HTMLDivElement>(null)
+  const listWindow = useVirtualWindow({
+    count: tableRows.length,
+    scrollRef: listScrollRef,
+    estimateSize: 56,
+  })
 
   // ─── Tree mode ─────────────────────────────────────────────────────
 
@@ -676,7 +702,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           <>
             {/* Both-axis scroll: tall lists scroll vertically; narrow viewports
                 keep column widths and scroll sideways instead of crushing. */}
-            <div className="min-h-0 flex-1 overflow-auto">
+            <div ref={listScrollRef} className="min-h-0 flex-1 overflow-auto">
               <table
                 className="w-full table-fixed"
                 style={{ minWidth: tableMinWidth }}
@@ -806,34 +832,48 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                       onNewPage={() => onNavigate('/pages/new')}
                     />
                   )}
+                  {!loading && !error && (
+                    <VirtualTablePadding height={listWindow.paddingTop} columns={columnCount} />
+                  )}
                   {!loading &&
                     !error &&
-                    displayGroups.map((group) => (
-                      <GroupBlock
-                        key={group.key}
-                        showHeader={grouped}
-                        label={group.label}
-                        color={group.color}
-                        count={group.pages.length}
-                        columns={columnCount}
-                      >
-                        {group.pages.map((p) => (
-                          <PageRow
-                            key={p.id}
-                            page={p}
-                            selected={selected.has(p.id)}
-                            showTags={showTags}
-                            showAuthor={showAuthor}
-                            showSeo={showSeo}
-                            resolveTag={(slug) => tagBySlug.get(slug)}
-                            onSelect={() => toggleOne(p.id)}
-                            onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
-                            onDuplicate={() => void runDuplicate(p)}
-                            onDelete={() => setRowDelete(p)}
-                          />
-                        ))}
-                      </GroupBlock>
-                    ))}
+                    listWindow.rows.map((row) => {
+                      const entry = tableRows[row.index]
+                      if (!entry) return null
+                      if (entry.kind === 'header') {
+                        return (
+                          <GroupBlock
+                            key={entry.key}
+                            showHeader
+                            label={entry.label}
+                            color={entry.color}
+                            count={entry.count}
+                            columns={columnCount}
+                          >
+                            {null}
+                          </GroupBlock>
+                        )
+                      }
+                      const p = entry.page
+                      return (
+                        <PageRow
+                          key={p.id}
+                          page={p}
+                          selected={selected.has(p.id)}
+                          showTags={showTags}
+                          showAuthor={showAuthor}
+                          showSeo={showSeo}
+                          resolveTag={(slug) => tagBySlug.get(slug)}
+                          onSelect={() => toggleOne(p.id)}
+                          onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
+                          onDuplicate={() => void runDuplicate(p)}
+                          onDelete={() => setRowDelete(p)}
+                        />
+                      )
+                    })}
+                  {!loading && !error && (
+                    <VirtualTablePadding height={listWindow.paddingBottom} columns={columnCount} />
+                  )}
                 </tbody>
               </table>
             </div>

package/src/views/Posts/PostsListView.tsx

@@ -16,6 +16,7 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { useVirtualWindow, VirtualTablePadding } from '../../components/virtual-window.js'
 import {
   bulkDeletePosts,
   bulkUpdatePosts,
@@ -161,6 +162,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
   }, [data?.types])
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const posts = data?.posts ?? []
+  const listScrollRef = useRef<HTMLDivElement>(null)
+  const listWindow = useVirtualWindow({
+    count: posts.length,
+    scrollRef: listScrollRef,
+    estimateSize: 56,
+  })
   const types = data?.types ?? []
   const authors = data?.authors ?? []
 
@@ -345,7 +352,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
       <div className="border-border bg-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border shadow-sm">
         {/* Both-axis scroll: tall lists scroll vertically; narrow viewports
             keep column widths and scroll sideways instead of crushing. */}
-        <div className="min-h-0 flex-1 overflow-auto">
+        <div ref={listScrollRef} className="min-h-0 flex-1 overflow-auto">
           <table
             className="w-full table-fixed"
             style={{ minWidth: TABLE_MIN_WIDTH }}
@@ -454,19 +461,29 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                   onNewPost={() => onNavigate('/posts/new')}
                 />
               )}
+              {!loading && !error && (
+                <VirtualTablePadding height={listWindow.paddingTop} columns={8} />
+              )}
               {!loading &&
                 !error &&
-                posts.map((p) => (
-                  <PostRow
-                    key={p.id}
-                    post={p}
-                    selected={selected.has(p.id)}
-                    onSelect={() => toggleOne(p.id)}
-                    onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
-                    onDuplicate={() => void runDuplicate(p)}
-                    onDelete={() => setRowDelete(p)}
-                  />
-                ))}
+                listWindow.rows.map((row) => {
+                  const p = posts[row.index]
+                  if (!p) return null
+                  return (
+                    <PostRow
+                      key={p.id}
+                      post={p}
+                      selected={selected.has(p.id)}
+                      onSelect={() => toggleOne(p.id)}
+                      onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
+                      onDuplicate={() => void runDuplicate(p)}
+                      onDelete={() => setRowDelete(p)}
+                    />
+                  )
+                })}
+              {!loading && !error && (
+                <VirtualTablePadding height={listWindow.paddingBottom} columns={8} />
+              )}
             </tbody>
           </table>
         </div>