`b612367`

perf: stable row callbacks + collapsed passes + scroll effect gating

Authored by

espadonne 1 month ago

SHA: b612367e928a9a1b2022fd91a8e4dd0712ed2ebb
Parents: 1ed01e3
Tree: 924bdab

1 changed file

Status	File	+	-
M	`src/components/ProjectsPane.tsx`	52	82

src/components/ProjectsPane.tsxmodified

 -import { memo, useEffect, useMemo, useRef, useState } from "react";
 +import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
  import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
  import { PaneHeader } from "@/components/panes/PaneHeader";
  import { useSessionStore } from "@/lib/store/sessions";
  import type { Project, SessionSummary } from "@/lib/ipc/types";
 -// ---------------------------------------------------------------
 -// Virtualized flat-row model
 -// ---------------------------------------------------------------
 -//
 -// The previous implementation was a straight `projects.map(...)`
 -// nested inside section wrappers. That worked for small session
 -// sets but beachballed once the user had hundreds of sessions —
 -// every store update re-reconciled every row. We now flatten the
 -// tree into a single list of typed rows and feed it to react-
 -// virtuoso, which only mounts rows currently in the viewport (plus
 -// a small overscan buffer). Rescans that return an equal-by-key
 -// row skip re-rendering thanks to the `React.memo` row renderer.
+-
 +// Flat-row virtualization model for the sidebar. The previous tree
 +// walk reconciled every row on every store tick; virtualizing
 +// bounds the live row count to the viewport and a small overscan
 +// buffer, and memoized row components mean rescans that return
 +// equal-by-key rows don't re-render.
  type ProjectsRow =
    | {
        kind: "project-header";
    return rows;
+ }
 -// ---------------------------------------------------------------
 -// Top-level pane
 -// ---------------------------------------------------------------
+-
  export function ProjectsPane() {
    const projects = useSessionStore((s) => s.projects);
    const loading = useSessionStore((s) => s.loading.projects);
    const expandedProjectIds = useSessionStore((s) => s.expandedProjectIds);
    const selectedSessionId = useSessionStore((s) => s.selectedSessionId);
 -  const toggleProject = useSessionStore((s) => s.toggleProject);
 -  const selectSession = useSessionStore((s) => s.selectSession);
    const rescan = useSessionStore((s) => s.rescan);
    const [observerExpanded, setObserverExpanded] = useState(false);
    const [archiveExpanded, setArchiveExpanded] = useState(false);
    const virtuosoRef = useRef<VirtuosoHandle | null>(null);
 +  const rowsRef = useRef<ProjectsRow[]>([]);
    const rows = useMemo(
      () =>
        ),
      [projects, expandedProjectIds, observerExpanded, archiveExpanded, loading],
    );
 +  rowsRef.current = rows;
 -  const regularCount = useMemo(
 -    () => projects.filter((p) => p.category === "regular").length,
 -    [projects],
 -  );
 -  const totalSessionCount = useMemo(
 -    () =>
 -      projects
 -        .filter((p) => p.category === "regular")
 -        .reduce((acc, p) => acc + p.sessionCount, 0),
 -    [projects],
 -  );
 +  // Single pass over projects for the header subtitle.
 +  const { regularCount, totalSessionCount } = useMemo(() => {
 +    let count = 0;
 +    let total = 0;
 +    for (const p of projects) {
 +      if (p.category === "regular") {
 +        count += 1;
 +        total += p.sessionCount;
 +      }
 +    }
 +    return { regularCount: count, totalSessionCount: total };
 +  }, [projects]);
 -  // Scroll the selected session into view when it changes out-of-
 -  // band (e.g. from the titlebar "N terminals" popover or from a
 -  // deep link). If the row isn't currently in the flat list
 -  // because its parent project is collapsed, the scroll is a no-op
 -  // — still correct, just silent.
 +  // Scroll the selected session into view only when the selection
 +  // itself changes — the previous version fired on every rescan
 +  // because `rows` was in its dep array, which yanked the viewport
 +  // back to the selected row every 2s as the user scrolled away.
    useEffect(() => {
      if (!selectedSessionId) return;
 -    const idx = rows.findIndex(
 +    const idx = rowsRef.current.findIndex(
        (r) => r.kind === "session-row" && r.session.id === selectedSessionId,
      );
      if (idx >= 0) {
          behavior: "auto",
        });
+     }
 -  }, [selectedSessionId, rows]);
 +  }, [selectedSessionId]);
++
 +  const toggleObserver = useCallback(
 +    () => setObserverExpanded((x) => !x),
 +    [],
 +  );
 +  const toggleArchive = useCallback(() => setArchiveExpanded((x) => !x), []);
++
 +  const renderItem = useCallback(
 +    (_index: number, row: ProjectsRow) => (
 +      <RowRenderer
 +        row={row}
 +        onToggleObserver={toggleObserver}
 +        onToggleArchive={toggleArchive}
 +      />
 +    ),
 +    [toggleObserver, toggleArchive],
 +  );
    return (
      <div className="flex h-full flex-col overflow-hidden">
            data={rows}
            computeItemKey={(_index, row) => row.key}
            increaseViewportBy={{ top: 400, bottom: 400 }}
 -          itemContent={(_index, row) => (
 -            <RowRenderer
 -              row={row}
 -              selectedSessionId={selectedSessionId}
 -              onToggleProject={toggleProject}
 -              onSelectSession={selectSession}
 -              onToggleObserver={() => setObserverExpanded((x) => !x)}
 -              onToggleArchive={() => setArchiveExpanded((x) => !x)}
 -            />
 -          )}
 +          itemContent={renderItem}
          />
        </div>
      </div>
    );
+ }
 -// ---------------------------------------------------------------
 -// Row renderer (memoized)
 -// ---------------------------------------------------------------
+-
  interface RowRendererProps {
    row: ProjectsRow;
 -  selectedSessionId: string | null;
 -  onToggleProject: (id: string) => void;
 -  onSelectSession: (session: SessionSummary) => Promise<void>;
    onToggleObserver: () => void;
    onToggleArchive: () => void;
+ }
  const RowRenderer = memo(function RowRenderer({
    row,
 -  selectedSessionId,
 -  onToggleProject,
 -  onSelectSession,
    onToggleObserver,
    onToggleArchive,
  }: RowRendererProps) {
            expanded={row.expanded}
            muted={row.muted}
            allowNewSession={row.allowNewSession}
 -          onToggle={() => onToggleProject(row.project.id)}
          />
        );
      case "session-row":
 -      return (
 -        <SessionRowInner
 -          session={row.session}
 -          selected={row.session.id === selectedSessionId}
 -          muted={row.muted}
 -          onSelect={() => void onSelectSession(row.session)}
 -        />
 -      );
 +      return <SessionRowInner session={row.session} muted={row.muted} />;
      case "section-header":
        return (
          <SectionHeaderRow
+   }
  });
 -// ---------------------------------------------------------------
 -// Row components (all memoized — re-render only when their props
 -// actually change, which for rescans of unchanged rows is never).
 -// ---------------------------------------------------------------
+-
  const ProjectHeaderRow = memo(function ProjectHeaderRow({
    project,
    expanded,
    muted,
    allowNewSession,
 -  onToggle,
  }: {
    project: Project;
    expanded: boolean;
    muted: boolean;
    allowNewSession: boolean;
 -  onToggle: () => void;
  }) {
    const hasSessions = project.sessions.length > 0;
    const beginNewSession = useSessionStore((s) => s.beginNewSession);
 +  const toggleProject = useSessionStore((s) => s.toggleProject);
    // Narrow selector — only re-render when THIS project's live-pty
    // rollup flips, not on every unrelated ptyIds mutation.
    const hasChildPty = useSessionStore((s) => {
        <div className="relative flex items-stretch">
          <button
            type="button"
 -          onClick={onToggle}
 +          onClick={() => toggleProject(project.id)}
            className="flex w-full items-start gap-1.5 px-2 py-1.5 pr-8 text-left transition hover:bg-bg-1"
+         >
            <span className="mt-0.5 w-3 shrink-0 text-[10px] text-fg-3">
  const SessionRowInner = memo(function SessionRowInner({
    session,
 -  selected,
    muted,
 -  onSelect,
  }: {
    session: SessionSummary;
 -  selected: boolean;
    muted: boolean;
 -  onSelect: () => void;
  }) {
 -  // Narrow selector — zustand diffs the returned boolean, so this
 -  // only re-renders when *this* row's live-PTY state flips.
 +  // Narrow selectors — only re-render when the row's own pty/selected
 +  // state actually flips, not on every unrelated store mutation.
    const hasLivePty = useSessionStore((s) => s.ptyIds.has(session.id));
 +  const selected = useSessionStore((s) => s.selectedSessionId === session.id);
    const closeSessionPty = useSessionStore((s) => s.closeSessionPty);
 +  const selectSession = useSessionStore((s) => s.selectSession);
    return (
      <div
        className={`group/session relative ml-[14px] border-l border-border/60 ${
+     >
        <button
          type="button"
 -        onClick={onSelect}
 +        onClick={() => void selectSession(session)}
          className={`flex w-full flex-col gap-0.5 border-l-2 py-1.5 pl-3 pr-8 text-left transition ${
            selected
              ? "border-accent bg-bg-2"