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

Implemented emoji detection system, new DocIcon component.

Author: olaurendeau

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to
 ### Added
 
 - 👷(CI) add bundle size check job #1268
+- ✨(frontend) use title first emoji as doc icon in tree
 
 ### Changed
 

Makefile

@@ -406,6 +406,10 @@ run-frontend-development: ## Run the frontend in development mode
 	cd $(PATH_FRONT_IMPRESS) && yarn dev
 .PHONY: run-frontend-development
 
+frontend-test: ## Run the frontend tests
+	cd $(PATH_FRONT_IMPRESS) && yarn test
+.PHONY: frontend-test
+
 frontend-i18n-extract: ## Extract the frontend translation inside a json to be used for crowdin
 	cd $(PATH_FRONT) && yarn i18n:extract
 .PHONY: frontend-i18n-extract

README.md

@@ -140,6 +140,12 @@ To start all the services, except the frontend container, you can use the follow
 $ make run-backend
 ```
 
+To execute frontend tests & linting only
+```shellscript
+$ make frontend-test
+$ make frontend-lint
+```
+
 **Adding content**
 
 You can create a basic demo site by running this command:

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

@@ -61,6 +61,31 @@ test.describe('Doc Header', () => {
     await verifyDocName(page, 'Hello World');
   });
 
+  test('it updates the title doc adding a leading emoji', 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 Emoji World');
+    await docTitle.blur();
+    await verifyDocName(page, '👍 Hello Emoji World');
+
+    // Check the tree
+    const docTree = page.getByTestId('doc-tree');
+    await expect(docTree.getByText('Hello Emoji World')).toBeVisible();
+    await expect(docTree.getByLabel('Document emoji icon')).toBeVisible();
+    await expect(docTree.getByLabel('Simple document icon')).toBeHidden();
+
+    await page.getByTestId('home-button').click();
+
+    // Check the documents grid
+    const gridRow = await getGridRow(page, 'Hello Emoji World');
+    await expect(gridRow.getByLabel('Document emoji icon')).toBeVisible();
+    await expect(gridRow.getByLabel('Simple document icon')).toBeHidden();
+  });
+
   test('it deletes the doc', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
 

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -136,9 +136,11 @@ export const getGridRow = async (page: Page, title: string) => {
 
   const rows = docsGrid.getByRole('row');
 
-  const row = rows.filter({
-    hasText: title,
-  });
+  const row = rows
+    .filter({
+      hasText: title,
+    })
+    .first();
 
   await expect(row).toBeVisible();
 

src/frontend/apps/impress/package.json

@@ -41,6 +41,7 @@
     "crisp-sdk-web": "1.0.25",
     "docx": "9.5.0",
     "emoji-mart": "5.6.0",
+    "emoji-regex": "10.4.0",
     "i18next": "25.3.2",
     "i18next-browser-languagedetector": "8.2.0",
     "idb": "8.0.3",

src/frontend/apps/impress/src/features/docs/doc-management/__tests__/utils.test.tsx

@@ -0,0 +1,264 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as Y from 'yjs';
+
+import { LinkReach, LinkRole, Role } from '../types';
+import {
+  base64ToBlocknoteXmlFragment,
+  base64ToYDoc,
+  currentDocRole,
+  getDocLinkReach,
+  getDocLinkRole,
+  getEmojiAndTitle,
+} from '../utils';
+
+// Mock Y.js
+vi.mock('yjs', () => ({
+  Doc: vi.fn().mockImplementation(() => ({
+    getXmlFragment: vi.fn().mockReturnValue('mocked-xml-fragment'),
+  })),
+  applyUpdate: vi.fn(),
+}));
+
+describe('doc-management utils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('currentDocRole', () => {
+    it('should return OWNER when destroy ability is true', () => {
+      const abilities = {
+        destroy: true,
+        accesses_manage: false,
+        partial_update: false,
+      } as any;
+
+      const result = currentDocRole(abilities);
+
+      expect(result).toBe(Role.OWNER);
+    });
+
+    it('should return ADMIN when accesses_manage ability is true and destroy is false', () => {
+      const abilities = {
+        destroy: false,
+        accesses_manage: true,
+        partial_update: false,
+      } as any;
+
+      const result = currentDocRole(abilities);
+
+      expect(result).toBe(Role.ADMIN);
+    });
+
+    it('should return EDITOR when partial_update ability is true and higher abilities are false', () => {
+      const abilities = {
+        destroy: false,
+        accesses_manage: false,
+        partial_update: true,
+      } as any;
+
+      const result = currentDocRole(abilities);
+
+      expect(result).toBe(Role.EDITOR);
+    });
+
+    it('should return READER when no higher abilities are true', () => {
+      const abilities = {
+        destroy: false,
+        accesses_manage: false,
+        partial_update: false,
+      } as any;
+
+      const result = currentDocRole(abilities);
+
+      expect(result).toBe(Role.READER);
+    });
+  });
+
+  describe('base64ToYDoc', () => {
+    it('should convert base64 string to Y.Doc', () => {
+      const base64String = 'dGVzdA=='; // "test" in base64
+      const mockYDoc = { getXmlFragment: vi.fn() };
+
+      (Y.Doc as any).mockReturnValue(mockYDoc);
+
+      const result = base64ToYDoc(base64String);
+
+      expect(Y.Doc).toHaveBeenCalled();
+      expect(Y.applyUpdate).toHaveBeenCalledWith(mockYDoc, expect.any(Buffer));
+      expect(result).toBe(mockYDoc);
+    });
+
+    it('should handle empty base64 string', () => {
+      const base64String = '';
+      const mockYDoc = { getXmlFragment: vi.fn() };
+
+      (Y.Doc as any).mockReturnValue(mockYDoc);
+
+      const result = base64ToYDoc(base64String);
+
+      expect(Y.Doc).toHaveBeenCalled();
+      expect(Y.applyUpdate).toHaveBeenCalledWith(mockYDoc, expect.any(Buffer));
+      expect(result).toBe(mockYDoc);
+    });
+  });
+
+  describe('base64ToBlocknoteXmlFragment', () => {
+    it('should convert base64 to Blocknote XML fragment', () => {
+      const base64String = 'dGVzdA==';
+      const mockYDoc = {
+        getXmlFragment: vi.fn().mockReturnValue('mocked-xml-fragment'),
+      };
+
+      (Y.Doc as any).mockReturnValue(mockYDoc);
+
+      const result = base64ToBlocknoteXmlFragment(base64String);
+
+      expect(Y.Doc).toHaveBeenCalled();
+      expect(Y.applyUpdate).toHaveBeenCalledWith(mockYDoc, expect.any(Buffer));
+      expect(mockYDoc.getXmlFragment).toHaveBeenCalledWith('document-store');
+      expect(result).toBe('mocked-xml-fragment');
+    });
+  });
+
+  describe('getDocLinkReach', () => {
+    it('should return computed_link_reach when available', () => {
+      const doc = {
+        computed_link_reach: LinkReach.PUBLIC,
+        link_reach: LinkReach.RESTRICTED,
+      } as any;
+
+      const result = getDocLinkReach(doc);
+
+      expect(result).toBe(LinkReach.PUBLIC);
+    });
+
+    it('should fallback to link_reach when computed_link_reach is not available', () => {
+      const doc = {
+        link_reach: LinkReach.AUTHENTICATED,
+      } as any;
+
+      const result = getDocLinkReach(doc);
+
+      expect(result).toBe(LinkReach.AUTHENTICATED);
+    });
+
+    it('should handle undefined computed_link_reach', () => {
+      const doc = {
+        computed_link_reach: undefined,
+        link_reach: LinkReach.RESTRICTED,
+      } as any;
+
+      const result = getDocLinkReach(doc);
+
+      expect(result).toBe(LinkReach.RESTRICTED);
+    });
+  });
+
+  describe('getDocLinkRole', () => {
+    it('should return computed_link_role when available', () => {
+      const doc = {
+        computed_link_role: LinkRole.EDITOR,
+        link_role: LinkRole.READER,
+      } as any;
+
+      const result = getDocLinkRole(doc);
+
+      expect(result).toBe(LinkRole.EDITOR);
+    });
+
+    it('should fallback to link_role when computed_link_role is not available', () => {
+      const doc = {
+        link_role: LinkRole.READER,
+      } as any;
+
+      const result = getDocLinkRole(doc);
+
+      expect(result).toBe(LinkRole.READER);
+    });
+
+    it('should handle undefined computed_link_role', () => {
+      const doc = {
+        computed_link_role: undefined,
+        link_role: LinkRole.EDITOR,
+      } as any;
+
+      const result = getDocLinkRole(doc);
+
+      expect(result).toBe(LinkRole.EDITOR);
+    });
+  });
+
+  describe('getEmojiAndTitle', () => {
+    it('should extract emoji and title when emoji is present at the beginning', () => {
+      const title = '🚀 My Awesome Document';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBe('🚀');
+      expect(result.titleWithoutEmoji).toBe('My Awesome Document');
+    });
+
+    it('should handle complex emojis with modifiers', () => {
+      const title = '👨‍💻 Developer Notes';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBe('👨‍💻');
+      expect(result.titleWithoutEmoji).toBe('Developer Notes');
+    });
+
+    it('should handle emojis with skin tone modifiers', () => {
+      const title = '👍 Great Work!';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBe('👍');
+      expect(result.titleWithoutEmoji).toBe('Great Work!');
+    });
+
+    it('should return null emoji and full title when no emoji is present', () => {
+      const title = 'Document Without Emoji';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBeNull();
+      expect(result.titleWithoutEmoji).toBe('Document Without Emoji');
+    });
+
+    it('should handle empty title', () => {
+      const title = '';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBeNull();
+      expect(result.titleWithoutEmoji).toBe('');
+    });
+
+    it('should handle title with only emoji', () => {
+      const title = '📝';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBe('📝');
+      expect(result.titleWithoutEmoji).toBe('');
+    });
+
+    it('should handle title with emoji in the middle (should not extract)', () => {
+      const title = 'My 📝 Document';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBeNull();
+      expect(result.titleWithoutEmoji).toBe('My 📝 Document');
+    });
+
+    it('should handle title with multiple emojis at the beginning', () => {
+      const title = '🚀📚 Project Documentation';
+
+      const result = getEmojiAndTitle(title);
+
+      expect(result.emoji).toBe('🚀');
+      expect(result.titleWithoutEmoji).toBe('📚 Project Documentation');
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+
+import { Text, TextType } from '@/components';
+
+type DocIconProps = TextType & {
+  emoji?: string | null;
+  defaultIcon: React.ReactNode;
+};
+
+export const DocIcon = ({
+  emoji,
+  defaultIcon,
+  $size = 'sm',
+  $variation = '1000',
+  $weight = '400',
+  ...textProps
+}: DocIconProps) => {
+  const { t } = useTranslation();
+
+  if (!emoji) {
+    return <>{defaultIcon}</>;
+  }
+
+  return (
+    <Text
+      {...textProps}
+      $size={$size}
+      $variation={$variation}
+      $weight={$weight}
+      aria-hidden="true"
+      aria-label={t('Document emoji icon')}
+    >
+      {emoji}
+    </Text>
+  );
+};