rendering optimization around useTabs

yujonglee · yujonglee · commit 6ac6ab8a210a · 2025-11-09T10:00:15.000+09:00
diff --git a/apps/desktop/src/components/chat/message/tool/search.tsx b/apps/desktop/src/components/chat/message/tool/search.tsx
@@ -92,7 +92,7 @@ function RenderContent({ part }: { part: Part }) {
 
 function RenderSession({ sessionId }: { sessionId: string }) {
   const session = main.UI.useRow("sessions", sessionId, main.STORE_ID);
-  const { openNew } = useTabs();
+  const openNew = useTabs((state) => state.openNew);
 
   const handleClick = useCallback(() => {
     openNew({ type: "sessions", id: sessionId });
diff --git a/apps/desktop/src/components/main/body/calendars/day-events.tsx b/apps/desktop/src/components/main/body/calendars/day-events.tsx
@@ -11,7 +11,7 @@ import { useTabs } from "../../../../store/zustand/tabs";
 export function TabContentCalendarDayEvents({ eventId }: { eventId: string }) {
   const event = main.UI.useRow("events", eventId, main.STORE_ID);
   const [open, setOpen] = useState(false);
-  const { openNew } = useTabs();
+  const openNew = useTabs((state) => state.openNew);
 
   const title = event?.title || "Untitled Event";
 
diff --git a/apps/desktop/src/components/main/body/calendars/day-sessions.tsx b/apps/desktop/src/components/main/body/calendars/day-sessions.tsx
@@ -7,7 +7,7 @@ import { useTabs } from "../../../../store/zustand/tabs";
 
 export function TabContentCalendarDaySessions({ sessionId }: { sessionId: string }) {
   const session = main.UI.useRow("sessions", sessionId, main.STORE_ID);
-  const { openNew } = useTabs();
+  const openNew = useTabs((state) => state.openNew);
 
   const eventId = session?.event_id ?? "";
   const event = main.UI.useRow("events", eventId, main.STORE_ID);
diff --git a/apps/desktop/src/components/main/body/calendars/index.tsx b/apps/desktop/src/components/main/body/calendars/index.tsx
@@ -56,7 +56,7 @@ export function TabContentCalendar({ tab }: { tab: Tab }) {
 function TabContentCalendarInner({ tab }: { tab: Extract<Tab, { type: "calendars" }> }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs((state) => state.openCurrent);
 
   const calendarIds = main.UI.useRowIds("calendars", main.STORE_ID);
 
diff --git a/apps/desktop/src/components/main/body/contacts/index.tsx b/apps/desktop/src/components/main/body/contacts/index.tsx
@@ -2,6 +2,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hypr/ui/c
 
 import { Contact2Icon } from "lucide-react";
 import { useCallback, useEffect } from "react";
+import { useShallow } from "zustand/shallow";
 
 import * as main from "../../../../store/tinybase/main";
 import { type Tab, useTabs } from "../../../../store/zustand/tabs";
@@ -46,7 +47,12 @@ export function TabContentContact({ tab }: { tab: Extract<Tab, { type: "contacts
 
 function ContactView({ tab }: { tab: Extract<Tab, { type: "contacts" }> }) {
   const updateContactsTabState = useTabs((state) => state.updateContactsTabState);
-  const { openCurrent, invalidateResource } = useTabs();
+  const { openCurrent, invalidateResource } = useTabs(
+    useShallow((state) => ({
+      openCurrent: state.openCurrent,
+      invalidateResource: state.invalidateResource,
+    })),
+  );
 
   const { selectedOrganization, selectedPerson } = tab.state;
 
diff --git a/apps/desktop/src/components/main/body/empty/index.tsx b/apps/desktop/src/components/main/body/empty/index.tsx
@@ -40,7 +40,7 @@ export function TabContentEmpty({ tab: _tab }: { tab: Extract<Tab, { type: "empt
 
 function EmptyView() {
   const newNote = useNewNote({ behavior: "current" });
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs((state) => state.openCurrent);
   const openCalendar = useCallback(() => openCurrent({ type: "calendars", month: new Date() }), [openCurrent]);
   const openContacts = useCallback(() => openCurrent({ type: "contacts" }), [openCurrent]);
 
diff --git a/apps/desktop/src/components/main/body/folders/index.tsx b/apps/desktop/src/components/main/body/folders/index.tsx
@@ -112,7 +112,7 @@ function TabContentFolderTopLevel() {
 
 function FolderCard({ folderId }: { folderId: string }) {
   const folder = main.UI.useRow("folders", folderId, main.STORE_ID);
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs((state) => state.openCurrent);
 
   const childFolderIds = main.UI.useSliceRowIds(
     main.INDEXES.foldersByParent,
@@ -200,7 +200,7 @@ function TabContentFolderSpecific({ folderId }: { folderId: string }) {
 }
 
 function TabContentFolderBreadcrumb({ folderId }: { folderId: string }) {
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs((state) => state.openCurrent);
 
   return (
     <FolderBreadcrumb
@@ -227,7 +227,7 @@ function TabContentFolderBreadcrumb({ folderId }: { folderId: string }) {
 
 function FolderSessionItem({ sessionId }: { sessionId: string }) {
   const session = main.UI.useRow("sessions", sessionId, main.STORE_ID);
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs((state) => state.openCurrent);
 
   return (
     <div
diff --git a/apps/desktop/src/components/main/body/index.tsx b/apps/desktop/src/components/main/body/index.tsx
@@ -3,6 +3,7 @@ import { ArrowLeftIcon, ArrowRightIcon, PanelLeftOpenIcon, PlusIcon } from "luci
 import { Reorder } from "motion/react";
 import { useCallback, useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import { useShallow } from "zustand/shallow";
 
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
@@ -20,7 +21,12 @@ import { Search } from "./search";
 import { TabContentNote, TabItemNote } from "./sessions";
 
 export function Body() {
-  const { tabs, currentTab } = useTabs();
+  const { tabs, currentTab } = useTabs(
+    useShallow((state) => ({
+      tabs: state.tabs,
+      currentTab: state.currentTab,
+    })),
+  );
 
   if (!currentTab) {
     return null;
@@ -41,7 +47,19 @@ export function Body() {
 
 function Header({ tabs }: { tabs: Tab[] }) {
   const { leftsidebar } = useShell();
-  const { select, close, reorder, goBack, goNext, canGoBack, canGoNext, closeOthers, closeAll } = useTabs();
+  const { select, close, reorder, goBack, goNext, canGoBack, canGoNext, closeOthers, closeAll } = useTabs(
+    useShallow((state) => ({
+      select: state.select,
+      close: state.close,
+      reorder: state.reorder,
+      goBack: state.goBack,
+      goNext: state.goNext,
+      canGoBack: state.canGoBack,
+      canGoNext: state.canGoNext,
+      closeOthers: state.closeOthers,
+      closeAll: state.closeAll,
+    })),
+  );
   const tabsScrollContainerRef = useRef<HTMLDivElement>(null);
   const handleNewEmptyTab = useNewEmptyTab();
 
@@ -341,7 +359,14 @@ function useScrollActiveTabIntoView(tabs: Tab[]) {
 }
 
 function useTabsShortcuts() {
-  const { tabs, currentTab, close, select } = useTabs();
+  const { tabs, currentTab, close, select } = useTabs(
+    useShallow((state) => ({
+      tabs: state.tabs,
+      currentTab: state.currentTab,
+      close: state.close,
+      select: state.select,
+    })),
+  );
   const newNote = useNewNote({ behavior: "new" });
   const newEmptyTab = useNewEmptyTab();
 
@@ -396,7 +421,7 @@ function useTabsShortcuts() {
 }
 
 function useNewEmptyTab() {
-  const { openNew } = useTabs();
+  const openNew = useTabs((state) => state.openNew);
 
   const handler = useCallback(() => {
     openNew({ type: "empty" });
diff --git a/apps/desktop/src/components/main/body/sessions/note-input/index.tsx b/apps/desktop/src/components/main/body/sessions/note-input/index.tsx
@@ -15,7 +15,7 @@ import { Transcript } from "./transcript";
 
 export function NoteInput({ tab }: { tab: Extract<Tab, { type: "sessions" }> }) {
   const editorTabs = useEditorTabs({ sessionId: tab.id });
-  const { updateSessionTabState } = useTabs();
+  const updateSessionTabState = useTabs((state) => state.updateSessionTabState);
   const editorRef = useRef<{ editor: TiptapEditor | null }>(null);
   const inactive = useListener((state) => state.live.status === "inactive");
   const [isEditing, setIsEditing] = useState(false);
diff --git a/apps/desktop/src/components/main/body/sessions/outer-header/folder.tsx b/apps/desktop/src/components/main/body/sessions/outer-header/folder.tsx
@@ -50,7 +50,7 @@ function RenderIfRootExist(
     handleChangeTitle: (title: string) => void;
   },
 ) {
-  const { openNew } = useTabs();
+  const openNew = useTabs((state) => state.openNew);
 
   return (
     <>
diff --git a/apps/desktop/src/components/main/body/sessions/outer-header/metadata/participants.tsx b/apps/desktop/src/components/main/body/sessions/outer-header/metadata/participants.tsx
@@ -1,5 +1,6 @@
 import { CircleMinus, CornerDownLeft, Linkedin, MailIcon, SearchIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useShallow } from "zustand/shallow";
 
 import { Avatar, AvatarFallback } from "@hypr/ui/components/ui/avatar";
 import { cn } from "@hypr/utils";
@@ -241,7 +242,14 @@ function useRemoveParticipant({
 function ParticipantItem({ mappingId }: { mappingId: string }) {
   const userId = main.UI.useValue("user_id", main.STORE_ID);
   const details = useParticipantDetails(mappingId);
-  const { tabs, openNew, updateContactsTabState, select } = useTabs();
+  const { tabs, openNew, updateContactsTabState, select } = useTabs(
+    useShallow((state) => ({
+      tabs: state.tabs,
+      openNew: state.openNew,
+      updateContactsTabState: state.updateContactsTabState,
+      select: state.select,
+    })),
+  );
 
   const assignedHumanId = details?.humanId;
   const sessionId = details?.sessionId;
diff --git a/apps/desktop/src/components/main/shared.ts b/apps/desktop/src/components/main/shared.ts
@@ -1,11 +1,17 @@
 import { useRouteContext } from "@tanstack/react-router";
 import { useCallback } from "react";
+import { useShallow } from "zustand/shallow";
 import { useTabs } from "../../store/zustand/tabs";
 import { id } from "../../utils";
 
 export function useNewNote({ behavior = "new" }: { behavior?: "new" | "current" }) {
   const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
-  const { openNew, openCurrent } = useTabs();
+  const { openNew, openCurrent } = useTabs(
+    useShallow((state) => ({
+      openNew: state.openNew,
+      openCurrent: state.openCurrent,
+    })),
+  );
 
   const handler = useCallback(() => {
     const user_id = internalStore?.getValue("user_id");
diff --git a/apps/desktop/src/components/main/sidebar/profile/index.tsx b/apps/desktop/src/components/main/sidebar/profile/index.tsx
@@ -27,7 +27,7 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
   const [currentView, setCurrentView] = useState<ProfileView>("main");
   const [mainViewHeight, setMainViewHeight] = useState<number | null>(null);
   const mainViewRef = useRef<HTMLDivElement | null>(null);
-  const { openNew } = useTabs();
+  const openNew = useTabs(state => state.openNew);
   const auth = useAuth();
 
   const isAuthenticated = !!auth?.session;
diff --git a/apps/desktop/src/components/main/sidebar/search/item.tsx b/apps/desktop/src/components/main/sidebar/search/item.tsx
@@ -8,7 +8,7 @@ import { type TabInput, useTabs } from "../../../../store/zustand/tabs";
 import { getInitials } from "../../body/contacts/shared";
 
 export function SearchResultItem({ result }: { result: SearchResult }) {
-  const { openCurrent } = useTabs();
+  const openCurrent = useTabs(state => state.openCurrent);
 
   const handleClick = useCallback(() => {
     const tab = getTab(result);
diff --git a/apps/desktop/src/components/main/sidebar/timeline/index.tsx b/apps/desktop/src/components/main/sidebar/timeline/index.tsx
@@ -6,6 +6,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type ReactNode, useMemo } from "react";
 
 import * as main from "../../../../store/tinybase/main";
+import { useTabs } from "../../../../store/zustand/tabs";
 import {
   buildTimelineBuckets,
   calculateIndicatorIndex,
@@ -21,6 +22,21 @@ export function TimelineView() {
   const buckets = useTimelineData();
   const hasToday = useMemo(() => buckets.some(bucket => bucket.label === "Today"), [buckets]);
 
+  const currentTab = useTabs((state) => state.currentTab);
+  const store = main.UI.useStore(main.STORE_ID);
+
+  const selectedSessionId = useMemo(() => {
+    return currentTab?.type === "sessions" ? currentTab.id : undefined;
+  }, [currentTab]);
+
+  const selectedEventId = useMemo(() => {
+    if (!selectedSessionId || !store) {
+      return undefined;
+    }
+    const session = store.getRow("sessions", selectedSessionId);
+    return session?.event_id ? String(session.event_id) : undefined;
+  }, [selectedSessionId, store]);
+
   const {
     containerRef,
     isAnchorVisible: isTodayVisible,
@@ -90,16 +106,24 @@ export function TimelineView() {
                     items={bucket.items}
                     precision={bucket.precision}
                     registerIndicator={setCurrentTimeIndicatorRef}
+                    selectedSessionId={selectedSessionId}
+                    selectedEventId={selectedEventId}
                   />
                 )
                 : (
-                  bucket.items.map((item) => (
-                    <TimelineItemComponent
-                      key={`${item.type}-${item.id}`}
-                      item={item}
-                      precision={bucket.precision}
-                    />
-                  ))
+                  bucket.items.map((item) => {
+                    const selected = item.type === "session"
+                      ? item.id === selectedSessionId
+                      : item.id === selectedEventId;
+                    return (
+                      <TimelineItemComponent
+                        key={`${item.type}-${item.id}`}
+                        item={item}
+                        precision={bucket.precision}
+                        selected={selected}
+                      />
+                    );
+                  })
                 )}
             </div>
           );
@@ -135,10 +159,14 @@ function TodayBucket({
   items,
   precision,
   registerIndicator,
+  selectedSessionId,
+  selectedEventId,
 }: {
   items: TimelineItem[];
   precision: TimelinePrecision;
   registerIndicator: (node: HTMLDivElement | null) => void;
+  selectedSessionId: string | undefined;
+  selectedEventId: string | undefined;
 }) {
   const currentTimeMs = useCurrentTimeMs();
 
@@ -177,11 +205,16 @@ function TodayBucket({
         nodes.push(<CurrentTimeIndicator ref={registerIndicator} key="current-time-indicator" />);
       }
 
+      const selected = entry.item.type === "session"
+        ? entry.item.id === selectedSessionId
+        : entry.item.id === selectedEventId;
+
       nodes.push(
         <TimelineItemComponent
           key={`${entry.item.type}-${entry.item.id}`}
           item={entry.item}
           precision={precision}
+          selected={selected}
         />,
       );
     });
@@ -191,7 +224,7 @@ function TodayBucket({
     }
 
     return <>{nodes}</>;
-  }, [entries, indicatorIndex, precision, registerIndicator]);
+  }, [entries, indicatorIndex, precision, registerIndicator, selectedSessionId, selectedEventId]);
 
   return renderedEntries;
 }
diff --git a/apps/desktop/src/components/main/sidebar/timeline/item.tsx b/apps/desktop/src/components/main/sidebar/timeline/item.tsx
