From 3d88fdaaddca15b98efa938f0b2813420d56ad84 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Oct 2022 13:01:29 +0200
Subject: [PATCH 01/10] feat: add display of kanban card attachment image

---
 src/components/tasks/partials/attachments.vue |   5 +-
 src/components/tasks/partials/kanban-card.vue | 134 +++++++++++-------
 src/modelTypes/ITask.ts                       |   6 +-
 src/models/attachment.ts                      |   2 +
 4 files changed, 91 insertions(+), 56 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 5b70d84b..70d6b049 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -145,6 +145,7 @@ import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import type AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {ITask} from '@/modelTypes/ITask'
@@ -223,10 +224,8 @@ async function deleteAttachment() {
 }
 
 const attachmentImageBlobUrl = ref<string | null>(null)
-const SUPPORTED_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
-
 async function viewOrDownload(attachment: AttachmentModel) {
-	if (SUPPORTED_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 1ee64f36..af16719e 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -11,62 +11,70 @@
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
-		<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
-			<template v-if="task.identifier === ''">
-				#{{ task.index }}
-			</template>
-			<template v-else>
-				{{ task.identifier }}
-			</template>
-		</span>
-		<span
-			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-			class="due-date"
-			v-if="task.dueDate > 0"
-			v-tooltip="formatDateLong(task.dueDate)">
-			<span class="icon">
-				<icon :icon="['far', 'calendar-alt']"/>
+		<img
+			v-if="coverImageBlobUrl"
+			:src="coverImageBlobUrl"
+			alt=""
+			class="cover-image"
+		/>
+		<div class="p-2">
+			<span class="task-id">
+				<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
+				<template v-if="task.identifier === ''">
+					#{{ task.index }}
+				</template>
+				<template v-else>
+					{{ task.identifier }}
+				</template>
 			</span>
-			<time :datetime="formatISO(task.dueDate)">
-				{{ formatDateSince(task.dueDate) }}
-			</time>
-		</span>
-		<h3>{{ task.title }}</h3>
-		<progress
-			class="progress is-small"
-			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100">
-			{{ task.percentDone * 100 }}%
-		</progress>
-		<div class="footer">
-			<labels :labels="task.labels"/>
-			<priority-label :priority="task.priority" :done="task.done"/>
-			<div class="assignees" v-if="task.assignees.length > 0">
-				<user
-					v-for="u in task.assignees"
-					:avatar-size="24"
-					:key="task.id + 'assignee' + u.id"
-					:show-username="false"
-					:user="u"
-				/>
+			<span
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				class="due-date"
+				v-if="task.dueDate > 0"
+				v-tooltip="formatDateLong(task.dueDate)">
+				<span class="icon">
+					<icon :icon="['far', 'calendar-alt']"/>
+				</span>
+				<time :datetime="formatISO(task.dueDate)">
+					{{ formatDateSince(task.dueDate) }}
+				</time>
+			</span>
+			<h3>{{ task.title }}</h3>
+			<progress
+				class="progress is-small"
+				v-if="task.percentDone > 0"
+				:value="task.percentDone * 100" max="100">
+				{{ task.percentDone * 100 }}%
+			</progress>
+			<div class="footer">
+				<labels :labels="task.labels"/>
+				<priority-label :priority="task.priority" :done="task.done"/>
+				<div class="assignees" v-if="task.assignees.length > 0">
+					<user
+						v-for="u in task.assignees"
+						:avatar-size="24"
+						:key="task.id + 'assignee' + u.id"
+						:show-username="false"
+						:user="u"
+					/>
+				</div>
+				<checklist-summary :task="task"/>
+				<span class="icon" v-if="task.attachments.length > 0">
+					<icon icon="paperclip"/>	
+				</span>
+				<span v-if="task.description" class="icon">
+					<icon icon="align-left"/>
+				</span>
+				<span class="icon" v-if="task.repeatAfter.amount > 0">
+					<icon icon="history"/>
+				</span>
 			</div>
-			<checklist-summary :task="task"/>
-			<span class="icon" v-if="task.attachments.length > 0">
-				<icon icon="paperclip"/>	
-			</span>
-			<span v-if="task.description" class="icon">
-				<icon icon="align-left"/>
-			</span>
-			<span class="icon" v-if="task.repeatAfter.amount > 0">
-				<icon icon="history"/>
-			</span>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {ref, computed} from 'vue'
+import {ref, computed, watch} from 'vue'
 import {useRouter} from 'vue-router'
 
 import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
@@ -77,6 +85,8 @@ import ChecklistSummary from './checklist-summary.vue'
 
 import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -114,6 +124,29 @@ function openTaskDetail() {
 		state: {backdropView: router.currentRoute.value.fullPath},
 	})
 }
+
+const coverImageBlobUrl = ref<string | null>(null)
+
+async function maybeDownloadCoverImage() {
+	if (!props.task.coverImageAttachmentId) {
+		return
+	}
+
+	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
+	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+		console.log('not an attachment')
+		return
+	}
+
+	const attachmentService = new AttachmentService()
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+}
+
+watch(
+	() => props.task.coverImageAttachmentId,
+	maybeDownloadCoverImage,
+	{immediate: true},
+)
 </script>
 
 <style lang="scss" scoped>
@@ -125,12 +158,11 @@ $task-background: var(--white);
 	cursor: pointer;
 	box-shadow: var(--shadow-xs);
 	display: block;
-	border: 3px solid transparent;
 
 	font-size: .9rem;
-	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;
+	overflow: hidden;
 
 	&.loader-container.is-loading::after {
 		width: 1.5rem;
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index 6616a680..4bfb23fa 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -1,4 +1,4 @@
-import type { Priority } from '@/constants/priorities'
+import type {Priority} from '@/constants/priorities'
 
 import type {IAbstract} from './IAbstract'
 import type {IUser} from './IUser'
@@ -11,6 +11,7 @@ import type {IBucket} from './IBucket'
 import type {IRelationKind} from '@/types/IRelationKind'
 import type {IRepeatAfter} from '@/types/IRepeatAfter'
 import type {IRepeatMode} from '@/types/IRepeatMode'
+
 export interface ITask extends IAbstract {
 	id: number
 	title: string
@@ -31,8 +32,9 @@ export interface ITask extends IAbstract {
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
-	relatedTasks: Partial<Record<IRelationKind, ITask[]>>,
+	relatedTasks: Partial<Record<IRelationKind, ITask[]>>
 	attachments: IAttachment[]
+	coverImageAttachmentId: IAttachment['id']
 	identifier: string
 	index: number
 	isFavorite: boolean
diff --git a/src/models/attachment.ts b/src/models/attachment.ts
index 29862b49..409f031c 100644
--- a/src/models/attachment.ts
+++ b/src/models/attachment.ts
@@ -5,6 +5,8 @@ import type { IUser } from '@/modelTypes/IUser'
 import type { IFile } from '@/modelTypes/IFile'
 import type { IAttachment } from '@/modelTypes/IAttachment'
 
+export const SUPPORTED_IMAGE_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
+
 export default class AttachmentModel extends AbstractModel<IAttachment> implements IAttachment {
 	id = 0
 	taskId = 0

From 054d70cbe5344e39d0e5f277a7db2f26573e1efa Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Oct 2022 13:39:53 +0200
Subject: [PATCH 02/10] fix: unset cover image when the task does not have one

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

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index af16719e..4bf4fa47 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -129,12 +129,12 @@ const coverImageBlobUrl = ref<string | null>(null)
 
 async function maybeDownloadCoverImage() {
 	if (!props.task.coverImageAttachmentId) {
+		coverImageBlobUrl.value = null
 		return
 	}
 
 	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
 	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
-		console.log('not an attachment')
 		return
 	}
 

From 877e4250554b31db2d57f44a7443c5d04c783e59 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Oct 2022 13:40:39 +0200
Subject: [PATCH 03/10] feat: promote an attachment to task cover image

---
 src/components/tasks/partials/attachments.vue | 68 +++++++++++++------
 src/i18n/lang/en.json                         |  5 +-
 src/views/tasks/TaskDetailView.vue            |  5 +-
 3 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 70d6b049..016f5c11 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -9,7 +9,7 @@
 
 		<input
 			v-if="editEnabled"
-			:disabled="attachmentService.loading || undefined"
+			:disabled="loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
@@ -78,6 +78,13 @@
 						>
 							{{ $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>
@@ -85,7 +92,7 @@
 
 		<x-button
 			v-if="editEnabled"
-			:disabled="attachmentService.loading"
+			:disabled="loading"
 			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
@@ -118,7 +125,7 @@
 			<template #header>
 				<span>{{ $t('task.attachment.delete') }}</span>
 			</template>
-			
+
 			<template #text>
 				<p>
 					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
@@ -156,38 +163,44 @@ import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
 import {getHumanSize} from '@/helpers/getHumanSize'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
-	taskId: {
-		type: Number as PropType<ITask['id']>,
-		required: true,
-	},
-	initialAttachments: {
-		type: Array,
-	},
-	editEnabled: {
-		default: true,
-	},
+const taskStore = useTaskStore()
+const {t} = useI18n()
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	initialAttachments?: IAttachment[],
+	editEnabled: boolean,
+}>(), {
+	editEnabled: true,
 })
 
+// FIXME: this should go through the store
+const emit = defineEmits(['task-changed'])
+
 const attachmentService = shallowReactive(new AttachmentService())
 
 const attachmentStore = useAttachmentStore()
 const attachments = computed(() => attachmentStore.attachments)
 
+const loading = computed(() => attachmentService.loading || taskStore.isLoading)
+
 function onDrop(files: File[] | null) {
 	if (files && files.length !== 0) {
 		uploadFilesToTask(files)
 	}
 }
 
-const { isOverDropZone } = useDropZone(document, onDrop)
+const {isOverDropZone} = useDropZone(document, onDrop)
 
 function downloadAttachment(attachment: IAttachment) {
 	attachmentService.download(attachment)
 }
 
 const filesRef = ref<HTMLInputElement | null>(null)
+
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -199,7 +212,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.taskId, files)
+	uploadFiles(attachmentService, props.task.id, files)
 }
 
 const attachmentToDelete = ref<AttachmentModel | null>(null)
@@ -218,14 +231,15 @@ async function deleteAttachment() {
 		attachmentStore.removeById(attachmentToDelete.value.id)
 		success(r)
 		setAttachmentToDelete(null)
-	} catch(e) {
+	} catch (e) {
 		error(e)
 	}
 }
 
 const attachmentImageBlobUrl = ref<string | null>(null)
+
 async function viewOrDownload(attachment: AttachmentModel) {
-	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
@@ -233,8 +247,18 @@ async function viewOrDownload(attachment: AttachmentModel) {
 }
 
 const copy = useCopyToClipboard()
+
 function copyUrl(attachment: IAttachment) {
-	copy(generateAttachmentUrl(props.taskId, attachment.id))
+	copy(generateAttachmentUrl(props.task.id, attachment.id))
+}
+
+async function setCoverImage(attachment: IAttachment | null) {
+	const task = await taskStore.update({
+		...props.task,
+		coverImageAttachmentId: attachment ? attachment.id : 0,
+	})
+	emit('task-changed', task)
+	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>
 
@@ -315,7 +339,7 @@ function copyUrl(attachment: IAttachment) {
 			height: auto;
 			text-shadow: var(--shadow-md);
 			animation: bounce 2s infinite;
-	
+
 			@media (prefers-reduced-motion: reduce) {
 				animation: none;
 			}
@@ -337,7 +361,7 @@ function copyUrl(attachment: IAttachment) {
 .attachment-info-meta {
 	display: flex;
 	align-items: center;
-	
+
 	:deep(.user) {
 		display: flex !important;
 		align-items: center;
@@ -347,7 +371,7 @@ function copyUrl(attachment: IAttachment) {
 	@media screen and (max-width: $mobile) {
 		flex-direction: column;
 		align-items: flex-start;
-		
+
 		:deep(.user) {
 			margin: .5rem 0;
 		}
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 4674f6e8..d1c14d95 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -693,7 +693,10 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Set as cover image",
+      "unsetAsCover": "Unset as cover image",
+      "successfullyChangedCoverImage": "The cover image was successfully changed."
     },
     "comment": {
       "title": "Comments",
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 345fa654..434cb9ed 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -218,7 +218,8 @@
 					<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
 						<attachments
 							:edit-enabled="canWrite"
-							:task-id="taskId"
+							:task="task"
+							@task-changed="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId"
 							ref="attachments"
 						/>
 					</div>
@@ -500,7 +501,7 @@ const attachmentStore = useAttachmentStore()
 const taskStore = useTaskStore()
 const kanbanStore = useKanbanStore()
 
-const task = reactive(new TaskModel())
+const task = reactive<ITask>(new TaskModel())
 useTitle(toRef(task, 'title'))
 
 // We doubled the task color property here because verte does not have a real change property, leading

From 43258ab74e0733e91be3ade1f0b13dcf9342cc18 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Oct 2022 13:58:50 +0200
Subject: [PATCH 04/10] fix: lint

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

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 016f5c11..2bcfd80f 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -145,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, type PropType} from 'vue'
+import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'

From eb80bfa00de891ee12643d664e8610d1f3bc851f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 3 Oct 2022 15:20:13 +0200
Subject: [PATCH 05/10] chore: add line-wrap

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

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 2bcfd80f..652cba92 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -83,7 +83,11 @@
 							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')  }}
+							{{ 
+								task.coverImageAttachmentId === a.id
+									? $t('task.attachment.unsetAsCover')
+									: $t('task.attachment.setAsCover')
+							}}
 						</BaseButton>
 					</p>
 				</div>

From fad72e091b22f67a46d5f1bd378f01cc921d3456 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 3 Oct 2022 15:20:50 +0200
Subject: [PATCH 06/10] chore(i18n): use global scope

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

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 652cba92..530fe50b 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -171,7 +171,7 @@ import {useTaskStore} from '@/stores/tasks'
 import {useI18n} from 'vue-i18n'
 
 const taskStore = useTaskStore()
-const {t} = useI18n()
+const {t} = useI18n({useScope: 'global'})
 
 const props = withDefaults(defineProps<{
 	task: ITask,

From ee3965eae9f2210a5f397d81327128d36b22b751 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 3 Oct 2022 15:23:34 +0200
Subject: [PATCH 07/10] chore(task): move cover image setter to store

---
 src/components/tasks/partials/attachments.vue | 7 ++-----
 src/stores/tasks.ts                           | 7 +++++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 530fe50b..0dd18c0f 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -83,7 +83,7 @@
 							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')
@@ -257,10 +257,7 @@ function copyUrl(attachment: IAttachment) {
 }
 
 async function setCoverImage(attachment: IAttachment | null) {
-	const task = await taskStore.update({
-		...props.task,
-		coverImageAttachmentId: attachment ? attachment.id : 0,
-	})
+	const task = await taskStore.setCoverImage(props.task, attachment)
 	emit('task-changed', task)
 	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 2ed93259..806635d0 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -409,6 +409,13 @@ export const useTaskStore = defineStore('task', {
 				cancel()
 			}
 		},
+		
+		async setCoverImage(task: ITask, attachment: IAttachment | null) {
+			return this.update({
+				...task,
+				coverImageAttachmentId: attachment ? attachment.id : 0,
+			})
+		}
 	},
 })
 

From 84a1abf3477abbbee136979bd0bde08ae6c54ceb Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 3 Oct 2022 15:37:54 +0200
Subject: [PATCH 08/10] fix: lint

---
 src/stores/tasks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 806635d0..632b1d13 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -415,7 +415,7 @@ export const useTaskStore = defineStore('task', {
 				...task,
 				coverImageAttachmentId: attachment ? attachment.id : 0,
 			})
-		}
+		},
 	},
 })
 

From a7731370a0bcdd8a393036a617dd1953cd39f5df Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 3 Oct 2022 22:30:39 +0200
Subject: [PATCH 09/10] chore: better wording for cover set button

---
 src/i18n/lang/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index d1c14d95..2a8615b8 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -694,8 +694,8 @@
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
       "copyUrlTooltip": "Copy the url of this attachment for usage in text",
-      "setAsCover": "Set as cover image",
-      "unsetAsCover": "Unset as cover image",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
       "successfullyChangedCoverImage": "The cover image was successfully changed."
     },
     "comment": {

From f01107fd737e2205bf60498b3d2954a251c3d9d4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 5 Oct 2022 15:04:03 +0200
Subject: [PATCH 10/10] feat: add indicator if an attachment is task cover

---
 src/components/tasks/partials/attachments.vue | 18 +++++++++++++++++-
 src/i18n/lang/en.json                         |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 0dd18c0f..1880e851 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -35,7 +35,15 @@
 				:key="a.id"
 				@click="viewOrDownload(a)"
 			>
-				<div class="filename">{{ a.file.name }}</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">
@@ -418,5 +426,13 @@ async function setCoverImage(attachment: IAttachment | null) {
 	}
 }
 
+.is-task-cover {
+	background: var(--primary);
+	color: var(--white);
+	padding: .25rem .35rem;
+	border-radius: 4px;
+	font-size: .75rem;
+}
+
 @include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 2a8615b8..780ce3b7 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -696,7 +696,8 @@
       "copyUrlTooltip": "Copy the url of this attachment for usage in text",
       "setAsCover": "Make cover",
       "unsetAsCover": "Remove cover",
-      "successfullyChangedCoverImage": "The cover image was successfully changed."
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",