fix(emojis): match the built-in picker's styling to emoji-mart

oliverlaz · oliverlaz · commit ce86bdcf43c3 · 2026-07-03T13:51:19.000+02:00
Restyle the EmojiPicker panel so the drop-in replacement looks like the
emoji-mart picker it replaced:

- Reorder to category nav on top, search below (emoji-mart layout).
- Search: one filled grey field with the icon inside, smaller input text and a
  compact fixed height (was a bordered box with the icon outside).
- Active category marked with an accent underline instead of a filled background.
- Smaller, medium-weight, secondary-colour section headers.
- Softer search/footer separators (a subtle hairline, not the strong border).
- Larger panel (360x440) with a roomier ~9-per-row grid and real gaps.
- Footer shows a "Pick an emoji…" placeholder (with a pointer glyph) when nothing
  is hovered.

Adds the "Pick an emoji…" i18n key to all 12 locales.
diff --git a/src/i18n/de.json b/src/i18n/de.json
@@ -649,5 +649,6 @@
   "Medium-Dark": "Mitteldunkel",
   "Dark": "Dunkel",
   "Failed to load emojis": "Emojis konnten nicht geladen werden",
-  "Retry": "Erneut versuchen"
+  "Retry": "Erneut versuchen",
+  "Pick an emoji…": "Emoji auswählen…"
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -649,5 +649,6 @@
   "Medium-Dark": "Medium-Dark",
   "Dark": "Dark",
   "Failed to load emojis": "Failed to load emojis",
-  "Retry": "Retry"
+  "Retry": "Retry",
+  "Pick an emoji…": "Pick an emoji…"
 }
diff --git a/src/i18n/es.json b/src/i18n/es.json
@@ -673,5 +673,6 @@
   "Medium-Dark": "Medio oscuro",
   "Dark": "Oscuro",
   "Failed to load emojis": "No se pudieron cargar los emojis",
-  "Retry": "Reintentar"
+  "Retry": "Reintentar",
+  "Pick an emoji…": "Elige un emoji…"
 }
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -673,5 +673,6 @@
   "Medium-Dark": "Moyennement foncé",
   "Dark": "Foncé",
   "Failed to load emojis": "Échec du chargement des emojis",
-  "Retry": "Réessayer"
+  "Retry": "Réessayer",
+  "Pick an emoji…": "Choisissez un emoji…"
 }
diff --git a/src/i18n/hi.json b/src/i18n/hi.json
@@ -650,5 +650,6 @@
   "Medium-Dark": "मध्यम-गहरा",
   "Dark": "गहरा",
   "Failed to load emojis": "इमोजी लोड नहीं हो सके",
-  "Retry": "पुनः प्रयास करें"
+  "Retry": "पुनः प्रयास करें",
+  "Pick an emoji…": "इमोजी चुनें…"
 }
diff --git a/src/i18n/it.json b/src/i18n/it.json
@@ -673,5 +673,6 @@
   "Medium-Dark": "Medio scuro",
   "Dark": "Scuro",
   "Failed to load emojis": "Impossibile caricare gli emoji",
-  "Retry": "Riprova"
+  "Retry": "Riprova",
+  "Pick an emoji…": "Scegli un emoji…"
 }
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
@@ -636,5 +636,6 @@
   "Medium-Dark": "やや暗い",
   "Dark": "暗い",
   "Failed to load emojis": "絵文字を読み込めませんでした",
-  "Retry": "再試行"
+  "Retry": "再試行",
+  "Pick an emoji…": "絵文字を選択…"
 }
diff --git a/src/i18n/ko.json b/src/i18n/ko.json
@@ -636,5 +636,6 @@
   "Medium-Dark": "중간 어두움",
   "Dark": "어두움",
   "Failed to load emojis": "이모지를 불러오지 못했습니다",
-  "Retry": "다시 시도"
+  "Retry": "다시 시도",
+  "Pick an emoji…": "이모지 선택…"
 }
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
@@ -651,5 +651,6 @@
   "Medium-Dark": "Middeldonker",
   "Dark": "Donker",
   "Failed to load emojis": "Emoji's konden niet worden geladen",
-  "Retry": "Opnieuw proberen"
+  "Retry": "Opnieuw proberen",
+  "Pick an emoji…": "Kies een emoji…"
 }
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
@@ -673,5 +673,6 @@
   "Medium-Dark": "Médio escuro",
   "Dark": "Escuro",
   "Failed to load emojis": "Falha ao carregar os emojis",
-  "Retry": "Tentar novamente"
+  "Retry": "Tentar novamente",
+  "Pick an emoji…": "Escolha um emoji…"
 }
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -701,5 +701,6 @@
   "Medium-Dark": "Умеренно-тёмный",
   "Dark": "Тёмный",
   "Failed to load emojis": "Не удалось загрузить эмодзи",
-  "Retry": "Повторить"
+  "Retry": "Повторить",
+  "Pick an emoji…": "Выберите эмодзи…"
 }
diff --git a/src/i18n/tr.json b/src/i18n/tr.json
@@ -649,5 +649,6 @@
   "Medium-Dark": "Orta koyu",
   "Dark": "Koyu",
   "Failed to load emojis": "Emojiler yüklenemedi",
-  "Retry": "Yeniden dene"
+  "Retry": "Yeniden dene",
+  "Pick an emoji…": "Emoji seç…"
 }
diff --git a/src/plugins/Emojis/components/EmojiPickerPanel.tsx b/src/plugins/Emojis/components/EmojiPickerPanel.tsx
@@ -160,12 +160,12 @@ export const EmojiPickerPanel = ({
       >
         {data ? (
           <>
-            <SearchInput onArrowDown={focusFirst} onChange={setQuery} value={query} />
             <CategoryNav
               activeCategoryId={isSearching ? undefined : activeCategoryId}
               categories={categories}
               onNavigate={handleNavigate}
             />
+            <SearchInput onArrowDown={focusFirst} onChange={setQuery} value={query} />
             <div
               className='str-chat__emoji-picker__body'
               onKeyDown={onGridKeyDown}
diff --git a/src/plugins/Emojis/components/PreviewPane.tsx b/src/plugins/Emojis/components/PreviewPane.tsx
@@ -1,28 +1,31 @@
 import { useEmojiPickerContext } from '../context/EmojiPickerContext';
+import { useTranslationContext } from '../../../context';
 import type { EmojiDataEmoji } from '../data';
 
 export type PreviewPaneProps = {
   emoji: EmojiDataEmoji | null;
 };
 
 /**
- * Footer preview of the hovered/focused emoji: a large glyph plus its name.
- * Receives the previewed emoji as a prop (kept out of context) so hovering does
- * not re-render the emoji grid.
+ * Footer preview of the hovered/focused emoji: a large glyph plus its name. Falls back
+ * to a "Pick an emoji…" placeholder (like emoji-mart) so the footer is never empty.
+ * Receives the previewed emoji as a prop (kept out of context) so hovering does not
+ * re-render the emoji grid.
  */
 export const PreviewPane = ({ emoji }: PreviewPaneProps) => {
+  const { t } = useTranslationContext('EmojiPickerPreview');
   const { skinToneIndex } = useEmojiPickerContext('PreviewPane');
 
   return (
     <div aria-live='polite' className='str-chat__emoji-picker__preview'>
-      {emoji ? (
-        <>
-          <span aria-hidden='true' className='str-chat__emoji-picker__preview-emoji'>
-            {emoji.skins[skinToneIndex]?.native ?? emoji.skins[0]?.native ?? ''}
-          </span>
-          <span className='str-chat__emoji-picker__preview-name'>{emoji.name}</span>
-        </>
-      ) : null}
+      <span aria-hidden='true' className='str-chat__emoji-picker__preview-emoji'>
+        {emoji
+          ? (emoji.skins[skinToneIndex]?.native ?? emoji.skins[0]?.native ?? '')
+          : '☝️'}
+      </span>
+      <span className='str-chat__emoji-picker__preview-name'>
+        {emoji ? emoji.name : t('Pick an emoji…')}
+      </span>
     </div>
   );
 };
diff --git a/src/plugins/Emojis/styling/EmojiPicker.scss b/src/plugins/Emojis/styling/EmojiPicker.scss
@@ -27,8 +27,16 @@ $emoji-picker-border-radius: 12px;
       --str-chat__background-utility-selected
     );
     --str-chat__emoji-picker-border-color: var(--str-chat__border-core-on-surface);
-    --str-chat__emoji-picker-width: 20rem;
-    --str-chat__emoji-picker-height: 22.5rem;
+    // Gentle hairline for the search/footer dividers (the default on-surface border is
+    // intentionally strong and reads as too heavy here).
+    --str-chat__emoji-picker-separator-color: var(--str-chat__border-core-subtle);
+    // A soft grey fill for the search field (the app background token is white).
+    --str-chat__emoji-picker-search-background-color: var(
+      --str-chat__background-utility-hover
+    );
+    --str-chat__emoji-picker-active-indicator-color: var(--str-chat__accent-primary);
+    --str-chat__emoji-picker-width: 22.5rem;
+    --str-chat__emoji-picker-height: 27.5rem;
     --str-chat__emoji-picker-emoji-size: 1.5rem;
 
     display: flex;
@@ -40,30 +48,48 @@ $emoji-picker-border-radius: 12px;
     color: var(--str-chat__emoji-picker-text-color);
     font: var(--str-chat__font-body-default);
 
+    // The whole row is styled as one filled search field, with the icon inside it.
     &__search {
       display: flex;
       align-items: center;
       gap: var(--str-chat__spacing-xs);
-      padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-sm) 0;
+      margin: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm)
+        var(--str-chat__spacing-sm);
+      padding-inline: var(--str-chat__spacing-xs);
+      min-block-size: 2rem;
+      border-radius: var(--str-chat__radius-8);
+      background-color: var(--str-chat__emoji-picker-search-background-color);
+
+      &:focus-within {
+        @include utils.focusable;
+      }
 
       .str-chat__icon {
         flex: none;
+        inline-size: 1rem;
+        block-size: 1rem;
         color: var(--str-chat__emoji-picker-secondary-text-color);
       }
     }
 
     &__search-input {
       flex: 1 1 auto;
       min-inline-size: 0;
-      padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
-      border: 1px solid var(--str-chat__emoji-picker-border-color);
-      border-radius: var(--str-chat__radius-8);
-      background-color: var(--str-chat__background-core-surface-default);
+      border: none;
+      background: transparent;
       color: inherit;
       font: inherit;
+      font-size: 0.875rem;
+      line-height: 1.5;
 
+      // The filled field shows focus via `:focus-within`, so the input itself doesn't.
+      &:focus,
       &:focus-visible {
-        @include utils.focusable;
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--str-chat__emoji-picker-secondary-text-color);
       }
     }
 
@@ -83,43 +109,53 @@ $emoji-picker-border-radius: 12px;
 
     &__category-nav {
       display: flex;
-      align-items: center;
+      align-items: stretch;
       gap: var(--str-chat__spacing-xxs);
-      padding: var(--str-chat__spacing-xs);
-      border-block-end: 1px solid var(--str-chat__emoji-picker-border-color);
+      padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm) 0;
     }
 
     &__category-nav-button {
       @include utils.button-reset;
       cursor: pointer;
+      position: relative;
       display: flex;
       flex: 1 1 auto;
       align-items: center;
       justify-content: center;
-      padding: var(--str-chat__spacing-xxs);
-      border-radius: var(--str-chat__radius-4);
+      padding-block: var(--str-chat__spacing-xs);
       font-size: 1.125rem;
       line-height: 1;
-      opacity: 0.6;
+      // Muted tabs; the active one is emphasized with an underline bar (like
+      // emoji-mart) rather than a filled background.
+      opacity: 0.55;
 
       &:hover {
-        background-color: var(--str-chat__emoji-picker-hover-background-color);
-        opacity: 1;
+        opacity: 0.85;
       }
 
       &:focus-visible {
         @include utils.focusable;
       }
 
       &--active {
-        background-color: var(--str-chat__emoji-picker-selected-background-color);
         opacity: 1;
+
+        &::after {
+          content: '';
+          position: absolute;
+          inset-inline: 15%;
+          inset-block-end: 0;
+          block-size: 2px;
+          border-radius: 2px 2px 0 0;
+          background-color: var(--str-chat__emoji-picker-active-indicator-color);
+        }
       }
     }
 
     &__body {
       flex: 1 1 auto;
       min-block-size: 0;
+      border-block-start: 1px solid var(--str-chat__emoji-picker-separator-color);
     }
 
     &__grid-container {
@@ -135,21 +171,20 @@ $emoji-picker-border-radius: 12px;
         position: sticky;
         inset-block-start: 0;
         z-index: 1;
-        padding-block: var(--str-chat__spacing-xs);
+        padding-block: var(--str-chat__spacing-xs) var(--str-chat__spacing-xxs);
         background-color: var(--str-chat__emoji-picker-background-color);
         color: var(--str-chat__emoji-picker-secondary-text-color);
-        font: var(--str-chat__font-body-emphasis);
-        text-transform: capitalize;
+        font-size: 0.8125rem;
+        font-weight: 500;
       }
 
       &-emojis {
         display: grid;
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(var(--str-chat__emoji-picker-emoji-size), 1fr)
-        );
-        gap: var(--str-chat__spacing-xxs);
-        padding-block-end: var(--str-chat__spacing-sm);
+        // Cells are larger than the glyph and separated by a real gap so the grid
+        // breathes (roughly 9 per row at the default width) rather than packing tight.
+        grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr));
+        gap: var(--str-chat__spacing-xs);
+        padding-block-end: var(--str-chat__spacing-xs);
       }
     }
 
@@ -180,7 +215,7 @@ $emoji-picker-border-radius: 12px;
       gap: var(--str-chat__spacing-sm);
       min-block-size: 2.75rem;
       padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
-      border-block-start: 1px solid var(--str-chat__emoji-picker-border-color);
+      border-block-start: 1px solid var(--str-chat__emoji-picker-separator-color);
     }
 
     &__preview {
@@ -200,7 +235,6 @@ $emoji-picker-border-radius: 12px;
         color: var(--str-chat__emoji-picker-secondary-text-color);
         white-space: nowrap;
         text-overflow: ellipsis;
-        text-transform: capitalize;
       }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -649,5 +649,6 @@`
`649`	`649`	`"Medium-Dark": "Mitteldunkel",`
`650`	`650`	`"Dark": "Dunkel",`
`651`	`651`	`"Failed to load emojis": "Emojis konnten nicht geladen werden",`
`652`		`- "Retry": "Erneut versuchen"`
	`652`	`+ "Retry": "Erneut versuchen",`
	`653`	`+ "Pick an emoji…": "Emoji auswählen…"`
`653`	`654`	`}`
Original file line number	Diff line number	Diff line change
`@@ -673,5 +673,6 @@`
`673`	`673`	`"Medium-Dark": "Medio oscuro",`
`674`	`674`	`"Dark": "Oscuro",`
`675`	`675`	`"Failed to load emojis": "No se pudieron cargar los emojis",`
`676`		`- "Retry": "Reintentar"`
	`676`	`+ "Retry": "Reintentar",`
	`677`	`+ "Pick an emoji…": "Elige un emoji…"`
`677`	`678`	`}`
Original file line number	Diff line number	Diff line change
`@@ -650,5 +650,6 @@`
`650`	`650`	`"Medium-Dark": "मध्यम-गहरा",`
`651`	`651`	`"Dark": "गहरा",`
`652`	`652`	`"Failed to load emojis": "इमोजी लोड नहीं हो सके",`
`653`		`- "Retry": "पुनः प्रयास करें"`
	`653`	`+ "Retry": "पुनः प्रयास करें",`
	`654`	`+ "Pick an emoji…": "इमोजी चुनें…"`
`654`	`655`	`}`
Original file line number	Diff line number	Diff line change
`@@ -636,5 +636,6 @@`
`636`	`636`	`"Medium-Dark": "やや暗い",`
`637`	`637`	`"Dark": "暗い",`
`638`	`638`	`"Failed to load emojis": "絵文字を読み込めませんでした",`
`639`		`- "Retry": "再試行"`
	`639`	`+ "Retry": "再試行",`
	`640`	`+ "Pick an emoji…": "絵文字を選択…"`
`640`	`641`	`}`
Original file line number	Diff line number	Diff line change
`@@ -651,5 +651,6 @@`
`651`	`651`	`"Medium-Dark": "Middeldonker",`
`652`	`652`	`"Dark": "Donker",`
`653`	`653`	`"Failed to load emojis": "Emoji's konden niet worden geladen",`
`654`		`- "Retry": "Opnieuw proberen"`
	`654`	`+ "Retry": "Opnieuw proberen",`
	`655`	`+ "Pick an emoji…": "Kies een emoji…"`
`655`	`656`	`}`