feat: add basic touchscreen support

This is basically a migration from mouse events to
[pointer events](
  https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
).

The `PointerEvent` interface inherits all of the `MouseEvent`
properties, meaning that existing code can essentially be left
as-is. The only major change is making sure we only respond to the
"primary" pointer.

Known issues include:
* stylus hover is not detected
* touchscreens do not have a concept of hover, making it difficult
  to e.g. resize areas
* no touch gesture support, e.g. "pinch-to-zoom"

src/components/EditorCanvas/Note.jsx

@@ -21,7 +21,7 @@ import {
 } from "../../hooks";
 import { useTranslation } from "react-i18next";
 
-export default function Note({ data, onMouseDown }) {
+export default function Note({ data, onPointerDown }) {
   const w = 180;
   const r = 3;
   const fold = 24;
@@ -83,8 +83,8 @@ export default function Note({ data, onMouseDown }) {
 
   return (
     <g
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      onPointerEnter={(e) => e.isPrimary && setHovered(true)}
+      onPointerLeave={(e) => e.isPrimary && setHovered(false)}
     >
       <path
         d={`M${data.x + fold} ${data.y} L${data.x + w - r} ${
@@ -133,7 +133,7 @@ export default function Note({ data, onMouseDown }) {
         y={data.y}
         width={w}
         height={data.height}
-        onMouseDown={onMouseDown}
+        onPointerDown={onPointerDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
           <div className="flex justify-between gap-1 w-full">