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:
parent
890d2d8e84
commit
dbdfc27526
2 changed files with 16 additions and 5 deletions
|
|
@ -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)',
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
|
|||
Loading…
Reference in a new issue