feat(kanban): show project on kanban card if it's not the same as the current one

Resolves https://community.vikunja.io/t/feature-requests-regarding-view-ordering-project-reference-in-kanban-and-a-notin-operator/2728

frontend/src/components/project/views/ProjectKanban.vue

@@ -208,6 +208,7 @@
 												class="kanban-card"
 												:task="task"
 												:loading="taskUpdating[task.id] ?? false"
+												:project-id="projectId"
 											/>
 										</div>
 									</template>

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -19,19 +19,24 @@
 			class="tw-w-full"
 		>
 		<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>
+			<div class="task-id tw-flex tw-justify-between">
+				<div>
+					<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>
+				</div>
+				<div v-if="projectTitle">
+					{{ projectTitle }}
+				</div>
+			</div>
 			<span
 				v-if="task.dueDate > 0"
 				v-tooltip="formatDateLong(task.dueDate)"
@@ -104,6 +109,7 @@ import ChecklistSummary from './ChecklistSummary.vue'
 
 import {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import type {IProject} from '@/modelTypes/IProject'
 import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 
@@ -113,9 +119,11 @@ import {useTaskStore} from '@/stores/tasks'
 import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
 import {playPopSound} from '@/helpers/playPop'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
+import {useProjectStore} from '@/stores/projects'
 
 const props = withDefaults(defineProps<{
 	task: ITask,
+	projectId: IProject['id'],
 	loading: boolean,
 }>(), {
 	loading: false,
@@ -127,6 +135,17 @@ const loadingInternal = ref(false)
 
 const color = computed(() => getHexColor(props.task.hexColor))
 
+const projectStore = useProjectStore()
+
+const projectTitle = computed(() => {
+	if (props.projectId === props.task.projectId) {
+		return false
+	}
+	
+	const project = projectStore.projects[props.task.projectId]
+	return project?.title
+})
+
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
 	try {