feat(drive): re-click 'Mes Espaces' returns to spaces list + multi-space Move

- Clicking the 'Mes Espaces' nav item while already on /drive now pops back
  to the spaces list (the URL is unchanged, so the drive page listens for a
  small window event dispatched by the nav link).
- The Move picker is now multi-space: first pick a destination space, then
  navigate its tree. Destinations are filtered to spaces compatible with the
  source (non-ZK, same public/normal mode) so a move never mixes encryption
  modes; the server already accepts any owned folder as the target.

Author: softpython2884

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

@@ -315,6 +315,13 @@ export default function EspacesPage() {
     setAnchorKey(null);
   }, [currentFolderId, activeSpaceId]);
 
+  // Clicking the "Mes Espaces" nav item while already on /drive should pop back to the spaces list.
+  useEffect(() => {
+    const back = () => leaveSpace();
+    window.addEventListener('ocl:drive-home', back);
+    return () => window.removeEventListener('ocl:drive-home', back);
+  }, []);
+
   async function enterSpace(space: PublicFolder) {
     setError(null);
     setActiveSpaceId(space.id);
@@ -1955,8 +1962,9 @@ export default function EspacesPage() {
       {movePicker && activeSpace && (
         <FolderPicker
           folders={allFolders}
-          rootId={activeSpace.id}
-          rootName={activeSpace.name}
+          spaces={allFolders
+            .filter((f) => f.parentId === null && !f.isZeroKnowledge && f.isPublic === activeSpace.isPublic)
+            .map((f) => ({ id: f.id, name: f.name }))}
           excludeIds={movePicker.exclude}
           currentId={movePicker.currentId}
           count={movePicker.items.length}

apps/web/src/app/(app)/layout.tsx

@@ -58,6 +58,13 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
     return (
       <Link
         href={href}
+        onClick={() => {
+          // Re-clicking "Mes Espaces" while already in /drive pops back to the spaces list
+          // (the URL doesn't change, so the drive page listens for this instead).
+          if (href === '/drive' && pathname === '/drive') {
+            window.dispatchEvent(new Event('ocl:drive-home'));
+          }
+        }}
         className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${
           active ? 'bg-accent-soft text-violet-300' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-100'
         }`}

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

@@ -1,61 +1,77 @@
 '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.
+ * Destination picker for "Move". A small folder browser across ALL your compatible spaces: first
+ * pick a destination space, then navigate its tree and "Move here". Staying inside real spaces (a
+ * space's root is the space folder itself) means 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 { Folder, ChevronRight, Home, X, FolderInput, Check, FolderLock } from 'lucide-react';
 import type { PublicFolder } from '@opencoperlock/shared/client';
 import { useT } from '@/lib/i18n';
 
+interface Space {
+  id: string;
+  name: string;
+}
+
 export function FolderPicker({
   folders,
-  rootId,
-  rootName,
+  spaces,
   excludeIds,
   currentId,
   count,
   onPick,
   onClose,
 }: {
   folders: PublicFolder[];
-  rootId: string;
-  rootName: string;
+  /** Selectable destination spaces (top-level folders compatible with the moved items). */
+  spaces: Space[];
   excludeIds: Set<string>;
   currentId: string | null;
   count: number;
   onPick: (folderId: string) => void;
   onClose: () => void;
 }) {
   const { t } = useT();
-  const [cwd, setCwd] = useState<string>(rootId);
+  // With a single space, skip the picker step and open it straight away.
+  const [root, setRoot] = useState<Space | null>(spaces.length === 1 ? spaces[0]! : null);
+  const [cwd, setCwd] = useState<string | null>(spaces.length === 1 ? spaces[0]!.id : null);
   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],
+      root
+        ? folders
+            .filter((f) => f.parentId === cwd && !excludeIds.has(f.id))
+            .sort((a, b) => a.name.localeCompare(b.name))
+        : [],
+    [folders, cwd, excludeIds, root],
   );
+
   const trail = useMemo(() => {
     const out: PublicFolder[] = [];
     let cur: string | null = cwd;
-    while (cur && cur !== rootId) {
+    while (cur && cur !== root?.id) {
       const f = byId.get(cur);
       if (!f) break;
       out.unshift(f);
       cur = f.parentId;
     }
     return out;
-  }, [cwd, rootId, byId]);
+  }, [cwd, root, byId]);
 
   if (typeof document === 'undefined') return null;
-  const alreadyHere = cwd === currentId;
-  const destName = trail.length ? trail[trail.length - 1]!.name : rootName;
+  const alreadyHere = !!root && cwd === currentId;
+  const destName = trail.length ? trail[trail.length - 1]!.name : root?.name ?? '';
+  const multi = spaces.length > 1;
+
+  function toSpaceList() {
+    setRoot(null);
+    setCwd(null);
+  }
 
   return createPortal(
     <div className="fixed inset-0 z-[130] flex items-center justify-center p-4">
@@ -75,9 +91,19 @@ export function FolderPicker({
 
         {/* 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>
+          {multi && (
+            <button className="flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-white/5 hover:text-zinc-100" onClick={toSpaceList}>
+              <Home size={14} /> {t('copy.spaces')}
+            </button>
+          )}
+          {root && (
+            <span className="flex items-center gap-1">
+              {multi && <ChevronRight size={13} className="text-zinc-600" />}
+              <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(root.id)}>
+                <FolderLock size={13} /> {root.name}
+              </button>
+            </span>
+          )}
           {trail.map((f) => (
             <span key={f.id} className="flex items-center gap-1">
               <ChevronRight size={13} className="text-zinc-600" />
@@ -88,9 +114,28 @@ export function FolderPicker({
           ))}
         </div>
 
-        {/* folder list */}
+        {/* body: space list (step 1) or folder list (step 2) */}
         <div className="min-h-[9rem] flex-1 overflow-y-auto p-2">
-          {children.length === 0 ? (
+          {!root ? (
+            spaces.length === 0 ? (
+              <p className="px-3 py-8 text-center text-sm text-zinc-500">{t('copy.noTargets')}</p>
+            ) : (
+              spaces.map((s) => (
+                <button
+                  key={s.id}
+                  onClick={() => {
+                    setRoot(s);
+                    setCwd(s.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]"
+                >
+                  <FolderLock size={16} className="shrink-0 text-violet-300" />
+                  <span className="min-w-0 flex-1 truncate">{s.name}</span>
+                  <ChevronRight size={15} className="shrink-0 text-zinc-500" />
+                </button>
+              ))
+            )
+          ) : children.length === 0 ? (
             <p className="px-3 py-8 text-center text-sm text-zinc-500">{t('picker.noSubfolders')}</p>
           ) : (
             children.map((f) => (
@@ -107,14 +152,16 @@ export function FolderPicker({
           )}
         </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>
+        {root && (
+          <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 ?? root.id)}>
+              <Check size={15} /> {t('picker.moveHere')}
+            </button>
+          </div>
+        )}
       </div>
     </div>,
     document.body,