frontend/src/lib/toolbar/MarkBookmark.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script lang="ts">
	import { getSelectionContext } from '$lib/Selection';
	import { toastFinally } from '$lib/Toasts';
	import Bookmark from '$lib/icons/Bookmark.svelte';
	import { Client, getContextClient } from '@urql/svelte';

	const client = getContextClient();
	const selection = getSelectionContext();

	export let mutation: (
		client: Client,
		args: { ids: number[]; input: { bookmarked: boolean } }
	) => Promise<unknown>;

	function mutate(bookmarked: boolean) {
		mutation(client, { ids: $selection.ids, input: { bookmarked } }).catch(toastFinally);
	}
</script>

<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(true)}>
	<Bookmark bookmarked={true} />
	<span>Bookmark</span>
</button>
<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(false)}>
	<Bookmark bookmarked={false} />
	<span>Unbookmark</span>
</button>