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 { 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)',
|
||||||
|
|
|
||||||
|
|
@ -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 */}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue