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

<template>
	<create-edit
		:title="$t('list.share.header')"
		:has-primary-action="false"
	>
		<template v-if="list">
			<userTeam
				:id="list.id"
				:userIsAdmin="userIsAdmin"
				shareType="user"
				type="list"
			/>
			<userTeam
				:id="list.id"
				:userIsAdmin="userIsAdmin"
				shareType="team"
				type="list"
			/>
		</template>

		<link-sharing
			v-if="linkSharingEnabled"
			class="mt-4"
			:list-id="listId"
		/>
	</create-edit>
</template>

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

<script lang="ts" setup>
import {computed} from 'vue'
import {useI18n} from 'vue-i18n'
import {useTitle} from '@vueuse/core'

import CreateEdit from '@/components/misc/create-edit.vue'
import LinkSharing from '@/components/sharing/linkSharing.vue'
import userTeam from '@/components/sharing/userTeam.vue'

import {useAuthStore} from '@/stores/auth'
import {useConfigStore} from '@/stores/config'

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

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

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

const {list} = useList(listId)

const title = computed(() => list.value?.title
	? t('list.share.title', {list: list.value.title})
	: '',
)
useTitle(title)

const configStore = useConfigStore()
const authStore = useAuthStore()

const linkSharingEnabled = computed(() => configStore.linkSharingEnabled)
const userIsAdmin = computed(() => list.value.owner.id === authStore.info?.id)
</script>