feat: folder enabled collections

.vscode/launch.json

@@ -111,6 +111,13 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "pnpm tsx --no-deprecation test/dev.ts folder-view",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Folder View",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm tsx --no-deprecation test/dev.ts localization",
       "cwd": "${workspaceFolder}",

packages/next/src/views/Dashboard/Folders/index.scss

@@ -0,0 +1,80 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .folder-dashboard {
+    --gap: var(--base);
+    --cols: 5;
+    width: 100%;
+    display: grid;
+    height: calc(100% - var(--app-header-height));
+
+    &__wrap {
+      border-radius: var(--style-radius-l);
+      padding-bottom: var(--spacing-view-bottom);
+      margin-bottom: 2rem;
+      margin-inline: var(--gutter-h);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
+
+    &__folders {
+      gap: var(--gap);
+      display: grid;
+      grid-template-columns: repeat(var(--cols), 1fr);
+    }
+
+    &__group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+    }
+
+    &__label {
+      margin: 0;
+    }
+
+    &__card-list {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      gap: var(--gap);
+      display: grid;
+      grid-template-columns: repeat(var(--cols), 1fr);
+
+      .card {
+        height: 100%;
+      }
+    }
+
+    &__locked.locked {
+      align-items: unset;
+      justify-content: unset;
+    }
+
+    @include large-break {
+      --cols: 4;
+    }
+
+    @include mid-break {
+      --gap: var(--base);
+      --cols: 2;
+    }
+
+    @include small-break {
+      --cols: 2;
+
+      &__wrap {
+        gap: var(--base);
+      }
+
+      &__card-list {
+        gap: base(0.4);
+      }
+    }
+
+    @include extra-small-break {
+      --cols: 1;
+    }
+  }
+}

packages/next/src/views/Dashboard/Folders/index.tsx

@@ -0,0 +1,137 @@
+import type {
+  ClientUser,
+  PaginatedDocs,
+  SanitizedPermissions,
+  ServerProps,
+  VisibleEntities,
+} from 'payload'
+
+import { FolderAndDocuments, FolderProvider } from '@payloadcms/ui'
+import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
+import { type groupNavItems, sanitizeID } from '@payloadcms/ui/shared'
+import { redirect } from 'next/navigation.js'
+import { getFolderData, type GetFolderDataResult } from 'payload/shared'
+
+import './index.scss'
+
+import React from 'react'
+
+const baseClass = 'folder-dashboard'
+
+export type FolderDashboardProps = {
+  documents: PaginatedDocs[]
+  folderID?: number | string
+  globalData: Array<{
+    data: { _isLocked: boolean; _lastEditedAt: string; _userEditing: ClientUser | number | string }
+    lockDuration?: number
+    slug: string
+  }>
+  Link: React.ComponentType<any>
+  navGroups?: ReturnType<typeof groupNavItems>
+  permissions: SanitizedPermissions
+  visibleEntities: VisibleEntities
+} & GetFolderDataResult &
+  ServerProps
+
+export const FolderDashboard: React.FC<FolderDashboardProps> = async (props) => {
+  const {
+    i18n,
+    locale,
+    params,
+    payload: {
+      config: {
+        admin: {
+          components: { afterDashboard, beforeDashboard },
+        },
+        routes,
+      },
+    },
+    payload,
+    permissions,
+    searchParams,
+    user,
+  } = props
+
+  const searchParamFolderID = searchParams?.folder as string
+
+  const { breadcrumbs, items } = await getFolderData({
+    folderID: searchParamFolderID,
+    payload,
+  })
+
+  const folderID = breadcrumbs[breadcrumbs.length - 1]?.id
+
+  if (folderID && searchParamFolderID && searchParamFolderID !== String(folderID)) {
+    return redirect(`${routes.admin}`)
+  }
+
+  const displayTypePref = (await payload.find({
+    collection: 'payload-preferences',
+    depth: 0,
+    limit: 1,
+    where: {
+      and: [
+        {
+          key: {
+            equals: 'folder-view-display',
+          },
+        },
+        {
+          'user.relationTo': {
+            equals: user.collection,
+          },
+        },
+        {
+          'user.value': {
+            equals: sanitizeID(user.id),
+          },
+        },
+      ],
+    },
+  })) as unknown as { docs: { value: 'grid' | 'list' }[] }
+
+  return (
+    <FolderProvider
+      initialData={{
+        breadcrumbs,
+        folderID,
+        items,
+      }}
+    >
+      <div className={baseClass}>
+        <div className={`${baseClass}__wrap`}>
+          {beforeDashboard &&
+            RenderServerComponent({
+              Component: beforeDashboard,
+              importMap: payload.importMap,
+              serverProps: {
+                i18n,
+                locale,
+                params,
+                payload,
+                permissions,
+                searchParams,
+                user,
+              },
+            })}
+
+          <FolderAndDocuments initialDisplayType={displayTypePref?.docs[0]?.value} />
+          {afterDashboard &&
+            RenderServerComponent({
+              Component: afterDashboard,
+              importMap: payload.importMap,
+              serverProps: {
+                i18n,
+                locale,
+                params,
+                payload,
+                permissions,
+                searchParams,
+                user,
+              },
+            })}
+        </div>
+      </div>
+    </FolderProvider>
+  )
+}

packages/next/src/views/Dashboard/index.tsx

@@ -4,11 +4,13 @@ import type { AdminViewServerProps } from 'payload'
 import { HydrateAuthProvider, SetStepNav } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { EntityType, groupNavItems } from '@payloadcms/ui/shared'
+import { getFolderData } from 'payload/shared'
 import React, { Fragment } from 'react'
 
 import type { DashboardViewClientProps, DashboardViewServerPropsOnly } from './Default/index.js'
 
 import { DefaultDashboard } from './Default/index.js'
+import { FolderDashboard } from './Folders/index.js'
 
 export { generateDashboardMetadata } from './meta.js'
 
@@ -108,7 +110,8 @@ export async function Dashboard({ initPageResult, params, searchParams }: AdminV
           locale,
         } satisfies DashboardViewClientProps,
         Component: config.admin?.components?.views?.dashboard?.Component,
-        Fallback: DefaultDashboard,
+        Fallback: FolderDashboard,
+        // Fallback: DefaultDashboard,
         importMap: payload.importMap,
         serverProps: {
           globalData,

packages/next/src/views/Document/handleServerFunction.tsx

@@ -28,6 +28,7 @@ export const renderDocumentHandler = async (args: {
   initialState?: FormState
   locale?: Locale
   overrideEntityVisibility?: boolean
+  redirectAfterCreate: boolean
   redirectAfterDelete: boolean
   redirectAfterDuplicate: boolean
   req: PayloadRequest
@@ -40,6 +41,7 @@ export const renderDocumentHandler = async (args: {
     initialData,
     locale,
     overrideEntityVisibility,
+    redirectAfterCreate,
     redirectAfterDelete,
     redirectAfterDuplicate,
     req,
@@ -165,6 +167,7 @@ export const renderDocumentHandler = async (args: {
       segments: ['collections', collectionSlug, docID],
     },
     payload,
+    redirectAfterCreate,
     redirectAfterDelete,
     redirectAfterDuplicate,
     searchParams: {},

packages/next/src/views/Document/index.tsx

@@ -43,6 +43,7 @@ export const renderDocument = async ({
   initPageResult,
   overrideEntityVisibility,
   params,
+  redirectAfterCreate,
   redirectAfterDelete,
   redirectAfterDuplicate,
   searchParams,
@@ -357,6 +358,7 @@ export const renderDocument = async ({
         key={locale?.code}
         lastUpdateTime={lastUpdateTime}
         mostRecentVersionIsAutosaved={mostRecentVersionIsAutosaved}
+        redirectAfterCreate={redirectAfterCreate}
         redirectAfterDelete={redirectAfterDelete}
         redirectAfterDuplicate={redirectAfterDuplicate}
         unpublishedVersionCount={unpublishedVersionCount}

packages/next/src/views/List/index.tsx

@@ -12,7 +12,7 @@ import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerCompo
 import { renderFilters, renderTable, upsertPreferences } from '@payloadcms/ui/rsc'
 import { formatAdminURL, mergeListSearchAndWhere } from '@payloadcms/ui/shared'
 import { notFound } from 'next/navigation.js'
-import { isNumber } from 'payload/shared'
+import { formatFilesize, isNumber } from 'payload/shared'
 import React, { Fragment } from 'react'
 
 import { renderListViewSlots } from './renderListViewSlots.js'
@@ -137,6 +137,13 @@ export const renderListView = async (
 
     const clientCollectionConfig = clientConfig.collections.find((c) => c.slug === collectionSlug)
 
+    if (clientCollectionConfig.upload) {
+      data.docs = data.docs.map((doc) => ({
+        ...doc,
+        filesize: formatFilesize(doc.filesize),
+      }))
+    }
+
     const { columnState, Table } = renderTable({
       clientCollectionConfig,
       collectionConfig,

packages/payload/src/admin/functions/index.ts

@@ -46,7 +46,7 @@ export type ListQuery = {
   search?: string
   sort?: Sort
   where?: Where
-}
+} & Record<string, unknown>
 
 export type BuildTableStateArgs = {
   collectionSlug: string | string[]

packages/payload/src/admin/views/index.ts

@@ -45,6 +45,8 @@ export type AdminViewServerPropsOnly = {
   readonly importMap: ImportMap
   readonly initialData?: Data
   readonly initPageResult: InitPageResult
+  readonly params?: { [key: string]: string | string[] | undefined }
+  readonly redirectAfterCreate?: boolean
   readonly redirectAfterDelete?: boolean
   readonly redirectAfterDuplicate?: boolean
 } & ServerProps

packages/payload/src/bin/generateImportMap/index.ts

@@ -85,7 +85,7 @@ export function addPayloadComponentToImportMap({
   importMap[componentPath + '#' + exportName] = importIdentifier
 }
 
-export type AddToImportMap = (payloadComponent: PayloadComponent | PayloadComponent[]) => void
+export type AddToImportMap = (payloadComponent?: PayloadComponent | PayloadComponent[]) => void
 
 export async function generateImportMap(
   config: SanitizedConfig,

packages/payload/src/collections/config/types.ts

@@ -255,6 +255,11 @@ export type AfterForgotPasswordHook = (args: {
   context: RequestContext
 }) => any
 
+export type EnableFoldersOptions = {
+  // Displays the folder collection and parentFolder field in the document view
+  debug?: boolean
+}
+
 export type BaseListFilter = (args: {
   limit: number
   locale?: TypedLocale
@@ -327,6 +332,10 @@ export type CollectionAdminOptions = {
    * Custom description for collection. This will also be used as JSDoc for the generated types
    */
   description?: EntityDescription
+  /**
+   * Changes the list view and adds parentFolder field to collection
+   */
+  enableFolders?: boolean | EnableFoldersOptions
   enableRichTextLink?: boolean
   enableRichTextRelationship?: boolean
   /**
@@ -532,8 +541,9 @@ export type SanitizedJoins = {
 export interface SanitizedCollectionConfig
   extends Omit<
     DeepRequired<CollectionConfig>,
-    'auth' | 'endpoints' | 'fields' | 'slug' | 'upload' | 'versions'
+    'admin' | 'auth' | 'endpoints' | 'fields' | 'slug' | 'upload' | 'versions'
   > {
+  admin: CollectionAdminOptions
   auth: Auth
   endpoints: Endpoint[] | false
   fields: Field[]