frontend/src/views/list/settings/archive.vue

<template>
	<modal
		@close="$router.back()"
		@submit="listStore.toggleArchiveList(list)"
	>
		<template #header>
			<span>{{
				list.isArchived
					? $t('list.archive.unarchive')
					: $t('list.archive.archive')
			}}</span>
		</template>
		
		<template #text>
			<p>{{
				list.isArchived
					? $t('list.archive.unarchiveText')
					: $t('list.archive.archiveText')
			}}</p>
		</template>
	</modal>
</template>

<script lang="ts">
export default {name: 'list-setting-archive'}
</script>

<script setup lang="ts">
import {useI18n} from 'vue-i18n'

import {useTitle} from '@/composables/useTitle'

import {useList, useListStore} from '@/stores/lists'
import type {IList} from '@/modelTypes/IList'

const {listId} = defineProps<{
	listId: IList['id']
}>()

const {t} = useI18n({useScope: 'global'})

const listStore = useListStore()
const {list} = useList(listId)

useTitle(() => t('list.archive.title', {list: list.value.title}))
</script>