Refactor Packages Pane to use PositronList component (#13556)

This PR refactors the packages pane to use the new PositronList.

We want to do this for a variety of reasons, but it also fixes known
scroll issues on web.

See: #12964 

### Release Notes

#### New Features

- N/A

#### Bug Fixes

- Fix scrolling issues in the Packages pane on web

### Validation Steps

The behavior of the pane should be pretty consistent with its previous
behavior. A couple of areas to note:

* Selection
* Focus
* Right Click
* Scrolling behavior
* Keyboard support

@:packages-pane

---------

Co-authored-by: Brian Lambert <brianlambert@gmail.com>

Author: bricestacey

src/vs/workbench/browser/positronList/classes/positronListInstance.tsx

@@ -359,6 +359,29 @@ export class PositronListInstance<TItem, TSection = never> extends DataGridInsta
 		);
 	}
 
+	/**
+	 * Overrides the base class's row-selection so the cursor (focus) follows. The base
+	 * implementation only sets the row-selection state, leaving the cursor wherever it was —
+	 * fine for a grid where the cursor and selection are independent, wrong for a list where
+	 * the focused row should be the selected row. Selecting a section row is a no-op since
+	 * sections aren't selectable.
+	 *
+	 * The cursor and selection both update through this single entry point, so callers that
+	 * select programmatically (e.g. from an item's own click handler that stops propagation
+	 * before the data grid sees the event) get the focus indicator for free.
+	 */
+	override selectRow(rowIndex: number): void {
+		const entry = this._entries[rowIndex];
+		if (entry === undefined || entry.kind !== 'item') {
+			return;
+		}
+
+		super.selectRow(rowIndex);
+		// List rows are single-column, so the cursor column is always 0.
+		this.setCursorPosition(0, rowIndex);
+	}
+
+
 	/**
 	 * Fires onDidActivate for the currently focused item. PositronList wraps this with its
 	 * onActivate prop. We guard against the cursor being on a section or out-of-range row;

src/vs/workbench/contrib/positronPackages/browser/components/listPackages.css

@@ -7,12 +7,21 @@
 	top: 0px;
 }
 
+.positron-packages-list {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
 .packages-filter-container {
+	flex: 0 0 auto;
 	padding: 4px 8px;
 }
 
 .packages-list-container {
-	height: 100%;
+	flex: 1 1 auto;
+	min-height: 0;
 	position: relative;
 	left: 0.5px;
 }
@@ -35,7 +44,7 @@
 }
 
 .packages-list-item {
-	margin-top: 5px;
+	height: 100%;
 	padding-left: 8px;
 	padding-right: 8px;
 	display: flex;
@@ -97,23 +106,9 @@
 	font-size: 0.9em;
 }
 
-.packages-list-item:hover {
-	background: var(--vscode-list-hoverBackground);
-}
-
-.packages-list-item.selected {
-	color: var(--vscode-list-inactiveSelectionForeground);
-	background: var(--vscode-list-inactiveSelectionBackground);
-	outline: 1px;
-	outline-offset: -1px;
-}
-
-.positron-packages-list.focused .packages-list-item.selected {
-	color: var(--vscode-list-activeSelectionForeground);
-	background: var(--vscode-list-activeSelectionBackground);
-}
-
-.packages-empty-message {
-	padding: 5px 9px 5px 20px;
+.positron-packages-list .positron-list-empty {
+	padding: 5px 8px;
 	cursor: default;
+	justify-content: flex-start;
+	align-items: flex-start;
 }