Emoji rendering fix for Hermes Desktop

Fixes on record

Merged to main. A stamp counts the issues a fix is linked to.

• #40928 fix(desktop): color-emoji font fallback so emoji render (#40364)

  merged to main

  files: apps/desktop/src/styles.css, apps/desktop/src/themes/presets.test.ts, apps/desktop/src/themes/presets.ts

  Show the diff

  • apps/desktop/src/styles.css

    @@ -266,8 +266,10 @@
         --dt-user-bubble: var(--ui-chat-bubble-background);
         --dt-user-bubble-border: var(--ui-stroke-tertiary);
     
    -    --dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    -    --dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    +    --dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif,
    +      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
    +    --dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace,
    +      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
         --dt-base-size: 1rem;
         --dt-line-height: 1.5;
         --dt-letter-spacing: 0;

  • apps/desktop/src/themes/presets.test.ts

    @@ -0,0 +1,33 @@
    +import { describe, expect, it } from 'vitest'
    +
    +import { BUILTIN_THEME_LIST, DEFAULT_TYPOGRAPHY, EMOJI_FALLBACK } from './presets'
    +
    +// #40364: none of the UI text/mono fonts carry emoji glyphs, so every font
    +// stack must end with a color-emoji fallback or emoji render as tofu on
    +// platforms whose default font lacks them (e.g. Linux).
    +describe('theme typography emoji fallback (#40364)', () => {
    +  const stacks: Array<[string, string]> = [
    +    ['DEFAULT_TYPOGRAPHY.fontSans', DEFAULT_TYPOGRAPHY.fontSans],
    +    ['DEFAULT_TYPOGRAPHY.fontMono', DEFAULT_TYPOGRAPHY.fontMono],
    +    // A theme may override only fontMono (fontSans then falls back to the
    +    // default, which already carries the emoji stack), so skip undefined.
    +    ...BUILTIN_THEME_LIST.flatMap(theme =>
    +      (
    +        [
    +          [`${theme.name}.fontSans`, theme.typography?.fontSans],
    +          [`${theme.name}.fontMono`, theme.typography?.fontMono]
    +        ] as Array<[string, string | undefined]>
    +      ).filter((entry): entry is [string, string] => typeof entry[1] === 'string')
    +    )
    +  ]
    +
    +  it.each(stacks)('%s includes a color-emoji font', (_label, stack) => {
    +    expect(stack).toMatch(/Apple Color Emoji|Segoe UI Emoji|Noto Color Emoji|(^|,\s*)emoji\b/)
    +  })
    +
    +  it('EMOJI_FALLBACK lists the major platform emoji fonts', () => {
    +    expect(EMOJI_FALLBACK).toContain('Apple Color Emoji')
    +    expect(EMOJI_FALLBACK).toContain('Segoe UI Emoji')
    +    expect(EMOJI_FALLBACK).toContain('Noto Color Emoji')
    +  })
    +})

  • apps/desktop/src/themes/presets.ts

    @@ -5,10 +5,19 @@
     
     import type { DesktopTheme, DesktopThemeTypography } from './types'
     
    +// Color-emoji fonts to append to every stack as a last resort. None of the UI
    +// text/mono fonts carry emoji glyphs, so without this emoji render as tofu
    +// boxes on platforms whose default text font lacks them (e.g. Linux/#40364).
    +// Covers macOS, Windows, Linux, plus the `emoji` generic for anything else.
    +export const EMOJI_FALLBACK =
    +  '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji'
    +
     const SYSTEM_SANS =
    -  '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif'
    +  '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif, ' +
    +  EMOJI_FALLBACK
     
    -const SYSTEM_MONO = '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace'
    +const SYSTEM_MONO =
    +  '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace, ' + EMOJI_FALLBACK
     
     export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO }
     
    @@ -228,8 +237,8 @@ export const cyberpunkTheme: DesktopTheme = {
         userBubbleBorder: '#004800'
       },
       typography: {
    -    fontMono: `"Courier New", Courier, monospace`,
    -    fontSans: `"Courier New", Courier, monospace`
    +    fontMono: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`,
    +    fontSans: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`
       }
     }