diff --git a/apps/storage/apps/web/src/lib/components/files/BulkActionBar.svelte b/apps/storage/apps/web/src/lib/components/files/BulkActionBar.svelte
new file mode 100644
index 000000000..232ab4914
--- /dev/null
+++ b/apps/storage/apps/web/src/lib/components/files/BulkActionBar.svelte
@@ -0,0 +1,131 @@
+
+
+{#if filesStore.selectionCount > 0}
+
+
+
+ {filesStore.selectionCount} ausgewählt
+
+
+
+
+
+
+
+
+
+
+{/if}
+
+
diff --git a/apps/storage/apps/web/src/lib/components/files/FileCard.svelte b/apps/storage/apps/web/src/lib/components/files/FileCard.svelte
index f03a22f06..46141a6a1 100644
--- a/apps/storage/apps/web/src/lib/components/files/FileCard.svelte
+++ b/apps/storage/apps/web/src/lib/components/files/FileCard.svelte
@@ -11,6 +11,7 @@
DotsThreeVertical,
} from '@manacore/shared-icons';
import { ContextMenu, type ContextMenuItem } from '@manacore/shared-ui';
+ import { filesStore } from '$lib/stores/files.svelte';
interface Props {
file: StorageFile;
@@ -20,6 +21,9 @@
let { file, onClick, onAction }: Props = $props();
+ let isSelected = $derived(filesStore.selectedFileIds.has(file.id));
+ let hasSelection = $derived(filesStore.selectionCount > 0);
+
let contextMenuVisible = $state(false);
let contextMenuX = $state(0);
let contextMenuY = $state(0);
@@ -80,7 +84,15 @@
{
+ if (hasSelection) {
+ e.stopPropagation();
+ filesStore.toggleFileSelection(file.id);
+ } else {
+ onClick?.();
+ }
+ }}
oncontextmenu={handleContextMenu}
role="button"
tabindex="0"
@@ -94,6 +106,18 @@
isDragging = false;
}}
>
+ {#if hasSelection}
+
{
+ e.stopPropagation();
+ filesStore.toggleFileSelection(file.id);
+ }}
+ aria-label="Datei auswählen"
+ />
+ {/if}
{#if file.isFavorite}
@@ -146,6 +170,21 @@
box-shadow: var(--shadow-md);
}
+ .file-card.selected {
+ border-color: rgb(var(--color-primary));
+ background: rgb(var(--color-primary) / 0.06);
+ }
+
+ .select-checkbox {
+ position: absolute;
+ top: 0.5rem;
+ left: 0.5rem;
+ width: 16px;
+ height: 16px;
+ accent-color: rgb(var(--color-primary));
+ cursor: pointer;
+ }
+
.file-card.dragging {
opacity: 0.5;
transform: scale(0.95);
diff --git a/apps/storage/apps/web/src/lib/components/files/FolderCard.svelte b/apps/storage/apps/web/src/lib/components/files/FolderCard.svelte
index 8c5a607a9..cfe523b7d 100644
--- a/apps/storage/apps/web/src/lib/components/files/FolderCard.svelte
+++ b/apps/storage/apps/web/src/lib/components/files/FolderCard.svelte
@@ -1,6 +1,7 @@