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.
This commit is contained in:
2026-09-01 21:11:36 -07:00
parent b5ca0021ef
commit 00b580bad8
7 changed files with 276 additions and 54 deletions
+21
View File
@@ -54,6 +54,27 @@ export function isShared(node: Pick<FileNode, "shareWith">): boolean {
* legal moves behind a disabled drop. The server refuses those with a message
* of its own, which is a better answer than a silent one.
*/
/** The MIME a dragged node is offered under, so a target can recognise it. */
export const NODE_MIME = "application/x-ihasmail-filenode";
/**
* The ids in a node drag. A multi-file selection is dragged as one payload, so
* this is a list even when it holds one -- both drop targets read it the same
* way and neither has to care how the drag started.
*/
export function readDraggedIds(dt: DataTransfer): Id[] {
return dt.getData(NODE_MIME).split(",").filter(Boolean);
}
/**
* The same question for a multi-file drag. Every one of them has to be able to
* land, because the drop is one action: allowing a drag that would move four
* of five files and silently skip the fifth is worse than refusing it.
*/
export function canDropFileNodes(nodes: Record<Id, FileNode>, draggedIds: Id[], targetId: Id | null): boolean {
return draggedIds.length > 0 && draggedIds.every((id) => canDropFileNode(nodes, id, targetId));
}
export function canDropFileNode(nodes: Record<Id, FileNode>, draggedId: Id, targetId: Id | null): boolean {
const dragged = nodes[draggedId];
if (!dragged) return false;