#3473656 Hovering on a slot in the layers menu throws disruptive console warnings due to incorrect logic in Outline.tsx

Closes #3473656

Problem:

Inside NameTag.tsx, there was a console.warning that ran if the component was not found in our model. Slots do not exist in the model so it kept printing the warnings. Inside Outline.tsx (which passes the elementId to NameTag.tsx), there was an existing check to set the nodeType to 'slot', which would theoretically prevent <NameTag/> from rendering due to a condition.

Cause: nodeType for a slot is wrongly set to component instead of slot due to the initial value being set to component and it never updating correctly.

Solution:

xbType from hoveredElementRef.current?.dataset.xbType doesn't exist on a slot (maybe at some point it did? xbComponentId is new to me). So I updated it to check xbComponentId instead.

Second thing is, the nodeType state in Outline.tsx is not the correct value on the initial render even if we change correctly to be slot in the useEffect. So the solution for that is to set the initial state of nodeType to null, then add it as another conditional to the render so it only renders after we have a non-null value for nodeType. (Line 132 in Outline.tsx)

UI change:

See gifs in issue summary. I changed the logic to render name tags for slots as well, it is just 'Slot' for now in purple to match the outline which I also changed to purple. (Passes a11y WCAG AA check) <if we don't like the purple we can also change it>