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 @@