Make the embedded UI look the same as the rest of the content

type: #Project
status: Ready to review
owner:
@z6Mks...ESQGx

Problem

Embeds are ugly again. we need to improve its UI and make it more usable.

Solution

Sidenotes for Embed annotations.

we will add a sidenote annotation for each embed we render in the app. this sidenote annotation will have mostly metadata.
In the future we might also add other controls like visibility on multiple variants or something useful. (not required for this project)
mockup of sidenote annotation

Improve left alignment.

the current left alignment is off. we need to make the embedded content look as similar as the actual content. the visual indicator that embed will have to differentiate them is a colored line on one side (side TBD).

Embedded Title/Heading should have the same design as the rest of the headings.

The embed heading/title should be smaller than its parent block heading.

Rabbit Holes

TBD

No-Gos

TBD