perf(drawer): sort the chat list once instead of on every keystroke

buildChatSections re-sorted the whole list on each render, so typing in
search ran an O(n log n) sort per keystroke. Move sorting into a memoized
sortChatsByRecency keyed on the chats, leaving only the cheap filter to
re-run while typing. Adds unit tests for the section/label helpers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kfaracik

__tests__/DrawerMenu.test.tsx

@@ -69,6 +69,8 @@ const setPlatform = (os: string) => {
   Object.defineProperty(Platform, 'OS', { get: () => os, configurable: true });
 };
 
+const ORIGINAL_OS = Platform.OS;
+
 const defaultProps = {
   searching: false,
   search: '',
@@ -91,6 +93,8 @@ beforeEach(() => {
   setPlatform('ios');
 });
 
+afterEach(() => setPlatform(ORIGINAL_OS));
+
 describe('DrawerMenu — collapsed', () => {
   it('keeps New chat, Models and App Info at the top', () => {
     renderMenu();

__tests__/chatLabel.test.ts

@@ -0,0 +1,11 @@
+import { chatLabel } from '../utils/chatLabel';
+
+describe('chatLabel', () => {
+  it('returns the title when the chat has one', () => {
+    expect(chatLabel({ id: 3, title: 'Trip to Rome' })).toBe('Trip to Rome');
+  });
+
+  it('falls back to "Chat <id>" for an empty title', () => {
+    expect(chatLabel({ id: 9, title: '' })).toBe('Chat 9');
+  });
+});

__tests__/chatSections.test.ts

@@ -0,0 +1,92 @@
+import {
+  buildChatSections,
+  getRelativeDateSection,
+  sortChatsByRecency,
+} from '../components/drawer/chatSections';
+import { Chat } from '../database/chatRepository';
+
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+const NOW = new Date('2026-03-10T12:00:00Z').getTime();
+
+const makeChat = (over: Partial<Chat>): Chat => ({
+  id: 1,
+  modelId: 1,
+  title: 'Chat',
+  lastUsed: NOW,
+  ...over,
+});
+
+describe('getRelativeDateSection', () => {
+  const now = new Date(NOW);
+
+  it('labels the same day as Today', () => {
+    expect(getRelativeDateSection(new Date(NOW - HOUR), now)).toBe('Today');
+  });
+
+  it('labels the previous day as Yesterday', () => {
+    expect(getRelativeDateSection(new Date(NOW - DAY), now)).toBe('Yesterday');
+  });
+
+  it('labels 2-6 days back as "<n> days ago"', () => {
+    expect(getRelativeDateSection(new Date(NOW - 2 * DAY), now)).toBe(
+      '2 days ago'
+    );
+  });
+
+  it('labels anything older than a year as "More than a year ago"', () => {
+    expect(getRelativeDateSection(new Date(NOW - 400 * DAY), now)).toBe(
+      'More than a year ago'
+    );
+  });
+});
+
+describe('sortChatsByRecency', () => {
+  it('orders chats most-recent first without mutating the input', () => {
+    const input = [
+      makeChat({ id: 1, lastUsed: NOW - DAY }),
+      makeChat({ id: 2, lastUsed: NOW - HOUR }),
+      makeChat({ id: 3, lastUsed: NOW - 2 * DAY }),
+    ];
+
+    const sorted = sortChatsByRecency(input);
+
+    expect(sorted.map((chat) => chat.id)).toEqual([2, 1, 3]);
+    expect(input.map((chat) => chat.id)).toEqual([1, 2, 3]);
+  });
+});
+
+describe('buildChatSections', () => {
+  const chats = [
+    makeChat({ id: 1, title: 'Pizza recipe', lastUsed: NOW - HOUR }),
+    makeChat({ id: 2, title: 'Meeting notes', lastUsed: NOW - 2 * HOUR }),
+    makeChat({ id: 3, title: 'Trip to Rome', lastUsed: NOW - DAY }),
+  ];
+
+  it('groups pre-sorted chats by their relative date section', () => {
+    const sections = buildChatSections(chats, '', NOW);
+
+    expect(sections).toEqual([
+      ['Today', [chats[0], chats[1]]],
+      ['Yesterday', [chats[2]]],
+    ]);
+  });
+
+  it('filters by a case-insensitive label match', () => {
+    const sections = buildChatSections(chats, 'rome', NOW);
+
+    expect(sections).toEqual([['Yesterday', [chats[2]]]]);
+  });
+
+  it('matches the "Chat <id>" fallback label of untitled chats', () => {
+    const untitled = makeChat({ id: 42, title: '', lastUsed: NOW - HOUR });
+
+    const sections = buildChatSections([untitled], 'chat 42', NOW);
+
+    expect(sections).toEqual([['Today', [untitled]]]);
+  });
+
+  it('returns no sections when nothing matches', () => {
+    expect(buildChatSections(chats, 'nonexistent', NOW)).toEqual([]);
+  });
+});

components/drawer/DrawerMenu.tsx

@@ -19,7 +19,7 @@ import { DrawerItem } from './DrawerItem';
 import { DrawerTopBar } from './DrawerTopBar';
 import { DrawerNavSection } from './DrawerNavSection';
 import { DrawerEmptyState } from './DrawerEmptyState';
-import { buildChatSections } from './chatSections';
+import { buildChatSections, sortChatsByRecency } from './chatSections';
 import { useDrawerChatMenu } from './useDrawerChatMenu';
 import {
   DRAWER_HORIZONTAL_PADDING,
@@ -85,9 +85,10 @@ const DrawerMenu = ({
   const query = search.trim().toLowerCase();
   const isFiltering = query.length > 0;
 
+  const sortedChats = useMemo(() => sortChatsByRecency(chats), [chats]);
   const sections = useMemo(
-    () => buildChatSections(chats, query, now),
-    [chats, query, now]
+    () => buildChatSections(sortedChats, query, now),
+    [sortedChats, query, now]
   );
 
   const hasNoResults = isFiltering && sections.length === 0;

components/drawer/chatSections.ts

@@ -22,16 +22,18 @@ export const getRelativeDateSection = (date: Date, now: Date): string => {
 
 export type ChatSection = [string, Chat[]];
 
+export const sortChatsByRecency = (chats: Chat[]): Chat[] =>
+  [...chats].sort((a, b) => b.lastUsed - a.lastUsed);
+
 export const buildChatSections = (
   chats: Chat[],
   query: string,
   now: number
 ): ChatSection[] => {
   const nowDate = new Date(now);
-  const sorted = [...chats].sort((a, b) => b.lastUsed - a.lastUsed);
   const matching = query
-    ? sorted.filter((chat) => chatLabel(chat).toLowerCase().includes(query))
-    : sorted;
+    ? chats.filter((chat) => chatLabel(chat).toLowerCase().includes(query))
+    : chats;
 
   const sections: Record<string, Chat[]> = {};
   matching.forEach((chat) => {