wip

src/lib/builders/grid-command.svelte.ts

@@ -84,7 +84,13 @@ export class GridCommand {
 				};
 				const dir = dirMap[e.key];
 				if (dir) {
-					const next = getNextMatrixItem(rows, row, col, dir);
+					const next = getNextMatrixItem({
+						matrix: rows,
+						currentRow: row,
+						currentCol: col,
+						direction: dir,
+						isAvailable: (item) => item.dataset.disabled === undefined,
+					});
 					if (next) {
 						this.highlighted = next.dataset.value;
 						this.scrollToHighlighted();
@@ -170,18 +176,23 @@ export class GridCommand {
 	}
 
 	getItems() {
-		return this.getRows().flatMap((row) => row);
+		return this.getRows()
+			.flatMap((row) => row)
+			.filter((item) => !item.dataset.disabled);
 	}
 
-	getItem(value: string) {
+	getItem(value: string, args: { disabled?: boolean } = {}) {
 		return {
 			'data-thom-grid-command-item': '',
 			'data-highlighted': dataAttr(value === this.highlighted),
 			'data-value': dataAttr(value),
+			'data-disabled': dataAttr(args?.disabled),
 			onmouseover: () => {
+				if (args?.disabled) return;
 				this.highlighted = value;
 			},
 			onclick: () => {
+				if (args?.disabled) return;
 				this.onSelect(value);
 			},
 			[createAttachmentKey()]: () => {

src/lib/utils/array.spec.ts

@@ -0,0 +1,486 @@
+import { describe, it, expect } from 'vitest';
+import { getNextMatrixItem } from './array';
+
+// --- Test Data ---
+
+// Simple matrix for basic tests
+const simpleMatrix = [
+	[1, 2, 3],
+	[4, 5, 6],
+	[7, 8, 9],
+];
+
+// Jagged matrix to test snapping behavior
+const jaggedMatrix = [
+	[10, 11, 12], // Row 0 (length 3)
+	[13, 14], // Row 1 (length 2)
+	[15, 16, 17, 18], // Row 2 (length 4)
+	[19], // Row 3 (length 1)
+	[], // Row 4 (length 0)
+];
+
+// Item interface for availability tests
+interface TestItem {
+	id: number;
+	available: boolean;
+}
+
+// Matrix with availability for testing isAvailable predicate
+const matrixWithAvailability: TestItem[][] = [
+	[
+		{ id: 1, available: true },
+		{ id: 2, available: false },
+		{ id: 3, available: true },
+	], // Row 0
+	[
+		{ id: 4, available: true },
+		{ id: 5, available: false },
+	], // Row 1
+	[
+		{ id: 6, available: true },
+		{ id: 7, available: true },
+		{ id: 8, available: false },
+		{ id: 9, available: true },
+	], // Row 2
+	[{ id: 10, available: false }], // Row 3
+	[
+		{ id: 11, available: false },
+		{ id: 12, available: false },
+	], // Row 4 (all unavailable)
+	[{ id: 13, available: true }], // Row 5
+];
+
+// isAvailable predicate for TestItem
+const isTestItemAvailable = (item: TestItem) => item.available;
+
+// --- Test Suite ---
+
+describe('getNextMatrixItem', () => {
+	// --- Input Validation Tests ---
+
+	describe('Input Validation', () => {
+		it('should return undefined for empty matrix', () => {
+			expect(
+				getNextMatrixItem({ matrix: [], currentRow: 0, currentCol: 0, direction: 'down' })
+			).toBeUndefined();
+		});
+
+		it('should return undefined for invalid currentRow (negative)', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: -1,
+					currentCol: 0,
+					direction: 'down',
+				})
+			).toBeUndefined();
+		});
+
+		it('should return undefined for invalid currentRow (out of bounds)', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 99,
+					currentCol: 0,
+					direction: 'down',
+				})
+			).toBeUndefined();
+		});
+
+		it('should return undefined for invalid currentCol (negative)', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 0,
+					currentCol: -1,
+					direction: 'right',
+				})
+			).toBeUndefined();
+		});
+
+		it('should return undefined for invalid currentCol (out of bounds for current row)', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 0,
+					currentCol: 99,
+					direction: 'right',
+				})
+			).toBeUndefined();
+		});
+	});
+
+	// --- Basic Movement Tests (without isAvailable, no jagged snapping scenarios) ---
+
+	describe('Basic Movement (standard grid)', () => {
+		it('should move right correctly', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 0,
+					currentCol: 0,
+					direction: 'right',
+				})
+			).toBe(2);
+		});
+
+		it('should move left correctly', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 0, currentCol: 2, direction: 'left' })
+			).toBe(2);
+		});
+
+		it('should move down correctly', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 0, currentCol: 0, direction: 'down' })
+			).toBe(4);
+		});
+
+		it('should move up correctly', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 2, currentCol: 0, direction: 'up' })
+			).toBe(4);
+		});
+
+		it('should return undefined when moving right off edge', () => {
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 0,
+					currentCol: 2,
+					direction: 'right',
+				})
+			).toBeUndefined();
+		});
+
+		it('should return undefined when moving left off edge', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 0, currentCol: 0, direction: 'left' })
+			).toBeUndefined();
+		});
+
+		it('should return undefined when moving down off edge', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 2, currentCol: 0, direction: 'down' })
+			).toBeUndefined();
+		});
+
+		it('should return undefined when moving up off edge', () => {
+			expect(
+				getNextMatrixItem({ matrix: simpleMatrix, currentRow: 0, currentCol: 0, direction: 'up' })
+			).toBeUndefined();
+		});
+	});
+
+	// --- Jagged Array & Snapping Tests ---
+
+	describe('Jagged Array & Snapping', () => {
+		it('should snap right when moving down to a shorter row', () => {
+			// From (0,2) [12] -> down. Row 1 is [13, 14]. Column 2 is out of bounds for row 1.
+			// Should snap to (1,1) [14]
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 0, currentCol: 2, direction: 'down' })
+			).toBe(14);
+		});
+
+		it('should snap right when moving up to a shorter row', () => {
+			// From (2,3) [18] -> up. Row 1 is [13, 14]. Column 3 is out of bounds for row 1.
+			// Should snap to (1,1) [14]
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 2, currentCol: 3, direction: 'up' })
+			).toBe(14);
+		});
+
+		it('should return undefined when snapping results in an invalid column (row is too short/empty)', () => {
+			// From (0,0) [10] -> down. Row 4 is []. Column 0 is out of bounds.
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 0, currentCol: 0, direction: 'down' })
+			).toBe(13); // First down
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 1, currentCol: 0, direction: 'down' })
+			).toBe(15); // Second down
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 2, currentCol: 0, direction: 'down' })
+			).toBe(19); // Third down
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 3, currentCol: 0, direction: 'down' })
+			).toBeUndefined(); // Fourth down to empty row 4
+		});
+
+		it('should not snap if target row is longer or same length', () => {
+			// From (1,0) [13] -> down. Row 2 is [15,16,17,18]. Column 0 is valid.
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 1, currentCol: 0, direction: 'down' })
+			).toBe(15);
+			// From (1,1) [14] -> down. Row 2 is [15,16,17,18]. Column 1 is valid.
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 1, currentCol: 1, direction: 'down' })
+			).toBe(16);
+		});
+
+		it('should handle moving to a row with only one element when current column is greater', () => {
+			// From (0,2) [12] -> down. Row 3 is [19]. Column 2 is out of bounds.
+			// Should snap to (3,0) [19]
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 0, currentCol: 2, direction: 'down' })
+			).toBe(14); // Down to row 1
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 1, currentCol: 1, direction: 'down' })
+			).toBe(16); // Down to row 2
+			expect(
+				getNextMatrixItem({ matrix: jaggedMatrix, currentRow: 2, currentCol: 3, direction: 'down' })
+			).toBe(19); // Down to row 3 (snaps from col 3 to col 0)
+		});
+	});
+
+	// --- Availability Tests ---
+
+	describe('Availability (isAvailable predicate)', () => {
+		it('should return the item if it is available and no isAvailable is provided', () => {
+			// Default behavior, all items are available
+			expect(
+				getNextMatrixItem({
+					matrix: simpleMatrix,
+					currentRow: 0,
+					currentCol: 0,
+					direction: 'right',
+				})
+			).toBe(2);
+		});
+
+		it('should return the item if it is available and isAvailable returns true', () => {
+			// (0,0) is {id:1, available:true}. Move right to (0,1) {id:2, available:false}
+			// This test is for the *first* item, not skipping.
+			expect(
+				getNextMatrixItem({
+					matrix: matrixWithAvailability,
+					currentRow: 0,
+					currentCol: 0,
+					direction: 'down',
+					isAvailable: isTestItemAvailable,
+				})
+			).toEqual({ id: 4, available: true });
+		});
+
+		// --- Horizontal Scan (right) ---
+		it('should scan right to find the next available item', () => {
+			// From (0,0) {id:1, true} -> right. Next is (0,1) {id:2, false}. Scan right to (0,2) {id:3, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 0,
+				currentCol: 0,
+				direction: 'right',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 3, available: true });
+		});
+
+		it('should scan right multiple times if needed', () => {
+			// From (2,1) {id:7, true} -> right. Next is (2,2) {id:8, false}. Scan right to (2,3) {id:9, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 2,
+				currentCol: 1,
+				direction: 'right',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 9, available: true });
+		});
+
+		it('should return undefined if scanning right hits end of row and no available item is found', () => {
+			// From (0,1) {id:2, false} -> right. Next is (0,2) {id:3, true}.
+			// If we start from (0,1) and item 3 becomes unavailable, we should get undefined.
+			const modifiedMatrix = JSON.parse(JSON.stringify(matrixWithAvailability)); // Deep copy
+			modifiedMatrix[0][2].available = false; // Make id:3 unavailable
+			const result = getNextMatrixItem({
+				matrix: modifiedMatrix,
+				currentRow: 0,
+				currentCol: 1,
+				direction: 'right',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		// --- Horizontal Scan (left) ---
+		it('should scan left to find the next available item', () => {
+			// From (0,2) {id:3, true} -> left. Next is (0,1) {id:2, false}. Scan left to (0,0) {id:1, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 0,
+				currentCol: 2,
+				direction: 'left',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 1, available: true });
+		});
+
+		it('should scan left multiple times if needed', () => {
+			// From (2,3) {id:9, true} -> left. Next is (2,2) {id:8, false}. Scan left to (2,1) {id:7, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 2,
+				currentCol: 3,
+				direction: 'left',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 7, available: true });
+		});
+
+		it('should return undefined if scanning left hits start of row and no available item is found', () => {
+			// From (0,1) {id:2, false} -> left. Next is (0,0) {id:1, true}.
+			// If we start from (0,1) and item 1 becomes unavailable, we should get undefined.
+			const modifiedMatrix = JSON.parse(JSON.stringify(matrixWithAvailability)); // Deep copy
+			modifiedMatrix[0][0].available = false; // Make id:1 unavailable
+			const result = getNextMatrixItem({
+				matrix: modifiedMatrix,
+				currentRow: 0,
+				currentCol: 1,
+				direction: 'left',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		// --- Vertical Scan (up/down - scans left) ---
+		it('should scan left for available item after snapping down', () => {
+			// From (0,2) {id:3, true} -> down. Target row 1. Snaps to (1,1) {id:5, false}.
+			// Scan left: (1,0) {id:4, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 0,
+				currentCol: 2,
+				direction: 'down',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 4, available: true });
+		});
+
+		it('should scan left for available item after snapping up', () => {
+			// From (2,3) {id:9, true} -> up. Target row 1. Snaps to (1,1) {id:5, false}.
+			// Scan left: (1,0) {id:4, true}.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 2,
+				currentCol: 3,
+				direction: 'up',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toEqual({ id: 4, available: true });
+		});
+
+		it('should return undefined if no available item found after vertical scan (all unavailable in target row)', () => {
+			// From (5,0) {id:13, true} -> up. Target row 4 {id:11, false}, {id:12, false}.
+			// Snaps to (4,0) {id:11, false}. Scan left to (4,0) {id:11, false}. No more to left.
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 5,
+				currentCol: 0,
+				direction: 'up',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		it('should return undefined if no available item found after vertical scan (empty target row)', () => {
+			// From (3,0) {id:10, false} -> down. Target row 4 is [].
+			const result = getNextMatrixItem({
+				matrix: matrixWithAvailability,
+				currentRow: 3,
+				currentCol: 0,
+				direction: 'down',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		it('should return undefined if the initial candidate for vertical move is out of bounds after clamping', () => {
+			// From (0,0) which is {id:1, true}
+			// Consider a matrix like:
+			// [ [A] ]
+			// [ [] ]  <- row 1 is empty
+			// [ [B] ]
+			// From A down, it goes to row 1. Clamps to col -1. Returns undefined. Then next down to B.
+			const customMatrix = [
+				[{ id: 1, available: true }],
+				[], // Empty row
+				[{ id: 2, available: true }],
+			];
+			// Move from (0,0) down. Target row 1 is empty. nextCol becomes -1 after clamping.
+			expect(
+				getNextMatrixItem({
+					matrix: customMatrix,
+					currentRow: 0,
+					currentCol: 0,
+					direction: 'down',
+					isAvailable: isTestItemAvailable,
+				})
+			).toBeUndefined();
+		});
+	});
+
+	// --- Combined Scenarios ---
+
+	describe('Combined Scenarios', () => {
+		it('should handle snapping and then scanning for availability correctly (down)', () => {
+			// Matrix:
+			// [ T, F, F ]
+			// [ F, F ]
+			// [ T, F, T, T ]
+			// From (0,0) (T) down. Target row 1. Initial nextCol is 0. Item (1,0) is F.
+			// Snaps to (1,0) (F). Scan left. No more left. Should return undefined.
+			const matrix = [
+				[
+					{ id: 1, available: true },
+					{ id: 2, available: false },
+					{ id: 3, available: false },
+				],
+				[
+					{ id: 4, available: false },
+					{ id: 5, available: false },
+				],
+				[
+					{ id: 6, available: true },
+					{ id: 7, available: false },
+					{ id: 8, available: true },
+					{ id: 9, available: true },
+				],
+			];
+			const result = getNextMatrixItem({
+				matrix,
+				currentRow: 0,
+				currentCol: 0,
+				direction: 'down',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		it('should handle snapping and then scanning for availability correctly (up)', () => {
+			// Matrix:
+			// [ F, F ]
+			// [ T, F, F ]
+			// From (1,0) (T) up. Target row 0. Initial nextCol is 0. Item (0,0) is F.
+			// Snaps to (0,0) (F). Scan left. No more left. Should return undefined.
+			const matrix = [
+				[
+					{ id: 1, available: false },
+					{ id: 2, available: false },
+				],
+				[
+					{ id: 3, available: true },
+					{ id: 4, available: false },
+					{ id: 5, available: false },
+				],
+			];
+			const result = getNextMatrixItem({
+				matrix,
+				currentRow: 1,
+				currentCol: 0,
+				direction: 'up',
+				isAvailable: isTestItemAvailable,
+			});
+			expect(result).toBeUndefined();
+		});
+	});
+});

src/lib/utils/array.ts

@@ -132,40 +132,61 @@ export function last<T>(arr: T[]): T | undefined {
  */
 export type Direction = 'up' | 'down' | 'left' | 'right';
 
+/**
+ * Options for the getNextMatrixItem function.
+ * @template T The type of items stored in the matrix.
+ */
+export interface GetNextMatrixItemOptions<T> {
+	/** The matrix (an array of arrays) where rows can have varying lengths. */
+	matrix: T[][];
+	/** The 0-based index of the current row. */
+	currentRow: number;
+	/** The 0-based index of the current column. */
+	currentCol: number;
+	/** The direction to move ('up', 'down', 'left', 'right'). */
+	direction: Direction;
+	/**
+	 * An optional predicate function that determines if an item is "available".
+	 * If an item is not available, the function will attempt to find the next available candidate.
+	 * Defaults to always returning true (all items are available).
+	 * @param item The item to check.
+	 * @returns True if the item is available, false otherwise.
+	 */
+	isAvailable?: (item: T) => boolean;
+}
+
 /**
  * Retrieves the next item in a matrix based on a current position and a direction.
  * This function is designed to work with "jagged" arrays (rows can have different lengths).
  *
+ * Special behavior for 'up'/'down': If the target row is shorter than the current column,
+ * the column index will snap to the rightmost valid column of the target row.
+ *
+ * If an `isAvailable` function is provided and the initially calculated next item is
+ * not available, the function will attempt to find the next available candidate
+ * within the target row:
+ * - For 'up'/'down': It will scan left from the snapped column.
+ * - For 'left': It will continue scanning left.
+ * - For 'right': It will continue scanning right.
+ *
  * @template T The type of items stored in the matrix.
- * @param matrix The matrix (an array of arrays) where rows can have varying lengths.
+ * @param options The options object containing matrix, current position, direction, and optional isAvailable predicate.
- * @param currentRow The 0-based index of the current row.
+ * @returns The item at the next valid and available position, or `undefined` if no such item is found.
- * @param currentCol The 0-based index of the current column.
- * @param direction The direction to move ('up', 'down', 'left', 'right').
- * @returns The item at the next position, or `undefined` if the current position is invalid,
- *          the next position is out of bounds, or the matrix itself is invalid.
  */
-export function getNextMatrixItem<T>(
+export function getNextMatrixItem<T>(options: GetNextMatrixItemOptions<T>): T | undefined {
-	matrix: T[][],
+	const { matrix, currentRow, currentCol, direction, isAvailable = (_i) => true } = options;
-	currentRow: number,
+
-	currentCol: number,
-	direction: Direction
-): T | undefined {
 	// --- 1. Input Validation: Matrix and Current Position ---
 
-	// Ensure the matrix is a valid array and not empty
 	if (!matrix || !Array.isArray(matrix) || matrix.length === 0) {
 		return undefined;
 	}
 
-	// Validate the current row index
 	if (currentRow < 0 || currentRow >= matrix.length) {
 		return undefined;
 	}
 
-	// Get the current row array to validate the current column
 	const currentRowArray = matrix[currentRow];
-
-	// Ensure the current row is a valid array and validate current column index
 	if (
 		!currentRowArray ||
 		!Array.isArray(currentRowArray) ||
@@ -178,7 +199,7 @@ export function getNextMatrixItem<T>(
 	// --- 2. Calculate Tentative Next Coordinates ---
 
 	let nextRow = currentRow;
-	let nextCol = currentCol; // Start with the same column
+	let nextCol = currentCol;
 
 	switch (direction) {
 		case 'up':
@@ -188,45 +209,70 @@ export function getNextMatrixItem<T>(
 			nextRow++;
 			break;
 		case 'left':
-			nextCol--; // Column changes for horizontal movement
+			nextCol--;
 			break;
 		case 'right':
-			nextCol++; // Column changes for horizontal movement
+			nextCol++;
 			break;
 	}
 
 	// --- 3. Validate and Adjust Next Coordinates Against Matrix Bounds ---
 
-	// Check if the calculated next row is within the matrix's vertical bounds
 	if (nextRow < 0 || nextRow >= matrix.length) {
 		return undefined; // Out of vertical bounds
 	}
 
-	// Get the array for the target row. This is crucial for jagged arrays.
 	const nextRowArray = matrix[nextRow];
-
-	// Ensure the target row is a valid array before checking its length
 	if (!nextRowArray || !Array.isArray(nextRowArray)) {
 		return undefined; // The row itself is malformed or non-existent
 	}
 
 	// --- NEW LOGIC: Adjust nextCol for vertical movements if it's out of bounds ---
 	if (direction === 'up' || direction === 'down') {
-		// If the tentative nextCol is beyond the length of the target row,
+		// Clamp nextCol to the last valid index of the target row if it's too far right
-		// clamp it to the last valid index of that row.
-		// If nextRowArray.length is 0, then nextRowArray.length - 1 is -1.
-		// Math.min(currentCol, -1) would result in -1, which will then correctly
-		// be caught by the next `if (nextCol < 0)` check.
 		nextCol = Math.min(nextCol, nextRowArray.length - 1);
 	}
 
-	// Check if the calculated next column is within the target row's horizontal bounds
+	// --- 4. Find the Next Available Item ---
-	// This applies to ALL directions, including after potential clamping for up/down.
+
+	// Initial check for bounds after clamping/calculation
 	if (nextCol < 0 || nextCol >= nextRowArray.length) {
-		return undefined; // Out of horizontal bounds for the specific nextRow
+		return undefined; // No valid column to start searching from in the target row
 	}
 
-	// --- 4. Return the Item ---
+	// Loop to find the next available item
+	let candidateCol = nextCol;
 
-	return nextRowArray[nextCol];
+	if (direction === 'up' || direction === 'down') {
+		// For vertical moves, try the calculated/clamped 'candidateCol', then scan left
+		while (candidateCol >= 0) {
+			const candidateItem = nextRowArray[candidateCol]!;
+			if (isAvailable(candidateItem)) {
+				return candidateItem;
+			}
+			candidateCol--; // Move left to find an available item
+		}
+	} else if (direction === 'left') {
+		// For 'left' moves, keep scanning left from the calculated 'candidateCol'
+		while (candidateCol >= 0) {
+			const candidateItem = nextRowArray[candidateCol]!;
+			if (isAvailable(candidateItem)) {
+				return candidateItem;
+			}
+			candidateCol--; // Continue moving left
+		}
+	} else {
+		// direction === 'right'
+		// For 'right' moves, keep scanning right from the calculated 'candidateCol'
+		while (candidateCol < nextRowArray.length) {
+			const candidateItem = nextRowArray[candidateCol]!;
+			if (isAvailable(candidateItem)) {
+				return candidateItem;
+			}
+			candidateCol++; // Continue moving right
+		}
+	}
+
+	// If no available item was found in the search path
+	return undefined;
 }

src/markdown.css

@@ -19,7 +19,7 @@ html.dark .shiki span {
 }
 
 .prose {
-	@apply text-foreground max-w-[65ch];
+	@apply text-foreground;
 
 	& h1:not(.not-prose h1) {
 		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;

src/routes/chat/+layout.svelte

@@ -558,7 +558,7 @@
 									</Tooltip>
 								</div>
 								<div class="flex flex-col gap-2 pr-2 sm:flex-row sm:items-center">
-									<ModelPicker />
+									<ModelPicker onlyImageModels={selectedImages.length > 0} />
 									{#if currentModelSupportsImages}
 										<button
 											type="button"

src/routes/chat/[id]/message.svelte

@@ -40,7 +40,12 @@
 </script>
 
 {#if message.role !== 'system' && !(message.role === 'assistant' && message.content.length === 0)}
-	<div class={cn('group flex max-w-[80%] flex-col gap-1', { 'self-end': message.role === 'user' })}>
+	<div
+		class={cn('group flex flex-col gap-1', {
+			'self-end': message.role === 'user',
+			'max-w-[80%]': message.role === 'user',
+		})}
+	>
 		{#if message.images && message.images.length > 0}
 			<div class="mb-2 flex flex-wrap gap-2">
 				{#each message.images as image (image.storage_id)}

src/routes/chat/model-picker.svelte

@@ -35,9 +35,11 @@
 
 	type Props = {
 		class?: string;
+		/* When images are attached, we should not select models that don't support images */
+		onlyImageModels?: boolean;
 	};
 
-	let { class: className }: Props = $props();
+	let { class: className, onlyImageModels }: Props = $props();
 
 	const enabledModelsQuery = useCachedQuery(api.user_enabled_models.get_enabled, {
 		session_token: session.current?.session.token ?? '',
@@ -280,74 +282,66 @@
 								{@const openRouterModel = modelsState
 									.from(Provider.OpenRouter)
 									.find((m) => m.id === model.model_id)}
+								{@const disabled =
+									onlyImageModels && openRouterModel && !supportsImages(openRouterModel)}
 
-								{#if isMobile.current}
+								<div
-									<div
+									{...gridCommand.getItem(model.model_id, {
-										{...gridCommand.getItem(model.model_id)}
+										disabled,
-										class={cn(
+									})}
-											'border-border flex h-10 items-center justify-between rounded-lg border p-2',
+									class={cn(
-											'relative scroll-m-2 select-none',
+										'border-border flex rounded-lg border p-2',
-											'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
+										'relative scroll-m-2 select-none',
-											isSelected && 'border-reflect border-none'
+										'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
-										)}
+										isSelected && 'border-reflect border-none',
-									>
+										isMobile.current
-										<div class="flex items-center gap-2">
+											? 'h-10 items-center justify-between'
-											{#if getModelIcon(model.model_id)}
+											: 'h-40 w-32 flex-col items-center justify-center',
-												{@const ModelIcon = getModelIcon(model.model_id)}
+										disabled && 'opacity-50'
-												<ModelIcon class="size-6 shrink-0" />
+									)}
-											{/if}
+								>
-											<p class="font-fake-proxima text-center leading-tight font-bold">
+									{onlyImageModels}
-												{formatted.full}
+									{disabled}
-											</p>
+									<div class={cn('flex items-center', isMobile.current ? 'gap-2' : 'flex-col')}>
-										</div>
-
-										{#if openRouterModel && supportsImages(openRouterModel)}
-											<Tooltip>
-												{#snippet trigger(tooltip)}
-													<div class="" {...tooltip.trigger}>
-														<EyeIcon class="size-3" />
-													</div>
-												{/snippet}
-												Supports image anaylsis
-											</Tooltip>
-										{/if}
-									</div>
-								{:else}
-									<div
-										{...gridCommand.getItem(model.model_id)}
-										class={cn(
-											'border-border flex h-40 w-32 scroll-m-2 flex-col items-center justify-center rounded-lg border p-2',
-											'relative select-none',
-											'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
-											isSelected && 'border-reflect border-none'
-										)}
-									>
 										{#if getModelIcon(model.model_id)}
 											{@const ModelIcon = getModelIcon(model.model_id)}
 											<ModelIcon class="size-6 shrink-0" />
 										{/if}
-										<p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
+
-											{formatted.primary}
+										<p
-										</p>
+											class={cn(
-										<p class="mt-0 text-center text-xs leading-tight font-medium">
+												'font-fake-proxima text-center leading-tight font-bold',
-											{formatted.secondary}
+												!isMobile.current && 'mt-2'
+											)}
+										>
+											{isMobile.current ? formatted.full : formatted.primary}
 										</p>
 
-										{#if openRouterModel && supportsImages(openRouterModel)}
+										{#if !isMobile.current}
-											<Tooltip>
+											<p class="mt-0 text-center text-xs leading-tight font-medium">
-												{#snippet trigger(tooltip)}
+												{formatted.secondary}
-													<div
+											</p>
-														class="abs-x-center text-muted-foreground absolute bottom-3 flex items-center gap-1 text-xs"
-														{...tooltip.trigger}
-													>
-														<EyeIcon class="size-3" />
-													</div>
-												{/snippet}
-												Supports image anaylsis
-											</Tooltip>
 										{/if}
 									</div>
-								{/if}
+
+									{#if openRouterModel && supportsImages(openRouterModel)}
+										<Tooltip>
+											{#snippet trigger(tooltip)}
+												<div
+													class={cn(
+														isMobile.current
+															? ''
+															: 'abs-x-center text-muted-foreground absolute bottom-3 flex items-center gap-1 text-xs'
+													)}
+													{...tooltip.trigger}
+												>
+													<EyeIcon class="size-3" />
+												</div>
+											{/snippet}
+											Supports image anaylsis
+										</Tooltip>
+									{/if}
+								</div>
 							{/each}
 						</div>
 					</div>