Drive: long-press to select on mobile; collision-proof Quick-Upload codes

Mobile has no right-click or Ctrl-click, so there was no way to enter selection mode.
Now a long-press (touch) toggles an item's selection, and once a selection exists a plain
tap toggles too; the synthesized contextmenu/click a long-press fires are de-duped and
suppressed, and mouse behaviour stays desktop-standard (Ctrl/Shift/right-click unchanged).

Quick-Upload codes are global by necessity — the public /q link routes an upload to its
owner by the code alone — so two users can't share one. Blank codes now come from a
collision-checked generator (never a 500), and the create is guarded against the
check-then-insert race, returning a clean 409 'already in use' either way.

Author: softpython2884

apps/api/src/routes/account.ts

@@ -3,14 +3,15 @@
  * permanently delete your account. Both are scoped strictly to the requesting user.
  */
 import type { FastifyPluginAsync } from 'fastify';
-import { passwordConfirmSchema, createQuickCodeSchema, randomCode } from '@opencoperlock/shared';
+import { passwordConfirmSchema, createQuickCodeSchema } from '@opencoperlock/shared';
 import { prisma } from '../db.js';
 import { parseOr400 } from '../lib/validate.js';
 import { verifyPassword, hashPassword } from '../services/password.js';
 import { remainingRecoveryCodes } from '../services/recovery.js';
 import { toPublicFile, toPublicFolder, toPublicShare, toPublicUser, toPublicQuickCode } from '../lib/serialize.js';
 import { clearSessionCookie } from '../lib/cookies.js';
 import { audit } from '../services/audit.js';
+import { generateUniqueQuickCode, isCodeTakenError } from '../services/quickCode.js';
 
 export const accountRoutes: FastifyPluginAsync = async (app) => {
   app.addHook('preHandler', app.requireAuth);
@@ -42,25 +43,31 @@ export const accountRoutes: FastifyPluginAsync = async (app) => {
       }
     }
 
-    const codeValue = body.code ?? randomCode();
+    const codeValue = body.code ?? (await generateUniqueQuickCode());
     if (body.code) {
       const clash = await prisma.quickUploadCode.findUnique({ where: { code: codeValue } });
       if (clash) return reply.code(409).send({ error: 'This code is already in use' });
     }
 
-    const code = await prisma.quickUploadCode.create({
-      data: {
-        code: codeValue,
-        createdById: req.user!.id,
-        targetFolderId: body.targetFolderId ?? null,
-        maxBytes: body.maxBytes == null ? null : BigInt(body.maxBytes),
-        expiresAt: body.expiresAt ?? null,
-        usageLimit: body.usageLimit ?? null,
-        passwordHash: body.password ? await hashPassword(body.password) : null,
-      },
-    });
-    await audit(req, 'account.quickcode.create', { target: code.id });
-    return reply.code(201).send({ code: toPublicQuickCode(code) });
+    try {
+      const code = await prisma.quickUploadCode.create({
+        data: {
+          code: codeValue,
+          createdById: req.user!.id,
+          targetFolderId: body.targetFolderId ?? null,
+          maxBytes: body.maxBytes == null ? null : BigInt(body.maxBytes),
+          expiresAt: body.expiresAt ?? null,
+          usageLimit: body.usageLimit ?? null,
+          passwordHash: body.password ? await hashPassword(body.password) : null,
+        },
+      });
+      await audit(req, 'account.quickcode.create', { target: code.id });
+      return reply.code(201).send({ code: toPublicQuickCode(code) });
+    } catch (err) {
+      // Lost a race for the same custom code between the check and the insert.
+      if (isCodeTakenError(err)) return reply.code(409).send({ error: 'This code is already in use' });
+      throw err;
+    }
   });
 
   app.delete('/quick-codes/:id', async (req, reply) => {

apps/api/src/routes/admin.ts

@@ -2,13 +2,13 @@ import type { FastifyPluginAsync } from 'fastify';
 import {
   createQuickCodeSchema,
   createUserSchema,
-  randomCode,
   updateSettingsSchema,
   updateUserSchema,
 } from '@opencoperlock/shared';
 import { prisma } from '../db.js';
 import { parseOr400 } from '../lib/validate.js';
 import { hashPassword } from '../services/password.js';
+import { generateUniqueQuickCode, isCodeTakenError } from '../services/quickCode.js';
 import { toPublicQuickCode, toPublicUser } from '../lib/serialize.js';
 import { getGlobalCapBytes, getGlobalUsedBytes } from '../services/quota.js';
 import { ensureFastUploadFolder } from '../services/systemFolders.js';
@@ -244,26 +244,31 @@ export const adminRoutes: FastifyPluginAsync = async (app) => {
     }
 
     // Use the admin's chosen memorable code (already uppercased by the schema), or a
-    // random one. Reject a custom code that's already taken.
-    const codeValue = body.code ?? randomCode();
+    // collision-free generated one. Reject a custom code that's already taken.
+    const codeValue = body.code ?? (await generateUniqueQuickCode());
     if (body.code) {
       const clash = await prisma.quickUploadCode.findUnique({ where: { code: codeValue } });
       if (clash) return reply.code(409).send({ error: 'This code is already in use' });
     }
 
-    const code = await prisma.quickUploadCode.create({
-      data: {
-        code: codeValue,
-        createdById: req.user!.id,
-        targetFolderId: body.targetFolderId ?? null,
-        maxBytes: body.maxBytes == null ? null : BigInt(body.maxBytes),
-        expiresAt: body.expiresAt ?? null,
-        usageLimit: body.usageLimit ?? null,
-        passwordHash: body.password ? await hashPassword(body.password) : null,
-      },
-    });
-    await audit(req, 'admin.quickcode.create', { target: code.id });
-    return reply.code(201).send({ code: toPublicQuickCode(code) });
+    try {
+      const code = await prisma.quickUploadCode.create({
+        data: {
+          code: codeValue,
+          createdById: req.user!.id,
+          targetFolderId: body.targetFolderId ?? null,
+          maxBytes: body.maxBytes == null ? null : BigInt(body.maxBytes),
+          expiresAt: body.expiresAt ?? null,
+          usageLimit: body.usageLimit ?? null,
+          passwordHash: body.password ? await hashPassword(body.password) : null,
+        },
+      });
+      await audit(req, 'admin.quickcode.create', { target: code.id });
+      return reply.code(201).send({ code: toPublicQuickCode(code) });
+    } catch (err) {
+      if (isCodeTakenError(err)) return reply.code(409).send({ error: 'This code is already in use' });
+      throw err;
+    }
   });
 
   app.delete('/quick-codes/:id', async (req, reply) => {

apps/api/src/services/quickCode.ts

@@ -0,0 +1,24 @@
+/**
+ * Quick-Upload codes must be globally unique: the public /q endpoint routes an anonymous upload
+ * to the right user by the code alone, so two users can never share one. A user-chosen code that
+ * is already taken is rejected (caller returns 409); a blank one gets a generated, collision-free
+ * code from here.
+ */
+import { randomCode } from '@opencoperlock/shared';
+import { prisma } from '../db.js';
+
+/** A random code guaranteed not to collide with an existing one (widens on the unlikely clash). */
+export async function generateUniqueQuickCode(): Promise<string> {
+  for (let i = 0; i < 8; i += 1) {
+    const code = randomCode();
+    const clash = await prisma.quickUploadCode.findUnique({ where: { code } });
+    if (!clash) return code;
+  }
+  // Practically unreachable; a longer code makes a collision astronomically unlikely.
+  return randomCode(14);
+}
+
+/** True when a Prisma error is the unique-constraint violation on the code column. */
+export function isCodeTakenError(err: unknown): boolean {
+  return typeof err === 'object' && err !== null && (err as { code?: string }).code === 'P2002';
+}

apps/web/src/app/(app)/drive/page.tsx

@@ -604,14 +604,69 @@ export default function EspacesPage() {
   }
 
   // ── Selection ───────────────────────────────────────────────────────────────
+  function toggleKey(key: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  // ── Touch long-press selection ───────────────────────────────────────────────
+  // Mobile has no right-click / Ctrl-click, so a long-press toggles selection (and, once a
+  // selection exists, a plain tap toggles too). `pressHandledAt` both de-dupes the two events
+  // a long-press can fire (timer + synthesized contextmenu) and suppresses the click that
+  // follows it. `pointerType` lets the mouse handlers stay desktop-standard.
+  const pressTimer = useRef<number | null>(null);
+  const pressStart = useRef<{ x: number; y: number } | null>(null);
+  const pointerType = useRef<string>('mouse');
+  const pressHandledAt = useRef(0);
+  const clearPress = () => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+  };
+  function pressSelect(key: string) {
+    if (Date.now() - pressHandledAt.current < 700) return; // already handled by the sibling event
+    pressHandledAt.current = Date.now();
+    navigator.vibrate?.(15);
+    toggleKey(key);
+    setAnchorKey(key);
+  }
+  function pressProps(entry: Entry) {
+    return {
+      onPointerDown: (e: React.PointerEvent) => {
+        pointerType.current = e.pointerType;
+        if (e.pointerType !== 'touch') return;
+        pressStart.current = { x: e.clientX, y: e.clientY };
+        clearPress();
+        pressTimer.current = window.setTimeout(() => {
+          clearPress();
+          pressSelect(entry.key);
+        }, 450);
+      },
+      onPointerMove: (e: React.PointerEvent) => {
+        if (!pressStart.current || !pressTimer.current) return;
+        if (Math.abs(e.clientX - pressStart.current.x) > 10 || Math.abs(e.clientY - pressStart.current.y) > 10) clearPress();
+      },
+      onPointerUp: clearPress,
+      onPointerCancel: clearPress,
+      onPointerLeave: clearPress,
+    };
+  }
+
   function onEntryClick(e: React.MouseEvent, entry: Entry) {
+    if (Date.now() - pressHandledAt.current < 700) return; // click synthesized right after a long-press
+    const touch = pointerType.current === 'touch';
+    if (touch && selected.size > 0) {
+      toggleKey(entry.key);
+      setAnchorKey(entry.key);
+      return;
+    }
     if (e.metaKey || e.ctrlKey) {
-      setSelected((prev) => {
-        const next = new Set(prev);
-        if (next.has(entry.key)) next.delete(entry.key);
-        else next.add(entry.key);
-        return next;
-      });
+      toggleKey(entry.key);
       setAnchorKey(entry.key);
     } else if (e.shiftKey) {
       const keys = entries.map((x) => x.key);
@@ -629,6 +684,12 @@ export default function EspacesPage() {
     }
   }
   function onNameClick(e: React.MouseEvent, entry: Entry) {
+    if (Date.now() - pressHandledAt.current < 700) {
+      e.stopPropagation();
+      return;
+    }
+    // In touch selection mode, tapping the name toggles too — let the row handle it.
+    if (pointerType.current === 'touch' && selected.size > 0) return;
     if (e.metaKey || e.ctrlKey || e.shiftKey) return; // let the row handle selection
     e.stopPropagation();
     openEntry(entry);
@@ -1043,6 +1104,12 @@ export default function EspacesPage() {
     if (items.length > 0) setCtxMenu({ x: ev.clientX, y: ev.clientY, items });
   }
   function onEntryContext(ev: React.MouseEvent, e: Entry) {
+    // On touch, a long-press fires `contextmenu` — treat it as select, not a desktop menu.
+    if (pointerType.current === 'touch') {
+      ev.preventDefault();
+      pressSelect(e.key);
+      return;
+    }
     if (selected.has(e.key) && selected.size > 1) {
       openCtx(ev, bulkMenuItems());
       return;
@@ -1342,6 +1409,7 @@ export default function EspacesPage() {
               onClick={(ev) => onEntryClick(ev, e)}
               onDoubleClick={() => openEntry(e)}
               onContextMenu={(ev) => onEntryContext(ev, e)}
+              press={pressProps(e)}
             />
           ))}
         </div>
@@ -1368,6 +1436,7 @@ export default function EspacesPage() {
               onClick={(ev) => onEntryClick(ev, e)}
               onDoubleClick={() => openEntry(e)}
               onContextMenu={(ev) => onEntryContext(ev, e)}
+              {...pressProps(e)}
               className={`row cursor-default ${selected.has(e.key) ? 'bg-accent/[0.08] ring-1 ring-inset ring-accent/40' : ''}`}
             >
               <button className="flex min-w-0 flex-1 items-center gap-3 text-left" onClick={(ev) => onNameClick(ev, e)}>
@@ -1560,6 +1629,7 @@ function GridCard({
   onClick,
   onDoubleClick,
   onContextMenu,
+  press,
 }: {
   iconNode: React.ReactNode;
   name: string;
@@ -1568,9 +1638,11 @@ function GridCard({
   onClick?: (e: React.MouseEvent) => void;
   onDoubleClick?: () => void;
   onContextMenu?: (e: React.MouseEvent) => void;
+  press?: React.DOMAttributes<HTMLDivElement>;
 }) {
   return (
     <div
+      {...press}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}