@prenta/admin 2.6.1 → 2.7.0

package/src/views/CollectionList.tsx

@@ -18,6 +18,15 @@ 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 {
+  cardCell,
+  cardColumnHeader,
+  cardRow,
+  cardRowGroup,
+  cardTable,
+} from '../components/ui/card-table.js'
+import { TIER_MEDIA, useMediaQuery } from '../lib/tiers.js'
+import { CardListControls, type CardSortOption } from '../components/ui/CardListControls.js'
 import { EntryDetailPane } from '../components/collections/EntryDetailPane.js'
 
 export interface CollectionListProps {
@@ -29,6 +38,13 @@ export interface CollectionListProps {
 type SortField = 'title' | 'status' | 'updatedAt'
 type SortOrder = 'asc' | 'desc'
 
+/** The sortable columns, for the phone sort select (the header's labels). */
+const COLLECTION_SORT_OPTIONS: CardSortOption<SortField>[] = [
+  { field: 'title', label: 'Title' },
+  { field: 'status', label: 'Status' },
+  { field: 'updatedAt', label: 'Updated' },
+]
+
 function resolveCollection(config: any, slug: string): any | undefined {
   if (!config?.collections) return undefined
   const list = Array.isArray(config.collections)
@@ -150,33 +166,28 @@ function listPickParam(config: any, slug: string, facets: FacetDef[]): string {
   return [...names].slice(0, 32).join(',')
 }
 
+/** Status chip fill and ink, per the kit's `.s-pub` / `.s-dft` / `.s-sch` / `.s-arc`. */
 function statusColor(status: string): string {
   switch (status?.toUpperCase()) {
     case 'PUBLISHED':
-      return 'var(--prenta-success-bg, #dcfce7)'
-    case 'DRAFT':
-      return 'var(--prenta-muted-bg, #f3f4f6)'
-    case 'ARCHIVED':
-      return 'var(--prenta-warning-bg, #fef9c3)'
+      return 'var(--suc-l)'
     case 'SCHEDULED':
-      return 'var(--prenta-info-bg, #dbeafe)'
+      return 'var(--warn-l)'
     default:
-      return 'var(--prenta-muted-bg, #f3f4f6)'
+      return 'var(--bg)'
   }
 }
 
 function statusText(status: string): string {
   switch (status?.toUpperCase()) {
     case 'PUBLISHED':
-      return 'var(--prenta-success-text, #166534)'
-    case 'DRAFT':
-      return 'var(--prenta-muted-text, #374151)'
-    case 'ARCHIVED':
-      return 'var(--prenta-warning-text, #854d0e)'
+      return 'var(--suc)'
     case 'SCHEDULED':
-      return 'var(--prenta-info-text, #1e40af)'
+      return 'var(--warn)'
+    case 'ARCHIVED':
+      return 'var(--muted)'
     default:
-      return 'var(--prenta-muted-text, #374151)'
+      return 'var(--sub)'
   }
 }
 
@@ -257,10 +268,14 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   }>(endpoint)
   const docs = data?.docs ?? []
   const listScrollRef = useRef<HTMLDivElement>(null)
+  // Below 769px the rows are cards (`table[data-cards]`), taller than the
+  // 52px estimate the window places them by, so every row is mounted.
+  const cards = useMediaQuery(TIER_MEDIA.mobile)
   const listWindow = useVirtualWindow({
     count: docs.length,
     scrollRef: listScrollRef,
     estimateSize: 52,
+    enabled: !cards,
   })
   const listColumns = 5 + facets.length
   const total = data?.total ?? 0
@@ -369,7 +384,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       type="button"
       onClick={() => toggleSort(field)}
       className="flex items-center gap-1 text-xs font-medium transition-opacity hover:opacity-80"
-      style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
+      style={{ color: 'var(--sub)' }}
     >
       {children}
       {sort === field && <span>{order === 'asc' ? '↑' : '↓'}</span>}
@@ -379,10 +394,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   if (loading && docs.length === 0) {
     return (
       <div className="flex h-64 items-center justify-center p-4">
-        <Loader2
-          className="h-6 w-6 animate-spin"
-          style={{ color: 'var(--prenta-primary, #2563eb)' }}
-        />
+        <Loader2 className="h-6 w-6 animate-spin" style={{ color: 'var(--acc)' }} />
       </div>
     )
   }
@@ -394,23 +406,26 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       {/* Header */}
       <div className="mb-4 flex shrink-0 flex-wrap items-center justify-between gap-3">
         <div>
-          <h1
-            className="text-xl font-medium sm:text-2xl"
-            style={{ color: 'var(--prenta-text, #111827)' }}
-          >
+          <h1 className="text-xl font-medium sm:text-2xl" style={{ color: 'var(--txt)' }}>
             {labels.plural}
           </h1>
-          <p className="text-sm" style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}>
+          <p className="text-sm" style={{ color: 'var(--sub)' }}>
             {total} total
           </p>
         </div>
-        <button
-          onClick={() => onNavigate(newPath())}
-          className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
-          style={{ background: 'var(--prenta-primary, #2563eb)' }}
-        >
-          <Plus className="h-4 w-4" /> New {labels.singular}
-        </button>
+        {/* Below 769px the create action floats above the tab bar. */}
+        <div data-header-actions="" className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => onNavigate(newPath())}
+            data-variant="primary"
+            data-fab=""
+            className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+            style={{ background: 'var(--acc)', color: 'var(--on-acc)' }}
+          >
+            <Plus className="h-4 w-4" aria-hidden /> New {labels.singular}
+          </button>
+        </div>
       </div>
 
       {/* Search + facet filters */}
@@ -418,7 +433,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         <div className="relative min-w-[200px] flex-1">
           <Search
             className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-            style={{ color: 'var(--prenta-text-muted, #9ca3af)' }}
+            style={{ color: 'var(--muted)' }}
           />
           <input
             type="text"
@@ -427,8 +442,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
             onChange={(e) => setSearch(e.target.value)}
             className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
             style={{
-              borderColor: 'var(--prenta-border, #d1d5db)',
-              color: 'var(--prenta-text, #111827)',
+              borderColor: 'var(--bdr)',
+              color: 'var(--txt)',
             }}
           />
         </div>
@@ -446,10 +461,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
               onChange={(e) => setFilter(facet.name, e.target.value)}
               className="rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
               style={{
-                borderColor: 'var(--prenta-border, #d1d5db)',
-                color: filters[facet.name]
-                  ? 'var(--prenta-text, #111827)'
-                  : 'var(--prenta-text-secondary, #6b7280)',
+                borderColor: 'var(--bdr)',
+                color: filters[facet.name] ? 'var(--txt)' : 'var(--sub)',
               }}
             >
               <option value="">All {facet.label.toLowerCase()}</option>
@@ -466,7 +479,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
             type="button"
             onClick={() => setFilters({})}
             className="rounded-lg px-2 py-2 text-sm underline transition-opacity hover:opacity-75"
-            style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
+            style={{ color: 'var(--sub)' }}
           >
             Clear filters
           </button>
@@ -478,27 +491,27 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         <div
           className="mb-4 flex shrink-0 flex-wrap items-center justify-between gap-2 rounded-lg p-3"
           style={{
-            background: 'var(--prenta-info-bg, #eff6ff)',
-            borderColor: 'var(--prenta-info-border, #bfdbfe)',
+            background: 'var(--info-l)',
+            borderColor: 'var(--bdr)',
             borderWidth: 1,
             borderStyle: 'solid',
           }}
         >
-          <span className="text-sm" style={{ color: 'var(--prenta-info-text, #1e40af)' }}>
+          <span className="text-sm" style={{ color: 'var(--info)' }}>
             {selected.size} selected
           </span>
           <div className="flex gap-2">
             <button
               onClick={() => bulkAction('publish')}
-              className="rounded-lg px-3 py-1.5 text-sm text-white"
-              style={{ background: 'var(--prenta-success, #16a34a)' }}
+              className="rounded-lg px-3 py-1.5 text-sm"
+              style={{ background: 'var(--suc)', color: 'var(--on-acc)' }}
             >
               Publish
             </button>
             <button
               onClick={() => bulkAction('unpublish')}
-              className="rounded-lg px-3 py-1.5 text-sm text-white"
-              style={{ background: 'var(--prenta-warning, #ca8a04)' }}
+              className="rounded-lg px-3 py-1.5 text-sm"
+              style={{ background: 'var(--warn)', color: 'var(--on-acc)' }}
             >
               Unpublish
             </button>
@@ -509,8 +522,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
             />
             <button
               onClick={() => bulkAction('delete')}
-              className="rounded-lg px-3 py-1.5 text-sm text-white"
-              style={{ background: 'var(--prenta-danger, #dc2626)' }}
+              className="rounded-lg px-3 py-1.5 text-sm"
+              style={{ background: 'var(--err)', color: 'var(--on-acc)' }}
             >
               <Trash2 className="-mt-0.5 mr-1 inline h-3.5 w-3.5" />
               Delete
@@ -523,8 +536,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         <div
           className="mb-4 rounded-lg p-3 text-sm"
           style={{
-            background: 'var(--prenta-danger-bg, #fef2f2)',
-            color: 'var(--prenta-danger-text, #991b1b)',
+            background: 'var(--err-l)',
+            color: 'var(--err)',
           }}
         >
           {error} —{' '}
@@ -539,184 +552,230 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         <div
           className="flex min-h-0 flex-1 flex-col items-center justify-center rounded-lg border p-8"
           style={{
-            borderColor: 'var(--prenta-border, #d1d5db)',
-            color: 'var(--prenta-text-secondary, #6b7280)',
+            borderColor: 'var(--bdr)',
+            color: 'var(--sub)',
           }}
         >
           <FileText className="mb-3 h-10 w-10 opacity-40" />
           <p className="mb-3 text-sm">No {labels.plural.toLowerCase()} found</p>
           <button
             onClick={() => onNavigate(newPath())}
-            className="rounded-lg px-4 py-2 text-sm text-white"
-            style={{ background: 'var(--prenta-primary, #2563eb)' }}
+            className="rounded-lg px-4 py-2 text-sm"
+            style={{ background: 'var(--acc)', color: 'var(--on-acc)' }}
           >
             Create {labels.singular}
           </button>
         </div>
       ) : (
-        <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)' }}
-            >
-              <table className="w-full text-sm">
-                <thead
-                  className="sticky top-0"
-                  style={{
-                    background: 'var(--prenta-surface-alt, #f9fafb)',
-                    borderBottom: '1px solid var(--prenta-border, #d1d5db)',
-                  }}
-                >
-                  <tr>
-                    <th className="w-10 px-3 py-2 text-left">
-                      <input
-                        type="checkbox"
-                        checked={selected.size === docs.length && docs.length > 0}
-                        onChange={(e) => toggleAll(e.target.checked)}
-                        className="rounded"
-                      />
-                    </th>
-                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('title')}>
-                      <SortCol field="title">Title</SortCol>
-                    </th>
-                    {facets.map((facet) => (
+        <>
+          {/* Phones: the table header's sort and select-all, out of reach on cards. */}
+          <CardListControls
+            className="mb-3"
+            selectAll={{
+              checked: selected.size === docs.length && docs.length > 0,
+              onChange: toggleAll,
+              disabled: docs.length === 0,
+            }}
+            sort={{
+              options: COLLECTION_SORT_OPTIONS,
+              field: sort,
+              dir: order,
+              onChange: (field, nextOrder) => {
+                resetCursor()
+                setSort(field)
+                setOrder(nextOrder)
+              },
+            }}
+          />
+          <SplitPaneLayout className="min-h-0">
+            <SplitPaneList>
+              <div
+                ref={listScrollRef}
+                className="mobile:rounded-none mobile:border-0 h-full min-h-0 overflow-auto rounded-lg border"
+                style={{ borderColor: 'var(--bdr)' }}
+              >
+                <table {...cardTable} aria-label={labels.plural} className="w-full text-sm">
+                  <thead
+                    {...cardRowGroup}
+                    className="sticky top-0"
+                    style={{
+                      background: 'var(--bg)',
+                      borderBottom: '1px solid var(--bdr)',
+                    }}
+                  >
+                    <tr {...cardRow}>
+                      <th {...cardColumnHeader} className="w-10 px-3 py-2 text-left">
+                        <input
+                          type="checkbox"
+                          aria-label={`Select all ${labels.plural.toLowerCase()} on this page`}
+                          checked={selected.size === docs.length && docs.length > 0}
+                          onChange={(e) => toggleAll(e.target.checked)}
+                          className="rounded"
+                        />
+                      </th>
                       <th
-                        key={facet.name}
-                        className="px-3 py-2 text-left text-xs font-medium"
-                        style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
+                        {...cardColumnHeader}
+                        className="px-3 py-2 text-left"
+                        aria-sort={ariaSortFor('title')}
+                      >
+                        <SortCol field="title">Title</SortCol>
+                      </th>
+                      {facets.map((facet) => (
+                        <th
+                          {...cardColumnHeader}
+                          key={facet.name}
+                          className="px-3 py-2 text-left text-xs font-medium"
+                          style={{ color: 'var(--sub)' }}
+                        >
+                          {facet.label}
+                        </th>
+                      ))}
+                      <th
+                        {...cardColumnHeader}
+                        className="px-3 py-2 text-left"
+                        aria-sort={ariaSortFor('status')}
                       >
-                        {facet.label}
+                        <SortCol field="status">Status</SortCol>
                       </th>
-                    ))}
-                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('status')}>
-                      <SortCol field="status">Status</SortCol>
-                    </th>
-                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('updatedAt')}>
-                      <SortCol field="updatedAt">Updated</SortCol>
-                    </th>
-                    <th
-                      className="px-3 py-2 text-left text-xs font-medium"
-                      style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <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
-                        key={doc.id}
-                        className={`cursor-pointer transition-colors ${isDetail ? 'bg-[var(--acc-l)]' : 'hover:opacity-95'}`}
-                        style={{ borderBottom: '1px solid var(--prenta-border, #e5e7eb)' }}
-                        onClick={() => toggleDetail(String(doc.id))}
-                        onDoubleClick={() => onNavigate(editPath(doc.id))}
+                      <th
+                        {...cardColumnHeader}
+                        className="px-3 py-2 text-left"
+                        aria-sort={ariaSortFor('updatedAt')}
                       >
-                        <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
-                          <input
-                            type="checkbox"
-                            checked={selected.has(String(doc.id))}
-                            onChange={() => toggleSelect(String(doc.id))}
-                            className="rounded"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <button
-                            type="button"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              toggleDetail(String(doc.id))
-                            }}
-                            aria-expanded={isDetail}
-                            className="text-left font-medium hover:underline"
-                            style={{ color: 'var(--prenta-text, #111827)' }}
-                          >
-                            {doc.title || doc.name || `#${doc.id}`}
-                          </button>
-                        </td>
-                        {facets.map((facet) => (
+                        <SortCol field="updatedAt">Updated</SortCol>
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-3 py-2 text-left text-xs font-medium"
+                        style={{ color: 'var(--sub)' }}
+                      >
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody {...cardRowGroup}>
+                    <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
+                          key={doc.id}
+                          {...cardRow}
+                          data-state={isDetail ? 'selected' : undefined}
+                          className={`cursor-pointer transition-colors ${isDetail ? 'bg-[var(--acc-l)]' : 'hover:opacity-95'}`}
+                          style={{ borderBottom: '1px solid var(--bdr)' }}
+                          onClick={() => toggleDetail(String(doc.id))}
+                          onDoubleClick={() => onNavigate(editPath(doc.id))}
+                        >
                           <td
-                            key={facet.name}
-                            className="max-w-[200px] truncate px-3 py-2"
-                            style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
-                            title={facetCellValue(doc, facet) || undefined}
+                            {...cardCell({ role: 'check' })}
+                            className="px-3 py-2"
+                            onClick={(e) => e.stopPropagation()}
                           >
-                            {facetCellValue(doc, facet) || '—'}
+                            {/* The label is the card's 44px hit area on mobile. */}
+                            <label className="inline-flex cursor-pointer">
+                              <input
+                                type="checkbox"
+                                aria-label={`Select ${doc.title || doc.name || `#${doc.id}`}`}
+                                checked={selected.has(String(doc.id))}
+                                onChange={() => toggleSelect(String(doc.id))}
+                                className="rounded"
+                              />
+                            </label>
                           </td>
-                        ))}
-                        <td className="px-3 py-2">
-                          <span
-                            className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"
-                            style={{
-                              background: statusColor(doc.status),
-                              color: statusText(doc.status),
-                            }}
-                          >
-                            {doc.status ?? 'DRAFT'}
-                          </span>
-                        </td>
-                        <td
-                          className="px-3 py-2"
-                          style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
-                        >
-                          {formatDate(doc.updatedAt)}
-                        </td>
-                        <td className="px-3 py-2">
-                          <button
-                            type="button"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              onNavigate(editPath(doc.id))
-                            }}
-                            className="rounded p-1.5 transition-opacity hover:opacity-75"
-                            title="Edit"
-                            aria-label={`Edit ${doc.title || doc.name || `#${doc.id}`}`}
+                          <td {...cardCell({ role: 'title' })} className="px-3 py-2">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                toggleDetail(String(doc.id))
+                              }}
+                              aria-expanded={isDetail}
+                              className="text-left font-medium hover:underline"
+                              style={{ color: 'var(--txt)' }}
+                            >
+                              {doc.title || doc.name || `#${doc.id}`}
+                            </button>
+                          </td>
+                          {facets.map((facet) => (
+                            <td
+                              key={facet.name}
+                              {...cardCell({ label: facet.label })}
+                              className="max-w-[200px] truncate px-3 py-2"
+                              style={{ color: 'var(--sub)' }}
+                              title={facetCellValue(doc, facet) || undefined}
+                            >
+                              {facetCellValue(doc, facet) || '—'}
+                            </td>
+                          ))}
+                          <td {...cardCell({ label: 'Status' })} className="px-3 py-2">
+                            <span
+                              className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"
+                              style={{
+                                background: statusColor(doc.status),
+                                color: statusText(doc.status),
+                              }}
+                            >
+                              {doc.status ?? 'DRAFT'}
+                            </span>
+                          </td>
+                          <td
+                            {...cardCell({ label: 'Updated' })}
+                            className="px-3 py-2"
+                            style={{ color: 'var(--sub)' }}
                           >
-                            <MoreHorizontal
-                              className="h-4 w-4"
-                              style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
-                            />
-                          </button>
-                        </td>
-                      </tr>
-                    )
-                  })}
-                  <VirtualTablePadding height={listWindow.paddingBottom} columns={listColumns} />
-                </tbody>
-              </table>
-            </div>
-          </SplitPaneList>
-
-          <InspectorPane
-            open={detailDoc !== null}
-            width={400}
-            aria-label={`${labels.singular} details`}
-          >
-            {detailDoc && (
-              <EntryDetailPane
-                key={String(detailDoc.id)}
-                doc={detailDoc}
-                collection={collectionDef}
-                singularLabel={labels.singular}
-                onClose={() => setDetailId(null)}
-                onOpenEditor={() => onNavigate(editPath(detailDoc.id))}
-              />
-            )}
-          </InspectorPane>
-        </SplitPaneLayout>
+                            {formatDate(doc.updatedAt)}
+                          </td>
+                          <td {...cardCell({ role: 'actions' })} className="px-3 py-2">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                onNavigate(editPath(doc.id))
+                              }}
+                              className="rounded p-1.5 transition-opacity hover:opacity-75"
+                              title="Edit"
+                              aria-label={`Edit ${doc.title || doc.name || `#${doc.id}`}`}
+                            >
+                              <MoreHorizontal className="h-4 w-4" style={{ color: 'var(--sub)' }} />
+                            </button>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                    <VirtualTablePadding height={listWindow.paddingBottom} columns={listColumns} />
+                  </tbody>
+                </table>
+              </div>
+            </SplitPaneList>
+
+            <InspectorPane
+              open={detailDoc !== null}
+              width={400}
+              aria-label={`${labels.singular} details`}
+            >
+              {detailDoc && (
+                <EntryDetailPane
+                  key={String(detailDoc.id)}
+                  doc={detailDoc}
+                  collection={collectionDef}
+                  singularLabel={labels.singular}
+                  onClose={() => setDetailId(null)}
+                  onOpenEditor={() => onNavigate(editPath(detailDoc.id))}
+                />
+              )}
+            </InspectorPane>
+          </SplitPaneLayout>
+        </>
       )}
 
       {/* Pagination — shrink-0 so it stays visible below the scrolling table (#736). */}
       {totalPages > 1 && (
         <div
           className="mt-4 flex shrink-0 items-center justify-between text-sm"
-          style={{ color: 'var(--prenta-text-secondary, #6b7280)' }}
+          style={{ color: 'var(--sub)' }}
         >
           <span>
             Page {pageNumber} of {totalPages}
@@ -733,7 +792,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                 })
               }}
               className="flex items-center gap-1 rounded-lg border px-3 py-1.5 transition-opacity disabled:opacity-40"
-              style={{ borderColor: 'var(--prenta-border, #d1d5db)' }}
+              style={{ borderColor: 'var(--bdr)' }}
             >
               <ChevronLeft className="h-4 w-4" /> Previous
             </button>
@@ -746,7 +805,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                 setCursor(nextCursor)
               }}
               className="flex items-center gap-1 rounded-lg border px-3 py-1.5 transition-opacity disabled:opacity-40"
-              style={{ borderColor: 'var(--prenta-border, #d1d5db)' }}
+              style={{ borderColor: 'var(--bdr)' }}
             >
               Next <ChevronRight className="h-4 w-4" />
             </button>