Normalize on pointer events since they should work for both mobile and desktop

packages/webamp/js/components/Balance.tsx

@@ -26,8 +26,8 @@ export default function Balance({ style, className, id }: Props) {
       value={balance}
       style={{ ...style, touchAction: "none" }}
       onChange={(e) => setBalance(Number(e.target.value))}
-      onMouseDown={() => setFocus("balance")}
-      onMouseUp={unsetFocus}
+      onPointerDown={() => setFocus("balance")}
+      onPointerUp={unsetFocus}
       title="Balance"
     />
   );

packages/webamp/js/components/FocusTarget.tsx

@@ -68,8 +68,7 @@ function FocusTarget({ onKeyDown, windowId, children }: Props) {
   return (
     <div
       ref={setRef}
-      onMouseDown={focusHandler}
-      onTouchStart={focusHandler}
+      onPointerDown={focusHandler}
       onFocus={focusHandler}
       tabIndex={-1}
       style={{ height: "100%", width: "100%" }}

packages/webamp/js/components/MainWindow/ClutterBar.tsx

@@ -34,8 +34,8 @@ const ClutterBar = memo(() => {
         title={"Toggle Doublesize Mode"}
         id="button-d"
         className={classnames({ selected: doubled })}
-        onMouseUp={handleMouseUp}
-        onMouseDown={handleMouseDown}
+        onPointerUp={handleMouseUp}
+        onPointerDown={handleMouseDown}
       />
       <div id="button-v" />
     </div>

packages/webamp/js/components/MainWindow/Marquee.tsx

@@ -137,8 +137,7 @@ const Marquee = React.memo(() => {
     <div
       id="marquee"
       className="text"
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
+      onPointerDown={handleMouseDown}
       title="Song Title"
     >
       <div

packages/webamp/js/components/MainWindow/Position.tsx

@@ -71,8 +71,8 @@ const Position = memo(() => {
       onChange={
         () => {} /* React complains without this, can probably rename onInput to onChange */
       }
-      onMouseUp={seekToPercentComplete}
-      onMouseDown={setPosition}
+      onPointerUp={seekToPercentComplete}
+      onPointerDown={setPosition}
       title="Seeking Bar"
     />
   );

packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx

@@ -53,7 +53,7 @@ function PlaylistShade() {
         selected: focused === WINDOWS.PLAYLIST,
       })}
       style={{ width: `${WINDOW_WIDTH + addedWidth}px` }}
-      onMouseDown={() => focusWindow("playlist")}
+      onPointerDown={() => focusWindow("playlist")}
       onDoubleClick={toggleShade}
     >
       <div className="left">

packages/webamp/js/components/ResizeTarget.tsx

@@ -70,12 +70,6 @@ function ResizeTarget(props: Props) {
     setMouseDown(true);
   };
 
-  return (
-    <div
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
-      {...passThroughProps}
-    />
-  );
+  return <div onPointerDown={handleMouseDown} {...passThroughProps} />;
 }
 export default memo(ResizeTarget);

packages/webamp/js/components/Volume.tsx

@@ -26,12 +26,8 @@ export default function Volume({ id, style, className }: Props) {
       style={{ ...style, touchAction: "none" }}
       className={className}
       onChange={(e) => setVolume(Number(e.target.value))}
-      onMouseDown={() => setFocus("volume")}
-      onTouchStart={() => {
-        setFocus("volume");
-      }}
-      onMouseUp={unsetFocus}
-      onTouchEnd={unsetFocus}
+      onPointerDown={() => setFocus("volume")}
+      onPointerUp={unsetFocus}
       title="Volume Bar"
     />
   );

packages/webamp/js/components/WindowManager.tsx

@@ -177,10 +177,7 @@ export default function WindowManager({ windows: propsWindows }: Props) {
         <div
           key={w.key}
           onBlur={onBlur}
-          onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-            handleMouseDown(w.key, e);
-          }}
-          onTouchStart={(e: React.TouchEvent<HTMLDivElement>) => {
+          onPointerDown={(e: React.MouseEvent<HTMLDivElement>) => {
             handleMouseDown(w.key, e);
           }}
           style={{