fix(emojis): mark the last category active when scrolled to the bottom

The grid's scroll-spy only used Virtuoso's startIndex, so a short final category
that never reaches the top of the viewport never lit its nav tab. Pin the last
category active while at the bottom (and keep range changes from stealing it
back). The Virtuoso mock previously rendered all items and never fired the
scroll callbacks, so this was untested — the mock now captures them.

Also harden two search tests that passed vacuously: the localeCompare tie-break
fixture now actually ties (equal-length names put the shared keyword at the same
offset), and the AND-semantics assertion checks comma-anchored token matches
rather than a loose substring.

Author: oliverlaz

src/plugins/Emojis/components/EmojiGrid.tsx

@@ -46,6 +46,7 @@ export const EmojiGrid = forwardRef<EmojiGridHandle, EmojiGridProps>(function Em
   ref,
 ) {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const atBottomRef = useRef(false);
 
   useImperativeHandle(
     ref,
@@ -60,10 +61,21 @@ export const EmojiGrid = forwardRef<EmojiGridHandle, EmojiGridProps>(function Em
 
   return (
     <Virtuoso
+      atBottomStateChange={(atBottom) => {
+        atBottomRef.current = atBottom;
+        // The last category is often short and never reaches the top of the viewport,
+        // so scroll-spy alone would never mark it active — pin it while at the bottom.
+        if (atBottom) {
+          const last = categories[categories.length - 1];
+          if (last) onActiveCategoryChange?.(last.id);
+        }
+      }}
       className='str-chat__emoji-picker__grid'
       data={categories}
       itemContent={(_index, category) => <CategorySection category={category} />}
       rangeChanged={({ startIndex }) => {
+        // While pinned at the bottom, atBottomStateChange owns the active category.
+        if (atBottomRef.current) return;
         const category = categories[startIndex];
         if (category) onActiveCategoryChange?.(category.id);
       }}

src/plugins/Emojis/components/__tests__/EmojiGrid.test.tsx

@@ -3,24 +3,47 @@ import { render, screen } from '@testing-library/react';
 import { EmojiGrid, type EmojiPickerCategory } from '../EmojiGrid';
 import { EmojiPickerProvider } from '../../context/EmojiPickerContext';
 
-// Mirror the repo's react-virtuoso mock: render every item synchronously so the
-// non-search view's accessibility tree is assertable in jsdom.
+// Capture the Virtuoso scroll callbacks so the scroll-spy behavior is testable, and
+// render every item synchronously so the non-search view's a11y tree is assertable.
+const { virtuoso } = vi.hoisted(() => ({
+  virtuoso: {} as {
+    atBottomStateChange?: (atBottom: boolean) => void;
+    rangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
+  },
+}));
+
 vi.mock('react-virtuoso', () => ({
   Virtuoso: ({
+    atBottomStateChange,
     data = [],
     itemContent,
+    rangeChanged,
   }: {
+    atBottomStateChange?: (atBottom: boolean) => void;
     data?: EmojiPickerCategory[];
     itemContent?: (index: number, item: EmojiPickerCategory) => React.ReactNode;
-  }) => (
-    <div>
-      {data.map((item, index) => (
-        <React.Fragment key={index}>{itemContent?.(index, item)}</React.Fragment>
-      ))}
-    </div>
-  ),
+    rangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
+  }) => {
+    virtuoso.atBottomStateChange = atBottomStateChange;
+    virtuoso.rangeChanged = rangeChanged;
+    return (
+      <div>
+        {data.map((item, index) => (
+          <React.Fragment key={index}>{itemContent?.(index, item)}</React.Fragment>
+        ))}
+      </div>
+    );
+  },
 }));
 
+const emoji = (id: string, native: string) => ({
+  id,
+  keywords: [],
+  name: id,
+  skins: [{ native, unified: '' }],
+  version: 1,
+});
+
 const categories: EmojiPickerCategory[] = [
   {
     emojis: [
@@ -65,3 +88,46 @@ describe('EmojiGrid accessibility (non-search view)', () => {
     expect(screen.getByRole('region', { name: 'Smileys & People' })).toBeInTheDocument();
   });
 });
+
+describe('EmojiGrid scroll-spy (active category tracking)', () => {
+  const twoCategories: EmojiPickerCategory[] = [
+    { emojis: [emoji('grinning', '😀')], id: 'people', label: 'People' },
+    { emojis: [emoji('checkered_flag', '🏁')], id: 'flags', label: 'Flags' },
+  ];
+
+  const renderSpy = (onActiveCategoryChange: (id: string) => void) =>
+    render(
+      <EmojiPickerProvider
+        value={{ onSelectEmoji: vi.fn(), setPreviewedEmoji: vi.fn(), skinToneIndex: 0 }}
+      >
+        <EmojiGrid
+          categories={twoCategories}
+          onActiveCategoryChange={onActiveCategoryChange}
+        />
+      </EmojiPickerProvider>,
+    );
+
+  it('marks the category at the top of the viewport active as the list scrolls', () => {
+    const onActive = vi.fn();
+    renderSpy(onActive);
+
+    virtuoso.rangeChanged?.({ endIndex: 1, startIndex: 1 });
+
+    expect(onActive).toHaveBeenLastCalledWith('flags');
+  });
+
+  it('marks the last category active at the bottom, even when a short final category never reaches the top', () => {
+    const onActive = vi.fn();
+    renderSpy(onActive);
+
+    // Top of the viewport is still the first category…
+    virtuoso.rangeChanged?.({ endIndex: 1, startIndex: 0 });
+    // …but the list is scrolled to the very bottom, so the last category is active.
+    virtuoso.atBottomStateChange?.(true);
+    expect(onActive).toHaveBeenLastCalledWith('flags');
+
+    // Range changes while pinned at the bottom must not steal the active category back.
+    virtuoso.rangeChanged?.({ endIndex: 1, startIndex: 0 });
+    expect(onActive).toHaveBeenLastCalledWith('flags');
+  });
+});

src/plugins/Emojis/search/__tests__/search.test.ts

@@ -33,9 +33,12 @@ describe('runSearch (against the vendored dataset)', () => {
   it('applies AND semantics across multiple words', () => {
     const results = runSearch(index, 'red heart') ?? [];
     expect(results.map((emoji) => emoji.id)).toContain('heart'); // "Red Heart"
-    // every returned emoji must have matched both words
+    // Every result matched BOTH words as comma-anchored tokens — mirroring runSearch's
+    // own `indexOf(",word")`, not a loose substring that a match like "tired" would pass.
     expect(
-      results.every((emoji) => /red/.test(emoji.search) && /heart/.test(emoji.search)),
+      results.every(
+        (emoji) => emoji.search.includes(',red') && emoji.search.includes(',heart'),
+      ),
     ).toBe(true);
   });
 
@@ -70,18 +73,20 @@ describe('runSearch (ranking details, synthetic data)', () => {
         skins: [{ native: '②', unified: '' }],
         version: 1,
       },
-      // both share the "tie" keyword at the same offset (equal-length ids)
+      // Equal-length names (and ids) so the shared "tie" keyword lands at the same
+      // haystack offset in both — giving an actual score tie that the id.localeCompare
+      // tie-break must resolve (otherwise score alone would decide the order).
       ccc: {
         id: 'ccc',
         keywords: ['tie'],
-        name: 'Third',
+        name: 'Cat',
         skins: [{ native: '③', unified: '' }],
         version: 1,
       },
       ddd: {
         id: 'ddd',
         keywords: ['tie'],
-        name: 'Fourth',
+        name: 'Dog',
         skins: [{ native: '④', unified: '' }],
         version: 1,
       },