Mass-select grid and bulk delete for moderators

- Select mode in the filter row (upload.delete permission): tiles toggle selection in the capture phase, a floating action bar offers select-all and delete with confirmation popover - New POST /api/uploads/bulk-delete endpoint (validated, deduped, max 200 ids) removing rows, files and attachment data - upload-deleted broadcast on bulk and single delete; other clients refresh the grid and drop matching notifications - Also: skeleton tile grid as loading state, dropzone logic moved to the layout-level GlobalDropZone, obsolete ytimg preconnect removed Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-10-04 03:06:38 +02:00
parent f57fffb414
commit de0cd6d34f
5 changed files with 188 additions and 61 deletions
@@ -14,7 +14,11 @@ interface TileUpload {
  commentCount?: number
 }

-const props = defineProps<{ upload: TileUpload }>()
+const props = withDefaults(defineProps<{ upload: TileUpload, selectable?: boolean, selected?: boolean }>(), {
+  selectable: false,
+  selected: false,
+})
+const emit = defineEmits<{ select: [] }>()
 const { t } = useI18n()

 const { unreadUploadIds } = useNotifications()
@@ -47,7 +51,17 @@ const spanClass = computed(() => {
 // 1. Ladeindikator oben sofort starten
 // 2. Thread-Daten + Bild/Video vorladen (min. 600 ms, damit der Indikator sichtbar läuft)
 // 3. Wenn geladen: viewTransitionName setzen und via startViewTransition navigieren
+// Capture-Phase: läuft vor NuxtLinks eigenem Klick-Handler — preventDefault +
+// stopImmediatePropagation verhindert die Navigation sicher in allen Browsern
+function captureClick(e: MouseEvent) {
+  if (!props.selectable) return
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('select')
+}
+
 async function openUpload(e: MouseEvent) {
+  if (props.selectable) return
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
  e.preventDefault()
  if (navigating.value) return
@@ -116,10 +130,11 @@ async function openUpload(e: MouseEvent) {
    :to="`/thread/${upload.id}`"
    class="upload-tile group block"
    :class="[spanClass, navigating ? 'opacity-80' : '']"
+    @click.capture="captureClick"
    @click="openUpload"
  >
    <div
-      :class="cn('upload-tile-media relative h-full w-full overflow-hidden rounded-md', hasNotification && 'ring-4 ring-primary')"
+      :class="cn('upload-tile-media relative h-full w-full overflow-hidden rounded-md', selected ? 'ring-4 ring-accent' : hasNotification && 'ring-4 ring-primary')"
      :style="lastViewedId === upload.id ? 'view-transition-name: upload-media' : undefined"
    >
      <NuxtImg
@@ -145,6 +160,12 @@ async function openUpload(e: MouseEvent) {
        <Icon name="ph:music-note-fill" v-if="upload.type === 'audio'" class="size-8 text-muted-foreground" />
        <Icon name="ph:link-fill" v-else class="size-8 text-muted-foreground" />
      </div>
+      <span
+        v-if="selectable"
+        :class="cn('absolute top-1.5 left-1.5 z-10 flex size-6 items-center justify-center rounded-full border shadow', selected ? 'border-accent bg-accent text-accent-foreground' : 'border-muted-foreground/40 bg-background/60')"
+      >
+        <Icon v-if="selected" name="ph:check-bold" class="size-3.5" />
+      </span>
      <span
        v-if="hasNotification"
        class="absolute top-1.5 right-1.5 z-10 flex size-6 items-center justify-center rounded-full bg-accent text-accent-foreground shadow"
@@ -49,10 +49,17 @@ export function useNotifications() {
    await $fetch(`/api/notifications/${id}/read`, { method: 'POST' })
  }

+  function removeByUploads(uploadIds: string[]) {
+    const removed = notifications.value.filter(n => uploadIds.includes(n.uploadId))
+    if (!removed.length) return
+    notifications.value = notifications.value.filter(n => !uploadIds.includes(n.uploadId))
+    unreadCount.value = Math.max(0, unreadCount.value - removed.filter(n => !n.isRead).length)
+  }
+
  function reset() {
    notifications.value = []
    unreadCount.value = 0
  }

-  return { notifications, unreadCount, unreadUploadIds, fetchAll, addLive, markAllRead, markRead, reset }
+  return { notifications, unreadCount, unreadUploadIds, fetchAll, addLive, markAllRead, markRead, removeByUploads, reset }
 }
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useDropZone, useEventListener } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { toast } from 'vue-sonner'
-import { isMediaFile, isMediaItemType } from '~~/shared/utils/media'
 import UploadFilters from '@/components/UploadFilters.vue'
 import UploadTile from '@/components/UploadTile.vue'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import {
  Pagination,
  PaginationContent,
@@ -12,6 +13,8 @@ import {
  PaginationNext,
  PaginationPrevious,
 } from '@/components/ui/pagination'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Spinner } from '@/components/ui/spinner'

 interface UploadItem {
  id: string
@@ -113,7 +116,6 @@ watch(uploads, async (list) => {
 useHead({
  link: [
    { rel: 'preconnect', href: 'https://www.youtube.com' },
-    { rel: 'preconnect', href: 'https://i.ytimg.com' },
  ],
 })

@@ -128,82 +130,95 @@ watch(uploads, (list) => {
  }
 }, { immediate: true })

-const { user } = useAuth()
-const dropTarget = shallowRef<HTMLElement>()
-const uploading = ref(false)
+const { can } = useAuth()
+// Mass-Select für Moderatoren (upload.delete): Kacheln anklicken statt öffnen,
+// gemeinsam über POST /api/uploads/bulk-delete löschen
+const selectMode = ref(false)
+const selectedIds = ref<Set<string>>(new Set())
+const bulkDeleting = ref(false)
+const bulkConfirmOpen = ref(false)

-onMounted(() => {
-  dropTarget.value = document.body
+function toggleSelect(id: string) {
+  const next = new Set(selectedIds.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  selectedIds.value = next
+}
+function exitSelectMode() {
+  selectMode.value = false
+  selectedIds.value = new Set()
+  bulkConfirmOpen.value = false
+}
+function selectAllVisible() {
+  selectedIds.value = new Set(uploads.value.map(u => u.id))
+}
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && selectMode.value) exitSelectMode()
 })

-const { isOverDropZone } = useDropZone(dropTarget, {
-  dataTypes: types => types.some(isMediaItemType),
-  onDrop(files) {
-    const valid = (files ?? []).filter(isMediaFile)
-    if (valid.length && !uploading.value) uploadFiles(valid)
-    else if (files?.length) toast.error(t('upload.onlyMedia'))
-  },
-})
-
-// Verhindert, dass der Browser gedroppte Dateien außerhalb der Zone als Tab öffnet
-useEventListener('dragover', (e: DragEvent) => {
-  if (e.dataTransfer?.types.includes('Files')) e.preventDefault()
-})
-useEventListener('drop', (e: DragEvent) => {
-  if (e.dataTransfer?.types.includes('Files')) e.preventDefault()
-})
-
-async function uploadFiles(files: File[]) {
-  if (!user.value) {
-    toast.error(t('upload.loginToUploadToast'))
-    return
-  }
-  uploading.value = true
+async function deleteSelected() {
+  if (!selectedIds.value.size || bulkDeleting.value) return
+  bulkDeleting.value = true
  try {
-    const results = await Promise.allSettled(files.map((file) => {
-      const formData = new FormData()
-      formData.append('file', file)
-      return $fetch('/api/uploads', { method: 'POST', body: formData })
-    }))
-    const failed = results.filter(r => r.status === 'rejected').length
-    if (failed) {
-      toast.error(t('upload.failedCount', { failed, total: files.length }))
-    }
+    const res = await $fetch<{ deleted: number }>('/api/uploads/bulk-delete', {
+      method: 'POST',
+      body: { ids: [...selectedIds.value] },
+    })
+    toast.success(t('grid.deletedCount', { n: res.deleted }))
+    exitSelectMode()
    await refreshNuxtData('uploads')
-    await navigateTo('/')
+  }
+  catch {
+    toast.error(t('grid.deleteFailed'))
  }
  finally {
-    uploading.value = false
+    bulkDeleting.value = false
+    bulkConfirmOpen.value = false
  }
 }
+
 </script>

 <template>
  <div class="flex flex-1 flex-col px-4 lg:px-6">
-    <div
-      v-if="isOverDropZone || uploading"
-      class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
-    >
-      <div class="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-primary bg-background p-10">
-        <Icon name="ph:cloud-arrow-up-fill" class="size-12 text-primary" />
-        <p class="text-lg font-medium">
-          {{ uploading ? $t('upload.uploading') : $t('upload.dropToUpload') }}
-        </p>
-      </div>
-    </div>
    <div ref="filterRowEl" class="mb-2 flex items-center gap-2">
      <UploadFilters />
      <span v-if="hasFilters" class="text-sm text-muted-foreground">{{ $t('grid.count', { n: total }) }}</span>
+      <Button
+        v-if="can('upload.delete')"
+        variant="outline"
+        size="sm"
+        class="ml-auto"
+        @click="selectMode ? exitSelectMode() : (selectMode = true)"
+      >
+        <Icon :name="selectMode ? 'ph:x-bold' : 'ph:list-checks-bold'" class="size-4" />
+        {{ selectMode ? $t('common.cancel') : $t('grid.select') }}
+      </Button>
+    </div>
+    <div
+      v-if="pending"
+      class="grid grid-flow-dense grid-cols-4 gap-2 [grid-auto-rows:6.5rem] sm:grid-cols-6 sm:[grid-auto-rows:7rem] md:grid-cols-8 lg:grid-cols-12 lg:[grid-auto-rows:7.5rem]"
+      aria-hidden="true"
+    >
+      <Skeleton
+        v-for="i in cells || 24"
+        :key="i"
+        class="rounded-md"
+      />
    </div>
-    <p v-if="pending" class="text-muted-foreground">
-      {{ $t('grid.loading') }}
-    </p>
    <p v-else-if="!uploads.length" class="text-muted-foreground">
      {{ hasFilters ? $t('grid.emptyFiltered') : $t('grid.empty') }}
    </p>

    <div v-else class="grid grid-flow-dense grid-cols-4 gap-2 [grid-auto-rows:6.5rem] sm:grid-cols-6 sm:[grid-auto-rows:7rem] md:grid-cols-8 lg:grid-cols-12 lg:[grid-auto-rows:7.5rem]">
-      <UploadTile v-for="upload in uploads" :key="upload.id" :upload="{ ...upload, ...meta[upload.id] }" />
+      <UploadTile
+        v-for="upload in uploads"
+        :key="upload.id"
+        :upload="{ ...upload, ...meta[upload.id] }"
+        :selectable="selectMode"
+        :selected="selectedIds.has(upload.id)"
+        @select="toggleSelect(upload.id)"
+      />
    </div>

    <!-- Seiten haben variable Item-Anzahl (Zell-Budget) — Pagination arbeitet
@@ -232,5 +247,31 @@ async function uploadFiles(files: File[]) {
        <PaginationNext />
      </PaginationContent>
    </Pagination>
+
+    <div
+      v-if="selectMode"
+      class="fixed bottom-4 left-4 z-40 flex items-center gap-2 rounded-lg border bg-card px-3 py-2 shadow-xl"
+    >
+      <span class="text-sm text-muted-foreground">{{ $t('grid.selected', { n: selectedIds.size }) }}</span>
+      <Button variant="outline" size="sm" @click="selectAllVisible">
+        {{ $t('grid.selectAll') }}
+      </Button>
+      <Popover v-model:open="bulkConfirmOpen">
+        <PopoverTrigger as-child>
+          <Button variant="destructive" size="sm" :disabled="!selectedIds.size || bulkDeleting">
+            <Icon name="ph:trash-fill" class="size-4" />
+            {{ $t('common.delete') }}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-64">
+          <p class="text-sm font-medium">{{ $t('grid.deleteConfirmTitle') }}</p>
+          <p class="mt-1 text-sm text-muted-foreground">{{ $t('grid.deleteConfirmDesc', { n: selectedIds.size }) }}</p>
+          <Button variant="destructive" size="sm" class="mt-3 w-full" @click="deleteSelected">
+            <Spinner v-if="bulkDeleting" />
+            {{ bulkDeleting ? $t('common.deleting') : $t('common.delete') }}
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
  </div>
 </template>
@@ -7,7 +7,7 @@ import type { AppNotification } from '@/composables/useNotifications'
 export default defineNuxtPlugin(() => {
  const { $i18n } = useNuxtApp()
  const { user } = useAuth()
-  const { fetchAll, addLive, reset } = useNotifications()
+  const { fetchAll, addLive, reset, removeByUploads } = useNotifications()
  const { pushLive } = useLiveComments()
  const motd = useMotd()
  const { applyEvent } = useCommentReactions()
@@ -34,6 +34,15 @@ export default defineNuxtPlugin(() => {
        else if (message.type === 'upload-reaction') {
          applyUploadEvent(message as UploadReactionEventPayload)
        }
+        else if (message.type === 'upload-deleted') {
+          const ids = Array.isArray(message.ids)
+            ? message.ids.filter((i: unknown) => typeof i === 'string') as string[]
+            : []
+          if (ids.length) {
+            removeByUploads(ids)
+            refreshNuxtData(['uploads', 'latest-comments'])
+          }
+        }
        else if (message.type === 'motd') {
          motd.value = typeof message.message === 'string' ? message.message : ''
        }