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<{ {label} + {labelDecoration} {canContainChildren && {children}} 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 ( Has Conflicts : null + } children={} selectionStatus={ selection.includes(project)