fix: improve mobile progress bar scrubbing reliability (#139)

* fix: use window-level listeners for progress bar scrubbing on mobile

Once a scrub starts, attach pointermove/pointerup listeners to window
instead of the bar element. This way the finger can drift vertically
off the bar during a drag and it still tracks the horizontal X position.

* feat(nav): add unwatched clip count badge to home tab

* chore(deps): bump picomatch to 4.0.4 (CVE-2026-33671)

* chore: ignore CVE-2026-33671 picomatch in Node base image

---------

Co-authored-by: gca <gadams@harrisassoc.com>

Author: GraysonCAdams

.trivyignore

@@ -16,3 +16,6 @@ CVE-2026-29786
 
 # tar node-tar <7.5.11 vulnerability (npm bundled)
 CVE-2026-31802
+
+# picomatch ReDoS via crafted glob patterns (npm bundled)
+CVE-2026-33671

package-lock.json

@@ -72,6 +72,7 @@
 		"lint-staged": "^16.4.0",
 		"mermaid": "^11.13.0",
 		"phosphor-svelte": "^3.1.0",
+		"picomatch": "^4.0.4",
 		"pino-pretty": "^13.1.3",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.5.1",

package.json

@@ -36,38 +36,50 @@
 		return ratio * duration;
 	}
 
+	// Track pointer type so we know whether to clear hover on end
+	let activePointerType: string | null = null;
+
 	function handlePointerDown(e: PointerEvent) {
 		e.preventDefault();
 		e.stopPropagation();
 		scrubbing = true;
-		barEl?.setPointerCapture(e.pointerId);
+		activePointerType = e.pointerType;
 		const t = getTimeFromX(e.clientX);
 		scrubTime = t;
 		onscrubstart?.();
 		onseek(t);
+		// Listen on window so the finger can drift anywhere and we still track X
+		window.addEventListener('pointermove', handleWindowPointerMove);
+		window.addEventListener('pointerup', handleWindowPointerUp);
+		window.addEventListener('pointercancel', handleWindowPointerUp);
 	}
 
-	function handlePointerMove(e: PointerEvent) {
-		if (scrubbing) {
-			const t = getTimeFromX(e.clientX);
-			scrubTime = t;
-			// Video is paused during scrub, so seek directly on every move — no throttle needed
-			onseek(t);
-		} else if (e.pointerType === 'mouse') {
-			hoverProgress = getTimeFromX(e.clientX);
-		}
+	function handleWindowPointerMove(e: PointerEvent) {
+		const t = getTimeFromX(e.clientX);
+		scrubTime = t;
+		onseek(t);
 	}
 
-	function handlePointerUp(e: PointerEvent) {
+	function handleWindowPointerUp(_e: PointerEvent) {
 		if (!scrubbing) return;
+		window.removeEventListener('pointermove', handleWindowPointerMove);
+		window.removeEventListener('pointerup', handleWindowPointerUp);
+		window.removeEventListener('pointercancel', handleWindowPointerUp);
 		if (scrubTime !== null) onseek(scrubTime);
 		scrubbing = false;
 		scrubTime = null;
-		barEl?.releasePointerCapture(e.pointerId);
-		if (e.pointerType !== 'mouse') hoverProgress = null;
+		if (activePointerType !== 'mouse') hoverProgress = null;
+		activePointerType = null;
 		onscrubend?.();
 	}
 
+	function handlePointerMove(e: PointerEvent) {
+		// Only used for mouse hover preview when not scrubbing
+		if (!scrubbing && e.pointerType === 'mouse') {
+			hoverProgress = getTimeFromX(e.clientX);
+		}
+	}
+
 	function handlePointerLeave() {
 		if (!scrubbing) hoverProgress = null;
 	}
@@ -81,8 +93,6 @@
 	bind:this={barEl}
 	onpointerdown={handlePointerDown}
 	onpointermove={handlePointerMove}
-	onpointerup={handlePointerUp}
-	onpointercancel={handlePointerUp}
 	onpointerleave={handlePointerLeave}
 	tabindex="0"
 	role="slider"

src/lib/components/ProgressBar.svelte

@@ -5,7 +5,12 @@
 	import { addVideoModalOpen } from '$lib/stores/addVideoModal';
 	import { queueSheetOpen } from '$lib/stores/queueSheet';
 	import { homeTapSignal } from '$lib/stores/homeTap';
-	import { unreadCount, startPolling, stopPolling } from '$lib/stores/notifications';
+	import {
+		unreadCount,
+		unwatchedCount,
+		startPolling,
+		stopPolling
+	} from '$lib/stores/notifications';
 	import { queueCount } from '$lib/stores/queue';
 	import { globalMuted } from '$lib/stores/mute';
 	import { initAudioContext } from '$lib/audio/normalizer';
@@ -179,12 +184,22 @@
 	<nav class="bottom-tabs" class:overlay-mode={isFeed} bind:this={bottomTabsEl}>
 		{#if isFeed}
 			<button class="tab active" onclick={() => homeTapSignal.update((n) => n + 1)}>
-				<HouseIcon size={24} weight="fill" />
+				<span class="home-icon-wrap">
+					<HouseIcon size={24} weight="fill" />
+					{#if $unwatchedCount > 0}
+						<span class="tab-badge">{$unwatchedCount > 9 ? '9+' : $unwatchedCount}</span>
+					{/if}
+				</span>
 				<span>Home</span>
 			</button>
 		{:else}
 			<a href="/" class="tab">
-				<HouseIcon size={24} />
+				<span class="home-icon-wrap">
+					<HouseIcon size={24} />
+					{#if $unwatchedCount > 0}
+						<span class="tab-badge">{$unwatchedCount > 9 ? '9+' : $unwatchedCount}</span>
+					{/if}
+				</span>
 				<span>Home</span>
 			</a>
 		{/if}
@@ -373,6 +388,7 @@
 		border-color: var(--reel-bg-elevated);
 	}
 
+	.home-icon-wrap,
 	.activity-icon-wrap {
 		position: relative;
 		display: flex;