[desk-tool] Render basic timeline

packages/@sanity/desk-tool/src/panes/documentPane/DocumentPane.tsx

@@ -21,7 +21,7 @@ import {Timeline} from './history/timeline'
 import InspectView from './inspect/InspectView'
 import {ChangesPanel} from './changesPanel/ChangesPanel'
 import RevisionSummary from './RevisionSummary'
-import HistoryTimeline from './HistoryTimeline'
+import {HistoryTimelinePanel} from './historyTimelinePanel'
 import FormView from './FormView'
 import {Validation} from './Validation'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
@@ -314,7 +314,11 @@ function DocumentPane(props: Props) {
 
       <div className={styles.container}>
         {isHistoryOpen && (
-          <HistoryTimeline timeline={timeline} onSelect={time => toggleHistory(time)} />
+          <HistoryTimelinePanel
+            timeline={timeline}
+            onSelect={time => toggleHistory(time)}
+            startTimeId={startTimeId}
+          />
         )}
 
         <div className={styles.editorContainer} key="editor">

packages/@sanity/desk-tool/src/panes/documentPane/historyTimelinePanel/historyTimelinePanel.css

@@ -0,0 +1,31 @@
+.root {
+  /* display: block; */
+  overflow: auto;
+}
+
+.header {
+  padding: 1em;
+  font-weight: 700;
+}
+
+.item {
+  padding: 1em;
+
+  @nest &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  @nest &[data-selected='true'] {
+    background: #06f;
+    color: #fff;
+  }
+}
+
+.item__typeName {
+  /* display: block; */
+}
+
+.item__timestamp {
+  font-size: 13px;
+  line-height: 16px;
+}

packages/@sanity/desk-tool/src/panes/documentPane/historyTimelinePanel/historyTimelinePanel.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {format} from 'date-fns'
+import {Timeline, TimeRef} from '../history/timeline'
+
+import styles from './historyTimelinePanel.css'
+
+interface HistoryTimelinePanelProps {
+  timeline: Timeline
+  onSelect: (id: string) => void
+  startTimeId?: string
+}
+
+export function HistoryTimelinePanel(props: HistoryTimelinePanelProps) {
+  const {timeline, onSelect} = props
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>Timeline</div>
+
+      {timeline.mapChunks((chunk, idx) => {
+        const startTimeId = timeline.createTimeId(idx, chunk)
+        const isSelected = props.startTimeId === startTimeId
+
+        return (
+          <div
+            className={styles.item}
+            data-selected={isSelected}
+            key={chunk.id}
+            title={chunk.id}
+            onClick={evt => {
+              evt.preventDefault()
+              evt.stopPropagation()
+              onSelect(startTimeId)
+            }}
+          >
+            <div className={styles.item__typeName}>{chunk.type}</div>
+            <div className={styles.item__timestamp}>{format(chunk.startTimestamp)}</div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

packages/@sanity/desk-tool/src/panes/documentPane/historyTimelinePanel/index.ts

@@ -0,0 +1 @@
+export * from './historyTimelinePanel'