feat(next): updated version view

package.json

@@ -60,7 +60,7 @@
     "clean:build": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
     "clean:build:allowtgz": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/meta_*.json'",
     "clean:cache": "node ./scripts/delete-recursively.js node_modules/.cache! packages/payload/node_modules/.cache! .next/*",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts",
+    "dev": "cross-env NODE_OPTIONS=\"--no-deprecation --max-old-space-size=16384\" tsx ./test/dev.ts",
     "dev:generate-db-schema": "pnpm runts ./test/generateDatabaseSchema.ts",
     "dev:generate-graphql-schema": "pnpm runts ./test/generateGraphQLSchema.ts",
     "dev:generate-importmap": "pnpm runts ./test/generateImportMap.ts",

packages/next/package.json

@@ -94,7 +94,6 @@
     "http-status": "2.1.0",
     "path-to-regexp": "6.3.0",
     "qs-esm": "7.0.2",
-    "react-diff-viewer-continued": "4.0.5",
     "sass": "1.77.4",
     "uuid": "10.0.0"
   },

packages/next/src/views/Version/Default/SetStepNav.tsx

@@ -1,6 +1,11 @@
 'use client'
 import type { StepNavItem } from '@payloadcms/ui'
-import type { ClientCollectionConfig, ClientField, ClientGlobalConfig } from 'payload'
+import type {
+  ClientCollectionConfig,
+  ClientField,
+  ClientGlobalConfig,
+  TypeWithVersion,
+} from 'payload'
 import type React from 'react'
 
 import { getTranslation } from '@payloadcms/translations'
@@ -12,7 +17,7 @@ import { useEffect } from 'react'
 export const SetStepNav: React.FC<{
   readonly collectionConfig?: ClientCollectionConfig
   readonly collectionSlug?: string
-  readonly doc: any
+  readonly doc: TypeWithVersion<any>
   readonly fields: ClientField[]
   readonly globalConfig?: ClientGlobalConfig
   readonly globalSlug?: string
@@ -36,20 +41,19 @@ export const SetStepNav: React.FC<{
 
       const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id'
       const pluralLabel = collectionConfig?.labels?.plural
-      const formattedDoc = doc.version ? doc.version : doc
 
-      if (formattedDoc) {
+      if (doc.version) {
         if (useAsTitle !== 'id') {
           const titleField = fields.find((f) => {
             const fieldName = 'name' in f ? f.name : undefined
             return Boolean(fieldAffectsData(f) && fieldName === useAsTitle)
           })
 
-          if (titleField && formattedDoc[useAsTitle]) {
+          if (titleField && doc.version[useAsTitle]) {
             if ('localized' in titleField && titleField.localized) {
-              docLabel = formattedDoc[useAsTitle]?.[locale.code]
+              docLabel = doc.version[useAsTitle]?.[locale.code]
             } else {
-              docLabel = formattedDoc[useAsTitle]
+              docLabel = doc.version[useAsTitle]
             }
           } else {
             docLabel = `[${t('general:untitled')}]`

packages/next/src/views/Version/Default/index.scss

@@ -5,72 +5,143 @@
     width: 100%;
     padding-bottom: var(--spacing-view-bottom);
 
-    &__wrap {
-      padding-top: calc(var(--base) * 1.5);
-      display: flex;
-      flex-direction: column;
-      gap: var(--base);
-    }
+    &-controls-top {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
 
-    &__header-wrap {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
-    }
+      &__wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
 
-    &__header {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+        &-actions {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: var(--base);
+        }
+      }
 
       h2 {
-        margin: 0;
+        font-size: 18px;
       }
     }
 
-    &__created-at {
-      margin: 0;
-      color: var(--theme-elevation-500);
-    }
+    &-controls-bottom {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
+      position: relative;
 
-    &__controls {
-      display: flex;
-      gap: var(--base);
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
+      }
+
+      &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--base);
+        gap: var(--base);
+      }
+
+      &__version-from {
+      }
 
-      > * {
-        flex-basis: 100%;
+      &__version-to {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--base);
+
+        h2 {
+          font-size: 13px;
+          font-weight: 400;
+        }
       }
     }
 
     &__restore {
       margin: 0 0 0 var(--base);
+      div {
+        margin-block: 0;
+      }
     }
 
     &__modifiedCheckBox {
       margin: 0 0 0 var(--base);
+      display: flex;
+      align-items: center;
     }
 
-    @include mid-break {
-      &__intro,
-      &__header {
-        display: block;
+    &__diff-wrap {
+      padding-top: calc(var(--base) * 1.5);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      position: relative;
+
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
+        z-index: 2;
       }
+    }
 
+    @include mid-break {
       &__controls {
         flex-direction: column;
         gap: calc(var(--base) / 4);
       }
 
-
       &__restore {
         margin: calc(var(--base) * 0.5) 0 0 0;
       }
+
+      &-controls-top {
+        &__wrapper {
+          flex-direction: column;
+          align-items: flex-start;
+
+          .view-version__modifiedCheckBox {
+            margin-left: 0;
+          }
+        }
+      }
+
+      &-controls-bottom {
+        &__version-from {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        &__version-to {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0;
+        }
+      }
     }
 
     @include small-break {
-      &__wrap {
+      &__diff-wrap {
         padding-top: calc(var(--base) / 2);
-        gap: calc(var(--base) / 2);
       }
     }
   }