(core) Detect when a page initial is an emoji, avoid repeating it, and style it better

Summary:
- Detecting emoji is surprisingly tricky; we use a fancy regex as a decent heuristic.
- Icons are a little larger than before.
- Styling tweaked for light and dark modes
- In case the OS doesn't render the emoji as one character, truncate what's
  shown in the icon box.

Test Plan: Added a test case.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3904

test/nbrowser/Pages.ts

@@ -259,6 +259,42 @@ describe('Pages', function() {
     assert.include(await gu.getPageNames(), 'People');
   });
 
+  it('should pull out emoji from page names', async () => {
+    // A regular character is used as an initial AND kept in the name.
+    assert.deepEqual(await getInitialAndName(/People/), ['P', 'People']);
+
+    // It looks like our version of Chromedriver does not support sending emojis using sendKeys
+    // (issue mentioned here https://stackoverflow.com/a/59139690), so we'll use executeScript to
+    // rename pages.
+    async function renamePage(origName: string, newName: string) {
+      await gu.openPageMenu(origName);
+      await driver.find('.test-docpage-rename').doClick();
+      const editor = await driver.find('.test-docpage-editor');
+      await driver.executeScript((el: HTMLInputElement, text: string) => { el.value = text; }, editor, newName);
+      await editor.sendKeys(Key.ENTER);
+      await gu.waitForServer();
+    }
+
+    async function getInitialAndName(pageName: string|RegExp): Promise<[string, string]> {
+      return await driver.findContent('.test-treeview-itemHeader', pageName)
+      .findAll('.test-docpage-initial, .test-docpage-label', el => el.getText()) as [string,
+        string];
+    }
+
+    // An emoji is pulled into the initial, and is removed from the name.
+    await renamePage('People', '👥 People');
+
+    assert.deepEqual(await getInitialAndName(/People/), ['👥', 'People']);
+
+    // Two complex emojis -- the first one is the pulled-out initial.
+    await renamePage('People', '👨‍👩‍👧‍👦👨‍👩‍👧Guest List');
+    assert.deepEqual(await getInitialAndName(/Guest List/),
+      ['👨‍👩‍👧‍👦', '👨‍👩‍👧Guest List']);
+
+    await gu.undo(2);
+    assert.deepEqual(await getInitialAndName(/People/), ['P', 'People']);
+  });
+
   it('should show tooltip for long page names on hover', async () => {
     await gu.openPageMenu('People');
     await driver.find('.test-docpage-rename').doClick();