Fix workspace tab presentation hook ordering

2026-03-19 15:45:29 +07:00
parent 7609ccee4c
commit 20fa1a3a3b
4 changed files with 193 additions and 141 deletions
@@ -41,7 +41,7 @@ import {
  type WorkspaceDesktopTabRowItem,
 } from "@/screens/workspace/workspace-desktop-tabs-row";
 import {
-  useWorkspaceTabPresentation,
+  WorkspaceTabPresentationResolver,
  WorkspaceTabIcon,
 } from "@/screens/workspace/workspace-tab-presentation";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
@@ -489,35 +489,41 @@ function DragOverlayTabChipInner({
  normalizedWorkspaceId: string;
 }) {
  const { theme } = useUnistyles();
-  const presentation = useWorkspaceTabPresentation({
-    tab,
-    serverId: normalizedServerId,
-    workspaceId: normalizedWorkspaceId,
-  });
-  const label =
-    presentation.titleState === "loading" ? "Loading..." : presentation.label;

  return (
-    <View
-      style={[
-        styles.dragOverlayChip,
-        {
-          backgroundColor: theme.colors.surface1,
-          borderColor: theme.colors.borderAccent,
-        },
-      ]}
+    <WorkspaceTabPresentationResolver
+      tab={tab}
+      serverId={normalizedServerId}
+      workspaceId={normalizedWorkspaceId}
    >
-      <WorkspaceTabIcon presentation={presentation} active size={14} />
-      <Text
-        numberOfLines={1}
-        style={[
-          styles.dragOverlayLabel,
-          { color: theme.colors.foreground },
-        ]}
-      >
-        {label}
-      </Text>
-    </View>
+      {(presentation) => {
+        const label =
+          presentation.titleState === "loading" ? "Loading..." : presentation.label;
+
+        return (
+          <View
+            style={[
+              styles.dragOverlayChip,
+              {
+                backgroundColor: theme.colors.surface1,
+                borderColor: theme.colors.borderAccent,
+              },
+            ]}
+          >
+            <WorkspaceTabIcon presentation={presentation} active size={14} />
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.dragOverlayLabel,
+                { color: theme.colors.foreground },
+              ]}
+            >
+              {label}
+            </Text>
+          </View>
+        );
+      }}
+    </WorkspaceTabPresentationResolver>
  );
 }

@@ -15,7 +15,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { useWorkspaceTabLayout } from "@/screens/workspace/use-workspace-tab-layout";
 import {
-  useWorkspaceTabPresentation,
+  WorkspaceTabPresentationResolver,
  WorkspaceTabIcon,
  type WorkspaceTabPresentation,
 } from "@/screens/workspace/workspace-tab-presentation";
@@ -546,13 +546,6 @@ function ResolvedDesktopTabChip({
  showDropIndicatorBefore: boolean;
  showDropIndicatorAfter: boolean;
 }) {
-  const presentation = useWorkspaceTabPresentation({
-    tab: item.tab,
-    serverId: normalizedServerId,
-    workspaceId: normalizedWorkspaceId,
-  });
-  const tooltipLabel =
-    presentation.titleState === "loading" ? "Loading agent title" : presentation.label;
  const resolvedTab = useMemo(
    () =>
      buildWorkspaceDesktopTabActions({
@@ -580,33 +573,46 @@ function ResolvedDesktopTabChip({
  );

  return (
-    <View style={styles.tabSlot}>
-      {showDropIndicatorBefore ? (
-        <View style={[styles.tabDropIndicator, styles.tabDropIndicatorBefore]} />
-      ) : null}
-      <TabChip
-        tab={item.tab}
-        isActive={item.isActive}
-        isDragging={isDragging}
-        isFocused={isFocused}
-        resolvedTabWidth={resolvedTabWidth}
-        showLabel={showLabel}
-        showCloseButton={showCloseButton}
-        isCloseHovered={item.isCloseHovered}
-        isClosingTab={item.isClosingTab}
-        presentation={presentation}
-        tooltipLabel={tooltipLabel}
-        resolvedTab={resolvedTab}
-        setHoveredTabKey={setHoveredTabKey}
-        setHoveredCloseTabKey={setHoveredCloseTabKey}
-        onNavigateTab={onNavigateTab}
-        onCloseTab={onCloseTab}
-        dragHandleProps={dragHandleProps}
-      />
-      {showDropIndicatorAfter ? (
-        <View style={[styles.tabDropIndicator, styles.tabDropIndicatorAfter]} />
-      ) : null}
-    </View>
+    <WorkspaceTabPresentationResolver
+      tab={item.tab}
+      serverId={normalizedServerId}
+      workspaceId={normalizedWorkspaceId}
+    >
+      {(presentation) => {
+        const tooltipLabel =
+          presentation.titleState === "loading" ? "Loading agent title" : presentation.label;
+
+        return (
+          <View style={styles.tabSlot}>
+            {showDropIndicatorBefore ? (
+              <View style={[styles.tabDropIndicator, styles.tabDropIndicatorBefore]} />
+            ) : null}
+            <TabChip
+              tab={item.tab}
+              isActive={item.isActive}
+              isDragging={isDragging}
+              isFocused={isFocused}
+              resolvedTabWidth={resolvedTabWidth}
+              showLabel={showLabel}
+              showCloseButton={showCloseButton}
+              isCloseHovered={item.isCloseHovered}
+              isClosingTab={item.isClosingTab}
+              presentation={presentation}
+              tooltipLabel={tooltipLabel}
+              resolvedTab={resolvedTab}
+              setHoveredTabKey={setHoveredTabKey}
+              setHoveredCloseTabKey={setHoveredCloseTabKey}
+              onNavigateTab={onNavigateTab}
+              onCloseTab={onCloseTab}
+              dragHandleProps={dragHandleProps}
+            />
+            {showDropIndicatorAfter ? (
+              <View style={[styles.tabDropIndicator, styles.tabDropIndicatorAfter]} />
+            ) : null}
+          </View>
+        );
+      }}
+    </WorkspaceTabPresentationResolver>
  );
 }

@@ -83,7 +83,7 @@ import { useArchiveAgent } from "@/hooks/use-archive-agent";
 import { buildProviderCommand } from "@/utils/provider-command-templates";
 import { generateDraftId } from "@/stores/draft-keys";
 import {
-  useWorkspaceTabPresentation,
+  WorkspaceTabPresentationResolver,
  WorkspaceTabIcon,
  WorkspaceTabOptionRow,
 } from "@/screens/workspace/workspace-tab-presentation";
@@ -226,22 +226,24 @@ function ResolvedMobileActiveTabTrigger({
  normalizedServerId: string;
  normalizedWorkspaceId: string;
 }) {
-  const presentation = useWorkspaceTabPresentation({
-    tab: activeTab,
-    serverId: normalizedServerId,
-    workspaceId: normalizedWorkspaceId,
-  });
-
  return (
-    <>
-      <View style={styles.switcherTriggerIcon} testID="workspace-active-tab-icon">
-        <WorkspaceTabIcon presentation={presentation} active />
-      </View>
+    <WorkspaceTabPresentationResolver
+      tab={activeTab}
+      serverId={normalizedServerId}
+      workspaceId={normalizedWorkspaceId}
+    >
+      {(presentation) => (
+        <>
+          <View style={styles.switcherTriggerIcon} testID="workspace-active-tab-icon">
+            <WorkspaceTabIcon presentation={presentation} active />
+          </View>

-      <Text style={styles.switcherTriggerText} numberOfLines={1}>
-        {presentation.titleState === "loading" ? "Loading..." : presentation.label}
-      </Text>
-    </>
+          <Text style={styles.switcherTriggerText} numberOfLines={1}>
+            {presentation.titleState === "loading" ? "Loading..." : presentation.label}
+          </Text>
+        </>
+      )}
+    </WorkspaceTabPresentationResolver>
  );
 }

@@ -277,11 +279,6 @@ function MobileWorkspaceTabOption({
  onCloseOtherTabs: (tabId: string) => Promise<void> | void;
 }) {
  const { theme } = useUnistyles();
-  const presentation = useWorkspaceTabPresentation({
-    tab,
-    serverId: normalizedServerId,
-    workspaceId: normalizedWorkspaceId,
-  });
  const menuTestIDBase = `workspace-tab-menu-${tab.key}`;
  const menuEntries = buildWorkspaceTabMenuEntries({
    surface: "mobile",
@@ -298,53 +295,61 @@ function MobileWorkspaceTabOption({
  });

  return (
-    <WorkspaceTabOptionRow
-      presentation={presentation}
-      selected={selected}
-      active={active}
-      onPress={onPress}
-      trailingAccessory={
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            testID={`${menuTestIDBase}-trigger`}
-            accessibilityRole="button"
-            accessibilityLabel={`Open menu for ${presentation.label}`}
-            hitSlop={8}
-            style={({ open, pressed }) => [
-              styles.mobileTabMenuTrigger,
-              (open || pressed) && styles.mobileTabMenuTriggerActive,
-            ]}
-          >
-            <Ellipsis
-              size={theme.iconSize.sm}
-              color={theme.colors.foregroundMuted}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            side="bottom"
-            align="end"
-            width={220}
-            testID={menuTestIDBase}
-          >
-            {menuEntries.map((entry) =>
-              entry.kind === "separator" ? (
-                <DropdownMenuSeparator key={entry.key} />
-              ) : (
-                <DropdownMenuItem
-                  key={entry.key}
-                  testID={entry.testID}
-                  disabled={entry.disabled}
-                  destructive={entry.destructive}
-                  onSelect={entry.onSelect}
-                >
-                  {entry.label}
-                </DropdownMenuItem>
-              )
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      }
-    />
+    <WorkspaceTabPresentationResolver
+      tab={tab}
+      serverId={normalizedServerId}
+      workspaceId={normalizedWorkspaceId}
+    >
+      {(presentation) => (
+        <WorkspaceTabOptionRow
+          presentation={presentation}
+          selected={selected}
+          active={active}
+          onPress={onPress}
+          trailingAccessory={
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                testID={`${menuTestIDBase}-trigger`}
+                accessibilityRole="button"
+                accessibilityLabel={`Open menu for ${presentation.label}`}
+                hitSlop={8}
+                style={({ open, pressed }) => [
+                  styles.mobileTabMenuTrigger,
+                  (open || pressed) && styles.mobileTabMenuTriggerActive,
+                ]}
+              >
+                <Ellipsis
+                  size={theme.iconSize.sm}
+                  color={theme.colors.foregroundMuted}
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="bottom"
+                align="end"
+                width={220}
+                testID={menuTestIDBase}
+              >
+                {menuEntries.map((entry) =>
+                  entry.kind === "separator" ? (
+                    <DropdownMenuSeparator key={entry.key} />
+                  ) : (
+                    <DropdownMenuItem
+                      key={entry.key}
+                      testID={entry.testID}
+                      disabled={entry.disabled}
+                      destructive={entry.destructive}
+                      onSelect={entry.onSelect}
+                    >
+                      {entry.label}
+                    </DropdownMenuItem>
+                  )
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          }
+        />
+      )}
+    </WorkspaceTabPresentationResolver>
  );
 }

@@ -21,23 +21,56 @@ export interface WorkspaceTabPresentation {
  statusBucket: SidebarStateBucket | null;
 }

-export function useWorkspaceTabPresentation(input: {
+type WorkspaceTabPresentationResolverProps = {
  tab: WorkspaceTabDescriptor;
  serverId: string;
  workspaceId: string;
-}): WorkspaceTabPresentation {
+  children: (presentation: WorkspaceTabPresentation) => ReactNode;
+};
+
+type WorkspaceTabPresentationResolverInnerProps = WorkspaceTabPresentationResolverProps & {
+  registration: NonNullable<ReturnType<typeof getPanelRegistration>>;
+};
+
+export function WorkspaceTabPresentationResolver({
+  tab,
+  serverId,
+  workspaceId,
+  children,
+}: WorkspaceTabPresentationResolverProps): ReactElement {
  ensurePanelsRegistered();
-  const registration = getPanelRegistration(input.tab.kind);
-  invariant(registration, `No panel registration for kind: ${input.tab.kind}`);
-  const descriptor = registration.useDescriptor(input.tab.target, {
-    serverId: input.serverId,
-    workspaceId: input.workspaceId,
+  const registration = getPanelRegistration(tab.kind);
+  invariant(registration, `No panel registration for kind: ${tab.kind}`);
+
+  return (
+    <WorkspaceTabPresentationResolverInner
+      key={tab.kind}
+      registration={registration}
+      tab={tab}
+      serverId={serverId}
+      workspaceId={workspaceId}
+    >
+      {children}
+    </WorkspaceTabPresentationResolverInner>
+  );
+}
+
+function WorkspaceTabPresentationResolverInner({
+  registration,
+  tab,
+  serverId,
+  workspaceId,
+  children,
+}: WorkspaceTabPresentationResolverInnerProps): ReactElement {
+  const descriptor = registration.useDescriptor(tab.target as never, {
+    serverId,
+    workspaceId,
  });

-  return useMemo(
+  const presentation = useMemo(
    () => ({
-      key: input.tab.key,
-      kind: input.tab.kind,
+      key: tab.key,
+      kind: tab.kind,
      label: descriptor.label,
      subtitle: descriptor.subtitle,
      titleState: descriptor.titleState,
@@ -50,10 +83,12 @@ export function useWorkspaceTabPresentation(input: {
      descriptor.statusBucket,
      descriptor.subtitle,
      descriptor.titleState,
-      input.tab.key,
-      input.tab.kind,
+      tab.key,
+      tab.kind,
    ]
  );
+
+  return <>{children(presentation)}</>;
 }

 type WorkspaceTabIconProps = {