long press package and hook

web/package-lock.json

@@ -72,6 +72,7 @@
         "tailwind-merge": "^2.4.0",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
+        "use-long-press": "^3.2.0",
         "vaul": "^0.9.1",
         "vite-plugin-monaco-editor": "^1.1.0",
         "zod": "^3.23.8"
@@ -8709,6 +8710,15 @@
         "scheduler": ">=0.19.0"
       }
     },
+    "node_modules/use-long-press": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.2.0.tgz",
+      "integrity": "sha512-uq5o2qFR1VRjHn8Of7Fl344/AGvgk7C5Mcb4aSb1ZRVp6PkgdXJJLdRrlSTJQVkkQcDuqFbFc3mDX4COg7mRTA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",

web/package.json

@@ -78,6 +78,7 @@
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "use-long-press": "^3.2.0",
     "vaul": "^0.9.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "zod": "^3.23.8"

web/src/hooks/use-press.ts

@@ -0,0 +1,54 @@
+// https://gist.github.com/cpojer/641bf305e6185006ea453e7631b80f95
+
+import { useCallback, useState } from "react";
+import {
+  LongPressCallbackMeta,
+  LongPressReactEvents,
+  useLongPress,
+} from "use-long-press";
+
+export default function usePress(
+  options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & {
+    onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>;
+    onPress: () => void;
+  },
+) {
+  const { onLongPress, onPress, ...actualOptions } = options;
+  const [hasLongPress, setHasLongPress] = useState(false);
+
+  const onCancel = useCallback(() => {
+    if (hasLongPress) {
+      setHasLongPress(false);
+    }
+  }, [hasLongPress]);
+
+  const bind = useLongPress(
+    useCallback(
+      (
+        event: LongPressReactEvents<Element>,
+        meta: LongPressCallbackMeta<unknown>,
+      ) => {
+        setHasLongPress(true);
+        onLongPress(event, meta);
+      },
+      [onLongPress],
+    ),
+    {
+      ...actualOptions,
+      onCancel,
+      onStart: onCancel,
+    },
+  );
+
+  return useCallback(
+    () => ({
+      ...bind(),
+      onClick: () => {
+        if (!hasLongPress) {
+          onPress();
+        }
+      },
+    }),
+    [bind, hasLongPress, onPress],
+  );
+}