fix: use list card grid

src/components/project/partials/ProjectCardGrid.vue

@@ -0,0 +1,77 @@
+<template>
+    <ul class="project-grid">
+			<li
+				v-for="(item, index) in filteredProjects"
+				:key="`project_${item.id}_${index}`"
+				class="project-grid-item"
+			>
+				<ProjectCard :project="item" />
+			</li>
+    </ul>
+</template>
+
+<script lang="ts" setup>
+import {computed, type PropType} from 'vue'
+import type {IProject} from '@/modelTypes/IProject'
+
+import ProjectCard from './ProjectCard.vue'
+
+const props = defineProps({
+	projects: {
+		type: Array as PropType<IProject[]>,
+		default: () => [],
+	},
+	showArchived: {
+		default: false,
+		type: Boolean,
+	},
+	itemLimit: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const filteredProjects = computed(() => {
+	return props.showArchived
+		? props.projects
+		: props.projects.filter(l => !l.isArchived)
+})
+</script>
+
+<style lang="scss" scoped>
+$project-height: 150px;
+$project-spacing: 1rem;
+
+.project-grid {
+	margin: 0; // reset li
+	project-style-type: none;
+	display: grid;
+	grid-template-columns: repeat(var(--project-columns), 1fr);
+	grid-auto-rows: $project-height;
+	gap: $project-spacing;
+
+	@media screen and (min-width: $mobile) {
+		--project-rows: 4;
+		--project-columns: 1;
+	}
+
+	@media screen and (min-width: $mobile) and (max-width: $tablet) {
+		--project-columns: 2;
+	}
+
+	@media screen and (min-width: $tablet) and (max-width: $widescreen) {
+		--project-columns: 3;
+		--project-rows: 3;
+	}
+
+	@media screen and (min-width: $widescreen) {
+		--project-columns: 5;
+		--project-rows: 2;
+	}
+}
+
+.project-grid-item {
+	display: grid;
+	margin-top: 0; // remove padding coming form .content li + li
+}
+</style>

src/components/project/partials/useProjectBackground.ts

@@ -0,0 +1,55 @@
+import {ref, watch, type Ref} from 'vue'
+import ProjectService from '@/services/project'
+import type {IProject} from '@/modelTypes/IProject'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
+
+export function useProjectBackground(project: Ref<IProject>) {
+	const background = ref<string | null>(null)
+	const backgroundLoading = ref(false)
+	const blurHashUrl = ref('')
+
+	watch(
+		() => [project.value.id, project.value.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+		async ([projectId, blurHash], oldValue) => {
+			if (
+				project.value === null ||
+				!project.value.backgroundInformation ||
+				backgroundLoading.value
+			) {
+				return
+			}
+
+			const [oldProjectId, oldBlurHash] = oldValue || []
+			if (
+				oldValue !== undefined &&
+				projectId === oldProjectId && blurHash === oldBlurHash
+			) {
+				// project hasn't changed
+				return
+			}
+
+			backgroundLoading.value = true
+
+			try {
+				const blurHashPromise = getBlobFromBlurHash(blurHash).then((blurHash) => {
+					blurHashUrl.value = blurHash ? window.URL.createObjectURL(blurHash) : ''
+				})
+
+				const projectService = new ProjectService()
+				const backgroundPromise = projectService.background(project.value).then((result) => {
+					background.value = result
+				})
+				await Promise.all([blurHashPromise, backgroundPromise])
+			} finally {
+				backgroundLoading.value = false
+			}
+		},
+		{immediate: true},
+	)
+
+	return {
+		background,
+		blurHashUrl,
+		backgroundLoading,
+	}
+}

src/views/Home.vue

@@ -40,7 +40,7 @@
 		</template>
 		<div v-if="projectHistory.length > 0" class="is-max-width-desktop has-text-left mt-4">
 			<h3>{{ $t('home.lastViewed') }}</h3>
-			<ListCardGrid :lists="listHistory" v-cy="'listCardGrid'" />
+			<ProjectCardGrid :projects="projectHistory" v-cy="'projectCardGrid'" />
 		</div>
 		<ShowTasks
 			v-if="hasProjects"
@@ -55,7 +55,7 @@ import {ref, computed} from 'vue'
 
 import Message from '@/components/misc/message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
-import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
+import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 import AddTask from '@/components/tasks/add-task.vue'
 
 import {getHistory} from '@/modules/projectHistory'

src/views/namespaces/ListNamespaces.vue

@@ -56,8 +56,8 @@
 				</BaseButton>
 			</p>
 
-			<ListCardGrid v-else 			
-				:lists="n.lists"
+			<ProjectCardGrid v-else 			
+				:projects="n.projects"
 				:show-archived="showArchived"
 			/>
 		</section>
@@ -70,7 +70,7 @@ import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
-import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
+import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {useTitle} from '@/composables/useTitle'

src/views/project/ProjectList.vue

@@ -133,7 +133,7 @@ import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import {ALPHABETICAL_SORT} from '@/components/project/partials/filters.vue'
 
-import {useTaskProject} from '@/composables/useTaskProject'
+import {useTaskList} from '@/composables/useTaskList'
 import {RIGHTS as Rights} from '@/constants/rights'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import type {ITask} from '@/modelTypes/ITask'
@@ -187,7 +187,7 @@ const {
 	searchTerm,
 	params,
 	sortByParam,
-} = useTaskProject(toRef(props, 'projectId'), {position: 'asc' })
+} = useTaskList(toRef(props, 'projectId'), {position: 'asc' })
 
 
 const isAlphabeticalSorting = computed(() => {