transition border on scroll

GridList.tsx

	const [scrollPos, onScroll] = useScrollPos('top');

	return (
		<GridList
			items={list.items}
			className={cn(
				'grow overflow-y-auto flex flex-col gap-px my-2',
				'border-y border-border data-[scroll-pos="top"]:border-t-transparent data-[scroll-pos="bottom"]:border-b-transparent transition duration-100'
			)}
			aria-label="FileList sidebar"
			selectionMode="single"
			data-scroll-pos={scrollPos}
			onScroll={onScroll}
			key={shortId} // TODO: don't re-render all for data-active
		>
    )

useScrollPos.ts

import React from 'react';

type ScrollPos = 'top' | 'bottom' | 'middle';

export const useScrollPos = (initialState: ScrollPos = 'top', top = 0, bottom = 1) => {
	const [scrollPos, setScrollPos] = React.useState<ScrollPos>(initialState);

	const onScroll = React.useCallback(
		(event: React.UIEvent<HTMLDivElement, UIEvent>) => {
			const target = event.target as HTMLElement;
			const { scrollTop, scrollHeight, clientHeight } = target;
			const maxScroll = scrollHeight - clientHeight;
			if (scrollTop <= top) {
				setScrollPos('top');
			} else if (scrollTop >= maxScroll - bottom) {
				setScrollPos('bottom');
			} else {
				setScrollPos('middle');
			}
		},
		[setScrollPos]
	);

	return [scrollPos, onScroll] as const;
};