Select more than one file at a time

Moving or deleting five files meant doing it five times, each with its own
confirm. Rows now select the way they do in a file manager: a plain click
replaces the selection, ctrl or cmd adds and removes one, shift takes the
run from the last row clicked, clicking past the last row or pressing
Escape clears it. Two or more selected raises a bar with Move to... and
Delete, and the row menu offers the same for the whole selection.

The move is one `FileNode/set` rather than a loop, and not only for the
round trip: a loop would apply half the moves and then throw, leaving a
selection split across two folders with nothing saying which half went.
One call is one answer, and `notUpdated` names whatever the server
refused.

Right-clicking inside the selection acts on all of it; right-clicking
outside means you meant that row, so the selection follows the pointer
rather than the menu quietly applying to something off-screen. A drag
carries the whole selection the same way, which is why the payload is now
a list -- and why a drop is refused unless every file in it can land,
since a drag that moves four of five and skips the fifth is worse than
one that will not start.

A selection belongs to the folder it was made in, so changing folder or
account drops it: rows left selected off-screen make the delete two
folders later a surprise.

web/src/store/__tests__/files-account-switch.test.ts

@@ -24,7 +24,7 @@ describe("what a switch to another account keeps", () => {
       children: {},
       dirIds: [],
       treeLoaded: false,
-      draggingId: null,
+      draggingIds: [],
       error: null,
     });
   });
@@ -41,14 +41,14 @@ describe("what a switch to another account keeps", () => {
 
   it("drops a drag that was in flight", () => {
     // Its id belongs to the other account and would name a different node here.
-    expect(emptyForAccount("b").draggingId).toBeNull();
+    expect(emptyForAccount("b").draggingIds).toEqual([]);
   });
 
   it("names every piece of per-account state", () => {
     // Add a per-account field to the store and forget it here, and this fails
     // rather than the field quietly following someone into another account.
     expect(Object.keys(emptyForAccount(null)).sort()).toEqual(
-      ["accountId", "children", "dirIds", "draggingId", "error", "nodes", "treeLoaded"],
+      ["accountId", "children", "dirIds", "draggingIds", "error", "nodes", "treeLoaded"],
     );
   });
 });

web/src/store/files.ts

@@ -48,7 +48,7 @@ interface FilesState {
    * It cannot be read from the drag itself: `dataTransfer.getData` is blocked
    * during dragover, which is exactly when the answer is needed.
    */
-  draggingId: Id | null;
+  draggingIds: Id[];
 
   init(): Promise<void>;
   /** Browse an account: the reader's own, or one shared with them. */
@@ -64,9 +64,11 @@ interface FilesState {
    */
   saveText(id: Id, text: string, seenBlobId: Id | null): Promise<Id>;
   move(id: Id, parentId: Id | null): Promise<void>;
+  /** Move several at once, in one round trip -- see the note on the implementation. */
+  moveMany(ids: Id[], parentId: Id | null): Promise<void>;
   destroy(ids: Id[]): Promise<void>;
   refresh(ids: Id[]): Promise<void>;
-  setDragging(id: Id | null): void;
+  setDragging(ids: Id[]): void;
   /** Every directory in the account, for the tree in the sidebar. */
   loadTree(): Promise<void>;
   /** Upload a planned drop, creating the folders it needs as it goes. */
@@ -115,7 +117,7 @@ export function withoutAppFolder(nodes: FileNode[]): FileNode[] {
  * accounts.
  */
 export function emptyForAccount(accountId: Id | null) {
-  return { accountId, nodes: {}, children: {}, dirIds: [], treeLoaded: false, draggingId: null, error: null };
+  return { accountId, nodes: {}, children: {}, dirIds: [], treeLoaded: false, draggingIds: [], error: null };
 }
 
 export const useFiles = create<FilesState>((set, get) => ({
@@ -130,7 +132,7 @@ export const useFiles = create<FilesState>((set, get) => ({
   uploads: [],
   dirIds: [],
   treeLoaded: false,
-  draggingId: null,
+  draggingIds: [],
 
   async init() {
     const session = useSession.getState();
@@ -276,8 +278,8 @@ export const useFiles = create<FilesState>((set, get) => ({
   /* Re-read named nodes in place. Sharing changes one property of one node and
      nothing about which folder it sits in, so reloading the level around it
      would be a bigger round trip to land in the same place. */
-  setDragging(id) {
-    set({ draggingId: id });
+  setDragging(ids) {
+    set({ draggingIds: ids });
   },
 
   async refresh(ids) {
@@ -353,12 +355,27 @@ export const useFiles = create<FilesState>((set, get) => ({
   },
 
   async move(id, parentId) {
+    await get().moveMany([id], parentId);
+  },
+
+  /*
+   * One `FileNode/set` for the lot rather than one per file.
+   *
+   * Not only for the round trip: a loop would apply half the moves and then
+   * throw, leaving a selection split across two folders with nothing saying
+   * which half went. One call is one answer, and `notUpdated` names whichever
+   * ones the server refused.
+   */
+  async moveMany(ids, parentId) {
+    if (!ids.length) return;
     const accountId = get().accountId!;
-    const from = get().nodes[id]?.parentId ?? null;
-    const res = await client.call<SetResponse>("FileNode/set", { accountId, update: { [id]: { parentId } } });
-    const err = res.notUpdated?.[id];
-    if (err) throw new Error(setErrorMessage(err));
-    await Promise.all([get().loadChildren(from), get().loadChildren(parentId)]);
+    const from = new Set(ids.map((id) => get().nodes[id]?.parentId ?? null));
+    const update = Object.fromEntries(ids.map((id) => [id, { parentId }]));
+    const res = await client.call<SetResponse>("FileNode/set", { accountId, update });
+    const failed = Object.values(res.notUpdated ?? {})[0];
+    if (failed) throw new Error(setErrorMessage(failed));
+    from.add(parentId);
+    for (const p of from) await get().loadChildren(p);
     void get().loadTree();
   },