perf(emojis): drive picker keyboard navigation from the category model

Replace the DOM-geometry grid navigation (getBoundingClientRect + row-epsilon
tolerance + center-x scoring) with a pure navigateGrid() over the known category
model; only the current column count is read from layout (via offsetTop, once
per keypress). This makes Up/Down navigation unit-testable (previously
impossible in jsdom, so it was uncovered) and removes the duplicated
row-extraction helpers.

Also track the roving cell in a ref so moving focus flips two tabIndex values
instead of sweeping every mounted cell, and reconcile the roving cell in the
render effect only when it has actually detached.

Author: oliverlaz

src/plugins/Emojis/hooks/__tests__/gridNavigation.test.ts

@@ -0,0 +1,113 @@
+import { navigateGrid } from '../gridNavigation';
+
+// A "grid" is a vertical stack of sections (categories); each section is laid out as a
+// `columns`-wide grid filled in reading order. navigateGrid is pure: given the section
+// lengths, the active (section, index), a key, and the column count, it returns the
+// target position (or null to stay put at a grid edge).
+
+describe('navigateGrid — single section (search view)', () => {
+  const single = [7]; // rows (cols=3): [0,1,2] [3,4,5] [6]
+
+  it('moves right/left within a row', () => {
+    expect(navigateGrid(single, { index: 0, section: 0 }, 'ArrowRight', 3)).toEqual({
+      index: 1,
+      section: 0,
+    });
+    expect(navigateGrid(single, { index: 1, section: 0 }, 'ArrowLeft', 3)).toEqual({
+      index: 0,
+      section: 0,
+    });
+  });
+
+  it('clamps (null) at the last cell going right and the first going left', () => {
+    expect(navigateGrid(single, { index: 6, section: 0 }, 'ArrowRight', 3)).toBeNull();
+    expect(navigateGrid(single, { index: 0, section: 0 }, 'ArrowLeft', 3)).toBeNull();
+  });
+
+  it('moves down/up by one row, same column', () => {
+    expect(navigateGrid(single, { index: 1, section: 0 }, 'ArrowDown', 3)).toEqual({
+      index: 4,
+      section: 0,
+    });
+    expect(navigateGrid(single, { index: 4, section: 0 }, 'ArrowUp', 3)).toEqual({
+      index: 1,
+      section: 0,
+    });
+  });
+
+  it('down into a partial last row clamps to that row’s last cell', () => {
+    // index 5 (row 1, col 2) down: row 2 has only index 6 → clamp to 6.
+    expect(navigateGrid(single, { index: 5, section: 0 }, 'ArrowDown', 3)).toEqual({
+      index: 6,
+      section: 0,
+    });
+  });
+
+  it('clamps (null) going down from the last row and up from the first', () => {
+    expect(navigateGrid(single, { index: 6, section: 0 }, 'ArrowDown', 3)).toBeNull();
+    expect(navigateGrid(single, { index: 2, section: 0 }, 'ArrowUp', 3)).toBeNull();
+  });
+
+  it('Home/End jump to the first/last cell of the whole grid', () => {
+    expect(navigateGrid(single, { index: 5, section: 0 }, 'Home', 3)).toEqual({
+      index: 0,
+      section: 0,
+    });
+    expect(navigateGrid(single, { index: 0, section: 0 }, 'End', 3)).toEqual({
+      index: 6,
+      section: 0,
+    });
+  });
+});
+
+describe('navigateGrid — multiple sections (category view)', () => {
+  const multi = [5, 6]; // section 0 rows (cols=3): [0,1,2] [3,4]; section 1: [0,1,2] [3,4,5]
+
+  it('crosses to the next section going right off a section’s last cell', () => {
+    expect(navigateGrid(multi, { index: 4, section: 0 }, 'ArrowRight', 3)).toEqual({
+      index: 0,
+      section: 1,
+    });
+  });
+
+  it('crosses to the previous section going left off a section’s first cell', () => {
+    expect(navigateGrid(multi, { index: 0, section: 1 }, 'ArrowLeft', 3)).toEqual({
+      index: 4,
+      section: 0,
+    });
+  });
+
+  it('crosses down into the next section preserving the column', () => {
+    expect(navigateGrid(multi, { index: 3, section: 0 }, 'ArrowDown', 3)).toEqual({
+      index: 0,
+      section: 1,
+    });
+    expect(navigateGrid(multi, { index: 4, section: 0 }, 'ArrowDown', 3)).toEqual({
+      index: 1,
+      section: 1,
+    });
+  });
+
+  it('crosses up into the previous section’s last row, clamping the column', () => {
+    expect(navigateGrid(multi, { index: 1, section: 1 }, 'ArrowUp', 3)).toEqual({
+      index: 4,
+      section: 0,
+    });
+    // Column 2 has no cell in section 0's last row ([3,4]) → clamp to its last cell.
+    expect(navigateGrid(multi, { index: 2, section: 1 }, 'ArrowUp', 3)).toEqual({
+      index: 4,
+      section: 0,
+    });
+  });
+
+  it('clamps (null) going right off the very last cell of the last section', () => {
+    expect(navigateGrid(multi, { index: 5, section: 1 }, 'ArrowRight', 3)).toBeNull();
+  });
+
+  it('End jumps to the last cell of the last section', () => {
+    expect(navigateGrid(multi, { index: 0, section: 0 }, 'End', 3)).toEqual({
+      index: 5,
+      section: 1,
+    });
+  });
+});

src/plugins/Emojis/hooks/__tests__/useGridKeyboardNav.test.tsx

@@ -7,7 +7,7 @@ beforeAll(() => {
   Element.prototype.scrollIntoView = () => undefined;
 });
 
-type Category = { emojis: string[]; id: string };
+type Category = { emojis: { id: string }[]; id: string };
 
 /**
  * Mimics the virtualized grid: only `initialMounted` categories are in the DOM, and
@@ -33,7 +33,7 @@ const Harness = ({
         .filter((category) => mounted.includes(category.id))
         .map((category) => (
           <section data-category-id={category.id} key={category.id}>
-            {category.emojis.map((id) => (
+            {category.emojis.map(({ id }) => (
               <button
                 className='str-chat__emoji-picker__emoji'
                 data-emoji-id={id}
@@ -51,8 +51,8 @@ const Harness = ({
 };
 
 const categories: Category[] = [
-  { emojis: ['a1', 'a2', 'a3'], id: 'a' },
-  { emojis: ['b1', 'b2', 'b3'], id: 'b' },
+  { emojis: [{ id: 'a1' }, { id: 'a2' }, { id: 'a3' }], id: 'a' },
+  { emojis: [{ id: 'b1' }, { id: 'b2' }, { id: 'b3' }], id: 'b' },
 ];
 
 describe('useGridKeyboardNav across virtualization boundaries', () => {

src/plugins/Emojis/hooks/gridNavigation.ts

@@ -0,0 +1,81 @@
+export type GridPosition = { index: number; section: number };
+
+/**
+ * Pure keyboard navigation over a sectioned grid: the emoji picker is a vertical stack
+ * of sections (categories), each laid out as a `columns`-wide grid filled in reading
+ * order. Given the section lengths, the active `(section, index)`, the pressed key, and
+ * the current column count, it returns the target position — or `null` to stay put at a
+ * grid edge.
+ *
+ * Kept free of the DOM so the (otherwise layout-dependent, untestable) navigation logic
+ * can be unit-tested exhaustively. The hook maps the DOM position in/out and measures
+ * `columns` from layout.
+ */
+export const navigateGrid = (
+  sectionLengths: number[],
+  pos: GridPosition,
+  key: string,
+  columns: number,
+): GridPosition | null => {
+  const cols = Math.max(1, columns);
+  const len = sectionLengths[pos.section] ?? 0;
+  if (len === 0) return null;
+
+  const col = pos.index % cols;
+  const row = Math.floor(pos.index / cols);
+  const lastRow = Math.floor((len - 1) / cols);
+
+  switch (key) {
+    case 'Home':
+      return { index: 0, section: 0 };
+
+    case 'End': {
+      const last = sectionLengths.length - 1;
+      return { index: Math.max(0, (sectionLengths[last] ?? 0) - 1), section: last };
+    }
+
+    case 'ArrowRight':
+      if (pos.index < len - 1) return { index: pos.index + 1, section: pos.section };
+      if (pos.section < sectionLengths.length - 1) {
+        return { index: 0, section: pos.section + 1 };
+      }
+      return null;
+
+    case 'ArrowLeft':
+      if (pos.index > 0) return { index: pos.index - 1, section: pos.section };
+      if (pos.section > 0) {
+        return {
+          index: Math.max(0, (sectionLengths[pos.section - 1] ?? 0) - 1),
+          section: pos.section - 1,
+        };
+      }
+      return null;
+
+    case 'ArrowDown':
+      if (row < lastRow) {
+        return { index: Math.min(pos.index + cols, len - 1), section: pos.section };
+      }
+      if (pos.section < sectionLengths.length - 1) {
+        const nextLen = sectionLengths[pos.section + 1] ?? 0;
+        if (nextLen === 0) return null;
+        return { index: Math.min(col, nextLen - 1), section: pos.section + 1 };
+      }
+      return null;
+
+    case 'ArrowUp':
+      if (row > 0) return { index: pos.index - cols, section: pos.section };
+      if (pos.section > 0) {
+        const prevLen = sectionLengths[pos.section - 1] ?? 0;
+        if (prevLen === 0) return null;
+        const prevLastRow = Math.floor((prevLen - 1) / cols);
+        return {
+          index: Math.min(prevLastRow * cols + col, prevLen - 1),
+          section: pos.section - 1,
+        };
+      }
+      return null;
+
+    default:
+      return null;
+  }
+};