Typing lessons like duolingo & musicmouse cleanup

web/src/components/BrowseView.tsx

@@ -6,6 +6,7 @@
  * the whole page. */
 
 import { useEffect, useMemo, useRef } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 
 import type { Album } from "../api/types";
 import {
@@ -546,7 +547,7 @@ function ShelfRow({
   children,
   focusedIndex,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   /** Which tile in this row the keyboard is on, or `null` while some other row has
    * focus - keeps a Ctrl+h/l selection that's scrolled off the edge on screen, the
    * horizontal equivalent of the outer scroller's own keep-in-view effect above. */
@@ -580,7 +581,7 @@ function ShelfRow({
     return () => element.removeEventListener("wheel", onWheel);
   }, []);
 
-  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+  const onMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
     const element = ref.current;
     if (event.button !== 0 || !element) return;
     event.preventDefault(); // no text-selection/ghost-drag while panning
@@ -632,7 +633,7 @@ function CategoryTile({
   entry: Category;
   navIndex?: number;
   selected?: boolean;
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void;
 }) {
   const books = entry.albums.filter(isBook).length;
   const allBooks = books === entry.albums.length;
@@ -728,7 +729,7 @@ function SectionTitle({
   children,
   centered,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   centered?: boolean;
 }) {
   return (
@@ -750,7 +751,7 @@ function SectionTitle({
   );
 }
 
-function Muted({ children }: { children: React.ReactNode }) {
+function Muted({ children }: { children: ReactNode }) {
   return (
     <span style={{ fontSize: 13, fontWeight: 700, color: "oklch(88% 0.02 210 / .7)" }}>
       {children}