Toolbar.tsx

import { useEffect, useRef, useState } from 'react';
import { ViewModeToggle } from './ViewModeToggle';
import { UnitsToggle } from './UnitsToggle';
import { PageMenu } from './PageMenu';

const EDGE = 28; // px width of the fade at a scrollable edge

export function Toolbar() {
  const ref = useRef<HTMLDivElement>(null);
  const [fade, setFade] = useState({ left: false, right: false });

  const update = () => {
    const el = ref.current;
    if (!el) return;
    const left = el.scrollLeft > 1;
    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
    setFade((f) => (f.left === left && f.right === right ? f : { left, right }));
  };

  useEffect(() => {