diff --git a/app/components/UploadTile.vue b/app/components/UploadTile.vue index a1a869b..27c01e1 100644 --- a/app/components/UploadTile.vue +++ b/app/components/UploadTile.vue @@ -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" >
- {{ uploading ? $t('upload.uploading') : $t('upload.dropToUpload') }} -
-- {{ $t('grid.loading') }} -
{{ hasFilters ? $t('grid.emptyFiltered') : $t('grid.empty') }}