Auto-switch commit info panel position with sidebar mode

Summary:
When the user toggles "Show ISL in Sidebar" in VS Code settings, the
commit info panel position now updates automatically:
- Sidebar ON → panel moves to bottom (horizontal space is limited)
- Sidebar OFF → panel moves to right (default editor panel layout)

The VS Code extension also focuses the correct view after switching:
sidebar mode focuses the sidebar view, panel mode opens and focuses a
new editor panel.

Additionally fixes a pre-existing crash in MinHeightTextField where the
component asserted `ref` must be an object, but callers could omit it
(ref is optional). The assert now allows `undefined`.

Reviewed By: evangrayk

Differential Revision: D100022486

fbshipit-source-id: db11d3e88f9401f55f63a49326a1349538799567

Author: Michael Remediakis

addons/isl/src/App.tsx

@@ -27,7 +27,7 @@ import {TopBar} from './TopBar';
 import {TopLevelAlerts} from './TopLevelAlert';
 import {TopLevelErrors} from './TopLevelErrors';
 import {tracker} from './analytics';
-import {commitInfoLocationAtom, islDrawerState} from './drawerState';
+import {effectiveCommitInfoLocationAtom, islDrawerState} from './drawerState';
 import {t, T} from './i18n';
 import platform from './platform';
 import {useMainContentWidth} from './responsive';
@@ -89,7 +89,7 @@ function NullStateOrDrawers() {
 
 function ISLDrawers() {
   const setDrawerState = useSetAtom(islDrawerState);
-  const location = useAtomValue(commitInfoLocationAtom);
+  const location = useAtomValue(effectiveCommitInfoLocationAtom);
   useCommand('ToggleSidebar', () => {
     setDrawerState(state => ({
       ...state,

addons/isl/src/CommitInfoView/MinHeightTextField.tsx

@@ -29,7 +29,7 @@ export function MinHeightTextField(
   const {onInput, keepNewlines, className, ref, ...rest} = props;
 
   // ref could also be a callback ref; don't bother supporting that right now.
-  assert(typeof ref === 'object', 'MinHeightTextArea requires ref object');
+  assert(ref == null || typeof ref === 'object', 'MinHeightTextArea requires ref object');
 
   // whenever the value is changed, recompute & apply the minimum height
   useEffect(() => {

addons/isl/src/SettingsTooltip.tsx

@@ -46,7 +46,7 @@ import {
   overrideDisabledSubmitModes,
 } from './codeReview/github/branchPrState';
 import {debugToolsEnabledState} from './debug/DebugToolsState';
-import {commitInfoLocationAtom, type CommitInfoLocation} from './drawerState';
+import {commitInfoLocationAtom, type CommitInfoLocationWithAuto} from './drawerState';
 import {externalMergeToolAtom} from './externalMergeTool';
 import {t, T} from './i18n';
 import {configBackedAtom, readAtom} from './jotaiUtils';
@@ -290,19 +290,24 @@ function RenderCompactSetting() {
 function CommitInfoLocationSetting() {
   const [location, setLocation] = useAtom(commitInfoLocationAtom);
   return (
-    <Tooltip title={t('Position of the Commit Info panel relative to the commit graph')}>
+    <Tooltip
+      title={t(
+        'Position of the Commit Info panel relative to the commit graph. ' +
+          '"Auto" uses bottom in narrow mode (e.g. sidebar) and right otherwise.',
+      )}>
       <div className="dropdown-container setting-inline-dropdown">
         <T>Commit Info Panel</T>
-        <Dropdown<{value: CommitInfoLocation; name: string}>
+        <Dropdown<{value: CommitInfoLocationWithAuto; name: string}>
           data-testid="commit-info-location-setting"
           value={location}
           options={[
+            {value: 'auto', name: t('Auto')},
             {value: 'right', name: t('Right')},
             {value: 'bottom', name: t('Bottom')},
             {value: 'left', name: t('Left')},
             {value: 'top', name: t('Top')},
           ]}
-          onChange={event => setLocation(event.currentTarget.value as CommitInfoLocation)}
+          onChange={event => setLocation(event.currentTarget.value as CommitInfoLocationWithAuto)}
         />
       </div>
     </Tooltip>

addons/isl/src/drawerState.ts

@@ -7,22 +7,39 @@
 
 import type {AllDrawersState, DrawerState} from './Drawers';
 
+import {atom} from 'jotai';
 import {localStorageBackedAtom, readAtom, writeAtom} from './jotaiUtils';
+import {isNarrowWindow} from './responsive';
 import {getWindowWidthInPixels, registerCleanup} from './utils';
 
 const AUTO_CLOSE_MAX_SIZE = 700;
 const DEFAULT_RIGHT_DRAWER_WIDTH = 500;
 
 export type CommitInfoLocation = 'right' | 'bottom' | 'left' | 'top';
+export type CommitInfoLocationWithAuto = CommitInfoLocation | 'auto';
 
-export const commitInfoLocationAtom = localStorageBackedAtom<CommitInfoLocation>(
+export const commitInfoLocationAtom = localStorageBackedAtom<CommitInfoLocationWithAuto>(
   'isl.commit-info-location',
-  'right',
+  'auto',
 );
 
+/**
+ * Resolves 'auto' to a concrete location based on window width.
+ * When 'auto', uses 'bottom' in narrow windows and 'right' otherwise.
+ * Uses window width (not main content width) to avoid oscillation —
+ * changing drawer position affects main content width but not window width.
+ */
+export const effectiveCommitInfoLocationAtom = atom<CommitInfoLocation>(get => {
+  const preference = get(commitInfoLocationAtom);
+  if (preference === 'auto') {
+    return get(isNarrowWindow) ? 'bottom' : 'right';
+  }
+  return preference;
+});
+
 /** Expand the commit info drawer at the current configured location. */
 export function expandCommitInfoView() {
-  const loc = readAtom(commitInfoLocationAtom);
+  const loc = readAtom(effectiveCommitInfoLocationAtom);
   writeAtom(islDrawerState, val => ({...val, [loc]: {...val[loc], collapsed: false}}));
 }
 
@@ -45,7 +62,7 @@ function autoCloseBasedOnWindowWidth() {
     return;
   }
 
-  const location = readAtom(commitInfoLocationAtom);
+  const location = readAtom(effectiveCommitInfoLocationAtom);
   const isVertical = location === 'top' || location === 'bottom';
   if (isVertical) {
     // Only auto-close for horizontal (left/right) drawers based on window width.

addons/isl/src/responsive.tsx

@@ -67,3 +67,17 @@ export const isNarrowCommitTree = atom(
     get(mainContentWidthState) <
     (get(renderCompactAtom) ? NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT : NARROW_COMMIT_TREE_WIDTH),
 );
+
+/**
+ * Tracks the window/viewport width. Unlike mainContentWidthState, this is
+ * stable regardless of drawer position changes, making it safe for layout
+ * decisions that affect drawer placement (avoids oscillation).
+ */
+export const windowWidthState = atom(window.innerWidth);
+windowWidthState.onMount = set => {
+  const listener = () => set(window.innerWidth);
+  window.addEventListener('resize', listener);
+  return () => window.removeEventListener('resize', listener);
+};
+
+export const isNarrowWindow = atom(get => get(windowWidthState) < NARROW_COMMIT_TREE_WIDTH);

addons/vscode/extension/islWebviewPanel.ts

@@ -364,11 +364,13 @@ export function registerISLCommands(
           if (islPanelOrViewResult && isPanel(islPanelOrViewResult.panel)) {
             islPanelOrViewResult.panel.dispose();
           }
+          executeVSCodeCommand('sapling.isl.focus');
         } else {
           // Switching to panel mode: clear the view reference so a new panel can be created
           if (islPanelOrViewResult && !isPanel(islPanelOrViewResult.panel)) {
             islPanelOrViewResult = undefined;
           }
+          createOrFocusISLWebview(context, platform, logger);
         }
       }
     }),