From c2dfa9be83523a0615a82cf2cb5b64ef49e61c03 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 11 Apr 2024 00:45:47 +0200
Subject: [PATCH 01/20] Proof of concept for image preview

---
 .../components/tasks/partials/attachments.vue | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 7aeabd531..03c6994c6 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -67,6 +67,12 @@
 							{{ a.file.mime }}
 						</span>
 					</p>
+					<img
+						v-if="canPreview(a)"
+						:src="blobUrls.get(a.id)"
+						style="height: 20vh; min-height: 100px"
+						alt=""
+					>
 					<p>
 						<BaseButton
 							v-tooltip="$t('task.attachment.downloadTooltip')"
@@ -168,7 +174,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed} from 'vue'
+import {ref, shallowReactive, computed, onMounted} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
@@ -222,6 +228,20 @@ function downloadAttachment(attachment: IAttachment) {
 
 const filesRef = ref<HTMLInputElement | null>(null)
 
+const blobUrls = ref<Map<number, string>>(new Map())
+
+onMounted(() => {
+	fetchBlobUrls(attachments.value as IAttachment[])
+})
+
+async function fetchBlobUrls(attachments: IAttachment[]) {
+	for (const attachment of attachments) {
+		const blobUrl = await attachmentService.getBlobUrl(attachment)
+		if (canPreview(attachment)) {
+			blobUrls.value.set(attachment.id, blobUrl)
+		}
+	}
+}
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -260,13 +280,17 @@ async function deleteAttachment() {
 const attachmentImageBlobUrl = ref<string | null>(null)
 
 async function viewOrDownload(attachment: IAttachment) {
-	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+	if (canPreview(attachment)) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
 	}
 }
 
+function canPreview(attachment: IAttachment): boolean {
+	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))
+}
+
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {

From e47d6d1605bee3a57b7d2a69c2578e0731c3d47f Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 26 Apr 2024 19:05:10 +0200
Subject: [PATCH 02/20] Extract img to FilePreview component

Now images will also be displayed when they are uploaded initially
---
 .../components/tasks/partials/attachments.vue | 195 +++++++++---------
 .../tasks/partials/file-preview.vue           |  34 +++
 2 files changed, 132 insertions(+), 97 deletions(-)
 create mode 100644 frontend/src/components/tasks/partials/file-preview.vue

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 03c6994c6..36137d0be 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -27,89 +27,91 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<!-- FIXME: don't use a for element that wraps other links / buttons
-				Instead: overlay element with button that is inside.
-			-->
-			<a
-				v-for="a in attachments"
-				:key="a.id"
-				class="attachment"
-				@click="viewOrDownload(a)"
-			>
-				<div class="filename">
-					{{ a.file.name }}
-					<span
-						v-if="task.coverImageAttachmentId === a.id"
-						class="is-task-cover"
-					>
-						{{ $t('task.attachment.usedAsCover') }}
-					</span>
-				</div>
-				<div class="info">
-					<p class="attachment-info-meta">
-						<i18n-t
-							keypath="task.attachment.createdBy"
-							scope="global"
-						>
-							<span v-tooltip="formatDateLong(a.created)">
-								{{ formatDateSince(a.created) }}
+			<table class="table table-striped">
+				<tr
+					v-for="a in attachments"
+					:key="a.id"
+					class="clickable"
+					@click="viewOrDownload(a)"
+				>
+					<td class="preview-column">
+						<FilePreview
+							v-if="canPreview(a)"
+							class="attachment-preview"
+							:model-value="a"
+						/>
+					</td>
+					<td>
+						<div class="filename">
+							{{ a.file.name }}
+							<span
+								v-if="task.coverImageAttachmentId === a.id"
+								class="is-task-cover"
+							>
+								{{ $t('task.attachment.usedAsCover') }}
 							</span>
-							<User
-								:avatar-size="24"
-								:user="a.createdBy"
-								:is-inline="true"
-							/>
-						</i18n-t>
-						<span>
-							{{ getHumanSize(a.file.size) }}
-						</span>
-						<span v-if="a.file.mime">
-							{{ a.file.mime }}
-						</span>
-					</p>
-					<img
-						v-if="canPreview(a)"
-						:src="blobUrls.get(a.id)"
-						style="height: 20vh; min-height: 100px"
-						alt=""
-					>
-					<p>
-						<BaseButton
-							v-tooltip="$t('task.attachment.downloadTooltip')"
-							class="attachment-info-meta-button"
-							@click.prevent.stop="downloadAttachment(a)"
-						>
-							{{ $t('misc.download') }}
-						</BaseButton>
-						<BaseButton
-							v-tooltip="$t('task.attachment.copyUrlTooltip')"
-							class="attachment-info-meta-button"
-							@click.stop="copyUrl(a)"
-						>
-							{{ $t('task.attachment.copyUrl') }}
-						</BaseButton>
-						<BaseButton
-							v-if="editEnabled"
-							v-tooltip="$t('task.attachment.deleteTooltip')"
-							class="attachment-info-meta-button"
-							@click.prevent.stop="setAttachmentToDelete(a)"
-						>
-							{{ $t('misc.delete') }}
-						</BaseButton>
-						<BaseButton
-							v-if="editEnabled"
-							class="attachment-info-meta-button"
-							@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
-						>
-							{{
-								task.coverImageAttachmentId === a.id
-									? $t('task.attachment.unsetAsCover')
-									: $t('task.attachment.setAsCover')
-							}}
-						</BaseButton>
-					</p>
-				</div>
-			</a>
+						</div>
+						<div class="info">
+							<p class="attachment-info-meta">
+								<i18n-t
+									keypath="task.attachment.createdBy"
+									scope="global"
+								>
+									<span v-tooltip="formatDateLong(a.created)">
+										{{ formatDateSince(a.created) }}
+									</span>
+									<User
+										:avatar-size="24"
+										:user="a.createdBy"
+										:is-inline="true"
+									/>
+								</i18n-t>
+								<span>
+									{{ getHumanSize(a.file.size) }}
+								</span>
+								<span v-if="a.file.mime">
+									{{ a.file.mime }}
+								</span>
+							</p>
+							<p>
+								<BaseButton
+									v-tooltip="$t('task.attachment.downloadTooltip')"
+									class="attachment-info-meta-button"
+									@click.prevent.stop="downloadAttachment(a)"
+								>
+									{{ $t('misc.download') }}
+								</BaseButton>
+								<BaseButton
+									v-tooltip="$t('task.attachment.copyUrlTooltip')"
+									class="attachment-info-meta-button"
+									@click.stop="copyUrl(a)"
+								>
+									{{ $t('task.attachment.copyUrl') }}
+								</BaseButton>
+								<BaseButton
+									v-if="editEnabled"
+									v-tooltip="$t('task.attachment.deleteTooltip')"
+									class="attachment-info-meta-button"
+									@click.prevent.stop="setAttachmentToDelete(a)"
+								>
+									{{ $t('misc.delete') }}
+								</BaseButton>
+								<BaseButton
+									v-if="editEnabled"
+									class="attachment-info-meta-button"
+									@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
+								>
+									{{
+										task.coverImageAttachmentId === a.id
+											? $t('task.attachment.unsetAsCover')
+											: $t('task.attachment.setAsCover')
+									}}
+								</BaseButton>
+							</p>
+						</div>
+					</td>
+				</tr>
+			</table>
 		</div>
 
 		<x-button
@@ -174,7 +176,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, onMounted} from 'vue'
+import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
@@ -194,6 +196,7 @@ import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 import {useI18n} from 'vue-i18n'
+import FilePreview from '@/components/tasks/partials/file-preview.vue'
 
 const {
 	task,
@@ -228,20 +231,6 @@ function downloadAttachment(attachment: IAttachment) {
 
 const filesRef = ref<HTMLInputElement | null>(null)
 
-const blobUrls = ref<Map<number, string>>(new Map())
-
-onMounted(() => {
-	fetchBlobUrls(attachments.value as IAttachment[])
-})
-
-async function fetchBlobUrls(attachments: IAttachment[]) {
-	for (const attachment of attachments) {
-		const blobUrl = await attachmentService.getBlobUrl(attachment)
-		if (canPreview(attachment)) {
-			blobUrls.value.set(attachment.id, blobUrl)
-		}
-	}
-}
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -458,6 +447,18 @@ async function setCoverImage(attachment: IAttachment | null) {
 	}
 }
 
+.preview-column {
+	max-width: 75px;
+}
+
+.attachment-preview {
+	max-height: 75px;
+}
+
+.clickable {
+	cursor: pointer;
+}
+
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);
diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
new file mode 100644
index 000000000..5d15b9db4
--- /dev/null
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -0,0 +1,34 @@
+<template>
+	<img
+		:src="blobUrl"
+		alt="Attachment preview"
+	>
+</template>
+
+<script setup lang="ts">
+import {type PropType, ref, shallowReactive, watchEffect} from 'vue'
+import AttachmentService from '@/services/attachment'
+import type { IAttachment } from '@/modelTypes/IAttachment'
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<IAttachment>,
+		default: undefined,
+	},
+})
+
+const attachmentService = shallowReactive(new AttachmentService())
+const blobUrl = ref<string | undefined>(undefined)
+
+watchEffect(async () => {
+	if (props.modelValue) {
+		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
+	}
+})
+</script>
+
+<style scoped lang="scss">
+img {
+	border-radius: 0.5rem;
+}
+</style>
\ No newline at end of file

From 2ab6894542dd3d03a2dbca85ef2f85f2c88063c9 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 9 May 2024 11:51:54 +0200
Subject: [PATCH 03/20] Replace table with grid

---
 .../components/tasks/partials/attachments.vue | 172 +++++++++---------
 1 file changed, 88 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 36137d0be..dc21ac9c8 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -27,91 +27,89 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<table class="table table-striped">
-				<tr
-					v-for="a in attachments"
-					:key="a.id"
-					class="clickable"
-					@click="viewOrDownload(a)"
-				>
-					<td class="preview-column">
-						<FilePreview
-							v-if="canPreview(a)"
-							class="attachment-preview"
-							:model-value="a"
-						/>
-					</td>
-					<td>
-						<div class="filename">
-							{{ a.file.name }}
-							<span
-								v-if="task.coverImageAttachmentId === a.id"
-								class="is-task-cover"
+			<div
+				v-for="a in attachments"
+				:key="a.id"
+				class="grid-item clickable"
+				@click="viewOrDownload(a)"
+			>
+				<div class="preview-column">
+					<FilePreview
+						v-if="canPreview(a)"
+						class="attachment-preview"
+						:model-value="a"
+					/>
+				</div>
+				<div>
+					<div class="filename">
+						{{ a.file.name }}
+						<span
+							v-if="task.coverImageAttachmentId === a.id"
+							class="is-task-cover"
+						>
+							{{ $t('task.attachment.usedAsCover') }}
+						</span>
+					</div>
+					<div class="info">
+						<p class="attachment-info-meta">
+							<i18n-t
+								keypath="task.attachment.createdBy"
+								scope="global"
 							>
-								{{ $t('task.attachment.usedAsCover') }}
+								<span v-tooltip="formatDateLong(a.created)">
+									{{ formatDateSince(a.created) }}
+								</span>
+								<User
+									:avatar-size="24"
+									:user="a.createdBy"
+									:is-inline="true"
+								/>
+							</i18n-t>
+							<span>
+								{{ getHumanSize(a.file.size) }}
 							</span>
-						</div>
-						<div class="info">
-							<p class="attachment-info-meta">
-								<i18n-t
-									keypath="task.attachment.createdBy"
-									scope="global"
-								>
-									<span v-tooltip="formatDateLong(a.created)">
-										{{ formatDateSince(a.created) }}
-									</span>
-									<User
-										:avatar-size="24"
-										:user="a.createdBy"
-										:is-inline="true"
-									/>
-								</i18n-t>
-								<span>
-									{{ getHumanSize(a.file.size) }}
-								</span>
-								<span v-if="a.file.mime">
-									{{ a.file.mime }}
-								</span>
-							</p>
-							<p>
-								<BaseButton
-									v-tooltip="$t('task.attachment.downloadTooltip')"
-									class="attachment-info-meta-button"
-									@click.prevent.stop="downloadAttachment(a)"
-								>
-									{{ $t('misc.download') }}
-								</BaseButton>
-								<BaseButton
-									v-tooltip="$t('task.attachment.copyUrlTooltip')"
-									class="attachment-info-meta-button"
-									@click.stop="copyUrl(a)"
-								>
-									{{ $t('task.attachment.copyUrl') }}
-								</BaseButton>
-								<BaseButton
-									v-if="editEnabled"
-									v-tooltip="$t('task.attachment.deleteTooltip')"
-									class="attachment-info-meta-button"
-									@click.prevent.stop="setAttachmentToDelete(a)"
-								>
-									{{ $t('misc.delete') }}
-								</BaseButton>
-								<BaseButton
-									v-if="editEnabled"
-									class="attachment-info-meta-button"
-									@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
-								>
-									{{
-										task.coverImageAttachmentId === a.id
-											? $t('task.attachment.unsetAsCover')
-											: $t('task.attachment.setAsCover')
-									}}
-								</BaseButton>
-							</p>
-						</div>
-					</td>
-				</tr>
-			</table>
+							<span v-if="a.file.mime">
+								{{ a.file.mime }}
+							</span>
+						</p>
+						<p>
+							<BaseButton
+								v-tooltip="$t('task.attachment.downloadTooltip')"
+								class="attachment-info-meta-button"
+								@click.prevent.stop="downloadAttachment(a)"
+							>
+								{{ $t('misc.download') }}
+							</BaseButton>
+							<BaseButton
+								v-tooltip="$t('task.attachment.copyUrlTooltip')"
+								class="attachment-info-meta-button"
+								@click.stop="copyUrl(a)"
+							>
+								{{ $t('task.attachment.copyUrl') }}
+							</BaseButton>
+							<BaseButton
+								v-if="editEnabled"
+								v-tooltip="$t('task.attachment.deleteTooltip')"
+								class="attachment-info-meta-button"
+								@click.prevent.stop="setAttachmentToDelete(a)"
+							>
+								{{ $t('misc.delete') }}
+							</BaseButton>
+							<BaseButton
+								v-if="editEnabled"
+								class="attachment-info-meta-button"
+								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
+							>
+								{{
+									task.coverImageAttachmentId === a.id
+										? $t('task.attachment.unsetAsCover')
+										: $t('task.attachment.setAsCover')
+								}}
+							</BaseButton>
+						</p>
+					</div>
+				</div>
+			</div>
 		</div>
 
 		<x-button
@@ -448,7 +446,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .preview-column {
-	max-width: 75px;
+	max-width: 125px;
 }
 
 .attachment-preview {
@@ -459,6 +457,12 @@ async function setCoverImage(attachment: IAttachment | null) {
 	cursor: pointer;
 }
 
+.grid-item {
+	display: grid;
+	grid-template-columns: 140px 1fr;
+	align-items: center;
+}
+
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);

From 9c7187b4aafd95bfd84d75fdd0ad3ed30eae66f9 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 9 May 2024 12:29:27 +0200
Subject: [PATCH 04/20] Adjust file preview style

---
 frontend/src/components/tasks/partials/file-preview.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index 5d15b9db4..6377cf028 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -2,6 +2,7 @@
 	<img
 		:src="blobUrl"
 		alt="Attachment preview"
+		style="object-fit: cover;"
 	>
 </template>
 
@@ -29,6 +30,6 @@ watchEffect(async () => {
 
 <style scoped lang="scss">
 img {
-	border-radius: 0.5rem;
+	border-radius: $radius;
 }
 </style>
\ No newline at end of file

From 6fa15d30ad5d59940abf471f5fa1d72ae6680b0a Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Wed, 15 May 2024 23:55:26 +0200
Subject: [PATCH 05/20] Replace px with rem

---
 frontend/src/components/tasks/partials/attachments.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index dc21ac9c8..56e434745 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -446,11 +446,11 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .preview-column {
-	max-width: 125px;
+	max-width: 8rem;
 }
 
 .attachment-preview {
-	max-height: 75px;
+	max-height: 4rem;
 }
 
 .clickable {
@@ -459,7 +459,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .grid-item {
 	display: grid;
-	grid-template-columns: 140px 1fr;
+	grid-template-columns: 9rem 1fr;
 	align-items: center;
 }
 

From 2d3bf4c210de71ccf8348df8f8c97940a7aad895 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 16 May 2024 14:32:15 +0200
Subject: [PATCH 06/20] Move object-fit to styles

---
 frontend/src/components/tasks/partials/file-preview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index 6377cf028..0638dd75e 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -2,7 +2,6 @@
 	<img
 		:src="blobUrl"
 		alt="Attachment preview"
-		style="object-fit: cover;"
 	>
 </template>
 
@@ -31,5 +30,6 @@ watchEffect(async () => {
 <style scoped lang="scss">
 img {
 	border-radius: $radius;
+	object-fit: cover;
 }
 </style>
\ No newline at end of file

From 4b4c7840e2dadaeabf1ebff939207329caca86d3 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 16 May 2024 14:32:29 +0200
Subject: [PATCH 07/20] Rename grid-item class to attachment

---
 frontend/src/components/tasks/partials/attachments.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 56e434745..38c511aa7 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -30,7 +30,7 @@
 			<div
 				v-for="a in attachments"
 				:key="a.id"
-				class="grid-item clickable"
+				class="attachment clickable"
 				@click="viewOrDownload(a)"
 			>
 				<div class="preview-column">
@@ -457,7 +457,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	cursor: pointer;
 }
 
-.grid-item {
+.attachment {
 	display: grid;
 	grid-template-columns: 9rem 1fr;
 	align-items: center;

From 230fef3559dfd543c1030e2b4ac8fd762e88997e Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 16 May 2024 14:36:41 +0200
Subject: [PATCH 08/20] Attempt to fix attachment verification

---
 frontend/cypress/e2e/task/task.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/cypress/e2e/task/task.spec.ts b/frontend/cypress/e2e/task/task.spec.ts
index 5b6a4db03..de1a61c25 100644
--- a/frontend/cypress/e2e/task/task.spec.ts
+++ b/frontend/cypress/e2e/task/task.spec.ts
@@ -42,7 +42,7 @@ function uploadAttachmentAndVerify(taskId: number) {
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')
 
-	cy.get('.attachments .attachments .files a.attachment')
+	cy.get('.attachments .attachments .files div.attachment')
 		.should('exist')
 }
 

From 7664534618eb3b9f87021ec60eefd130aee3e784 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 16 May 2024 19:29:40 +0200
Subject: [PATCH 09/20] Change attachment div to button

---
 .../components/tasks/partials/attachments.vue | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 38c511aa7..392636c9f 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -27,10 +27,10 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<div
+			<button
 				v-for="a in attachments"
 				:key="a.id"
-				class="attachment clickable"
+				class="attachment"
 				@click="viewOrDownload(a)"
 			>
 				<div class="preview-column">
@@ -109,7 +109,7 @@
 						</p>
 					</div>
 				</div>
-			</div>
+			</button>
 		</div>
 
 		<x-button
@@ -309,11 +309,18 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .attachment {
+	display: grid;
+	grid-template-columns: 9rem 1fr;
+	align-items: center;
+	
 	margin-bottom: .5rem;
-	display: block;
-	transition: background-color $transition;
-	border-radius: $radius;
 	padding: .5rem;
+	
+	transition: background-color $transition;
+	background-color: transparent;
+	
+	border: transparent;
+	border-radius: $radius;
 
 	&:hover {
 		background-color: var(--grey-200);
@@ -453,16 +460,6 @@ async function setCoverImage(attachment: IAttachment | null) {
 	max-height: 4rem;
 }
 
-.clickable {
-	cursor: pointer;
-}
-
-.attachment {
-	display: grid;
-	grid-template-columns: 9rem 1fr;
-	align-items: center;
-}
-
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);

From eafd4da0383b8d1603a1f3f3c145fe5269589810 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 23 May 2024 10:26:15 +0200
Subject: [PATCH 10/20] Fix test again

---
 frontend/cypress/e2e/task/task.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/cypress/e2e/task/task.spec.ts b/frontend/cypress/e2e/task/task.spec.ts
index de1a61c25..2988ebb4f 100644
--- a/frontend/cypress/e2e/task/task.spec.ts
+++ b/frontend/cypress/e2e/task/task.spec.ts
@@ -42,7 +42,7 @@ function uploadAttachmentAndVerify(taskId: number) {
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')
 
-	cy.get('.attachments .attachments .files div.attachment')
+	cy.get('.attachments .attachments .files button.attachment')
 		.should('exist')
 }
 

From c80d77ca6982e4cdd55db9a4db7b81bffb0cc414 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 23 May 2024 10:26:42 +0200
Subject: [PATCH 11/20] Add width: 100%

---
 frontend/src/components/tasks/partials/file-preview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index 0638dd75e..ee2dc8d26 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -29,6 +29,7 @@ watchEffect(async () => {
 
 <style scoped lang="scss">
 img {
+	width: 100%;
 	border-radius: $radius;
 	object-fit: cover;
 }

From 658936a070c30a9687594ee8396ed620aeb0e5fc Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 24 May 2024 12:45:06 +0200
Subject: [PATCH 12/20] File name and cover label styling improvement

---
 frontend/src/components/tasks/partials/attachments.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 392636c9f..1049306f6 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -328,8 +328,10 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .filename {
+	display: flex;
+	align-items: center;
 	font-weight: bold;
-	margin-bottom: .25rem;
+	height: 2rem;
 	color: var(--text);
 }
 
@@ -463,6 +465,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);
+	margin-left: .25rem;
 	padding: .25rem .35rem;
 	border-radius: 4px;
 	font-size: .75rem;

From ef8bb5aca961e592adcd42d1f0f6955331181245 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 24 May 2024 12:45:30 +0200
Subject: [PATCH 13/20] Add file image as fallback preview

---
 frontend/src/components/misc/Icon.ts              |  2 +-
 .../src/components/tasks/partials/attachments.vue |  1 -
 .../components/tasks/partials/file-preview.vue    | 15 +++++++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/misc/Icon.ts b/frontend/src/components/misc/Icon.ts
index 8b2d1a011..6a8b45093 100644
--- a/frontend/src/components/misc/Icon.ts
+++ b/frontend/src/components/misc/Icon.ts
@@ -29,6 +29,7 @@ import {
 	faExclamation,
 	faEye,
 	faEyeSlash,
+	faFileImage,
 	faFillDrip,
 	faFilter,
 	faForward,
@@ -81,7 +82,6 @@ import {
 	faCheckSquare,
 	faClock,
 	faComments,
-	faFileImage,
 	faSave,
 	faSquareCheck,
 	faStar,
diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 1049306f6..b2eb9b0f6 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -35,7 +35,6 @@
 			>
 				<div class="preview-column">
 					<FilePreview
-						v-if="canPreview(a)"
 						class="attachment-preview"
 						:model-value="a"
 					/>
diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index ee2dc8d26..6cf953c3f 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -1,14 +1,21 @@
 <template>
 	<img
+		v-if="blobUrl"
 		:src="blobUrl"
 		alt="Attachment preview"
 	>
+	<icon
+		v-else
+		size="6x"
+		icon="file-image"
+	/>
 </template>
 
 <script setup lang="ts">
 import {type PropType, ref, shallowReactive, watchEffect} from 'vue'
 import AttachmentService from '@/services/attachment'
-import type { IAttachment } from '@/modelTypes/IAttachment'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 
 const props = defineProps({
 	modelValue: {
@@ -21,10 +28,14 @@ const attachmentService = shallowReactive(new AttachmentService())
 const blobUrl = ref<string | undefined>(undefined)
 
 watchEffect(async () => {
-	if (props.modelValue) {
+	if (props.modelValue && canPreview(props.modelValue)) {
 		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
 	}
 })
+
+function canPreview(attachment: IAttachment): boolean {
+	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))
+}
 </script>
 
 <style scoped lang="scss">

From 56d9223fc47196e5064f87d6814a11efa403c722 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 24 May 2024 12:46:20 +0200
Subject: [PATCH 14/20] Replace cover text links with icons

---
 frontend/src/components/misc/Icon.ts                |  4 ++++
 .../src/components/tasks/partials/attachments.vue   | 13 +++++--------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/misc/Icon.ts b/frontend/src/components/misc/Icon.ts
index 6a8b45093..4e185f849 100644
--- a/frontend/src/components/misc/Icon.ts
+++ b/frontend/src/components/misc/Icon.ts
@@ -24,6 +24,8 @@ import {
 	faCocktail,
 	faCoffee,
 	faCog,
+	faCopy,
+	faDownload,
 	faEllipsisH,
 	faEllipsisV,
 	faExclamation,
@@ -130,6 +132,8 @@ library.add(faCocktail)
 library.add(faCoffee)
 library.add(faCog)
 library.add(faComments)
+library.add(faCopy)
+library.add(faDownload)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
 library.add(faExclamation)
diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index b2eb9b0f6..999015144 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -77,14 +77,14 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="downloadAttachment(a)"
 							>
-								{{ $t('misc.download') }}
+								<icon icon="download" />
 							</BaseButton>
 							<BaseButton
 								v-tooltip="$t('task.attachment.copyUrlTooltip')"
 								class="attachment-info-meta-button"
 								@click.stop="copyUrl(a)"
 							>
-								{{ $t('task.attachment.copyUrl') }}
+								<icon icon="copy" />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled"
@@ -92,18 +92,14 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setAttachmentToDelete(a)"
 							>
-								{{ $t('misc.delete') }}
+								<icon icon="trash-alt" />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled"
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
 							>
-								{{
-									task.coverImageAttachmentId === a.id
-										? $t('task.attachment.unsetAsCover')
-										: $t('task.attachment.setAsCover')
-								}}
+								<icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
 							</BaseButton>
 						</p>
 					</div>
@@ -425,6 +421,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .attachment-info-meta-button {
 	color: var(--link);
+	padding: 0 .25rem;
 }
 
 @keyframes bounce {

From 6543795755dd8b2bb13d49b25aeb2230860e0636 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 24 May 2024 12:47:15 +0200
Subject: [PATCH 15/20] Only allow cover if a preview is available

---
 frontend/src/components/tasks/partials/attachments.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 999015144..042a444cc 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -95,7 +95,7 @@
 								<icon icon="trash-alt" />
 							</BaseButton>
 							<BaseButton
-								v-if="editEnabled"
+								v-if="editEnabled && canPreview(a)"
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
 							>

From 680cb72f293e60b5c4b4290af4dd9140e6888d81 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 11:39:45 +0200
Subject: [PATCH 16/20] Make fallback icon grey

---
 .../tasks/partials/file-preview.vue           | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index 6cf953c3f..1512f3dd3 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -1,14 +1,21 @@
 <template>
+	<!-- Preview image -->
 	<img
 		v-if="blobUrl"
 		:src="blobUrl"
 		alt="Attachment preview"
 	>
-	<icon
+
+	<!-- Fallback -->
+	<div
 		v-else
-		size="6x"
-		icon="file-image"
-	/>
+		class="icon-wrapper"
+	>
+		<icon
+			size="6x"
+			icon="file-image"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -44,4 +51,8 @@ img {
 	border-radius: $radius;
 	object-fit: cover;
 }
+
+.icon-wrapper {
+	color: var(--grey-500);
+}
 </style>
\ No newline at end of file

From c2fc444bc002b8836968102592f13a3aa1adfec8 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 11:40:00 +0200
Subject: [PATCH 17/20] Use file fallback icon

---
 frontend/src/components/misc/Icon.ts                    | 2 ++
 frontend/src/components/tasks/partials/file-preview.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/misc/Icon.ts b/frontend/src/components/misc/Icon.ts
index 4e185f849..b105e271b 100644
--- a/frontend/src/components/misc/Icon.ts
+++ b/frontend/src/components/misc/Icon.ts
@@ -31,6 +31,7 @@ import {
 	faExclamation,
 	faEye,
 	faEyeSlash,
+	faFile,
 	faFileImage,
 	faFillDrip,
 	faFilter,
@@ -104,6 +105,7 @@ library.add(faUnlink)
 library.add(faParagraph)
 library.add(faSquareCheck)
 library.add(faTable)
+library.add(faFile)
 library.add(faFileImage)
 library.add(faCheckSquare)
 library.add(faStrikethrough)
diff --git a/frontend/src/components/tasks/partials/file-preview.vue b/frontend/src/components/tasks/partials/file-preview.vue
index 1512f3dd3..7e2fd9a63 100644
--- a/frontend/src/components/tasks/partials/file-preview.vue
+++ b/frontend/src/components/tasks/partials/file-preview.vue
@@ -13,7 +13,7 @@
 	>
 		<icon
 			size="6x"
-			icon="file-image"
+			icon="file"
 		/>
 	</div>
 </template>

From 8b066bf0e93eebba1539472f9a13a6bd2781af1f Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 11:43:32 +0200
Subject: [PATCH 18/20] Add cover tooltips

---
 frontend/src/components/tasks/partials/attachments.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 042a444cc..ff2a25305 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -96,6 +96,9 @@
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled && canPreview(a)"
+								v-tooltip="task.coverImageAttachmentId === a.id
+									? $t('task.attachment.unsetAsCover')
+									: $t('task.attachment.setAsCover')"
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
 							>

From 4eb0df256c389b5e40da31c1777952c26071e640 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 12:06:23 +0200
Subject: [PATCH 19/20] Improve preview spacing

---
 .../src/components/tasks/partials/attachments.vue  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index ff2a25305..9cbed8eb9 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -39,7 +39,7 @@
 						:model-value="a"
 					/>
 				</div>
-				<div>
+				<div class="attachment-info-column">
 					<div class="filename">
 						{{ a.file.name }}
 						<span
@@ -311,7 +311,6 @@ async function setCoverImage(attachment: IAttachment | null) {
 	grid-template-columns: 9rem 1fr;
 	align-items: center;
 	
-	margin-bottom: .5rem;
 	padding: .5rem;
 	
 	transition: background-color $transition;
@@ -336,6 +335,8 @@ async function setCoverImage(attachment: IAttachment | null) {
 .info {
 	color: var(--grey-500);
 	font-size: .9rem;
+	display: flex;
+	flex-direction: column;
 
 	p {
 		margin-bottom: 0;
@@ -393,6 +394,12 @@ async function setCoverImage(attachment: IAttachment | null) {
 	}
 }
 
+.attachment-info-column {
+	display: flex;
+	flex-flow: column wrap;
+	align-self: start;
+}
+
 .attachment-info-meta {
 	display: flex;
 	align-items: center;
@@ -455,10 +462,11 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .preview-column {
 	max-width: 8rem;
+	height: 5.2rem;
 }
 
 .attachment-preview {
-	max-height: 4rem;
+	height: 100%;
 }
 
 .is-task-cover {

From aba045ff245ced67fa865b0c1cd0904c8b6dcb24 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 13:45:26 +0200
Subject: [PATCH 20/20] Set attachment width to 100%

---
 frontend/src/components/tasks/partials/attachments.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 9cbed8eb9..5c6be0fe8 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -310,6 +310,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	display: grid;
 	grid-template-columns: 9rem 1fr;
 	align-items: center;
+	width: 100%;
 	
 	padding: .5rem;