✨(frontend) use title leading emoji as doc icon in tree

[olaurendeau]

Purpose

This pull request intent to fix this issue.
If the first unicode char of a title is an emoji, this emoji will replace the standard icon in the tree.

Proposal

I have made use of the library emoji-regex, because I didn't find a solution simple enough with a regex which would be compatible with ES5.

I took the liberty to add a make frontend-test command.

E2E Frontend test are failing, not sure it relates to this PR. I also had to increase the GitHub Action timeout so that it complete.

External contributions

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)

[AntoLC]

It is quite nice !

---

A few comments, plus 2 more things:

• Do you know how to use Playwright ?
  If yes could you write a test e2e about the feature ? I think by updating this test could do the job:
  

  docs/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

  Lines 55 to 62 in 781c85b

  	test('it updates the title doc', async ({ page, browserName }) => {
  	await createDoc(page, 'doc-update', browserName, 1);
  	const docTitle = page.getByRole('textbox', { name: 'doc title input' });
  	await expect(docTitle).toBeVisible();
  	await docTitle.fill('Hello World');
  	await docTitle.blur();
  	await verifyDocName(page, 'Hello World');
  	});

• I can see you are merging main in the branch, could you rebase it instead as we prefer a linear history? Thanks!

[AntoLC]

This part is not managed, if the document is pinned the emoji will not display.
We could eventually create a svg with only the "pin" icon and add it on the top right, wdyt ?

docs/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

Lines 62 to 67 in 1c6c58a

	{isPinned ? (
	<PinnedDocumentIcon
	aria-hidden="true"
	aria-label={t('Pin document icon')}
	color={colorsTokens['primary-500']}
	/>

[olaurendeau]

Hi @AntoLC,
Thanks for the thorough review !
Indeed there is something off with the pinned docs.
Do you mean something like this (with a proper pin icon of course)

[AntoLC]

I was thinking more about something like that ?

@rl-83 @virgile-dev WDYT ?

[olaurendeau]

Hi @AntoLC,
I think I've take into consideration all your comments. For the e2e tests I find it difficult to understand how to run them, so I took the liberty to turn the README into something easier for me to understand (and added a few more Make commands).
Let me know what you think !

[AntoLC]

About this commit (📝(frontend) propose a condensed version of the frontend README), I think we should do it in an other PR, it is a bit out of scope, it will be easier for review.

About this commit (✨(frontend) leading emoji in title, PR feedback applied), can it be a fixup commit instead, because its only purpose is fixing this commit ✨(frontend) use title first emoji as doc icon in tree.

[olaurendeau]

About this commit (📝(frontend) propose a condensed version of the frontend README), I think we should do it in an other PR, it is a bit out of scope, it will be easier for review.

Removed. Moved here #1318

About this commit (✨(frontend) leading emoji in title, PR feedback applied), can it be a fixup commit instead, because its only purpose is fixing this commit ✨(frontend) use title first emoji as doc icon in tree.

CI does seems happy about this fixup commit