Extract shared project ordering util and memoize selector factories

- Extract orderByPriority() in lib/utils.ts to deduplicate the project
  ordering logic that was independently implemented in both
  useHandleNewThread.ts and Sidebar.tsx.

- Memoize selectProjectById and selectThreadById with a simple Map cache
  so the same argument always returns the same selector reference,
  allowing Zustand's fast-path identity check to skip re-running the
  selector on every store notification.

Author: cursoragent

apps/web/src/components/Sidebar.tsx

@@ -54,7 +54,13 @@ import {
 import { isElectron } from "../env";
 import { APP_STAGE_LABEL, APP_VERSION } from "../branding";
 import { isTerminalFocused } from "../lib/terminalFocus";
-import { isLinuxPlatform, isMacPlatform, newCommandId, newProjectId } from "../lib/utils";
+import {
+  isLinuxPlatform,
+  isMacPlatform,
+  newCommandId,
+  newProjectId,
+  orderByPriority,
+} from "../lib/utils";
 import { useStore } from "../store";
 import { useUiStateStore } from "../uiStateStore";
 import {
@@ -500,18 +506,10 @@ export default function Sidebar() {
   const platform = navigator.platform;
   const shouldBrowseForProjectImmediately = isElectron && !isLinuxDesktop;
   const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately;
-  const orderedProjects = useMemo(() => {
-    if (projectOrder.length === 0) {
-      return projects;
-    }
-    const projectsById = new Map(projects.map((project) => [project.id, project] as const));
-    const ordered = projectOrder.flatMap((projectId) => {
-      const project = projectsById.get(projectId);
-      return project ? [project] : [];
-    });
-    const remaining = projects.filter((project) => !projectOrder.includes(project.id));
-    return [...ordered, ...remaining];
-  }, [projectOrder, projects]);
+  const orderedProjects = useMemo(
+    () => orderByPriority(projects, projectOrder, (p) => p.id),
+    [projectOrder, projects],
+  );
   const sidebarProjects = useMemo<SidebarProjectSnapshot[]>(
     () =>
       orderedProjects.map((project) => ({

apps/web/src/hooks/useHandleNewThread.ts

@@ -7,7 +7,7 @@ import {
   type DraftThreadState,
   useComposerDraftStore,
 } from "../composerDraftStore";
-import { newThreadId } from "../lib/utils";
+import { newThreadId, orderByPriority } from "../lib/utils";
 import { selectThreadById, useStore } from "../store";
 import { useUiStateStore } from "../uiStateStore";
 
@@ -23,15 +23,10 @@ export function useHandleNewThread() {
   const activeDraftThread = useComposerDraftStore((store) =>
     routeThreadId ? (store.draftThreadsByThreadId[routeThreadId] ?? null) : null,
   );
-  const orderedProjects = useMemo(() => {
-    if (projectOrder.length === 0) {
-      return projectIds;
-    }
-    const projectIdsSet = new Set(projectIds);
-    const ordered = projectOrder.filter((projectId) => projectIdsSet.has(projectId));
-    const remaining = projectIds.filter((projectId) => !projectOrder.includes(projectId));
-    return [...ordered, ...remaining];
-  }, [projectIds, projectOrder]);
+  const orderedProjects = useMemo(
+    () => orderByPriority(projectIds, projectOrder, (id) => id),
+    [projectIds, projectOrder],
+  );
 
   const handleNewThread = useCallback(
     (

apps/web/src/lib/utils.ts

@@ -34,3 +34,23 @@ export const newProjectId = (): ProjectId => ProjectId.makeUnsafe(randomUUID());
 export const newThreadId = (): ThreadId => ThreadId.makeUnsafe(randomUUID());
 
 export const newMessageId = (): MessageId => MessageId.makeUnsafe(randomUUID());
+
+/**
+ * Reorder `items` so that those whose key appears in `orderedKeys` come first
+ * (in `orderedKeys` order), followed by the remaining items in their original order.
+ */
+export function orderByPriority<T>(
+  items: readonly T[],
+  orderedKeys: readonly string[],
+  getKey: (item: T) => string,
+): T[] {
+  if (orderedKeys.length === 0) return items.slice();
+  const itemsByKey = new Map(items.map((item) => [getKey(item), item] as const));
+  const ordered = orderedKeys.flatMap((key) => {
+    const item = itemsByKey.get(key);
+    return item ? [item] : [];
+  });
+  const orderedKeySet = new Set(orderedKeys);
+  const remaining = items.filter((item) => !orderedKeySet.has(getKey(item)));
+  return [...ordered, ...remaining];
+}

apps/web/src/store.ts

@@ -852,15 +852,39 @@ export function applyOrchestrationEvents(
   return events.reduce((nextState, event) => applyOrchestrationEvent(nextState, event), state);
 }
 
-export const selectProjectById =
-  (projectId: Project["id"] | null | undefined) =>
-  (state: AppState): Project | undefined =>
-    projectId ? state.projects.find((project) => project.id === projectId) : undefined;
-
-export const selectThreadById =
-  (threadId: ThreadId | null | undefined) =>
-  (state: AppState): Thread | undefined =>
-    threadId ? state.threads.find((thread) => thread.id === threadId) : undefined;
+const _projectSelectorCache = new Map<
+  string | null | undefined,
+  (state: AppState) => Project | undefined
+>();
+export function selectProjectById(
+  projectId: Project["id"] | null | undefined,
+): (state: AppState) => Project | undefined {
+  const key = projectId ?? null;
+  let selector = _projectSelectorCache.get(key);
+  if (!selector) {
+    selector = (state: AppState) =>
+      projectId ? state.projects.find((project) => project.id === projectId) : undefined;
+    _projectSelectorCache.set(key, selector);
+  }
+  return selector;
+}
+
+const _threadSelectorCache = new Map<
+  string | null | undefined,
+  (state: AppState) => Thread | undefined
+>();
+export function selectThreadById(
+  threadId: ThreadId | null | undefined,
+): (state: AppState) => Thread | undefined {
+  const key = threadId ?? null;
+  let selector = _threadSelectorCache.get(key);
+  if (!selector) {
+    selector = (state: AppState) =>
+      threadId ? state.threads.find((thread) => thread.id === threadId) : undefined;
+    _threadSelectorCache.set(key, selector);
+  }
+  return selector;
+}
 
 export function setError(state: AppState, threadId: ThreadId, error: string | null): AppState {
   const threads = updateThread(state.threads, threadId, (t) => {