From e50daa3ba77d53ad345d671f4500f07d509da655 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Tue, 10 Aug 2021 18:23:50 +0200
Subject: [PATCH] Projects in OutlinePanel have a conflict indicator

---
 .../src/panels/OutlinePanel/BaseItem.tsx      |  4 ++-
 .../ProjectsList/ProjectListItem.tsx          | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index d47be71..d90cb55 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -155,7 +155,8 @@ const BaseItem: React.FC<{
   select?: VoidFn
   depth: number
   selectionStatus: SelectionStatus
-}> = ({label, children, depth, select, selectionStatus}) => {
+  labelDecoration?: React.ReactNode
+}> = ({label, children, depth, select, selectionStatus, labelDecoration}) => {
   const canContainChildren = children !== undefined
 
   return (
@@ -177,6 +178,7 @@ const BaseItem: React.FC<{
         </Head_IconContainer>
 
         <Head_Label>{label}</Head_Label>
+        {labelDecoration}
       </Header>
       {canContainChildren && <ChildrenContainer>{children}</ChildrenContainer>}
     </Container>
diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
index 1741919..b529ee9 100644
--- a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
@@ -5,21 +5,46 @@ import SheetsList from '@theatre/studio/panels/OutlinePanel/SheetsList/SheetsLis
 import getStudio from '@theatre/studio/getStudio'
 import {usePrism} from '@theatre/dataverse-react'
 import {getOutlineSelection} from '@theatre/studio/selectors'
+import {val} from '@theatre/dataverse'
+import styled from 'styled-components'
+
+const ConflictNotice = styled.div`
+  color: #ff6363;
+  margin-left: 11px;
+  background: #ff00002b;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 10px;
+  box-shadow: 0 2px 8px -4px black;
+`
 
 const ProjectListItem: React.FC<{
   depth: number
   project: Project
 }> = ({depth, project}) => {
   const selection = usePrism(() => getOutlineSelection(), [])
+
+  const hasConflict = usePrism(() => {
+    const projectId = project.address.projectId
+    const loadingState = val(
+      getStudio().atomP.ephemeral.coreByProject[projectId].loadingState,
+    )
+    return loadingState?.type === 'browserStateIsNotBasedOnDiskState'
+  }, [project])
+
   const select = useCallback(() => {
     getStudio().transaction(({stateEditors}) => {
       stateEditors.studio.historic.panels.outline.selection.set([project])
     })
   }, [project])
+
   return (
     <BaseItem
       depth={depth}
       label={project.address.projectId}
+      labelDecoration={
+        hasConflict ? <ConflictNotice>Has Conflicts</ConflictNotice> : null
+      }
       children={<SheetsList project={project} depth={depth + 1} />}
       selectionStatus={
         selection.includes(project)