<script lang="ts" setup> const { userId } = defineProps<{ userId: string }>() const { client } = useMasto() const paginator = client.value.v1.lists.list() const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id)) function indexOfUserInList(listId: string) { return listsWithUser.value.indexOf(listId) } async function edit(listId: string) { try { const index = indexOfUserInList(listId) if (index === -1) { await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] }) listsWithUser.value.push(listId) } else { await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] }) listsWithUser.value = listsWithUser.value.filter(id => id !== listId) } } catch (err) { console.error(err) } } </script> <template> <CommonPaginator :end-message="false" :paginator="paginator"> <template #default="{ item }"> <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4> <p>{{ item.title }}</p> <CommonTooltip :content="indexOfUserInList(item.id) === -1 ? $t('list.add_account') : $t('list.remove_account')" :hover="indexOfUserInList(item.id) === -1 ? 'text-green' : 'text-red'" > <button text-sm p2 border-1 transition-colors border-dark btn-action-icon @click="() => edit(item.id)" > <span :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" /> </button> </CommonTooltip> </div> </template> </CommonPaginator> </template>