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 { 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 { ChatHistoryItem } from './ChatHistoryItem';
import { ChatHistoryLoadingState } from './ChatHistoryLoadingState';
@ -351,14 +357,14 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
const container = scrollContainerRef.current;
if (!container) return;
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.
// This preserves manual reading position when the user scrolls up.
// Disabled during navigation to prevent conflicts with deep-link/search scrolling.
const { scrollToBottom } = useAutoScrollBottom([conversation], {
threshold: 300,
threshold: SCROLL_THRESHOLD,
smoothDuration: 300,
autoBehavior: 'auto',
disabled: shouldDisableAutoScroll,
@ -841,7 +847,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
style={{
right:
isContextPanelVisible && allContextInjections.length > 0
? 'calc(320px + 1rem)'
? `calc(${CONTEXT_PANEL_WIDTH_PX}px + 1rem)`
: '1rem',
backgroundColor: 'var(--context-btn-bg)',
color: 'var(--color-text-secondary)',

View file

@ -348,10 +348,15 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => {
</div>
{/* 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
className="flex-1 self-stretch"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
style={
{
WebkitAppRegion: isElectronMode() && isLeftmostPane ? 'drag' : undefined,
} as React.CSSProperties
}
/>
{/* Right side actions */}