Finalize sidebar key typing

Author: justsomelegs

apps/web/src/components/Sidebar.tsx

@@ -119,6 +119,7 @@ import {
   ThreadStatusPill,
 } from "./Sidebar.logic";
 import {
+  createSidebarSortedProjectKeysSelector,
   createSidebarProjectRenderStateSelector,
   createSidebarProjectThreadStatusInputsSelector,
   createSidebarThreadMetaSnapshotSelectorByRef,
@@ -129,7 +130,6 @@ import {
 import { THREAD_PREVIEW_LIMIT } from "./sidebar/sidebarConstants";
 import {
   SidebarKeyboardController,
-  SidebarProjectOrderingController,
   SidebarSelectionController,
 } from "./sidebar/sidebarControllers";
 import {
@@ -138,7 +138,6 @@ import {
   resetSidebarViewState,
   useSidebarIsActiveThread,
   useSidebarProjectActiveRouteThreadKey,
-  useSidebarProjectKeys,
   useSidebarProjectThreadListExpanded,
   useSidebarThreadJumpLabel,
 } from "./sidebar/sidebarViewStore";
@@ -156,6 +155,7 @@ import {
   useSavedEnvironmentRegistryStore,
   useSavedEnvironmentRuntimeStore,
 } from "../environments/runtime";
+import type { LogicalProjectKey } from "../logicalProject";
 const SIDEBAR_SORT_LABELS: Record<SidebarProjectSortOrder, string> = {
   updated_at: "Last user message",
   created_at: "Created at",
@@ -1963,7 +1963,8 @@ const SidebarChromeFooter = memo(function SidebarChromeFooter() {
 });
 
 interface SidebarProjectsContentProps {
-  sidebarProjectByKey: ReadonlyMap<string, SidebarProjectSnapshot>;
+  sortedProjectKeys: readonly LogicalProjectKey[];
+  sidebarProjectByKey: ReadonlyMap<LogicalProjectKey, SidebarProjectSnapshot>;
   showArm64IntelBuildWarning: boolean;
   arm64IntelBuildWarningDescription: string | null;
   desktopUpdateButtonAction: "download" | "install" | "none";
@@ -2004,6 +2005,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
   props: SidebarProjectsContentProps,
 ) {
   const {
+    sortedProjectKeys,
     sidebarProjectByKey,
     showArm64IntelBuildWarning,
     arm64IntelBuildWarningDescription,
@@ -2040,8 +2042,6 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     attachProjectListAutoAnimateRef,
     projectsLength,
   } = props;
-  const sortedProjectKeys = useSidebarProjectKeys();
-
   const handleProjectSortOrderChange = useCallback(
     (sortOrder: SidebarProjectSortOrder) => {
       updateSettings({ sidebarProjectSortOrder: sortOrder });
@@ -2304,8 +2304,8 @@ export default function Sidebar() {
   );
 
   const previousSidebarProjectSnapshotByKeyRef = useRef<
-    ReadonlyMap<string, SidebarProjectSnapshot>
-  >(new Map<string, SidebarProjectSnapshot>());
+    ReadonlyMap<LogicalProjectKey, SidebarProjectSnapshot>
+  >(new Map<LogicalProjectKey, SidebarProjectSnapshot>());
   const sidebarProjects = useMemo<SidebarProjectSnapshot[]>(() => {
     const { projectSnapshotByKey, sidebarProjects: nextSidebarProjects } =
       buildSidebarProjectSnapshots({
@@ -2325,9 +2325,23 @@ export default function Sidebar() {
   ]);
 
   const sidebarProjectByKey = useMemo(
-    () => new Map(sidebarProjects.map((project) => [project.projectKey, project] as const)),
+    () =>
+      new Map<LogicalProjectKey, SidebarProjectSnapshot>(
+        sidebarProjects.map((project) => [project.projectKey, project] as const),
+      ),
     [sidebarProjects],
   );
+  const sortedProjectKeys = useStore(
+    useMemo(
+      () =>
+        createSidebarSortedProjectKeysSelector({
+          physicalToLogicalKey,
+          projects: sidebarProjects,
+          sortOrder: sidebarProjectSortOrder,
+        }),
+      [physicalToLogicalKey, sidebarProjectSortOrder, sidebarProjects],
+    ),
+  );
   const focusMostRecentThreadForProject = useCallback(
     (projectRef: { environmentId: EnvironmentId; projectId: ProjectId }) => {
       const physicalKey = scopedProjectKey(
@@ -2654,15 +2668,11 @@ export default function Sidebar() {
   return (
     <>
       <SidebarChromeHeader isElectron={isElectron} />
-      <SidebarProjectOrderingController
-        sidebarProjects={sidebarProjects}
-        physicalToLogicalKey={physicalToLogicalKey}
-        sidebarProjectSortOrder={sidebarProjectSortOrder}
-      />
       <SidebarSelectionController />
       <SidebarKeyboardController
         navigateToThread={navigateToThread}
         physicalToLogicalKey={physicalToLogicalKey}
+        sortedProjectKeys={sortedProjectKeys}
         sidebarThreadSortOrder={sidebarThreadSortOrder}
       />
 
@@ -2671,6 +2681,7 @@ export default function Sidebar() {
       ) : (
         <>
           <SidebarProjectsContent
+            sortedProjectKeys={sortedProjectKeys}
             sidebarProjectByKey={sidebarProjectByKey}
             showArm64IntelBuildWarning={showArm64IntelBuildWarning}
             arm64IntelBuildWarningDescription={arm64IntelBuildWarningDescription}

apps/web/src/components/sidebar/sidebarControllers.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { parseScopedThreadKey, scopedThreadKey } from "@t3tools/client-runtime";
 import { useParams } from "@tanstack/react-router";
 import type { ScopedThreadRef } from "@t3tools/contracts";
-import type { SidebarProjectSortOrder, SidebarThreadSortOrder } from "@t3tools/contracts/settings";
+import type { SidebarThreadSortOrder } from "@t3tools/contracts/settings";
 import { useShallow } from "zustand/react/shallow";
 import { isTerminalFocused } from "../../lib/terminalFocus";
 import { resolveThreadRouteRef } from "../../threadRoutes";
@@ -23,20 +23,17 @@ import {
 } from "../Sidebar.logic";
 import {
   createSidebarActiveRouteProjectKeySelectorByRef,
-  createSidebarSortedProjectKeysSelector,
-  createSidebarVisibleThreadKeysSelector,
+  createSidebarSortedThreadKeysByLogicalProjectSelector,
 } from "./sidebarSelectors";
 import type { LogicalProjectKey } from "../../logicalProject";
 import {
   setSidebarKeyboardState,
-  setSidebarProjectOrdering,
   useSidebarExpandedThreadListsByProject,
-  useSidebarProjectKeys,
 } from "./sidebarViewStore";
-import type { SidebarProjectSnapshot } from "./sidebarProjectSnapshots";
 import { useServerKeybindings } from "../../rpc/serverState";
 import { useStore } from "../../store";
 import { useThreadSelectionStore } from "../../threadSelectionStore";
+import { THREAD_PREVIEW_LIMIT } from "./sidebarConstants";
 
 const EMPTY_THREAD_JUMP_LABELS = new Map<string, string>();
 
@@ -98,27 +95,47 @@ function useSidebarKeyboardController(input: {
     ),
   );
   const { showThreadJumpHints, updateThreadJumpHintsVisibility } = useThreadJumpHintVisibility();
-  const visibleSidebarThreadKeys = useStore(
+  const sortedThreadKeysByLogicalProject = useStore(
     useMemo(
       () =>
-        createSidebarVisibleThreadKeysSelector({
-          expandedThreadListsByProject,
+        createSidebarSortedThreadKeysByLogicalProjectSelector({
           physicalToLogicalKey,
-          projectExpandedStates,
-          routeThreadKey,
-          sortedProjectKeys,
           threadSortOrder,
         }),
-      [
-        expandedThreadListsByProject,
-        physicalToLogicalKey,
-        projectExpandedStates,
-        routeThreadKey,
-        sortedProjectKeys,
-        threadSortOrder,
-      ],
+      [physicalToLogicalKey, threadSortOrder],
     ),
   );
+  const visibleSidebarThreadKeys = useMemo(
+    () =>
+      sortedProjectKeys.flatMap((projectKey, index) => {
+        const projectThreadKeys = sortedThreadKeysByLogicalProject.get(projectKey) ?? [];
+        const projectExpanded = projectExpandedStates[index] ?? true;
+        const activeThreadKey = routeThreadKey ?? undefined;
+        const pinnedCollapsedThread =
+          !projectExpanded && activeThreadKey
+            ? (projectThreadKeys.find((threadKey) => threadKey === activeThreadKey) ?? null)
+            : null;
+        const shouldShowThreadPanel = projectExpanded || pinnedCollapsedThread !== null;
+        if (!shouldShowThreadPanel) {
+          return [];
+        }
+
+        const isThreadListExpanded = expandedThreadListsByProject.has(projectKey);
+        const hasOverflowingThreads = projectThreadKeys.length > THREAD_PREVIEW_LIMIT;
+        const previewThreadKeys =
+          isThreadListExpanded || !hasOverflowingThreads
+            ? projectThreadKeys
+            : projectThreadKeys.slice(0, THREAD_PREVIEW_LIMIT);
+        return pinnedCollapsedThread ? [pinnedCollapsedThread] : previewThreadKeys;
+      }),
+    [
+      expandedThreadListsByProject,
+      projectExpandedStates,
+      routeThreadKey,
+      sortedProjectKeys,
+      sortedThreadKeysByLogicalProject,
+    ],
+  );
   const threadJumpCommandByKey = useMemo(() => {
     const mapping = new Map<string, NonNullable<ReturnType<typeof threadJumpCommandForIndex>>>();
     for (const [visibleThreadIndex, threadKey] of visibleSidebarThreadKeys.entries()) {
@@ -360,40 +377,14 @@ export const SidebarSelectionController = memo(function SidebarSelectionControll
   return null;
 });
 
-export const SidebarProjectOrderingController = memo(
-  function SidebarProjectOrderingController(props: {
-    sidebarProjects: readonly SidebarProjectSnapshot[];
-    physicalToLogicalKey: ReadonlyMap<string, LogicalProjectKey>;
-    sidebarProjectSortOrder: SidebarProjectSortOrder;
-  }) {
-    const { sidebarProjects, physicalToLogicalKey, sidebarProjectSortOrder } = props;
-    const sortedProjectKeys = useStore(
-      useMemo(
-        () =>
-          createSidebarSortedProjectKeysSelector({
-            physicalToLogicalKey,
-            projects: sidebarProjects,
-            sortOrder: sidebarProjectSortOrder,
-          }),
-        [physicalToLogicalKey, sidebarProjectSortOrder, sidebarProjects],
-      ),
-    );
-
-    useEffect(() => {
-      setSidebarProjectOrdering(sortedProjectKeys);
-    }, [sortedProjectKeys]);
-
-    return null;
-  },
-);
-
 export const SidebarKeyboardController = memo(function SidebarKeyboardController(props: {
   navigateToThread: (threadRef: ScopedThreadRef) => void;
   physicalToLogicalKey: ReadonlyMap<string, LogicalProjectKey>;
+  sortedProjectKeys: readonly LogicalProjectKey[];
   sidebarThreadSortOrder: SidebarThreadSortOrder;
 }) {
-  const { navigateToThread, physicalToLogicalKey, sidebarThreadSortOrder } = props;
-  const sortedProjectKeys = useSidebarProjectKeys();
+  const { navigateToThread, physicalToLogicalKey, sortedProjectKeys, sidebarThreadSortOrder } =
+    props;
   const expandedThreadListsByProject = useSidebarExpandedThreadListsByProject();
   const routeThreadRef = useParams({
     strict: false,

apps/web/src/components/sidebar/sidebarSelectors.ts

@@ -13,7 +13,6 @@ import {
   type ThreadStatusLatestTurnSnapshot,
   type ThreadStatusSessionSnapshot,
 } from "../Sidebar.logic";
-import { THREAD_PREVIEW_LIMIT } from "./sidebarConstants";
 import type { AppState, EnvironmentState } from "../../store";
 import type { SidebarThreadSummary } from "../../types";
 import type { LogicalProjectKey } from "../../logicalProject";
@@ -404,59 +403,6 @@ export function createSidebarSortedThreadKeysByLogicalProjectSelector(input: {
   };
 }
 
-export function createSidebarVisibleThreadKeysSelector(input: {
-  expandedThreadListsByProject: ReadonlySet<LogicalProjectKey>;
-  physicalToLogicalKey: ReadonlyMap<string, LogicalProjectKey>;
-  projectExpandedStates: readonly boolean[];
-  sortedProjectKeys: readonly LogicalProjectKey[];
-  threadSortOrder: SidebarThreadSortOrder;
-  routeThreadKey: string | null;
-}): (state: AppState) => readonly string[] {
-  let previousResult: readonly string[] = EMPTY_PROJECT_THREAD_KEYS;
-  const sortedThreadKeysByLogicalProjectSelector =
-    createSidebarSortedThreadKeysByLogicalProjectSelector({
-      physicalToLogicalKey: input.physicalToLogicalKey,
-      threadSortOrder: input.threadSortOrder,
-    });
-
-  return (state) => {
-    const sortedThreadKeysByLogicalProject = sortedThreadKeysByLogicalProjectSelector(state);
-    const nextVisibleThreadKeys: string[] = [];
-
-    input.sortedProjectKeys.forEach((projectKey, index) => {
-      const projectThreadKeys = sortedThreadKeysByLogicalProject.get(projectKey) ?? [];
-      const projectExpanded = input.projectExpandedStates[index] ?? true;
-      const activeThreadKey = input.routeThreadKey ?? undefined;
-      const pinnedCollapsedThread =
-        !projectExpanded && activeThreadKey
-          ? (projectThreadKeys.find((threadKey) => threadKey === activeThreadKey) ?? null)
-          : null;
-      const shouldShowThreadPanel = projectExpanded || pinnedCollapsedThread !== null;
-      if (!shouldShowThreadPanel) {
-        return;
-      }
-
-      const isThreadListExpanded = input.expandedThreadListsByProject.has(projectKey);
-      const hasOverflowingThreads = projectThreadKeys.length > THREAD_PREVIEW_LIMIT;
-      const visibleProjectThreadKeys =
-        isThreadListExpanded || !hasOverflowingThreads
-          ? projectThreadKeys
-          : projectThreadKeys.slice(0, THREAD_PREVIEW_LIMIT);
-      nextVisibleThreadKeys.push(
-        ...(pinnedCollapsedThread ? [pinnedCollapsedThread] : visibleProjectThreadKeys),
-      );
-    });
-
-    if (stringArraysEqual(previousResult, nextVisibleThreadKeys)) {
-      return previousResult;
-    }
-
-    previousResult =
-      nextVisibleThreadKeys.length === 0 ? EMPTY_PROJECT_THREAD_KEYS : nextVisibleThreadKeys;
-    return previousResult;
-  };
-}
-
 export function createSidebarThreadRowSnapshotSelectorByRef(
   ref: ScopedThreadRef | null | undefined,
 ): (state: AppState) => SidebarThreadRowSnapshot | undefined {

apps/web/src/components/sidebar/sidebarViewStore.ts

@@ -4,19 +4,16 @@ import { createStore } from "zustand/vanilla";
 import type { LogicalProjectKey } from "../../logicalProject";
 
 interface SidebarTransientState {
-  sortedProjectKeys: readonly LogicalProjectKey[];
   activeRouteThreadKey: string | null;
   activeRouteProjectKey: LogicalProjectKey | null;
   threadJumpLabelByKey: ReadonlyMap<string, string>;
   expandedThreadListsByProject: ReadonlySet<LogicalProjectKey>;
 }
 
 const EMPTY_THREAD_JUMP_LABELS = new Map<string, string>();
-const EMPTY_SIDEBAR_PROJECT_KEYS: LogicalProjectKey[] = [];
 const EMPTY_EXPANDED_THREAD_LISTS_BY_PROJECT = new Set<LogicalProjectKey>();
 
 const sidebarViewStore = createStore<SidebarTransientState>(() => ({
-  sortedProjectKeys: EMPTY_SIDEBAR_PROJECT_KEYS,
   activeRouteThreadKey: null,
   activeRouteProjectKey: null,
   threadJumpLabelByKey: EMPTY_THREAD_JUMP_LABELS,
@@ -25,22 +22,13 @@ const sidebarViewStore = createStore<SidebarTransientState>(() => ({
 
 export function resetSidebarViewState(): void {
   sidebarViewStore.setState({
-    sortedProjectKeys: EMPTY_SIDEBAR_PROJECT_KEYS,
     activeRouteThreadKey: null,
     activeRouteProjectKey: null,
     threadJumpLabelByKey: EMPTY_THREAD_JUMP_LABELS,
     expandedThreadListsByProject: EMPTY_EXPANDED_THREAD_LISTS_BY_PROJECT,
   });
 }
 
-export function stringArraysEqual(left: readonly string[], right: readonly string[]): boolean {
-  return left.length === right.length && left.every((value, index) => value === right[index]);
-}
-
-export function useSidebarProjectKeys(): readonly LogicalProjectKey[] {
-  return useZustandStore(sidebarViewStore, (state) => state.sortedProjectKeys);
-}
-
 export function useSidebarProjectThreadListExpanded(projectKey: LogicalProjectKey): boolean {
   return useZustandStore(
     sidebarViewStore,
@@ -116,17 +104,6 @@ export function useSidebarProjectActiveRouteThreadKey(
   );
 }
 
-export function setSidebarProjectOrdering(sortedProjectKeys: readonly LogicalProjectKey[]): void {
-  const currentState = sidebarViewStore.getState();
-  if (stringArraysEqual(currentState.sortedProjectKeys, sortedProjectKeys)) {
-    return;
-  }
-
-  sidebarViewStore.setState({
-    sortedProjectKeys,
-  });
-}
-
 export function setSidebarKeyboardState(input: {
   activeRouteProjectKey: LogicalProjectKey | null;
   activeRouteThreadKey: string | null;