Project conflict indicators in outline panel

* OutlinePanel has a badge showing the number of conflicting projects
* Each project list item gets a highlight if it has conflicts
* Refactored Popover to prepare to merge it with tooltips

packages/plugin-r3f/src/components/SnapshotEditor.tsx

@@ -134,10 +134,11 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
             <Overlay>
               <Tools>
                 <ToolbarIconButton
-                  icon={<IoCameraReverseOutline />}
-                  label="Refresh Snapshot"
+                  title="Refresh Snapshot"
                   onClick={createSnapshot}
-                ></ToolbarIconButton>
+                >
+                  <IoCameraReverseOutline />
+                </ToolbarIconButton>
               </Tools>
             </Overlay>
 

packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx

@@ -26,9 +26,10 @@ const Toolbar: VFC = () => {
         onClick={() => {
           studio.createPane('snapshotEditor')
         }}
-        icon={<IoCameraOutline />}
-        label="Create snapshot"
-      />
+        title="Create snapshot"
+      >
+        <IoCameraOutline />
+      </ToolbarIconButton>
       <TransformControlsModeSelect
         value={transformControlsMode}
         onChange={(value) =>