improvements to `SlidesList`:

* better selection highlighting
* now auto scrolling

a bug in chrome seems to prevent us from enable smooth scrolling

src/ui/src/assets/css/_slidesList.scss

@@ -8,6 +8,7 @@
 		aspect-ratio: 1.333;
 		overflow: hidden;
 		margin-bottom: 0.1rem;
+		z-index: 100;
 	}
 
 	.slide {
@@ -18,7 +19,10 @@
 		-webkit-transform-origin: top left;
 
 		&.active {
-			border: solid 3px color(hightlight);
+			box-shadow: 
+				5px 5px 0px color(hightlight) inset,
+				-5px -5px 0px color(hightlight) inset;
+				
 		}
 	}
 }

src/ui/src/components/Slide.js

@@ -1,15 +1,15 @@
-import React from "react";
+import React, {forwardRef} from "react";
 
 import SlideItem from "./SlideItem";
 
-const Slide = ({data, className, ...props}) => {
+const Slide = forwardRef(({data, className, ...props}, ref) => {
 	return (
-		<article className={`slide${data?.title ? " title" : ""} ${className}`} {...props}>
+		<article className={`slide${data?.title ? " title" : ""} ${className}`} {...props} ref={ref}>
 			{data?.content.map((item, index) =>
 				<SlideItem item={item} key={index} />
 			)}
 		</article>
 	);
-};
+});
 
 export default Slide;

src/ui/src/components/SlidesList.js

@@ -6,7 +6,9 @@ import SlideContext from "../shared/SlideContext";
 const SlidesList = ({deck}) => {
 	const {slide, setSlide} = useContext(SlideContext);
 	const container         = useRef();
+	const current           = useRef();
 	const [scale, setScale] = useState(1);
+	const [first, setFirst] = useState(true);
 
 	const sizeChange = useCallback(() => {
 		if (!container.current)
@@ -22,6 +24,16 @@ const SlidesList = ({deck}) => {
 		setScale(targetWidth / slideWidth);
 	}, [container]);
 
+	useEffect(() => {
+		if (first) {
+			setFirst(false);
+			return;
+		}
+		if (!current.current)
+			return;
+		current.current.scrollIntoView({inline : "nearest"});
+	}, [current, slide]);
+
 	useEffect(() => {
 		const resizeListener = () => {
 			sizeChange();
@@ -38,7 +50,7 @@ const SlidesList = ({deck}) => {
 		<aside className="slides-list" ref={container}>
 			{deck.map((currentSlide, index) => (
 				<div className="slide-wrap" key={index}>
-					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} />
+					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
 				</div>
 			))}
 		</aside>