feat(list): add info dialoge to show list description (#2368)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2368
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/views/list/ListInfo.vue

@@ -0,0 +1,42 @@
+<template>
+	<modal
+		@close="$router.back()"
+	>
+		<card
+			:title="list.title"
+		>
+			<div class="has-text-left" v-html="htmlDescription" v-if="htmlDescription !== ''"></div>
+			<p v-else class="is-italic">
+				{{ $t('list.noDescriptionAvailable') }}
+			</p>
+		</card>
+	</modal>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue'
+import {useStore} from '@/store'
+import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
+import {marked} from 'marked'
+import DOMPurify from 'dompurify'
+import {createRandomID} from '@/helpers/randomId'
+
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+})
+
+const store = useStore()
+const list = computed(() => store.getters['lists/getListById'](props.listId))
+const htmlDescription = computed(() => {
+	const description = list.value?.description || ''
+	if (description === '') {
+		return ''
+	}
+
+	setupMarkdownRenderer(createRandomID())
+	return DOMPurify.sanitize(marked(description), {ADD_ATTR: ['target']})
+})
+</script>