refactor: extract main app layout surfaces

Author: Dimillian

src/features/app/components/MainApp.tsx

@@ -0,0 +1,6 @@
+import { useLayoutNodes } from "@/features/layout/hooks/useLayoutNodes";
+import type { LayoutNodesOptions } from "@/features/layout/hooks/layoutNodes/types";
+
+export function useMainAppLayoutNodes(options: LayoutNodesOptions) {
+  return useLayoutNodes(options);
+}

src/features/app/hooks/useMainAppLayoutNodes.ts

@@ -0,0 +1,80 @@
+import { SidebarCollapseButton } from "@/features/layout/components/SidebarToggleControls";
+import type { ComponentProps } from "react";
+import { MainAppShell } from "@app/components/MainAppShell";
+
+type UseMainAppShellPropsArgs = {
+  shell: Pick<
+    ComponentProps<typeof MainAppShell>,
+    | "appClassName"
+    | "isResizing"
+    | "appStyle"
+    | "appRef"
+    | "sidebarToggleProps"
+    | "shouldLoadGitHubPanelData"
+    | "appModalsProps"
+    | "showMobileSetupWizard"
+    | "mobileSetupWizardProps"
+  >;
+  gitHubPanelDataProps: ComponentProps<typeof MainAppShell>["gitHubPanelDataProps"];
+  appLayout: Omit<ComponentProps<typeof MainAppShell>["appLayoutProps"], "desktopTopbarLeftNode" | "topbarActionsNode">;
+  topbar: {
+    isCompact: boolean;
+    desktopTopbarLeftNode: ComponentProps<typeof MainAppShell>["appLayoutProps"]["desktopTopbarLeftNode"];
+    hasActiveWorkspace: boolean;
+    backendMode: "local" | "remote";
+    remoteThreadConnectionState: "live" | "polling" | "disconnected";
+  };
+};
+
+export function useMainAppShellProps({
+  shell,
+  gitHubPanelDataProps,
+  appLayout,
+  topbar,
+}: UseMainAppShellPropsArgs) {
+  const showThreadConnectionIndicator =
+    topbar.hasActiveWorkspace && topbar.backendMode === "remote";
+  const topbarActionsNode = showThreadConnectionIndicator ? (
+    <span
+      className={`compact-workspace-live-indicator ${
+        topbar.remoteThreadConnectionState === "live"
+          ? "is-live"
+          : topbar.remoteThreadConnectionState === "polling"
+            ? "is-polling"
+            : "is-disconnected"
+      }`}
+      title={
+        topbar.remoteThreadConnectionState === "live"
+          ? "Receiving live thread events"
+          : topbar.remoteThreadConnectionState === "polling"
+            ? "Connected, syncing thread state by polling"
+            : "Disconnected from backend"
+      }
+    >
+      {topbar.remoteThreadConnectionState === "live"
+        ? "Live"
+        : topbar.remoteThreadConnectionState === "polling"
+          ? "Polling"
+          : "Disconnected"}
+    </span>
+  ) : null;
+
+  const desktopTopbarLeftNodeWithToggle = !topbar.isCompact ? (
+    <div className="topbar-leading">
+      <SidebarCollapseButton {...shell.sidebarToggleProps} />
+      {topbar.desktopTopbarLeftNode}
+    </div>
+  ) : (
+    topbar.desktopTopbarLeftNode
+  );
+
+  return {
+    ...shell,
+    gitHubPanelDataProps,
+    appLayoutProps: {
+      ...appLayout,
+      desktopTopbarLeftNode: desktopTopbarLeftNodeWithToggle,
+      topbarActionsNode,
+    },
+  };
+}

src/features/app/hooks/useMainAppLayoutSurfaces.ts

@@ -0,0 +1,69 @@
+import { useAppMenuEvents } from "@app/hooks/useAppMenuEvents";
+import { useMenuAcceleratorController } from "@app/hooks/useMenuAcceleratorController";
+import { useSidebarLayoutActions } from "@app/hooks/useSidebarLayoutActions";
+import { useWorkspaceCycling } from "@app/hooks/useWorkspaceCycling";
+
+type UseMainAppSidebarMenuOrchestrationArgs = {
+  sidebarActions: Parameters<typeof useSidebarLayoutActions>[0];
+  workspaceCycling: Parameters<typeof useWorkspaceCycling>[0];
+  appMenu: Omit<
+    Parameters<typeof useAppMenuEvents>[0],
+    | "onOpenSettings"
+    | "onCycleAgent"
+    | "onCycleWorkspace"
+    | "onAddWorkspace"
+    | "onAddWorkspaceFromUrl"
+    | "onAddAgent"
+    | "onAddWorktreeAgent"
+    | "onAddCloneAgent"
+  > & {
+    onAddWorkspace: () => void;
+    onAddWorkspaceFromUrl: () => void;
+    onAddAgent: NonNullable<Parameters<typeof useAppMenuEvents>[0]["onAddAgent"]>;
+    onAddWorktreeAgent: NonNullable<
+      Parameters<typeof useAppMenuEvents>[0]["onAddWorktreeAgent"]
+    >;
+    onAddCloneAgent: NonNullable<
+      Parameters<typeof useAppMenuEvents>[0]["onAddCloneAgent"]
+    >;
+  };
+  appSettings: Parameters<typeof useMenuAcceleratorController>[0]["appSettings"];
+  onDebug: Parameters<typeof useMenuAcceleratorController>[0]["onDebug"];
+};
+
+export function useMainAppSidebarMenuOrchestration({
+  sidebarActions,
+  workspaceCycling,
+  appMenu,
+  appSettings,
+  onDebug,
+}: UseMainAppSidebarMenuOrchestrationArgs) {
+  const sidebarHandlers = useSidebarLayoutActions(sidebarActions);
+  const { handleCycleAgent, handleCycleWorkspace } = useWorkspaceCycling(workspaceCycling);
+
+  useAppMenuEvents({
+    ...appMenu,
+    onAddWorkspace: () => {
+      appMenu.onAddWorkspace();
+    },
+    onAddWorkspaceFromUrl: () => {
+      appMenu.onAddWorkspaceFromUrl();
+    },
+    onAddAgent: (workspace) => {
+      void appMenu.onAddAgent(workspace);
+    },
+    onAddWorktreeAgent: (workspace) => {
+      void appMenu.onAddWorktreeAgent(workspace);
+    },
+    onAddCloneAgent: (workspace) => {
+      void appMenu.onAddCloneAgent(workspace);
+    },
+    onOpenSettings: sidebarHandlers.onOpenSettings,
+    onCycleAgent: handleCycleAgent,
+    onCycleWorkspace: handleCycleWorkspace,
+  });
+
+  useMenuAcceleratorController({ appSettings, onDebug });
+
+  return sidebarHandlers;
+}