refactor(features): extract queue operation handler callbacks

Move handleClaim, handleResolve, handleReopen, handlePriorityChange,
and handleQueueKeyDown plus the currentItem derivation and
withCurrentItem closure into useQueueOperationHandlers. The hook
takes filteredItems + selectedIndex at call time so keyboard
handlers always see the current selection. Wave 5.4.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: saagar210

src/features/revamp/screens/QueueCommandCenterPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Icon } from "../../../components/shared/Icon";
 import { useToastContext } from "../../../contexts/ToastContext";
 import { useAnalytics } from "../../../hooks/useAnalytics";
@@ -12,7 +12,6 @@ import { QueueHistoryTemplatesPanel } from "./QueueHistoryTemplatesPanel";
 import { resolveRevampFlags } from "../../revamp";
 import {
   formatQueueTimestamp,
-  type QueueItem,
   type QueuePriority,
   type QueueView,
 } from "../../inbox/queueModel";
@@ -28,6 +27,7 @@ import {
 import { useQueueRenderingState } from "./useQueueRenderingState";
 import { useBatchTriageManager } from "./useBatchTriageManager";
 import { useDispatchManager } from "./useDispatchManager";
+import { useQueueOperationHandlers } from "./useQueueOperationHandlers";
 import "../../../styles/revamp/index.css";
 import "./queueCommandCenter.css";
 
@@ -167,6 +167,24 @@ export function QueueCommandCenterPage({
     handleCancelDispatch,
   } = dispatch;
 
+  const operations = useQueueOperationHandlers({
+    filteredItems,
+    selectedIndex,
+    setSelectedIndex,
+    updateQueueMeta,
+    operatorName,
+    onLoadDraft,
+    logEvent,
+  });
+  const {
+    currentItem,
+    handleClaim,
+    handleResolve,
+    handleReopen,
+    handlePriorityChange,
+    handleQueueKeyDown,
+  } = operations;
+
   useEffect(() => {
     loadDrafts(100);
   }, [loadDrafts]);
@@ -214,137 +232,6 @@ export function QueueCommandCenterPage({
     ],
   );
 
-  const handleClaim = useCallback(
-    (draftId: string) => {
-      updateQueueMeta(draftId, { owner: operatorName, state: "in_progress" });
-      void logEvent("queue_item_claimed", {
-        draft_id: draftId,
-        operator: operatorName,
-      });
-    },
-    [logEvent, operatorName, updateQueueMeta],
-  );
-
-  const handleResolve = useCallback(
-    (draftId: string) => {
-      updateQueueMeta(draftId, { state: "resolved" });
-      void logEvent("queue_item_resolved", {
-        draft_id: draftId,
-        operator: operatorName,
-      });
-    },
-    [logEvent, operatorName, updateQueueMeta],
-  );
-
-  const handleReopen = useCallback(
-    (draftId: string) => {
-      updateQueueMeta(draftId, { state: "open" });
-      void logEvent("queue_item_reopened", {
-        draft_id: draftId,
-        operator: operatorName,
-      });
-    },
-    [logEvent, operatorName, updateQueueMeta],
-  );
-
-  const handlePriorityChange = useCallback(
-    (draftId: string, priority: QueuePriority) => {
-      updateQueueMeta(draftId, { priority });
-      void logEvent("queue_item_priority_changed", {
-        draft_id: draftId,
-        operator: operatorName,
-        priority,
-      });
-    },
-    [logEvent, operatorName, updateQueueMeta],
-  );
-
-  const currentItem = filteredItems[selectedIndex] ?? null;
-
-  const withCurrentItem = useCallback(
-    (handler: (item: QueueItem) => void) => {
-      if (!currentItem) return;
-      handler(currentItem);
-    },
-    [currentItem],
-  );
-
-  const handleQueueKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
-      const target = event.target as HTMLElement;
-      const isInputElement =
-        target.tagName === "INPUT" ||
-        target.tagName === "SELECT" ||
-        target.tagName === "TEXTAREA";
-      if (isInputElement) return;
-
-      switch (event.key.toLowerCase()) {
-        case "arrowdown":
-        case "j":
-          event.preventDefault();
-          setSelectedIndex((prev) =>
-            Math.min(prev + 1, Math.max(filteredItems.length - 1, 0)),
-          );
-          break;
-        case "arrowup":
-        case "k":
-          event.preventDefault();
-          setSelectedIndex((prev) => Math.max(prev - 1, 0));
-          break;
-        case "enter":
-          event.preventDefault();
-          withCurrentItem((item) => {
-            onLoadDraft(item.draft);
-            void logEvent("queue_item_opened", {
-              draft_id: item.draft.id,
-              operator: operatorName,
-              entrypoint: "keyboard",
-            });
-          });
-          break;
-        case "c":
-          event.preventDefault();
-          withCurrentItem((item) => {
-            if (
-              item.meta.owner === "unassigned" &&
-              item.meta.state !== "resolved"
-            ) {
-              handleClaim(item.draft.id);
-            }
-          });
-          break;
-        case "x":
-          event.preventDefault();
-          withCurrentItem((item) => {
-            if (item.meta.state !== "resolved") {
-              handleResolve(item.draft.id);
-            }
-          });
-          break;
-        case "o":
-          event.preventDefault();
-          withCurrentItem((item) => {
-            if (item.meta.state === "resolved") {
-              handleReopen(item.draft.id);
-            }
-          });
-          break;
-        default:
-          break;
-      }
-    },
-    [
-      filteredItems.length,
-      handleClaim,
-      handleReopen,
-      handleResolve,
-      logEvent,
-      onLoadDraft,
-      operatorName,
-      withCurrentItem,
-    ],
-  );
-
   const listActions = (
     <div className="as-queue__count" aria-label="Visible work item count">
       {loading ? "Loading…" : `${filteredItems.length} shown`}

src/features/revamp/screens/useQueueOperationHandlers.ts

@@ -0,0 +1,187 @@
+import { useCallback } from "react";
+import type { SavedDraft } from "../../../types/workspace";
+import {
+  type QueueItem,
+  type QueuePriority,
+  type QueueState,
+} from "../../inbox/queueModel";
+
+interface UseQueueOperationHandlersArgs {
+  filteredItems: QueueItem[];
+  selectedIndex: number;
+  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
+  updateQueueMeta: (
+    draftId: string,
+    updates: Partial<{
+      owner: string;
+      state: QueueState;
+      priority: QueuePriority;
+    }>,
+  ) => void;
+  operatorName: string;
+  onLoadDraft: (draft: SavedDraft) => void;
+  logEvent: (
+    eventName: string,
+    properties?: Record<string, unknown>,
+  ) => Promise<unknown> | unknown;
+}
+
+export interface UseQueueOperationHandlersResult {
+  currentItem: QueueItem | null;
+  handleClaim: (draftId: string) => void;
+  handleResolve: (draftId: string) => void;
+  handleReopen: (draftId: string) => void;
+  handlePriorityChange: (draftId: string, priority: QueuePriority) => void;
+  handleQueueKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+}
+
+export function useQueueOperationHandlers({
+  filteredItems,
+  selectedIndex,
+  setSelectedIndex,
+  updateQueueMeta,
+  operatorName,
+  onLoadDraft,
+  logEvent,
+}: UseQueueOperationHandlersArgs): UseQueueOperationHandlersResult {
+  const currentItem = filteredItems[selectedIndex] ?? null;
+
+  const withCurrentItem = useCallback(
+    (handler: (item: QueueItem) => void) => {
+      if (!currentItem) return;
+      handler(currentItem);
+    },
+    [currentItem],
+  );
+
+  const handleClaim = useCallback(
+    (draftId: string) => {
+      updateQueueMeta(draftId, { owner: operatorName, state: "in_progress" });
+      void logEvent("queue_item_claimed", {
+        draft_id: draftId,
+        operator: operatorName,
+      });
+    },
+    [logEvent, operatorName, updateQueueMeta],
+  );
+
+  const handleResolve = useCallback(
+    (draftId: string) => {
+      updateQueueMeta(draftId, { state: "resolved" });
+      void logEvent("queue_item_resolved", {
+        draft_id: draftId,
+        operator: operatorName,
+      });
+    },
+    [logEvent, operatorName, updateQueueMeta],
+  );
+
+  const handleReopen = useCallback(
+    (draftId: string) => {
+      updateQueueMeta(draftId, { state: "open" });
+      void logEvent("queue_item_reopened", {
+        draft_id: draftId,
+        operator: operatorName,
+      });
+    },
+    [logEvent, operatorName, updateQueueMeta],
+  );
+
+  const handlePriorityChange = useCallback(
+    (draftId: string, priority: QueuePriority) => {
+      updateQueueMeta(draftId, { priority });
+      void logEvent("queue_item_priority_changed", {
+        draft_id: draftId,
+        operator: operatorName,
+        priority,
+      });
+    },
+    [logEvent, operatorName, updateQueueMeta],
+  );
+
+  const handleQueueKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      const target = event.target as HTMLElement;
+      const isInputElement =
+        target.tagName === "INPUT" ||
+        target.tagName === "SELECT" ||
+        target.tagName === "TEXTAREA";
+      if (isInputElement) return;
+
+      switch (event.key.toLowerCase()) {
+        case "arrowdown":
+        case "j":
+          event.preventDefault();
+          setSelectedIndex((prev) =>
+            Math.min(prev + 1, Math.max(filteredItems.length - 1, 0)),
+          );
+          break;
+        case "arrowup":
+        case "k":
+          event.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "enter":
+          event.preventDefault();
+          withCurrentItem((item) => {
+            onLoadDraft(item.draft);
+            void logEvent("queue_item_opened", {
+              draft_id: item.draft.id,
+              operator: operatorName,
+              entrypoint: "keyboard",
+            });
+          });
+          break;
+        case "c":
+          event.preventDefault();
+          withCurrentItem((item) => {
+            if (
+              item.meta.owner === "unassigned" &&
+              item.meta.state !== "resolved"
+            ) {
+              handleClaim(item.draft.id);
+            }
+          });
+          break;
+        case "x":
+          event.preventDefault();
+          withCurrentItem((item) => {
+            if (item.meta.state !== "resolved") {
+              handleResolve(item.draft.id);
+            }
+          });
+          break;
+        case "o":
+          event.preventDefault();
+          withCurrentItem((item) => {
+            if (item.meta.state === "resolved") {
+              handleReopen(item.draft.id);
+            }
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [
+      filteredItems.length,
+      handleClaim,
+      handleReopen,
+      handleResolve,
+      logEvent,
+      onLoadDraft,
+      operatorName,
+      setSelectedIndex,
+      withCurrentItem,
+    ],
+  );
+
+  return {
+    currentItem,
+    handleClaim,
+    handleResolve,
+    handleReopen,
+    handlePriorityChange,
+    handleQueueKeyDown,
+  };
+}