feat(ux): add drag-and-drop to all picker-only file/folder surfaces

gnick18 · claude · gnick18 · commit 3d47768df1e8 · 2026-06-18T12:30:15.000-05:00
- AccountHome: connect-folder card now accepts a dragged folder alongside
  the click button. Uses extractDirectoryHandleFromDrop -&gt; connectWithHandle,
  the same pipeline as FolderConnectGate. Ref-counted drag counter prevents
  flicker on child-boundary crossings. Visual highlight (blue dashed border
  + ring) matches the FolderConnectGate pattern. Drop error shown inline.
- SharingSection: Recovery Kit file picker replaced with FileDropzone
  (drag or click). Keeps .html/.json accept filter.
- LabSiteDashboard: BYO static-site zip upload replaced with FileDropzone.
- RoomMap: floor-plan canvas now accepts drag-dropped .svg files via
  handleCanvasDrop, feeding onUploadFile. Overlay shows "Drop SVG floor
  plan to upload" while dragging. The hidden input + Upload button remain.

tsc clean. No drop zones removed; click paths all preserved.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/frontend/src/components/account/AccountHome.tsx b/frontend/src/components/account/AccountHome.tsx
@@ -9,10 +9,14 @@
 //
 // No emojis, no em-dashes, no mid-sentence colons.
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { getSession } from "next-auth/react";
 import { useFileSystem } from "@/lib/file-system/file-system-context";
+import {
+  extractDirectoryHandleFromDrop,
+  describeDropExtractionError,
+} from "@/lib/file-system/drop-folder";
 import { ONBOARDING_WIZARD_ENABLED } from "@/lib/onboarding/config";
 import { isDeviceKeyV2Enabled } from "@/lib/sharing/identity/device-key-v2";
 import { loadKeysAtRest } from "@/lib/sharing/identity/device-vault";
@@ -61,12 +65,20 @@ export default function AccountHome() {
   const {
     isConnected,
     connect,
+    connectWithHandle,
     lastConnectedFolder,
     reconnectWithStoredHandle,
     initializeFolder,
   } = useFileSystem();
   const router = useRouter();
   const [connecting, setConnecting] = useState(false);
+
+  // Drag-and-drop state for the folder connect card. Ref-counted so nested
+  // children don't flicker the highlight off when the pointer crosses an
+  // internal boundary (same pattern as FolderConnectGate).
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [dropError, setDropError] = useState<string | null>(null);
+  const dragCounterRef = useRef(0);
   // Set when a folder-requiring surface bounced the user here (account-first).
   const [fromRoute, setFromRoute] = useState<string | null>(null);
   // The signed-in name (from the profile or the session), for the welcome-back.
@@ -314,6 +326,62 @@ export default function AccountHome() {
     }
   };
 
+  // Drag handlers for the folder connect card. Mirror the FolderConnectGate
+  // pattern: ref-counted enter/leave avoids flickering on child-boundary
+  // crossings, and the drop feeds extractDirectoryHandleFromDrop -> connectWithHandle,
+  // which is the same pipeline as the OS picker button.
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.dataTransfer?.types?.includes("Files")) return;
+    dragCounterRef.current += 1;
+    setIsDragOver(true);
+    setDropError(null);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+    if (dragCounterRef.current === 0) setIsDragOver(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragOver(false);
+    const items = e.dataTransfer?.items;
+    if (!items || items.length === 0) return;
+    const result = await extractDirectoryHandleFromDrop(items);
+    if (result.kind === "ok") {
+      setDropError(null);
+      setConnecting(true);
+      try {
+        const ok = await connectWithHandle(result.handle);
+        if (ok) {
+          router.push("/");
+          return;
+        }
+        const initialized = await initializeFolder();
+        if (initialized) {
+          router.push("/");
+          return;
+        }
+      } finally {
+        setConnecting(false);
+      }
+      return;
+    }
+    setDropError(describeDropExtractionError(result.kind, "message" in result ? result.message : undefined));
+  };
+
   // Returning = they have used ResearchOS before (a cloud profile or a remembered
   // folder on this device), so the folderless state is "reconnect", not "set up".
   const isReturning = Boolean(profile) || Boolean(lastConnectedFolder);
@@ -460,7 +528,17 @@ export default function AccountHome() {
       {/* Your data: connect a folder (folderless) or open the app (connected).
           The account is the cloud part; the data folder is the optional local
           part, and this card is the bridge to it in both states. */}
-      <div className="rounded-2xl border border-brand-action/30 bg-brand-action/5 p-5">
+      <div
+        onDragEnter={!isConnected ? handleDragEnter : undefined}
+        onDragOver={!isConnected ? handleDragOver : undefined}
+        onDragLeave={!isConnected ? handleDragLeave : undefined}
+        onDrop={!isConnected ? (e) => void handleDrop(e) : undefined}
+        className={`rounded-2xl border p-5 transition-all ${
+          !isConnected && isDragOver
+            ? "border-2 border-dashed border-blue-400 bg-blue-500/15 ring-4 ring-blue-400/30"
+            : "border-brand-action/30 bg-brand-action/5"
+        }`}
+      >
         {isConnected ? (
           <>
             <h2 className="text-body font-bold text-foreground">Your data is connected</h2>
@@ -484,21 +562,31 @@ export default function AccountHome() {
                 computer. Point us to it below to continue.
               </p>
             )}
-            <h2 className="text-body font-bold text-foreground">
-              {isReturning
-                ? `Welcome back${welcomeName ? `, ${welcomeName}` : ""}`
-                : "Connect your data folder"}
-            </h2>
-            <p className="mt-1 text-meta text-foreground-muted">
+            {/* Drag-over heading replaces the normal heading while a folder hovers.
+                Always in layout (invisible when not dragging) so the card height
+                stays stable and the drop target never shrinks under the cursor. */}
+            {isDragOver ? (
+              <h2 className="text-body font-bold text-blue-700 dark:text-blue-100">
+                Release to connect this folder
+              </h2>
+            ) : (
+              <h2 className="text-body font-bold text-foreground">
+                {isReturning
+                  ? `Welcome back${welcomeName ? `, ${welcomeName}` : ""}`
+                  : "Connect your data folder"}
+              </h2>
+            )}
+            <p className={`mt-1 text-meta text-foreground-muted ${isDragOver ? "invisible" : ""}`} aria-hidden={isDragOver || undefined}>
               {isReturning
                 ? "You are signed in. Your research data lives in a folder on your computer, not on our servers. Point us to it to pick up where you left off."
-                : "Your notes, experiments, and files live in a folder on this computer, never on our servers. Connect one to start working. You can do this any time, from any device that has your data."}
+                : "Your notes, experiments, and files live in a folder on this computer, never on our servers. Connect one to start working. Drag your data folder here or click to browse."}
             </p>
+            <div className={`flex items-center gap-3 mt-3 ${isDragOver ? "invisible" : ""}`} aria-hidden={isDragOver || undefined}>
             <button
               type="button"
               onClick={() => void onConnect()}
               disabled={connecting}
-              className="ros-btn-raise mt-3 rounded-lg bg-brand-action px-4 py-2 text-meta font-semibold text-white disabled:opacity-60"
+              className="ros-btn-raise rounded-lg bg-brand-action px-4 py-2 text-meta font-semibold text-white disabled:opacity-60"
             >
               {connecting
                 ? "Opening…"
@@ -508,6 +596,13 @@ export default function AccountHome() {
                     ? "Point us to your folder"
                     : "Connect a data folder"}
             </button>
+            <span className="text-meta text-foreground-subtle">or drag a folder here</span>
+            </div>
+            {dropError && (
+              <p role="alert" className="mt-2 text-meta text-red-600 dark:text-red-300">
+                {dropError}
+              </p>
+            )}
             {/*
               Go-live (gated by NEXT_PUBLIC_ONBOARDING_WIZARD): a permanent escape
               to the read-only /demo workspace so a signed-in user without a
diff --git a/frontend/src/components/inventory/RoomMap.tsx b/frontend/src/components/inventory/RoomMap.tsx
@@ -78,6 +78,12 @@ export default function RoomMap({ nodes, stocks }: RoomMapProps) {
   const dragRef = useRef<{ pinId: string; moved: boolean } | null>(null);
   const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Drag-and-drop for the floor-plan canvas. The drop target is the outer
+  // canvas wrapper; a dropped .svg file feeds the same onUploadFile handler
+  // as the click-to-pick button, so both paths produce the same result.
+  const [isFloorPlanDragOver, setIsFloorPlanDragOver] = useState(false);
+  const floorPlanDragCounter = useRef(0);
+
   // Seed local pins + plan once the map loads.
   useEffect(() => {
     if (loadedMap) {
@@ -175,6 +181,33 @@ export default function RoomMap({ nodes, stocks }: RoomMapProps) {
     [setFloorplan],
   );
 
+  const handleCanvasDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (!e.dataTransfer?.types?.includes("Files")) return;
+    floorPlanDragCounter.current += 1;
+    setIsFloorPlanDragOver(true);
+  };
+
+  const handleCanvasDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  };
+
+  const handleCanvasDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    floorPlanDragCounter.current = Math.max(0, floorPlanDragCounter.current - 1);
+    if (floorPlanDragCounter.current === 0) setIsFloorPlanDragOver(false);
+  };
+
+  const handleCanvasDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    floorPlanDragCounter.current = 0;
+    setIsFloorPlanDragOver(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (file) onUploadFile(file);
+  };
+
   // Nodes not yet pinned, offered in the "Place a location" rail. Containers
   // (anything that is not a `box`) read most naturally on a room map, but any
   // node can be pinned.
@@ -349,7 +382,20 @@ export default function RoomMap({ nodes, stocks }: RoomMapProps) {
             ))}
           </div>
         ) : null}
-        <div className="relative w-full" style={{ aspectRatio: String(aspect) }}>
+        <div
+          className="relative w-full"
+          style={{ aspectRatio: String(aspect) }}
+          onDragEnter={handleCanvasDragEnter}
+          onDragOver={handleCanvasDragOver}
+          onDragLeave={handleCanvasDragLeave}
+          onDrop={handleCanvasDrop}
+          data-attach-target
+        >
+          {isFloorPlanDragOver ? (
+            <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-dashed border-brand-action bg-brand-action/5">
+              <p className="text-body font-semibold text-brand-action">Drop SVG floor plan to upload</p>
+            </div>
+          ) : null}
           <ZoomPanCanvas
             contentWidth={CONTENT_W}
             contentHeight={CONTENT_H}
diff --git a/frontend/src/components/settings/SharingSection.tsx b/frontend/src/components/settings/SharingSection.tsx
@@ -34,6 +34,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
+import FileDropzone from "@/components/ui/FileDropzone";
 import Tooltip from "@/components/Tooltip";
 import { useEscapeToClose } from "@/hooks/useEscapeToClose";
 import { usePopupLayer } from "@/lib/ui/popup-stack";
@@ -1710,20 +1711,15 @@ export function RestoreIdentityPopup({
           </p>
 
           <div className="space-y-2">
-            <label className="block">
-              <span className="sr-only">Choose your Recovery Kit file</span>
-              <input
-                type="file"
-                accept=".html,text/html,application/json,.json"
-                disabled={busy}
-                onChange={(e) => {
-                  void onKitFile(e.target.files?.[0]);
-                  // Reset so re-choosing the same file fires onChange again.
-                  e.target.value = "";
-                }}
-                className="block w-full text-meta text-foreground-muted file:mr-3 file:rounded-lg file:border-0 file:bg-blue-600 file:px-3 file:py-2 file:text-body file:font-medium file:text-white hover:file:bg-blue-700 disabled:opacity-50"
-              />
-            </label>
+            <FileDropzone
+              accept=".html,text/html,application/json,.json"
+              disabled={busy}
+              label="Drag and drop your Recovery Kit file"
+              hint=".html or .json"
+              icon="import"
+              compact
+              onFiles={(files) => void onKitFile(files[0])}
+            />
             <textarea
               onChange={(e) => loadKitText(e.target.value)}
               disabled={busy}
diff --git a/frontend/src/components/social/LabSiteDashboard.tsx b/frontend/src/components/social/LabSiteDashboard.tsx
@@ -18,6 +18,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import FileDropzone from "@/components/ui/FileDropzone";
 import MarketingNav from "@/components/MarketingNav";
 import MarketingFooter from "@/components/MarketingFooter";
 import MarketingBackdrop from "@/components/marketing/MarketingBackdrop";
@@ -59,7 +60,6 @@ function pathLabel(path: string): string {
 function ByoUploadSection({ slug }: { slug: string }) {
   const [busy, setBusy] = useState(false);
   const [msg, setMsg] = useState<string | null>(null);
-  const fileRef = useRef<HTMLInputElement>(null);
 
   const upload = useCallback(async (file: File) => {
     setBusy(true);
@@ -86,7 +86,6 @@ function ByoUploadSection({ slug }: { slug: string }) {
       setMsg("Could not upload the site right now.");
     } finally {
       setBusy(false);
-      if (fileRef.current) fileRef.current.value = "";
     }
   }, []);
 
@@ -99,20 +98,15 @@ function ByoUploadSection({ slug }: { slug: string }) {
         sandboxed domain ({slug}.research-os.com) so your site&apos;s code stays
         isolated from your account.
       </p>
-      <div className="mt-4 flex items-center gap-2">
-        <input
-          ref={fileRef}
-          type="file"
+      <div className="mt-4">
+        <FileDropzone
           accept=".zip,application/zip"
           disabled={busy}
-          onChange={(e) => {
-            const f = e.target.files?.[0];
-            if (f) void upload(f);
-          }}
-          className="text-sm text-foreground"
-          aria-label="Static site zip"
+          label={busy ? "Uploading…" : "Drag and drop a zip file"}
+          hint=".zip"
+          icon="import"
+          onFiles={(files) => void upload(files[0])}
         />
-        {busy && <span className="text-xs text-muted-foreground">Uploading.</span>}
       </div>
       {msg && <p className="mt-3 text-sm text-foreground">{msg}</p>}
     </section>
