feat: match YouTube swipe controls on watch feed

src/pages/WatchPage.jsx

@@ -15,6 +15,7 @@ function SwipeVideo({ video, active }) {
 
 export function WatchPage() {
   const { id } = useParams(); const navigate = useNavigate(); const { locale } = useAppStore(); const [activeId, setActiveId] = useState(id); const current = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const feed = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const items = feed.data || []; const ordered = [current.data, ...items.filter((item) => item.id !== id)].filter(Boolean);
-  useEffect(() => { const node = document.querySelector('.single-video-feed'); if (!node) return undefined; const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { const nextId = entry.target.dataset.id; setActiveId(nextId); if (nextId !== id) window.history.replaceState(null, '', `/watch/${nextId}`); } }), { root: node, threshold: 0.75 }); node.querySelectorAll('.single-video-slide').forEach((item) => observer.observe(item)); return () => observer.disconnect(); }, [ordered.length, id]);
-  return <div className="single-video-page"><header className="single-video-toolbar"><button onClick={() => navigate(-1)}>←</button><img src="/brand/ymb-logo-blue.png" alt="YMB" /><span>{locale.swipeHint || 'Swipe up for the next video'}</span></header><div className="single-video-feed">{current.loading && <div className="api-note">{locale.loading}</div>}{ordered.map((video) => <div key={video.id} data-id={video.id}><SwipeVideo video={video} active={String(activeId) === String(video.id)} /></div>)}</div></div>;
+  const activeIndex = Math.max(0, ordered.findIndex((item) => String(item.id) === String(activeId))); const feedRef = useRef(null); const touchStart = useRef(0); const scrollToIndex = (index) => { const target = feedRef.current?.children[index]; target?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const move = (delta) => scrollToIndex(Math.min(ordered.length - 1, Math.max(0, activeIndex + delta)));
+  useEffect(() => { const node = feedRef.current; if (!node) return undefined; const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { const nextId = entry.target.dataset.id; setActiveId(nextId); if (nextId !== id) window.history.replaceState(null, '', `/watch/${nextId}`); } }), { root: node, threshold: 0.75 }); node.querySelectorAll('[data-id]').forEach((item) => observer.observe(item)); const keydown = (event) => { if (event.key === 'ArrowDown' || event.key === 'PageDown') { event.preventDefault(); move(1); } if (event.key === 'ArrowUp' || event.key === 'PageUp') { event.preventDefault(); move(-1); } }; window.addEventListener('keydown', keydown); return () => { observer.disconnect(); window.removeEventListener('keydown', keydown); }; }, [ordered.length, id, activeIndex]);
+  return <div className="single-video-page"><header className="single-video-toolbar"><button onClick={() => navigate(-1)}>←</button><img src="/brand/ymb-logo-blue.png" alt="YMB" /><span>{locale.swipeHint || 'Swipe up for the next video'}</span></header><div ref={feedRef} className="single-video-feed" onTouchStart={(event) => { touchStart.current = event.touches[0].clientY; }} onTouchEnd={(event) => { const distance = touchStart.current - event.changedTouches[0].clientY; if (Math.abs(distance) > 45) move(distance > 0 ? 1 : -1); }} onWheel={(event) => { if (Math.abs(event.deltaY) > 20) { event.preventDefault(); move(event.deltaY > 0 ? 1 : -1); } }}>{current.loading && <div className="api-note">{locale.loading}</div>}{ordered.map((video) => <div key={video.id} data-id={video.id}><SwipeVideo video={video} active={String(activeId) === String(video.id)} /></div>)}<div className="feed-arrows"><button onClick={() => move(-1)} disabled={activeIndex === 0} aria-label="Previous video">↑</button><button onClick={() => move(1)} disabled={activeIndex === ordered.length - 1} aria-label="Next video">↓</button></div></div></div>;
 }