[desk-tool] update reference diff styling

packages/@sanity/desk-tool/src/diffs/hooks.ts

@@ -1,5 +1,12 @@
 import {useState, useEffect} from 'react'
 import client from 'part:@sanity/base/client'
+import {observeForPreview} from 'part:@sanity/base/preview'
+
+type PreviewSnapshot =
+  | {
+      title: string
+    }
+  | undefined
 
 export function getRefValue(refId: string | undefined) {
   const [value, setValue] = useState(undefined)
@@ -16,3 +23,22 @@ export function getRefValue(refId: string | undefined) {
   }, [refId])
   return value
 }
+
+export function useRefPreview(value, schemaType): PreviewSnapshot {
+  const [preview, setPreview] = useState(undefined)
+  useEffect(() => {
+    let subscription
+    if (value && schemaType) {
+      subscription = observeForPreview(value, schemaType).subscribe(result => {
+        setPreview(result.snapshot)
+      })
+    }
+
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe()
+      }
+    }
+  }, [value])
+  return preview
+}

packages/@sanity/desk-tool/src/diffs/reference/ReferenceFieldDiff.css

@@ -1,2 +1,61 @@
+@import 'part:@sanity/base/theme/variables-style';
+
 .root {
+  @nest &[data-diff-layout="double"] {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+}
+
+.arrow {
+  display: flex;
+  padding: 0 var(--small-padding);
+  flex: 0;
+  align-items: center;
+  font-size: var(--font-size-large);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: var(--small-padding);
+  border-radius: var(--border-radius-small);
+  composes: small from 'part:@sanity/base/theme/typography/text-blocks-style';
+  display: grid;
+  grid-template-areas: 'icon meta';
+  grid-template-columns: auto 1fr;
+
+  @nest & .info {
+    overflow: hidden;
+    line-height: 1.5;
+    padding-left: var(--small-padding);
+  }
+
+  @nest & .title {
+    font-size: inherit;
+    font-weight: 600;
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  @nest & .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(var(--font-size-large) + 16px);
+  }
+}
+
+.meta[data-action="added"] {
+  /*  */
+}
+
+.meta[data-action="removed"] {
+
+  @nest & .title {
+    text-decoration: line-through;
+  }
 }

packages/@sanity/desk-tool/src/diffs/reference/ReferenceFieldDiff.tsx

@@ -1,24 +1,54 @@
-import * as React from 'react'
-import Preview from 'part:@sanity/base/preview?'
+import React from 'react'
 import {DiffComponent, ReferenceDiff, DiffAnnotation} from '@sanity/field/diff'
+import LinkIcon from 'part:@sanity/base/link-icon'
+import ArrowIcon from 'part:@sanity/base/arrow-right'
+import {useRefPreview} from '../hooks'
 import styles from './ReferenceFieldDiff.css'
 
+const ReferenceDetails = ({diff, title, action}) => {
+  return (
+    <DiffAnnotation as="div" diff={diff} path="_ref" className={styles.meta} data-action={action}>
+      <div className={styles.icon}>
+        <LinkIcon />
+      </div>
+      <div className={styles.info}>
+        <h3 className={styles.title} title={title}>
+          {title}
+        </h3>
+        <div>{action}</div>
+      </div>
+    </DiffAnnotation>
+  )
+}
+
 export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
   const {fromValue, toValue} = diff
-  const prev = fromValue && fromValue._ref
-  const next = toValue && toValue._ref
+  const prev = fromValue && useRefPreview(fromValue, schemaType)
+  const next = toValue && useRefPreview(toValue, schemaType)
 
   return (
-    <DiffAnnotation as="div" className={styles.root} diff={diff} path="_ref">
+    <div className={styles.root} data-diff-layout={prev && next ? 'double' : 'single'}>
       {prev && (
-        <div className={styles.removed}>
-          <Preview type={schemaType} value={fromValue} layout="default" />
-        </div>
+        <ReferenceDetails
+          diff={diff}
+          title={prev.title || 'Untitled'}
+          action={prev && next ? 'changed' : 'removed'}
+        />
       )}
 
-      {prev && <div>⇩</div>}
+      {prev && next && (
+        <div className={styles.arrow}>
+          <ArrowIcon />
+        </div>
+      )}
 
-      {next && <Preview type={schemaType} value={toValue} layout="default" />}
-    </DiffAnnotation>
+      {next && (
+        <ReferenceDetails
+          diff={diff}
+          title={next.title || 'Untitled'}
+          action={prev && next ? 'changed' : 'added'}
+        />
+      )}
+    </div>
   )
 }