✨(frontend) adjust doc emoji behaviour and introduce emoji picker

[olaurendeau]

Purpose

Adjust the behaviors of Doc title emojis in Home page, Doc tree and Doc editor following discussion on #1358 (comment)
Here is a video displaying those new behaviours

Proposal

• Home page - remove standard icon replacement by doc emoji
• Doc header - emoji picker before the title + removal button in menu
• Doc Tree - emoji picker before the title + removal button in menu
• Interlinking - Display emoji instead of standard icon
• Multiple EmojiPicker Problem : It was possible to trigger multiple picker from Callout or DocIcon, adding an overlay to close the picker fixed the issue.

Illustrations

External contributions

Thank you for your contribution! 🎉

Please ensure the following items are checked before submitting your pull request:

• I have read and followed the contributing guidelines
• I have read and agreed to the Code of Conduct
• I have signed off my commits with git commit --signoff (DCO compliance)
• I have signed my commits with my SSH or GPG key (git commit -S)
• My commit messages follow the required format: <gitmoji>(type) title description
• I have added a changelog entry under ## [Unreleased] section (if noticeable change)
• I have added corresponding tests for new features or bug fixes (if applicable)

[virgile-dev]

Thanks @olaurendeau !
I've just finalized the design spec with @rl-83
It's not far from what you made, just a few adjustments.
Here the figma link : https://www.figma.com/design/qdCWR4tTUr7vQSecEjCyqO/DOCS?node-id=10819-16516&t=qMesCig19Quww17S-1
@rl-83 will ping you here once he is finished.

[AntoLC]

It works well ! Thank you 🎉
Mainly minor comments.

Under the Figma url, to be iso with what has made @rl-83 :
https://www.figma.com/design/qdCWR4tTUr7vQSecEjCyqO/DOCS?node-id=10856-18743&t=YHWKAzs0R27yHARe-0

[AntoLC]

Is it necessary ? The picker has already onClickOutside, without this part the picker seems to close correctly when click outside.

[olaurendeau]

onClickOutside is working fine for everything but the emoji button. There's maybe a better way to handle this issue ?
Example with the callout component :

[AntoLC]

I am not sure why adding another div inside, by adding this margin we differ from the design inside Figma.

Suggested change

	<Box
	$display="inline-block"
	$css={css`
	margin-right: 0.3rem;
	`}
	>
	{emoji ? (
	<Icon iconName={emoji} $size="16px" />
	) : (
	<SelectedPageIcon width={11.5} />
	)}
	</Box>
	{emoji ? (
	<Icon iconName={emoji} $size="16px" />
	) : (
	<SelectedPageIcon width={11.5} />
	)}

[olaurendeau]

Without the additional margin-right it felt different than the tree. And too tight IMO.
Tree :

Interlinking without margin :

Interlinking with margin : (It also feel misaligned now that I look back at it)

[AntoLC]

Seems quite big compare to the design: https://www.figma.com/design/qdCWR4tTUr7vQSecEjCyqO/DOCS?node-id=10856-18743&t=P220L7GmYxjlkESr-0

[olaurendeau]

Indeed I took some liberty !
Here is the updated version, WDYT ?

[AntoLC]

In our process we try to have the design provided as the single source of truth, it make it easier for design integration and then review. That say, you are welcome to add a comment in the Figma to say to Robin that you find that it would better in one way or another.

[olaurendeau]

@AntoLC thanks for your review, I've answered or fixed your remarks.

@rl-83 any feedback ?

[AntoLC]

Some minor comments.

I will prepare a environment for Robin to review, I think it would be only next week though.

[olaurendeau]

Ok @AntoLC I believe that I've taken into consideration all your comments !
Eager to hear back from @rl-83 & @virgile-dev