✨(frontend) display pin on top of doc emoji or default icon

[olaurendeau]

Purpose

This PR propose to handle the pinned document case raised here by @AntoLC

Proposal

• Put a pin in the top right corner of the emoji or default icon
• Also display the pin in the left panel where pinned items are

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]

Hey @olaurendeau
Thanks again for this great contribution. My document trees are a lot nicer thanks to you :)
I just had design meeting with @rl-83
I personnaly thought that you could apply emojis to only sub-docs which makes the tree more readable and friendly.
We want to make a couple enhancements on your feature.
First on how you select an emoji for the page. Instead of inserting an emoji the title we'd like for the user to click on the sub-doc icon and choose emoji (type to search emoji).
Then we're not in favor of allowing emojis on the parent document because the document icon is important in the UI for users to recognize the document type especially from apps like Drive.
@rl-83 will propose a design ?
Would you like to help us on making the adjustments ?

[rl-83]

Here is my proposal to update the design

Change summary

• Add an emoji picker to quickly change a sub-document’s icon.
• Disable emojis on the parent document and on all top-level (index) documents.

Rationale

• In a wiki, prefixing some pages with emojis can improve scannability and comprehension.
• Replacing a top-level document’s default icon with an emoji can obscure its “document” affordance and make users think it’s another object—especially for items surfaced in Drive, where we must clearly indicate they’re text documents.
• A homepage crowded with emojis becomes visually noisy and can hurt recognition; this only works if emojis are used sparingly (we can’t guarantee that).
• We can take the time to imagine smarter ways to differentiate documents on the homepage (color, emoji into the page-icon, ...). For now, placing a smaller emoji in the page title seems sufficient.

[virgile-dev]

Thanks @rl-83 for the updated proposal.
Is your emoji picoler the one from the user’s OS ? could we have a way to search for emojis ? Thanks !

[olaurendeau]

Hi @rl-83,
Thanks for this design proposal, what about the page title field, should we still display the emoji in it and allow users to edit the emoji from there ?

@AntoLC
Emoji Picker : Should we simply trigger the OS Emoji picker or add a web one (I see that emoji-mart is already available) ?

Storage : Based on Robin's design we could lean toward separating the emoji & title backend storage, however I would rather try to stick with the current solution (emoji can be the first char of the title) until we land a satisfying UX. WDYT ?

@sampaccoud added a feature request also about this, may should we bring back the discussion in the original issue ?

[rl-83]

Hey @olaurendeau, good idea! It would be also nice to update the emoji in the title by clicking the existing emoji within a button like in the side panel.
My updated proposal

[AntoLC]

@AntoLC Emoji Picker : Should we simply trigger the OS Emoji picker or add a web one (I see that emoji-mart is already available) ?

Storage : Based on Robin's design we could lean toward separating the emoji & title backend storage, however I would rather try to stick with the current solution (emoji can be the first char of the title) until we land a satisfying UX. WDYT ?

@sampaccoud added a feature request also about this, may should we bring back the discussion in the original issue ?

It was a simple dev that is going to be over-engineering for a simple emoji in the title I find..
We can :

• add a emoji in the title by ourself
• have a emoji picker in the title if not a top parent
• have a emoji picker in the tree
• have a emoji picker trigger from the action menu apparently as well, same if not a top parent

Yes we use "emoji-mart", mainly because Blocknote use it at the base to keep some consistency, but emoji-mart is not well maintain, I have often to debug it.
The icon in the interlink has to be replaced as well, it is here:

docs/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

Lines 74 to 75 in 55ac0ce

	<SelectedPageIcon width={11.5} />
	<Text $weight="500" spellCheck="false" $size="16px" $display="inline">

[olaurendeau]

Hello @virgile-dev @rl-83 & @AntoLC ,
I've developed the proposed solution in this PR #1381 (that is pretty heavy 😬 )
I think we can close this one ?

[virgile-dev]

Thanks @olaurendeau we’ll review your new PR asap !