User can now choose to override browser's state from that of disk's, or vice versa

theatre/core/src/projects/initialiseProjectState.ts

@@ -83,7 +83,7 @@ export default async function initialiseProjectState(
       } else {
         if (
           browserState.revisionHistory.indexOf(
-            onDiskState.revisionHistory[onDiskState.revisionHistory.length - 1],
+            onDiskState.revisionHistory[0],
           ) == -1
         ) {
           browserStateIsNotBasedOnDiskState(onDiskState)

theatre/studio/src/StudioStore/StudioStore.ts

@@ -27,8 +27,8 @@ import type {Store} from 'redux'
 import {persistStateOfStudio} from './persistStateOfStudio'
 import {isSheetObject} from '@theatre/shared/instanceTypes'
 import globals from '@theatre/shared/globals'
-import {nanoid} from 'nanoid'
 import type {OnDiskState} from '@theatre/core/projects/store/storeTypes'
+import {generateDiskStateRevision} from './generateDiskStateRevision'
 
 export type Drafts = {
   historic: Draft<StudioHistoricState>
@@ -273,17 +273,14 @@ export default class StudioStore {
   }
 
   createExportedStateOfProject(projectId: string): OnDiskState {
-    const revision = nanoid(16)
+    const revision = generateDiskStateRevision()
     // let's assume projectId is already loaded
 
-    this.tempTransaction(({drafts}) => {
-      const state = drafts.historic.coreByProject[projectId]
-
-      const maxNumOfRevisionsToKeep = 50
-      state.revisionHistory.unshift(revision)
-      if (state.revisionHistory.length > maxNumOfRevisionsToKeep) {
-        state.revisionHistory.length = maxNumOfRevisionsToKeep
-      }
+    this.tempTransaction(({stateEditors}) => {
+      stateEditors.coreByProject.historic.revisionHistory.add({
+        projectId,
+        revision,
+      })
     }).commit()
 
     const projectHistoricState =

theatre/studio/src/StudioStore/generateDiskStateRevision.ts

@@ -0,0 +1,5 @@
+import {nanoid} from 'nanoid'
+
+export function generateDiskStateRevision() {
+  return nanoid(16)
+}

theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx

@@ -1,5 +1,8 @@
 import type Project from '@theatre/core/projects/Project'
+import {val} from '@theatre/dataverse'
+import {usePrism} from '@theatre/dataverse-react'
 import getStudio from '@theatre/studio/getStudio'
+import {generateDiskStateRevision} from '@theatre/studio/StudioStore/generateDiskStateRevision'
 import React, {useCallback, useState} from 'react'
 
 const ProjectDetails: React.FC<{
@@ -7,6 +10,42 @@ const ProjectDetails: React.FC<{
 }> = ({projects}) => {
   const project = projects[0]
 
+  const projectId = project.address.projectId
+  const nn = usePrism(() => {
+    const loadingState = val(
+      getStudio().atomP.ephemeral.coreByProject[projectId].loadingState,
+    )
+    if (!loadingState) return
+    if (loadingState.type === 'browserStateIsNotBasedOnDiskState') {
+      const useBrowserState = () => {
+        getStudio().transaction(({stateEditors}) => {
+          stateEditors.coreByProject.historic.revisionHistory.add({
+            projectId,
+            revision: loadingState.onDiskState.revisionHistory[0],
+          })
+
+          stateEditors.coreByProject.historic.revisionHistory.add({
+            projectId,
+            revision: generateDiskStateRevision(),
+          })
+        })
+      }
+
+      const useOnDiskState = () => {
+        getStudio().transaction(({drafts}) => {
+          drafts.historic.coreByProject[projectId] = loadingState.onDiskState
+        })
+      }
+      return (
+        <div>
+          Browser state is not based on disk state.
+          <button onClick={useBrowserState}>Use browser's state</button>
+          <button onClick={useOnDiskState}>Use disk state</button>
+        </div>
+      )
+    }
+  }, [project])
+
   const [downloaded, setDownloaded] = useState(false)
 
   const exportProject = useCallback(() => {
@@ -35,6 +74,8 @@ const ProjectDetails: React.FC<{
   }, [])
 
   return (
+    <>
+      {nn}
       <div>
         <button
           onClick={!downloaded ? exportProject : undefined}
@@ -43,6 +84,7 @@ const ProjectDetails: React.FC<{
           Export project {downloaded ? 'Done' : ''}
         </button>
       </div>
+    </>
   )
 }
 

theatre/studio/src/store/stateEditors.ts

@@ -363,6 +363,18 @@ namespace stateEditors {
   }
   export namespace coreByProject {
     export namespace historic {
+      export namespace revisionHistory {
+        export function add(p: ProjectAddress & {revision: string}) {
+          const revisionHistory =
+            drafts().historic.coreByProject[p.projectId].revisionHistory
+
+          const maxNumOfRevisionsToKeep = 50
+          revisionHistory.unshift(p.revision)
+          if (revisionHistory.length > maxNumOfRevisionsToKeep) {
+            revisionHistory.length = maxNumOfRevisionsToKeep
+          }
+        }
+      }
       export namespace sheetsById {
         export function _ensure(
           p: WithoutSheetInstance<SheetAddress>,