task(jat-9ptks): /open-tasks bulk select

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: joewinke

ide/src/lib/components/sessions/TasksActive.svelte

@@ -3256,36 +3256,38 @@
 		min-height: 0;
 	}
 
-	/* State indicator strip — clickable handle */
+	/* State indicator strip */
 	.mobile-state-strip {
 		width: 28px;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 0;
-		transition: width 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s;
+		transition: filter 0.2s;
 	}
 
-	.mobile-card-inner.tray-open .mobile-state-strip {
-		opacity: 0.7;
+	/* Brighten strip on card hover */
+	.mobile-session-card:hover .mobile-state-strip {
+		filter: brightness(1.8) saturate(1.3);
 	}
 
-	/* Action tray — slides out from strip on click */
+	/* Subtle row highlight when tray is active */
+	.mobile-session-card:hover {
+		background: oklch(0.19 0.015 250);
+	}
+
+	/* Action tray — slides out on hover */
 	.mobile-action-tray {
 		display: flex;
 		align-items: stretch;
 		max-width: 0;
 		overflow: hidden;
-		transition: max-width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		transition: max-width 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		flex-shrink: 0;
 	}
 
-	.mobile-card-inner.tray-open .mobile-action-tray {
-		max-width: 240px;
+	.mobile-session-card:hover .mobile-action-tray {
+		max-width: 320px;
 	}
 
 	/* Tray action buttons */
@@ -3294,23 +3296,27 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 3px;
-		padding: 0 10px;
-		min-width: 54px;
+		gap: 4px;
+		padding: 6px 10px;
+		min-width: 68px;
 		border: none;
-		border-right: 1px solid oklch(0 0 0 / 0.15);
+		border-right: 1px solid oklch(0 0 0 / 0.18);
 		cursor: pointer;
 		font-size: 0.5625rem;
 		font-weight: 700;
+		line-height: 1.25;
 		color: oklch(0.95 0 0);
-		white-space: nowrap;
 		font-family: system-ui, -apple-system, sans-serif;
-		letter-spacing: 0.02em;
+		letter-spacing: 0.03em;
+		text-align: center;
 		text-transform: uppercase;
+		overflow-wrap: normal;
+		hyphens: none;
 		transition: filter 0.1s;
 	}
 
-	.mobile-tray-btn:active { filter: brightness(1.15); }
+	.mobile-tray-btn:hover  { filter: brightness(1.12); }
+	.mobile-tray-btn:active { filter: brightness(1.25); }
 	.mobile-tray-btn:last-child { border-right: none; }
 
 	.mobile-tray-btn-success  { background: oklch(0.48 0.16 145); }

ide/src/lib/components/work/SuggestedTasksSection.svelte

@@ -722,12 +722,12 @@
 	}
 
 	/* Elevate the task card containing an open dropdown above its siblings.
-	   The SearchDropdown auto-focuses its search input on open, which triggers
-	   :focus-within and creates a stacking context above sibling cards. */
+	   :has(:global(.sd-panel)) fires the moment the dropdown panel enters the DOM,
+	   creating a stacking context above sibling cards without any focus timing gap. */
 	.task-card {
 		position: relative;
 	}
-	.task-card:focus-within {
+	.task-card:has(:global(.sd-panel)) {
 		z-index: 10;
 	}
 

ide/src/routes/open-tasks/+page.svelte

@@ -398,7 +398,8 @@
 	function formatDueDate(date: string | null | undefined): string {
 		if (!date) return '';
 		try {
-			const d = new Date(date);
+			// Parse date-only strings as local time (not UTC) by appending T00:00:00
+			const d = new Date(date.includes('T') ? date : date + 'T00:00:00');
 			if (isNaN(d.getTime())) return date;
 			const today = new Date();
 			today.setHours(0, 0, 0, 0);
@@ -420,7 +421,7 @@
 	function dueDateClass(date: string | null | undefined): string {
 		if (!date) return '';
 		try {
-			const d = new Date(date);
+			const d = new Date(date.includes('T') ? date : date + 'T00:00:00');
 			const today = new Date();
 			today.setHours(0, 0, 0, 0);
 			const target = new Date(d);
@@ -483,6 +484,7 @@
 		if (x + pickerWidth > window.innerWidth) x = window.innerWidth - pickerWidth - 8;
 		if (y + pickerHeight > window.innerHeight) y = rect.top - pickerHeight - 4;
 		if (x < 8) x = 8;
+		if (y < 8) y = 8;
 
 		dueDatePickerTaskId = taskId;
 		dueDatePickerPos = { x, y };
@@ -513,7 +515,7 @@
 		for (let i = 0; i < 7; i++) {
 			const d = new Date(today);
 			d.setDate(d.getDate() + i);
-			const dateValue = d.toISOString().split('T')[0];
+			const dateValue = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
 			const dayNum = d.getDate();
 			const label = i === 0 ? 'Today' : i === 1 ? 'Tmrw' : dayNames[d.getDay()];
 			let badge = '';