Initial commit0.1.0

1 files changed, 57 insertions, 0 deletions

diff --git a/frontend/src/lib/toolbar/SelectionControls.svelte b/frontend/src/lib/toolbar/SelectionControls.svelte
new file mode 100644
index 0000000..4d309df
--- /dev/null
+++ b/frontend/src/lib/toolbar/SelectionControls.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { getSelectionContext } from '$lib/Selection';
+	import { accelerator } from '$lib/Shortcuts';
+	import { fadeDefault, slideXFast } from '$lib/Transitions';
+	import Badge from '$lib/components/Badge.svelte';
+	import { onDestroy } from 'svelte';
+	import { fade, slide } from 'svelte/transition';
+
+	const selection = getSelectionContext();
+
+	export let page = false;
+
+	const toggle = () => ($selection = $selection.toggle());
+	const all = () => ($selection = $selection.all());
+	const none = () => ($selection = $selection.none());
+
+	onDestroy(() => ($selection = $selection.clear()));
+</script>
+
+<div class="rounded-group flex">
+	<button
+		type="button"
+		class="btn-slate relative"
+		class:toggled={$selection.active}
+		title={`${$selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`}
+		on:click={toggle}
+		use:accelerator={'s'}
+	>
+		{#if $selection.active}
+			{#if page}
+				<span class="icon-base icon-[material-symbols--edit-document]" />
+			{:else}
+				<span class="icon-base icon-[material-symbols--remove-selection]" />
+			{/if}
+		{:else if page}
+			<span class="icon-base icon-[material-symbols--edit-document-outline]" />
+		{:else}
+			<span class="icon-base icon-[material-symbols--select]" />
+		{/if}
+		<Badge number={$selection.size} />
+	</button>
+	{#if $selection.active}
+		<div class="rounded-group-end flex" transition:slide={slideXFast}>
+			<button type="button" class="btn-slate" title="Select all" on:click={all}>
+				<span class="icon-base icon-[material-symbols--select-all]" />
+			</button>
+			<button type="button" class="btn-slate" title="Select none" on:click={none}>
+				<span class="icon-base icon-[material-symbols--deselect]" />
+			</button>
+		</div>
+	{/if}
+</div>
+{#if $selection.size > 0}
+	<div class="rounded-group flex" transition:fade={fadeDefault}>
+		<slot />
+	</div>
+{/if}