feat(files): Sammel-Loeschen und Ziehen auf den Papierkorb

Zwei Wege, weil sie verschiedene Momente treffen: Der Knopf in der
Auswahlleiste raeumt eine geplante Auswahl weg, das Ziehen auf den
Papierkorb in der Seitenleiste die eine Datei, die einem gerade
auffaellt.

Zieht man eine markierte Datei, meint man die Markierung - deshalb
traegt der Ziehvorgang jetzt zusaetzlich aether-file-ids mit allen
markierten IDs. Eine unmarkierte Datei zieht nur sich selbst.

Der Knopf fragt nach, das Ziehen nicht: Ziehen ist eine bewusste
Bewegung mit gedrueckter Taste, und der Papierkorb ist umkehrbar. Eine
Rueckfrage nach jedem Zug klickt man nach dem dritten Mal blind weg.

filesApi.deleteMany schickt vier Anfragen gleichzeitig und meldet, was
nicht ging; fehlgeschlagene Dateien bleiben markiert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-24 22:43:36 +02:00
1 parent 3b12d2e943
commit 1d933c5c73
6 files changed
+198 -13

No files matched your search

+21 -8
View File
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from 'react'
import type React from 'react'
import { type Correspondent, type FileItem, type FolderItem, type Tag } from '../api/client'
import { TagRow } from './TagDialog'
import TagChip from './TagChip'
@@ -58,6 +59,24 @@ function useCoarsePointer(): boolean {
* Handler, deshalb genügt hier das Umschalten der Eigenschaft. Dateien
* schreiben ihren Handler selbst aus – warum, steht dort.
*/
/**
* Was genau wird gezogen – diese eine Datei oder die ganze Auswahl?
*
* Zieht man eine Datei, die markiert ist, meint man die Markierung. Zieht man
* eine unmarkierte, meint man genau sie – die Markierung bleibt unberührt.
* Dieselbe Regel wie in jedem Dateimanager.
*
* `aether-file-id` bleibt daneben stehen, weil das Verschieben in einen Ordner
* damit arbeitet; `aether-file-ids` ist die Liste für alles, was mehrere
* verträgt.
*/
export function startFileDrag(e: React.DragEvent, fileId: string, selected?: Set<string>) {
const ids = selected?.has(fileId) ? [...selected] : [fileId]
e.dataTransfer.setData('aether-file-id', fileId)
e.dataTransfer.setData('aether-file-ids', JSON.stringify(ids))
e.dataTransfer.effectAllowed = 'move'
}
function openGesture(coarse: boolean, open: () => void) {
return coarse ? { onClick: open } : { onDoubleClick: open }
}
@@ -180,10 +199,7 @@ export default function GridView({ folders, files, onFolderOpen, onFolderMenu, o
<div
key={file.id}
draggable
onDragStart={e => {
e.dataTransfer.setData('aether-file-id', file.id)
e.dataTransfer.effectAllowed = 'move'
}}
onDragStart={e => startFileDrag(e, file.id, selected)}
ref={file.id === highlightId ? highlightRef : undefined}
onDoubleClick={() => { if (!coarse) onFileOpen(file) }}
onClick={e => {
@@ -391,10 +407,7 @@ export function ListView({ folders, files, onFolderOpen, onFolderMenu, onFileMen
<div
key={file.id}
draggable
onDragStart={e => {
e.dataTransfer.setData('aether-file-id', file.id)
e.dataTransfer.effectAllowed = 'move'
}}
onDragStart={e => startFileDrag(e, file.id, selected)}
ref={file.id === highlightId ? highlightRef : undefined}
style={{
display: 'flex', alignItems: 'center', gap: 12,