Update/positron list focus and selection (#13707)

# PositronList focus & selection + supporting changes

This PR adds focus and selection behavior to `PositronList`, and
includes a handful of supporting improvements to `DataGridInstance`, the
custom context menu, and the Data Connections panel that landed along
the way.

## Selection mode on DataGridInstance

Introduces `selectionMode: 'spreadsheet' | 'list'` as a discriminated
option (rejected at compile time when `selection: false`):

- **`'spreadsheet'`** (default): plain keyboard navigation clears the
selection — cursor and selection are independent. Existing main data
grid and table summary behavior is preserved.
- **`'list'`**: plain keyboard navigation re-selects the cursor row
after the move so single-select tracks the cursor. Shift-navigation
still extends selection regardless of mode.

The waffle's navigation handlers (ArrowUp/Down/Left/Right, Home, End,
Cmd+Home, Cmd+End, PageUp, PageDown) all route through a small
`navigationSelection.{beforeMoveCursor, afterMoveCursor}` helper so the
policy lives in one place.

## PositronList focus & selection

- `PositronListInstance` opts into `selectionMode: 'list'` so plain
arrow navigation moves the row selection together with the cursor.
- Cell-level mouse clicks now route through `mouseSelectRow` so the row
selection bucket (which `getSelectedItems()` and the `.selected` class
read) actually gets populated.
- The default `.focused` row styling is now gated on **both**
cursor-on-row AND grid keyboard focus, mirroring the pattern used by
`ColumnSummaryCell`. The focus ring disappears when focus leaves the
list.
- `PositronListItemContext` exposes `cursor`, `listFocused`, and
`selected` so caller-rendered items can implement custom focus/selection
styling.
- `.positron-list-row` switched from `outline` to a transparent border
with `box-sizing: border-box`, so the focus ring color swap doesn't
reflow content.

## Section row handling

- `PositronList` already had `isRowSelectable` skipping section rows
during keyboard navigation. This branch refines it further:
- `moveCursorUp` now reveals the adjacent unselectable row above the
cursor (just one — not a whole stack).
- New `firstSelectableRowIndex` / `lastSelectableRowIndex` getters on
`DataGridInstance` make Cmd+Home and Cmd+End land on the first/last
*selectable* row, skipping section headers.

## Bug fixes in shift-extend selection

Fixed five truthy-zero bugs in
`extend{Row,Column}Selection{Up,Down,Left,Right}` where `if (!position)`
short-circuited on the valid position `0`. Shift-arrow extension now
works correctly:

- shift-right from column 0
- shift-left when the first selected column is 0
- shift-up when the first selected row is 0
- shift-up from row 0 with no prior selection
- shift-down when the first selected row is 0

## Custom context menu

Refinements stacking on prior work:

- `CustomContextMenuSeparator` accepts an optional title.
- Items support a `destructive` style and an `iconSrc` (e.g., language
icons).
- `checked` and `destructive` are now mutually exclusive at the type
level.

<p>
<img width="185" height="227" alt="image"
src="https://github.com/user-attachments/assets/2b52cabf-7f46-4609-8dcc-14bd60f5db49"
/>
</p>

## Data Connections

- New `dataConnections.enabled` feature flag (hidden from settings UI;
settable via `settings.json`, requires reload) gating the experimental
Data Connections view container/view.
- "No data connections" empty state updated to match the Variables
panel.
- Various small refinements in the panel.

Tests:
@:data-explorer

### Release Notes

#### New Features

- N/A

#### Bug Fixes

- N/A

### Validation Steps

- [ ] Arrow keys move the PositronList cursor and selection together;
shift-arrow extends selection
- [ ] Clicking a list item selects it; shift-click extends; section
headers ignore clicks
- [ ] Focus ring shows only when the list has keyboard focus; disappears
on blur
- [ ] Cmd+Home / Cmd+End land on a selectable row when the first/last
row is a section header
- [ ] Main data grid and table summary keyboard behavior unchanged
(spreadsheet mode preserved)
- [ ] Shift-right/left/up/down from row 0 or column 0 now extends
selection correctly
- [ ] Setting `dataConnections.enabled: true` in `settings.json` shows
the Data Connections view after reload
- [ ] Context menu items render with destructive styling and icons where
configured

---------

Co-authored-by: Brice Stacey <bricestacey@gmail.com>

Author: softwarenerd

src/vs/platform/positronActionBar/browser/positronDynamicActionBar.tsx

@@ -30,16 +30,14 @@ export const DEFAULT_ACTION_BAR_DROPDOWN_BUTTON_WIDTH = 36;
 export const DEFAULT_ACTION_BAR_SEPARATOR_WIDTH = 7;
 
 /**
- * OverflowContextMenuItem interface.
+ * OverflowContextMenuItem type.
  */
-export interface OverflowContextMenuItem extends CustomContextMenuItemOptions {
-}
+export type OverflowContextMenuItem = CustomContextMenuItemOptions;
 
 /**
- * OverflowContextMenuSubmenu interface.
+ * OverflowContextMenuSubmenu type.
  */
-export interface OverflowContextMenuSubmenu extends CustomContextMenuSubmenuOptions {
-}
+export type OverflowContextMenuSubmenu = CustomContextMenuSubmenuOptions;
 
 /**
  * DynamicActionBarAction interface.

src/vs/workbench/browser/positronComponents/customContextMenu/customContextMenu.css

@@ -18,6 +18,13 @@
 	background: var(--vscode-positronContextMenu-separatorBackground);
 }
 
+.custom-context-menu-separator-title {
+	padding: 2px 8px;
+	font-size: 0.9em;
+	text-transform: uppercase;
+	color: var(--vscode-descriptionForeground);
+}
+
 .custom-context-menu-item {
 	width: 100%;
 	height: 26px;
@@ -29,11 +36,15 @@
 	align-content: center;
 	background: transparent;
 	color: var(--vscode-positronContextMenu-foreground);
-	grid-template-columns: [icon] 22px [title] 1fr [shortcut] min-content [end];
+	grid-template-columns: [icon] 24px [title] 1fr [shortcut] min-content [end];
 }
 
 .custom-context-menu-item.checkable {
-	grid-template-columns: [check] 22px [icon] 22px [title] 1fr [shortcut] min-content [end];
+	grid-template-columns: [check] 22px [icon] 24px [title] 1fr [shortcut] min-content [end];
+}
+
+.custom-context-menu-item.destructive {
+	color: var(--vscode-errorForeground);
 }
 
 .custom-context-menu-item:not(.disabled):hover {
@@ -42,6 +53,10 @@
 	background: var(--vscode-positronContextMenu-hoverBackground);
 }
 
+.custom-context-menu-item.destructive:not(.disabled):hover {
+	color: var(--vscode-errorForeground);
+}
+
 .custom-context-menu-item:focus {
 	outline: none !important;
 }
@@ -65,8 +80,15 @@
 	grid-column: icon / title;
 }
 
-.custom-context-menu-item .icon.disabled {
-	opacity: 50%;
+.custom-context-menu-item .icon.icon-image {
+	width: 16px;
+	height: 16px;
+	align-self: center;
+	object-fit: contain;
+}
+
+.custom-context-menu-item .icon.destructive {
+	color: var(--vscode-errorForeground);
 }
 
 .custom-context-menu-item .title {
@@ -76,11 +98,7 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	grid-column: title / shortcut;
-	margin: 2px 0 2px 0;
-}
-
-.custom-context-menu-item .title.disabled {
-	opacity: 50%;
+	margin: 2px 0;
 }
 
 .custom-context-menu-item .shortcut {
@@ -98,7 +116,8 @@
 	grid-column: shortcut / end;
 }
 
-/* Make the submenu chevron indicator look disabled */
+.custom-context-menu-item .icon.disabled,
+.custom-context-menu-item .title.disabled,
 .custom-context-menu-item .submenu-indicator.disabled {
 	opacity: 50%;
 }

src/vs/workbench/browser/positronComponents/customContextMenu/customContextMenu.tsx

@@ -30,14 +30,18 @@ const SUBMENU_HOVER_DELAY = 300;
 export type CustomContextMenuEntry = CustomContextMenuItem | CustomContextMenuSeparator | CustomContextMenuSubmenu;
 
 /**
- * CustomContextMenuSubmenuOptions interface.
+ * Icon options. A submenu may specify either a codicon name (`icon`) or an image source
+ * (`iconSrc`), but not both. Defined as a discriminated union so callers can't accidentally
+ * set both fields.
  */
-export interface CustomContextMenuSubmenuOptions {
-	/**
-	 * Optional icon to display before the label.
-	 */
-	readonly icon?: string;
+type CustomContextMenuSubmenuIconOptions =
+	| { readonly icon?: string; readonly iconSrc?: never }
+	| { readonly icon?: never; readonly iconSrc?: string };
 
+/**
+ * CustomContextMenuSubmenuOptions type.
+ */
+export type CustomContextMenuSubmenuOptions = CustomContextMenuSubmenuIconOptions & {
 	/**
 	 * The label text for the submenu item.
 	 */
@@ -53,7 +57,7 @@ export interface CustomContextMenuSubmenuOptions {
 	 * is opened to ensure properties like checked state are up to date in the submenu when it opens.
 	 */
 	readonly entries: () => CustomContextMenuEntry[];
-}
+};
 
 /**
  * CustomContextMenuSubmenu class.
@@ -217,15 +221,22 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 	 *
 	 * @returns The rendered component.
 	 */
-	const MenuSeparator = () => {
+	const MenuSeparator = ({ title }: { title?: string }) => {
 		// Render.
 		return (
-			<div
-				className='custom-context-menu-separator'
-				role='separator'
-				// When the mouse enters a menu separator, close the active submenu.
-				onMouseEnter={closeActiveSubmenu}
-			/>
+			<>
+				<div
+					className='custom-context-menu-separator'
+					role='separator'
+					// When the mouse enters a menu separator, close the active submenu.
+					onMouseEnter={closeActiveSubmenu}
+				/>
+				{title && (
+					<div className='custom-context-menu-separator-title'>
+						{title}
+					</div>
+				)}
+			</>
 		);
 	};
 
@@ -261,7 +272,8 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 			<Button
 				className={positronClassNames(
 					'custom-context-menu-item',
-					{ 'checkable': options.checked !== undefined }
+					{ 'checkable': options.checked !== undefined },
+					{ 'destructive': options.destructive }
 				)}
 				disabled={options.disabled}
 				// When the mouse enters a menu item, close the active submenu.
@@ -283,16 +295,29 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 					/>
 				}
 
-				{options.icon &&
-					<div
+				{options.icon
+					? <div
 						className={positronClassNames(
 							'icon',
 							'codicon',
 							`codicon-${options.icon}`,
-							{ 'disabled': options.disabled }
+							{ 'disabled': options.disabled },
+							{ 'destructive': options.destructive }
 						)}
 						title={options.label}
 					/>
+					: options.iconSrc &&
+					<img
+						alt=''
+						className={positronClassNames(
+							'icon',
+							'icon-image',
+							{ 'disabled': options.disabled },
+							{ 'destructive': options.destructive }
+						)}
+						src={options.iconSrc}
+						title={options.label}
+					/>
 				}
 
 				<div
@@ -434,8 +459,8 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 				onMouseLeave={cancelHoverTimer}
 				onPressed={openSubmenu}
 			>
-				{options.icon &&
-					<div
+				{options.icon
+					? <div
 						aria-hidden='true'
 						className={positronClassNames(
 							'icon',
@@ -444,6 +469,17 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 							{ 'disabled': options.disabled }
 						)}
 					/>
+					: options.iconSrc &&
+					<img
+						alt=''
+						aria-hidden='true'
+						className={positronClassNames(
+							'icon',
+							'icon-image',
+							{ 'disabled': options.disabled }
+						)}
+						src={options.iconSrc}
+					/>
 				}
 
 				<div
@@ -502,7 +538,7 @@ const CustomContextMenuModalPopup = (props: CustomContextMenuModalPopupProps) =>
 					if (entry instanceof CustomContextMenuItem) {
 						return <MenuItem key={index} {...entry.options} />;
 					} else if (entry instanceof CustomContextMenuSeparator) {
-						return <MenuSeparator key={index} />;
+						return <MenuSeparator key={index} title={entry.title} />;
 					} else if (entry instanceof CustomContextMenuSubmenu) {
 						return <MenuSubmenuItem key={index} {...entry.options} />;
 					} else {

src/vs/workbench/browser/positronComponents/customContextMenu/customContextMenuItem.ts

@@ -6,24 +6,41 @@
 import { KeyboardModifiers } from '../../../../base/browser/ui/positronComponents/button/button.js';
 
 /**
- * CustomContextMenuItemOptions interface.
+ * Icon options. A menu item may specify either a codicon name (`icon`) or an image source
+ * (`iconSrc`), but not both. Defined as a discriminated union so callers can't accidentally
+ * set both fields.
  */
-export interface CustomContextMenuItemOptions {
+type CustomContextMenuItemIconOptions =
+	| { readonly icon?: string; readonly iconSrc?: never }
+	| { readonly icon?: never; readonly iconSrc?: string };
+
+/**
+ * Behavior options. A menu item may either represent a toggleable state (`checked`) or a
+ * destructive action (`destructive`), but not both. A "checked destructive" item has no
+ * coherent meaning -- you don't toggle a delete on and off. Defined as a discriminated
+ * union so callers can't accidentally set both fields.
+ */
+type CustomContextMenuItemBehaviorOptions =
+	| { readonly checked?: boolean; readonly destructive?: never }
+	| { readonly checked?: never; readonly destructive?: boolean };
+
+/**
+ * CustomContextMenuItemOptions type.
+ */
+export type CustomContextMenuItemOptions = CustomContextMenuItemIconOptions & CustomContextMenuItemBehaviorOptions & {
 	readonly commandId?: string;
 	/**
 	 * Called BEFORE the command executes. Similar to native ActionRunner's onWillRun.
 	 */
 	readonly onWillSelect?: () => void;
-	readonly checked?: boolean;
-	readonly icon?: string;
 	readonly label: string;
 	readonly disabled?: boolean;
 	/**
 	 * Called AFTER the command executes (or immediately if no commandId).
 	 * Similar to native ActionRunner's onDidRun.
 	 */
 	readonly onSelected: (e: KeyboardModifiers) => void;
-}
+};
 
 /**
  * CustomContextMenuItem class.

src/vs/workbench/browser/positronComponents/customContextMenu/customContextMenuSeparator.ts

@@ -7,4 +7,10 @@
  * CustomContextMenuSeparator class.
  */
 export class CustomContextMenuSeparator {
+	/**
+	 * Constructor.
+	 * @param title An optional title to render as a section header below the separator line.
+	 */
+	constructor(readonly title?: string) {
+	}
 }