From 460d627d92853c4126a82d7263c40972a48aac03 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Fri, 3 Oct 2025 20:04:26 +0200
Subject: [PATCH 1/2] Update custom list view to use proper Payload ListView
 pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed from AdminViewServerProps to ListViewServerProps
- Updated component to use collectionConfig instead of collection
- Simplified view structure to work directly with Payload's List View
- Added ListViewClientProps import to client component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/views/FeatureFlagsClient.tsx |   2 +
 src/views/FeatureFlagsView.tsx   | 186 +++++++++++--------------------
 2 files changed, 68 insertions(+), 120 deletions(-)

diff --git a/src/views/FeatureFlagsClient.tsx b/src/views/FeatureFlagsClient.tsx
index 36c4590..5835c45 100644
--- a/src/views/FeatureFlagsClient.tsx
+++ b/src/views/FeatureFlagsClient.tsx
@@ -1,4 +1,6 @@
 'use client'
+import React from 'react'
+import type { ListViewClientProps } from 'payload'
 import { useState, useEffect, useCallback, useMemo, memo } from 'react'
 import {
   useConfig,
diff --git a/src/views/FeatureFlagsView.tsx b/src/views/FeatureFlagsView.tsx
index 26fa08f..68b6bab 100644
--- a/src/views/FeatureFlagsView.tsx
+++ b/src/views/FeatureFlagsView.tsx
@@ -1,19 +1,13 @@
-import type { AdminViewServerProps } from 'payload'
-import { DefaultTemplate } from '@payloadcms/next/templates'
-import { Gutter } from '@payloadcms/ui'
+import React from 'react'
+import type { ListViewServerProps } from 'payload'
 import FeatureFlagsClient from './FeatureFlagsClient.js'
 import type { FeatureFlag } from '../types/index.js'
 
-async function fetchInitialFlags(payload: any, searchParams?: Record<string, any>): Promise<FeatureFlag[]> {
+async function fetchInitialFlags(payload: any, collectionSlug: string): Promise<FeatureFlag[]> {
   try {
-    const limit = Math.min(1000, parseInt(searchParams?.limit as string) || 100)
-    const page = Math.max(1, parseInt(searchParams?.page as string) || 1)
-    const collectionSlug = searchParams?.collectionSlug as string || 'feature-flags'
-
     const result = await payload.find({
       collection: collectionSlug,
-      limit,
-      page,
+      limit: 1000,
       sort: 'name',
     })
 
@@ -24,131 +18,83 @@ async function fetchInitialFlags(payload: any, searchParams?: Record<string, any
   }
 }
 
-export default async function FeatureFlagsView({
-  initPageResult,
-  params,
-  searchParams,
-}: AdminViewServerProps) {
-  const {
-    req: { user },
-    permissions,
-  } = initPageResult
+export default async function FeatureFlagsView(props: ListViewServerProps) {
+  const { collectionConfig, user, permissions, payload } = props
 
   // Security check: User must be logged in
   if (!user) {
     return (
-      <DefaultTemplate
-        i18n={initPageResult.req.i18n}
-        locale={initPageResult.locale}
-        params={params}
-        payload={initPageResult.req.payload}
-        permissions={initPageResult.permissions}
-        searchParams={searchParams}
-        user={undefined}
-        visibleEntities={initPageResult.visibleEntities}
-      >
-        <Gutter>
-          <div style={{
-            padding: '2rem',
-            textAlign: 'center',
-            color: 'var(--theme-error-500)',
-            backgroundColor: 'var(--theme-error-50)',
-            border: '1px solid var(--theme-error-200)',
-            borderRadius: '0.5rem',
-            margin: '2rem 0'
-          }}>
-            <h2 style={{ marginBottom: '1rem', color: 'var(--theme-error-600)' }}>
-              Authentication Required
-            </h2>
-            <p style={{ marginBottom: '1rem' }}>
-              You must be logged in to view the Feature Flags Dashboard.
-            </p>
-            <a
-              href="/admin/login"
-              style={{
-                display: 'inline-block',
-                padding: '0.75rem 1.5rem',
-                backgroundColor: 'var(--theme-error-500)',
-                color: 'white',
-                textDecoration: 'none',
-                borderRadius: '0.375rem',
-                fontWeight: '500'
-              }}
-            >
-              Go to Login
-            </a>
-          </div>
-        </Gutter>
-      </DefaultTemplate>
+      <div style={{
+        padding: '2rem',
+        textAlign: 'center',
+        color: 'var(--theme-error-500)',
+        backgroundColor: 'var(--theme-error-50)',
+        border: '1px solid var(--theme-error-200)',
+        borderRadius: '0.5rem',
+        margin: '2rem 0'
+      }}>
+        <h2 style={{ marginBottom: '1rem', color: 'var(--theme-error-600)' }}>
+          Authentication Required
+        </h2>
+        <p style={{ marginBottom: '1rem' }}>
+          You must be logged in to view the Feature Flags Dashboard.
+        </p>
+        <a
+          href="/admin/login"
+          style={{
+            display: 'inline-block',
+            padding: '0.75rem 1.5rem',
+            backgroundColor: 'var(--theme-error-500)',
+            color: 'white',
+            textDecoration: 'none',
+            borderRadius: '0.375rem',
+            fontWeight: '500'
+          }}
+        >
+          Go to Login
+        </a>
+      </div>
     )
   }
 
-  // Security check: User must have permissions to access feature-flags collection
-  const collectionSlug = searchParams?.collectionSlug as string || 'feature-flags'
-  const canReadFeatureFlags = permissions?.collections?.[collectionSlug]?.read
+  // Security check: User must have permissions to access the collection
+  const canReadFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.read
   if (!canReadFeatureFlags) {
     return (
-      <DefaultTemplate
-        i18n={initPageResult.req.i18n}
-        locale={initPageResult.locale}
-        params={params}
-        payload={initPageResult.req.payload}
-        permissions={initPageResult.permissions}
-        searchParams={searchParams}
-        user={initPageResult.req.user || undefined}
-        visibleEntities={initPageResult.visibleEntities}
-      >
-        <Gutter>
-          <div style={{
-            padding: '2rem',
-            textAlign: 'center',
-            color: 'var(--theme-warning-600)',
-            backgroundColor: 'var(--theme-warning-50)',
-            border: '1px solid var(--theme-warning-200)',
-            borderRadius: '0.5rem',
-            margin: '2rem 0'
-          }}>
-            <h2 style={{ marginBottom: '1rem', color: 'var(--theme-warning-700)' }}>
-              Access Denied
-            </h2>
-            <p style={{ marginBottom: '1rem' }}>
-              You don't have permission to access the Feature Flags Dashboard.
-            </p>
-            <p style={{ fontSize: '0.875rem', color: 'var(--theme-warning-600)' }}>
-              Contact your administrator to request access to the feature-flags collection.
-            </p>
-          </div>
-        </Gutter>
-      </DefaultTemplate>
+      <div style={{
+        padding: '2rem',
+        textAlign: 'center',
+        color: 'var(--theme-warning-600)',
+        backgroundColor: 'var(--theme-warning-50)',
+        border: '1px solid var(--theme-warning-200)',
+        borderRadius: '0.5rem',
+        margin: '2rem 0'
+      }}>
+        <h2 style={{ marginBottom: '1rem', color: 'var(--theme-warning-700)' }}>
+          Access Denied
+        </h2>
+        <p style={{ marginBottom: '1rem' }}>
+          You don't have permission to access the Feature Flags Dashboard.
+        </p>
+        <p style={{ fontSize: '0.875rem', color: 'var(--theme-warning-600)' }}>
+          Contact your administrator to request access to the {collectionConfig.slug} collection.
+        </p>
+      </div>
     )
   }
 
   // Fetch initial data server-side (only if user has access)
-  const initialFlags = await fetchInitialFlags(initPageResult.req.payload, searchParams)
+  const initialFlags = await fetchInitialFlags(payload, collectionConfig.slug)
 
-  // Check if user can update feature flags (use already defined collection slug)
-  const canUpdateFeatureFlags = permissions?.collections?.[collectionSlug]?.update || false
+  // Check if user can update feature flags
+  const canUpdateFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.update || false
 
-  // Use DefaultTemplate with proper props structure from initPageResult
   return (
-    <DefaultTemplate
-      i18n={initPageResult.req.i18n}
-      locale={initPageResult.locale}
-      params={params}
-      payload={initPageResult.req.payload}
-      permissions={initPageResult.permissions}
-      searchParams={searchParams}
-      user={initPageResult.req.user || undefined}
-      visibleEntities={initPageResult.visibleEntities}
-    >
-      <Gutter>
-        <FeatureFlagsClient
-          initialFlags={initialFlags}
-          canUpdate={canUpdateFeatureFlags}
-          maxFlags={parseInt(searchParams?.maxFlags as string) || 100}
-          collectionSlug={collectionSlug}
-        />
-      </Gutter>
-    </DefaultTemplate>
+    <FeatureFlagsClient
+      initialFlags={initialFlags}
+      canUpdate={canUpdateFeatureFlags}
+      maxFlags={100}
+      collectionSlug={collectionConfig.slug}
+    />
   )
 }
\ No newline at end of file

From e82bf9c6d47377b51f2dc22d15fc0915bcffc6cb Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Fri, 3 Oct 2025 20:04:38 +0200
Subject: [PATCH 2/2] v0.0.18: Fix enableCustomListView to use proper ListView
 pattern

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3cc1526..f1f4d30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "payload-feature-flags",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "payload-feature-flags",
-      "version": "0.0.17",
+      "version": "0.0.18",
       "license": "MIT",
       "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
diff --git a/package.json b/package.json
index 7d8b663..da5a7a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xtr-dev/payload-feature-flags",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Feature flags plugin for Payload CMS - manage feature toggles, A/B tests, and gradual rollouts",
   "license": "MIT",
   "type": "module",