# Files changed · PR \#23072 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/23072/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): ChatView's paste-to-focus, titlebar controls, and timeline overlays move out](https://git.cafe/pingdotgg/t3code/pull/23072.md) Version: 7 Head commit: c6cd722894aa8f10feaf4c2b8855e68014ebee58 Base commit: 9d1b04843931bceefe82d0296b3dd27f072b636d Comparison base: 9d1b04843931bceefe82d0296b3dd27f072b636d Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/ChatView.tsx Status: modified; +22; −119 ```diff @@ -1,3 +1,5 @@ +import { ScrollToEndButton, WorkspaceFileDropOverlay } from "./chat/TimelineOverlays"; +import { usePasteToFocusComposer } from "./chat/usePasteToFocusComposer"; import { deriveAvailableRevertTurnCounts, deriveThreadPendingBackgroundTasks, @@ -44,10 +46,6 @@ import { useUsageLimitsPanel } from "./chat/useUsageLimitsPanel"; import { useWorktreeSetup } from "./chat/useWorktreeSetup"; import { useChatShortcuts, type ChatShortcutHandler } from "./chat/useChatShortcuts"; -import { - pasteTextToFocusComposer, - shouldRedirectInputToComposer, -} from "./chat/composerFocusRedirect"; import * as Schema from "effect/Schema"; import { AuthOrchestrationOperateScope, @@ -71,8 +69,6 @@ resolveIdleCompaction, RuntimeMode, } from "@t3tools/contracts"; -import { readPastedComposerContext } from "./composerInlineTokenPaste"; -import { isPasteAsTextShortcut } from "@t3tools/client-runtime/text-paste"; import { useThreadActions } from "../hooks/useThreadActions"; import { deriveProviderSubagentStatus, @@ -111,7 +107,6 @@ import { type SetStateAction, useEffect, useLayoutEffect, useRef, useState } from "react"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { assistantCitationFromLocation } from "../lib/assistantCitationNavigation"; -import { isMacPlatform } from "../lib/utils"; import type { AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection"; import { useShallow } from "zustand/react/shallow"; import { @@ -141,7 +136,6 @@ import { DEFAULT_INTERACTION_MODE, type ChatMessage } from "../types"; import { useTheme } from "../hooks/useTheme"; import { writeTextToClipboard } from "../hooks/useCopyToClipboard"; -import { isCommandPaletteOpen } from "../commandPaletteBus"; import { settleAndAdvance } from "../settleAndAdvance"; import { subscribeSnapShotComposerFocus } from "../lib/desktopSnapShot"; import { useMediaQuery } from "../hooks/useMediaQuery"; @@ -177,7 +171,6 @@ import { isEditableFocused } from "../lib/editableFocus"; import { DEFAULT_RESOLVED_KEYBINDINGS } from "@t3tools/shared/keybindings"; import { shortcutLabelForCommand } from "../keybindings"; -import { PaperclipIcon, ChevronDownIcon } from "lucide-react"; import { cn } from "~/lib/utils"; import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar"; import { stackedThreadToast, toastManager } from "./ui/toast"; @@ -276,7 +269,8 @@ import { PanelLayoutControls, type PanelLayoutControlsProps, + ThreadPanelHeaderControl, - RightPanelMaximizeControl, + WorkspaceTitlebarControls, } from "./chat/PanelLayoutControls"; import type { ExpandedImagePreview } from "./chat/ExpandedImagePreview"; import { ThreadDetailsPanel } from "./chat/ThreadDetailsPanel"; @@ -348,7 +342,6 @@ import { useAtomCommand } from "../state/use-atom-command"; import { useOrchestrationCommand } from "../state/use-orchestration-command"; import { useAtomQueryRunner } from "../state/use-atom-query-runner"; -import { Button } from "./ui/button"; import { observeResize } from "~/lib/observeResize"; import { ThreadVisitWatermark } from "./chat/ThreadVisitWatermark"; import { ChatTerminalDrawers } from "./chat/ChatTerminalDrawers"; @@ -598,7 +591,6 @@ const composerFilesRef = useRef([]); const composerTerminalContextsRef = useRef([]); const branchToolbarRef = useRef(null); - const pasteAsTextShortcutUntilRef = useRef(0); const [restingComposerControlsHost, setRestingComposerControlsHost] = useState(null); const [restingComposerControlsVisible, setRestingComposerControlsVisible] = useState(false); @@ -2868,42 +2860,7 @@ }); }, [toggleRightPanelStable, toggleRightPanelMaximizedStable]); - // Paste-to-focus: the resting composer blurs on a click into the timeline, - // so a paste that follows has no editable target and would be dropped. - useEffect(() => { - const keyHandler = (event: KeyboardEvent) => { - if ( - shouldRedirectInputToComposer(event) && - isPasteAsTextShortcut(event, isMacPlatform(navigator.platform)) - ) { - pasteAsTextShortcutUntilRef.current = Date.now() + 1_000; - } - }; - const handler = (event: ClipboardEvent) => { + usePasteToFocusComposer(activeThreadId, composerRef); - if (!activeThreadId || isCommandPaletteOpen()) return; - if (getTerminalFocusOwner() !== null) return; - if (composerRef.current?.isModelPickerOpen()) return; - const text = pasteTextToFocusComposer(event); - const clipboardData = event.clipboardData; - if (text === null || clipboardData === null) return; - const bypassAutoAttachment = Date.now() <= pasteAsTextShortcutUntilRef.current; - pasteAsTextShortcutUntilRef.current = 0; - if ( - ((readPastedComposerContext(clipboardData)?.records.length ?? 0) === 0 && - composerRef.current?.pasteTextAtEnd(text, { bypassAutoAttachment })) || - composerRef.current?.insertTextAtEnd(text, { clipboardData }) - ) { - event.preventDefault(); - event.stopPropagation(); - } - }; - window.addEventListener("keydown", keyHandler, true); - window.addEventListener("paste", handler, true); - return () => { - window.removeEventListener("keydown", keyHandler, true); - window.removeEventListener("paste", handler, true); - }; - }, [activeThreadId, composerRef]); const { onConfirmRevertStable, onForkFromRunStable, @@ -3255,46 +3212,17 @@ showThreadPanelControl={!inlineRightPanelOwnsTitleBar} /> ); + const threadPanelHeaderControl = ; - const threadPanelHeaderControl = ( -
- -
- ); const panelLayoutControls = ( + - {!shouldUsePlanSidebarSheet ? ( - - className={cn( - "flex shrink-0", - panelAnimationsActive && - "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out", - rightPanelOpen - ? "pointer-events-auto opacity-100" - : "pointer-events-none absolute right-full mr-1 opacity-0", - )} - inert={!rightPanelOpen} - > - - - ) : null} -
{panelToggleControls}
- ); const workspaceFileDropHandlers = makeWorkspaceFileDropHandlers({ setDragActive: setIsWorkspaceFileDragActive, @@ -3382,20 +3310,7 @@ onDrop={workspaceFileDropHandlers.onDrop} > - {isWorkspaceFileDragActive ? ( -
-
: null} - className="flex items-center gap-2 rounded-full border border-primary/25 bg-background/95 px-4 py-2.5 text-sm font-medium text-foreground shadow-lg" - > -
-
- ) : null}
{showScrollToBottom && !isThreadFindActive && ( + { + composerRef.current?.restoreAfterTimelineReachedEnd(); + scrollToEnd(true); -
- style={{ bottom: scrollToEndClearance + 4 }} - > - -
)}
``` ## apps/web/src/components/chat/PanelLayoutControls.tsx Status: modified; +53; −1 ```diff @@ -1,8 +1,10 @@ import { PanelBottomIcon, PanelRightIcon, SquareMenuIcon } from "lucide-react"; import { Maximize2, Minimize2 } from "lucide"; import { MorphIcon } from "~/components/MorphIcon"; -import { memo, type ReactElement } from "react"; +import { memo, type ReactElement, type ReactNode } from "react"; +import { cn } from "~/lib/utils"; + import type { ThreadPanelPresentation } from "../../rightPanelLayout"; import { PopoverCreateHandle, PopoverTrigger } from "../ui/popover"; import { Toggle } from "../ui/toggle"; @@ -160,3 +162,53 @@ ); }); + +/** The thread panel toggle on a header whose right side the inline right panel covers. */ +export function ThreadPanelHeaderControl(props: PanelLayoutControlsProps) { + return ( +
+ +
+ ); +} + +/** The window's top-right panel controls, with the maximize toggle while the panel is open. */ +export function WorkspaceTitlebarControls(props: { + readonly showMaximizeControl: boolean; + readonly rightPanelOpen: boolean; + readonly animationsActive: boolean; + readonly maximized: boolean; + readonly onToggleMaximized: () => void; + readonly children: ReactNode; +}) { + return ( +
+ {props.showMaximizeControl ? ( + + + + ) : null} +
{props.children}
+
+ ); +} ``` ## apps/web/src/components/chat/TimelineOverlays.tsx Status: added; +45; −0 ```diff @@ -1,0 +1,45 @@ +import { ChevronDownIcon, PaperclipIcon } from "lucide-react"; + +import { Button } from "../ui/button"; + +export function WorkspaceFileDropOverlay() { + return ( +
+
+
+
+ ); +} + +/** Sits `bottom` pixels up, clear of the composer and its attached banners. */ +export function ScrollToEndButton(props: { + readonly bottom: number; + readonly onScrollToEnd: () => void; +}) { + return ( +
+ +
+ ); +} ``` ## apps/web/src/components/chat/usePasteToFocusComposer.ts Status: added; +53; −0 ```diff @@ -1,0 +1,53 @@ +import { pasteTextToFocusComposer, shouldRedirectInputToComposer } from "./composerFocusRedirect"; +import { readPastedComposerContext } from "../composerInlineTokenPaste"; +import { isPasteAsTextShortcut } from "@t3tools/client-runtime/text-paste"; +import { useEffect, useRef } from "react"; +import { isMacPlatform } from "../../lib/utils"; +import { isCommandPaletteOpen } from "../../commandPaletteBus"; +import { getTerminalFocusOwner } from "../../lib/terminalFocus"; +import type { ThreadId } from "@t3tools/contracts"; +import type { ComposerHandleRef } from "../../composerHandleContext"; +/** + * Paste-to-focus: the resting composer blurs on a click into the timeline, so a paste that + * follows has no editable target and would be dropped. This sends it to the composer instead. + */ +export function usePasteToFocusComposer( + activeThreadId: ThreadId | null, + composerRef: ComposerHandleRef, +) { + const pasteAsTextShortcutUntilRef = useRef(0); + useEffect(() => { + const keyHandler = (event: KeyboardEvent) => { + if ( + shouldRedirectInputToComposer(event) && + isPasteAsTextShortcut(event, isMacPlatform(navigator.platform)) + ) { + pasteAsTextShortcutUntilRef.current = Date.now() + 1_000; + } + }; + const handler = (event: ClipboardEvent) => { + if (!activeThreadId || isCommandPaletteOpen()) return; + if (getTerminalFocusOwner() !== null) return; + if (composerRef.current?.isModelPickerOpen()) return; + const text = pasteTextToFocusComposer(event); + const clipboardData = event.clipboardData; + if (text === null || clipboardData === null) return; + const bypassAutoAttachment = Date.now() <= pasteAsTextShortcutUntilRef.current; + pasteAsTextShortcutUntilRef.current = 0; + if ( + ((readPastedComposerContext(clipboardData)?.records.length ?? 0) === 0 && + composerRef.current?.pasteTextAtEnd(text, { bypassAutoAttachment })) || + composerRef.current?.insertTextAtEnd(text, { clipboardData }) + ) { + event.preventDefault(); + event.stopPropagation(); + } + }; + window.addEventListener("keydown", keyHandler, true); + window.addEventListener("paste", handler, true); + return () => { + window.removeEventListener("keydown", keyHandler, true); + window.removeEventListener("paste", handler, true); + }; + }, [activeThreadId, composerRef]); +} ```