From 9400aa12a17379b909d9e3699c5977fb124187cb Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Mon, 16 May 2022 13:38:00 -0400
Subject: [PATCH] refactor: Assorted VFCs, dead code removal, use Nominals in
 ahistoric

---
 theatre/studio/src/UIRoot/PanelsRoot.tsx                 | 2 +-
 .../panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx   | 2 +-
 .../panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx   | 2 +-
 .../SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx      | 5 +----
 .../SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx     | 5 -----
 theatre/studio/src/store/types/ahistoric.ts              | 9 ++++++---
 6 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx
index a5d8a43..ee6bef1 100644
--- a/theatre/studio/src/UIRoot/PanelsRoot.tsx
+++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx
@@ -6,7 +6,7 @@ import {useVal} from '@theatre/react'
 import ExtensionPaneWrapper from '@theatre/studio/panels/BasePanel/ExtensionPaneWrapper'
 import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 
-const PanelsRoot: React.FC = () => {
+const PanelsRoot: React.VFC = () => {
   const panes = useVal(getStudio().paneManager.allPanesD)
   const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => {
     return (
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx
index 96821b5..0ded8ca 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
   right: 0;
 `
 
-const DopeSheet: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
+const DopeSheet: React.VFC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
   layoutP,
 }) => {
   const height = useVal(layoutP.dopeSheetDims.height)
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx
index 6a2f3ae..61af0bf 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx
@@ -18,7 +18,7 @@ const ListContainer = styled.ul`
   list-style: none;
 `
 
-const Left: React.FC<{
+const Left: React.VFC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
 }> = ({layoutP}) => {
   return usePrism(() => {
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx
index 9290cab..4845e48 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx
@@ -1,12 +1,9 @@
 import type {SequenceEditorTree_Sheet} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
 import {usePrism} from '@theatre/react'
 import React from 'react'
-import styled from 'styled-components'
 import SheetObjectRow from './SheetObjectRow'
 
-const Container = styled.div``
-
-const SheetRow: React.FC<{
+const SheetRow: React.VFC<{
   leaf: SequenceEditorTree_Sheet
 }> = ({leaf}) => {
   return usePrism(() => {
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx
index e1fa7a0..ba13d95 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx
@@ -3,18 +3,13 @@ import type {SequenceEditorTree_Sheet} from '@theatre/studio/panels/SequenceEdit
 import {usePrism} from '@theatre/react'
 import type {Pointer} from '@theatre/dataverse'
 import React from 'react'
-import styled from 'styled-components'
 import SheetObjectRow from './SheetObjectRow'
 
-const Container = styled.div``
-
 const SheetRow: React.FC<{
   leaf: SequenceEditorTree_Sheet
   layoutP: Pointer<SequenceEditorPanelLayout>
 }> = ({leaf, layoutP}) => {
   return usePrism(() => {
-    const node = <div />
-
     return (
       <>
         {leaf.children.map((sheetObjectLeaf) => (
diff --git a/theatre/studio/src/store/types/ahistoric.ts b/theatre/studio/src/store/types/ahistoric.ts
index c3c5768..a38e9e8 100644
--- a/theatre/studio/src/store/types/ahistoric.ts
+++ b/theatre/studio/src/store/types/ahistoric.ts
@@ -1,6 +1,9 @@
 import type {ProjectState} from '@theatre/core/projects/store/storeTypes'
 import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Historic'
-import type {ProjectId} from '@theatre/shared/utils/ids'
+import type {
+  ProjectId,
+  SheetId,
+} from '@theatre/shared/utils/ids'
 import type {IRange, StrictRecord} from '@theatre/shared/utils/types'
 
 export type StudioAhistoricState = {
@@ -18,10 +21,10 @@ export type StudioAhistoricState = {
   }
   projects: {
     stateByProjectId: StrictRecord<
-      string,
+      ProjectId,
       {
         stateBySheetId: StrictRecord<
-          string,
+          SheetId,
           {
             sequence?: {
               /**