refactor: address code review findings from Gemini Code Assist

- Extract SCROLL_THRESHOLD (300px) constant so auto-scroll hook and
  scroll-button visibility logic stay in sync
- Extract CONTEXT_PANEL_WIDTH_PX (320px) constant to avoid layout drift
  if the context panel width is ever adjusted
- Gate drag spacer on isElectronMode() && isLeftmostPane to match the
  TabBar drag region logic and prevent unintended drag regions in
  split-pane layouts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
proxy 2026-02-22 19:47:17 -05:00
parent 890d2d8e84
commit dbdfc27526
2 changed files with 16 additions and 5 deletions

View file

@ -10,6 +10,12 @@ import { ChevronsDown } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { SessionContextPanel } from './SessionContextPanel/index'; import { SessionContextPanel } from './SessionContextPanel/index';
/** Pixels from bottom considered "near bottom" for scroll-button visibility and auto-scroll. */
const SCROLL_THRESHOLD = 300;
/** Must match the `w-80` (320px) context panel width used in the layout below. */
const CONTEXT_PANEL_WIDTH_PX = 320;
import { ChatHistoryEmptyState } from './ChatHistoryEmptyState'; import { ChatHistoryEmptyState } from './ChatHistoryEmptyState';
import { ChatHistoryItem } from './ChatHistoryItem'; import { ChatHistoryItem } from './ChatHistoryItem';
import { ChatHistoryLoadingState } from './ChatHistoryLoadingState'; import { ChatHistoryLoadingState } from './ChatHistoryLoadingState';
@ -351,14 +357,14 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
const container = scrollContainerRef.current; const container = scrollContainerRef.current;
if (!container) return; if (!container) return;
const { scrollTop, scrollHeight, clientHeight } = container; const { scrollTop, scrollHeight, clientHeight } = container;
setShowScrollButton(!isNearBottom(scrollTop, scrollHeight, clientHeight, 300)); setShowScrollButton(!isNearBottom(scrollTop, scrollHeight, clientHeight, SCROLL_THRESHOLD));
}, []); }, []);
// Auto-follow when conversation updates, but only if the user was already near bottom. // Auto-follow when conversation updates, but only if the user was already near bottom.
// This preserves manual reading position when the user scrolls up. // This preserves manual reading position when the user scrolls up.
// Disabled during navigation to prevent conflicts with deep-link/search scrolling. // Disabled during navigation to prevent conflicts with deep-link/search scrolling.
const { scrollToBottom } = useAutoScrollBottom([conversation], { const { scrollToBottom } = useAutoScrollBottom([conversation], {
threshold: 300, threshold: SCROLL_THRESHOLD,
smoothDuration: 300, smoothDuration: 300,
autoBehavior: 'auto', autoBehavior: 'auto',
disabled: shouldDisableAutoScroll, disabled: shouldDisableAutoScroll,
@ -841,7 +847,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
style={{ style={{
right: right:
isContextPanelVisible && allContextInjections.length > 0 isContextPanelVisible && allContextInjections.length > 0
? 'calc(320px + 1rem)' ? `calc(${CONTEXT_PANEL_WIDTH_PX}px + 1rem)`
: '1rem', : '1rem',
backgroundColor: 'var(--context-btn-bg)', backgroundColor: 'var(--context-btn-bg)',
color: 'var(--color-text-secondary)', color: 'var(--color-text-secondary)',

View file

@ -348,10 +348,15 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => {
</div> </div>
{/* Drag spacer fills empty space between tab list and action buttons. {/* Drag spacer fills empty space between tab list and action buttons.
Gives users a reliable window-drag target regardless of how many tabs are open. */} Gives users a reliable window-drag target regardless of how many tabs are open.
Only applied on the leftmost pane in Electron to match the TabBar drag region logic. */}
<div <div
className="flex-1 self-stretch" className="flex-1 self-stretch"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties} style={
{
WebkitAppRegion: isElectronMode() && isLeftmostPane ? 'drag' : undefined,
} as React.CSSProperties
}
/> />
{/* Right side actions */} {/* Right side actions */}