feat(drive): rebuilt Move dialog as an intuitive folder picker (#1)

The old Move was a flat, unlabelled list whose "root" option moved a file
to folderId=null — OUTSIDE every space, where the Drive can't show it, so
files appeared to vanish. Replaced with a real destination picker:

- Navigate the space's own folder tree (breadcrumb + click to enter),
  then "Move here". Destinations stay inside the space (root = the space
  itself), so a move can never strand a file.
- The moved folder and its whole subtree are excluded (no cycles), and
  "Move here" is disabled when the target is where the items already are.
- Works for single and bulk moves; integrates with undo/redo.

Author: softpython2884

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

@@ -78,6 +78,7 @@ import { CommandPalette, type PaletteItem } from '@/components/drive/CommandPale
 import { ShortcutsHelp } from '@/components/drive/ShortcutsHelp';
 import { VersionHistory } from '@/components/drive/VersionHistory';
 import { ContextMenu } from '@/components/drive/ContextMenu';
+import { FolderPicker } from '@/components/drive/FolderPicker';
 import { Menu, type MenuItem } from '@/components/ui/Menu';
 
 interface ZkFile {
@@ -146,6 +147,11 @@ export default function EspacesPage() {
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [helpOpen, setHelpOpen] = useState(false);
   const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; items: MenuItem[] } | null>(null);
+  const [movePicker, setMovePicker] = useState<{
+    items: { kind: 'file' | 'folder'; id: string }[];
+    exclude: Set<string>;
+    currentId: string | null;
+  } | null>(null);
 
   // passphrase prompt
   const [askPass, setAskPass] = useState<PublicFolder | null>(null);
@@ -983,21 +989,42 @@ export default function EspacesPage() {
     if (entry.kind === 'folder') void renameFolder(entry.folder);
     else if (entry.kind === 'file') void renameFile(entry.file);
   }
-  async function move(kind: 'file' | 'folder', id: string) {
-    const targets = [
-      { id: null as string | null, name: t('drive.spaceRoot') },
-      ...allFolders.filter((f) => f.id !== id && f.isZeroKnowledge === isZk),
-    ];
-    const dest = await choose<string | '__root__'>({
-      title: t('drive.moveTitle'),
-      options: targets.map((tg) => ({ value: tg.id ?? '__root__', label: tg.name })),
+  /** A folder's id plus all its descendants — excluded as move destinations (no cycles). */
+  function folderSubtree(id: string): Set<string> {
+    const out = new Set<string>([id]);
+    const stack = [id];
+    while (stack.length) {
+      const p = stack.pop()!;
+      for (const f of allFolders) if (f.parentId === p && !out.has(f.id)) { out.add(f.id); stack.push(f.id); }
+    }
+    return out;
+  }
+  function move(kind: 'file' | 'folder', id: string) {
+    setMovePicker({
+      items: [{ kind, id }],
+      exclude: kind === 'folder' ? folderSubtree(id) : new Set<string>(),
+      currentId: currentFolderId,
     });
-    if (dest === null) return;
-    const target = dest === '__root__' ? null : dest;
-    await api.patch(`/${kind}s/${id}`, { folderId: target, parentId: target });
-    if (!isZk) pushUndo({ type: 'move', moves: [{ kind, id, from: currentFolderId, to: target }] });
-    await Promise.all([loadFolders(), reloadCurrent()]);
-    toast(t('drive.moved'), 'success');
+  }
+  // Perform the pending move once a destination is chosen in the FolderPicker.
+  async function performMove(target: string) {
+    const picker = movePicker;
+    setMovePicker(null);
+    if (!picker) return;
+    try {
+      const moves: { kind: 'file' | 'folder'; id: string; from: string | null; to: string | null }[] = [];
+      for (const it of picker.items) {
+        if (it.kind === 'folder') await api.patch(`/folders/${it.id}`, { parentId: target });
+        else await api.patch(`/files/${it.id}`, { folderId: target });
+        moves.push({ kind: it.kind, id: it.id, from: picker.currentId, to: target });
+      }
+      if (!isZk && moves.length > 0) pushUndo({ type: 'move', moves });
+      setSelected(new Set());
+      await Promise.all([loadFolders(), reloadCurrent()]);
+      toast(moves.length > 1 ? t('drive.bulkMoved', { n: moves.length }) : t('drive.moved'), 'success');
+    } catch (err) {
+      toast(err instanceof ApiError ? err.message : t('common.opFailed'), 'error');
+    }
   }
   async function share(kind: 'file' | 'folder', id: string) {
     const accessMode = await choose<'PUBLIC' | 'CODE' | 'AUTHENTICATED'>({
@@ -1079,33 +1106,20 @@ export default function EspacesPage() {
       if (blob) saveBlob(blob, zkName(it.zk));
     }
   }
-  async function bulkMove() {
+  function bulkMove() {
     const items = entriesByKeys([...selected]).filter((e) => e.kind !== 'zk');
     if (items.length === 0) return;
-    const selfIds = new Set(items.map((e) => (e.kind === 'folder' ? e.folder.id : '')));
-    const targets = [
-      { id: null as string | null, name: t('drive.spaceRoot') },
-      ...allFolders.filter((f) => f.isZeroKnowledge === isZk && !selfIds.has(f.id)),
-    ];
-    const dest = await choose<string | '__root__'>({
-      title: t('drive.moveTitle'),
-      options: targets.map((tg) => ({ value: tg.id ?? '__root__', label: tg.name })),
-    });
-    if (dest === null) return;
-    const target = dest === '__root__' ? null : dest;
-    for (const it of items) {
-      if (it.kind === 'folder') await api.patch(`/folders/${it.folder.id}`, { parentId: target });
-      else if (it.kind === 'file') await api.patch(`/files/${it.file.id}`, { folderId: target });
-    }
-    const moves: { kind: 'file' | 'folder'; id: string; from: string | null; to: string | null }[] = [];
+    const moveItems: { kind: 'file' | 'folder'; id: string }[] = [];
+    const exclude = new Set<string>();
     for (const it of items) {
-      if (it.kind === 'folder') moves.push({ kind: 'folder', id: it.folder.id, from: currentFolderId, to: target });
-      else if (it.kind === 'file') moves.push({ kind: 'file', id: it.file.id, from: currentFolderId, to: target });
+      if (it.kind === 'folder') {
+        moveItems.push({ kind: 'folder', id: it.folder.id });
+        for (const x of folderSubtree(it.folder.id)) exclude.add(x);
+      } else if (it.kind === 'file') {
+        moveItems.push({ kind: 'file', id: it.file.id });
+      }
     }
-    if (moves.length > 0) pushUndo({ type: 'move', moves });
-    setSelected(new Set());
-    await Promise.all([loadFolders(), reloadCurrent()]);
-    toast(t('drive.bulkMoved', { n: items.length }), 'success');
+    setMovePicker({ items: moveItems, exclude, currentId: currentFolderId });
   }
 
   // ── Clipboard (normal spaces only) ───────────────────────────────────────────
@@ -1849,6 +1863,18 @@ export default function EspacesPage() {
       {helpOpen && <ShortcutsHelp onClose={() => setHelpOpen(false)} />}
       {viewing && <FileViewer source={viewing} onClose={() => setViewing(null)} />}
       {ctxMenu && <ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />}
+      {movePicker && activeSpace && (
+        <FolderPicker
+          folders={allFolders}
+          rootId={activeSpace.id}
+          rootName={activeSpace.name}
+          excludeIds={movePicker.exclude}
+          currentId={movePicker.currentId}
+          count={movePicker.items.length}
+          onPick={performMove}
+          onClose={() => setMovePicker(null)}
+        />
+      )}
       <DropOverlay show={dragging} />
     </div>
   );

apps/web/src/components/drive/FolderPicker.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * Destination picker for "Move". A small folder browser: navigate the space's tree, then "Move
+ * here". Destinations stay INSIDE the space (root = the space folder itself), so a move can never
+ * strand a file outside every space. The moved folder and its subtree are excluded to prevent
+ * cycles.
+ */
+import { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Folder, ChevronRight, Home, X, FolderInput, Check } from 'lucide-react';
+import type { PublicFolder } from '@opencoperlock/shared/client';
+import { useT } from '@/lib/i18n';
+
+export function FolderPicker({
+  folders,
+  rootId,
+  rootName,
+  excludeIds,
+  currentId,
+  count,
+  onPick,
+  onClose,
+}: {
+  folders: PublicFolder[];
+  rootId: string;
+  rootName: string;
+  excludeIds: Set<string>;
+  currentId: string | null;
+  count: number;
+  onPick: (folderId: string) => void;
+  onClose: () => void;
+}) {
+  const { t } = useT();
+  const [cwd, setCwd] = useState<string>(rootId);
+  const byId = useMemo(() => new Map(folders.map((f) => [f.id, f])), [folders]);
+  const children = useMemo(
+    () =>
+      folders
+        .filter((f) => f.parentId === cwd && !excludeIds.has(f.id))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [folders, cwd, excludeIds],
+  );
+  const trail = useMemo(() => {
+    const out: PublicFolder[] = [];
+    let cur: string | null = cwd;
+    while (cur && cur !== rootId) {
+      const f = byId.get(cur);
+      if (!f) break;
+      out.unshift(f);
+      cur = f.parentId;
+    }
+    return out;
+  }, [cwd, rootId, byId]);
+
+  if (typeof document === 'undefined') return null;
+  const alreadyHere = cwd === currentId;
+  const destName = trail.length ? trail[trail.length - 1]!.name : rootName;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[130] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative flex max-h-[80vh] w-full max-w-md flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#15151d] shadow-2xl">
+        <div className="flex items-start justify-between gap-3 border-b border-white/[0.07] px-5 py-4">
+          <div>
+            <h2 className="flex items-center gap-2 font-semibold text-white">
+              <FolderInput size={17} className="text-violet-300" /> {t('picker.title')}
+            </h2>
+            <p className="mt-0.5 text-xs text-zinc-500">{t('picker.moving', { n: count })}</p>
+          </div>
+          <button onClick={onClose} aria-label={t('picker.close')} className="-mr-1 rounded-lg p-1.5 text-zinc-500 transition hover:bg-white/5 hover:text-zinc-200">
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* breadcrumb */}
+        <div className="flex flex-wrap items-center gap-1 border-b border-white/[0.05] px-5 py-2.5 text-sm text-zinc-400">
+          <button className="flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-white/5 hover:text-zinc-100" onClick={() => setCwd(rootId)}>
+            <Home size={14} /> {rootName}
+          </button>
+          {trail.map((f) => (
+            <span key={f.id} className="flex items-center gap-1">
+              <ChevronRight size={13} className="text-zinc-600" />
+              <button className="rounded px-1.5 py-0.5 transition hover:bg-white/5 hover:text-zinc-100" onClick={() => setCwd(f.id)}>
+                {f.name}
+              </button>
+            </span>
+          ))}
+        </div>
+
+        {/* folder list */}
+        <div className="min-h-[9rem] flex-1 overflow-y-auto p-2">
+          {children.length === 0 ? (
+            <p className="px-3 py-8 text-center text-sm text-zinc-500">{t('picker.noSubfolders')}</p>
+          ) : (
+            children.map((f) => (
+              <button
+                key={f.id}
+                onClick={() => setCwd(f.id)}
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-zinc-200 transition hover:bg-white/[0.05]"
+              >
+                <Folder size={16} className="shrink-0 text-amber-200" />
+                <span className="min-w-0 flex-1 truncate">{f.name}</span>
+                <ChevronRight size={15} className="shrink-0 text-zinc-500" />
+              </button>
+            ))
+          )}
+        </div>
+
+        <div className="flex items-center justify-between gap-3 border-t border-white/[0.07] px-5 py-3.5">
+          <span className="min-w-0 truncate text-xs text-zinc-500">
+            {alreadyHere ? t('picker.alreadyHere') : t('picker.dest', { name: destName })}
+          </span>
+          <button className="btn-primary shrink-0" disabled={alreadyHere} onClick={() => onPick(cwd)}>
+            <Check size={15} /> {t('picker.moveHere')}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

apps/web/src/lib/i18n.tsx

@@ -169,6 +169,13 @@ const fr: Dict = {
   'drive.spaceRoot': 'Racine de l’espace',
   'drive.moveTitle': 'Déplacer vers',
   'drive.moved': 'Déplacé',
+  'picker.title': 'Déplacer vers…',
+  'picker.moving': '{n} élément(s) à déplacer',
+  'picker.close': 'Fermer',
+  'picker.noSubfolders': 'Aucun sous-dossier ici.',
+  'picker.moveHere': 'Déplacer ici',
+  'picker.alreadyHere': 'Déjà à cet emplacement',
+  'picker.dest': 'Destination : {name}',
   'drive.undone': 'Action annulée',
   'drive.redone': 'Action rétablie',
   'drive.scUndo': 'Annuler (déplacer / supprimer / renommer)',
@@ -801,6 +808,13 @@ const en: Dict = {
   'drive.spaceRoot': 'Space root',
   'drive.moveTitle': 'Move to',
   'drive.moved': 'Moved',
+  'picker.title': 'Move to…',
+  'picker.moving': '{n} item(s) to move',
+  'picker.close': 'Close',
+  'picker.noSubfolders': 'No subfolders here.',
+  'picker.moveHere': 'Move here',
+  'picker.alreadyHere': 'Already here',
+  'picker.dest': 'Destination: {name}',
   'drive.undone': 'Undone',
   'drive.redone': 'Redone',
   'drive.scUndo': 'Undo (move / delete / rename)',