fix: ts errors in subscription

src/components/list/list-settings-dropdown.vue

@@ -56,6 +56,7 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
@@ -74,39 +75,32 @@
 	</dropdown>
 </template>
 
-<script>
+<script setup lang="ts">
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import ListModel from '@/models/list'
+import SubscriptionModel from '@/models/subscription'
 
-export default {
-	name: 'list-settings-dropdown',
-	data() {
-		return {
-			subscription: null,
-		}
+const props = defineProps({
+	list: {
+		type: ListModel,
+		required: true,
 	},
-	components: {
-		TaskSubscription,
-		DropdownItem,
-		Dropdown,
-	},
-	props: {
-		list: {
-			required: true,
-		},
-	},
-	mounted() {
-		this.subscription = this.list.subscription
-	},
-	computed: {
-		backgroundsEnabled() {
-			return this.$store.state.config.enabledBackgroundProviders?.length > 0
-		},
-		isSavedFilter() {
-			return getSavedFilterIdFromListId(this.list.id) > 0
-		},
-	},
-}
+})
+
+const subscription = ref<SubscriptionModel>()
+watchEffect(() => {
+	if (props.list.subscription) {
+		subscription.value = props.list.subscription
+	}
+})
+
+const store = useStore()
+const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
+const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
 </script>

src/components/misc/subscription.vue

@@ -1,19 +1,19 @@
 <template>
 	<x-button
+		v-if="isButton"
 		variant="secondary"
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:disabled="disabled || null"
-		v-if="isButton"
 	>
 		{{ buttonText }}
 	</x-button>
 	<a
+		v-else
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
-		v-else
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@@ -31,26 +31,15 @@ import SubscriptionModel from '@/models/subscription'
 
 import {success} from '@/message'
 
-const props = defineProps({
-	entity: {
-		required: true,
-		type: String,
-	},
-	subscription: {
-		required: true,
-		type: Object,
-		validator(value) {
-			return value instanceof SubscriptionModel || value === null
-		},
-	},
-	entityId: {
-		required: true,
-		type: Number,
-	},
-	isButton: {
-		type: Boolean,
-		default: true,
-	},
+interface Props {
+  entity: string
+  entityId: number
+  subscription: SubscriptionModel
+  isButton: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	isButton: true,
 })
 
 const subscriptionEntity = computed<string>(() => props.subscription.entity)

src/components/namespace/namespace-settings-dropdown.vue

@@ -34,6 +34,7 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="namespace"

src/views/tasks/TaskDetailView.vue

@@ -263,6 +263,7 @@
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
 						<task-subscription
+							v-if="subscription"
 							entity="task"
 							:entity-id="task.id"
 							:subscription="task.subscription"