Initial commit0.1.0

1 files changed, 61 insertions, 0 deletions

diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte
new file mode 100644
index 0000000..fdcb057
--- /dev/null
+++ b/frontend/src/lib/toolbar/SelectSort.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { SortDirection } from '$gql/graphql';
+
+	import { getSortContext } from '$lib/Sort';
+	import { slideXFast } from '$lib/Transitions';
+	import { getRandomInt } from '$lib/Utils';
+	import { slide } from 'svelte/transition';
+
+	const sort = getSortContext();
+
+	function toggle() {
+		if ($sort.direction === SortDirection.Ascending) {
+			$sort.direction = SortDirection.Descending;
+		} else {
+			$sort.direction = SortDirection.Ascending;
+		}
+
+		apply();
+	}
+
+	function apply() {
+		if ($sort.on === 'RANDOM' && $sort.seed === undefined) {
+			$sort.seed = getRandomInt(0, 1000000000);
+		}
+		$sort.apply($page.url.searchParams);
+	}
+
+	function reshuffle() {
+		$sort.seed = undefined;
+		apply();
+	}
+</script>
+
+<div class="rounded-group flex flex-row">
+	<select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on...">
+		{#each Object.entries($sort.labels) as [value, label]}
+			<option {value}>{label}</option>
+		{/each}
+	</select>
+	<button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}>
+		{#if $sort.direction === SortDirection.Ascending}
+			<span class="icon-base icon-[material-symbols--sort] -scale-y-100" />
+		{:else}
+			<span class="icon-base icon-[material-symbols--sort]" />
+		{/if}
+	</button>
+	{#if $sort.on === 'RANDOM'}
+		<button
+			type="button"
+			class="btn-slate"
+			title="Reshuffle"
+			on:click={reshuffle}
+			transition:slide={slideXFast}
+		>
+			<div class="flex">
+				<span class="icon-base icon-[material-symbols--shuffle]" />
+			</div>
+		</button>
+	{/if}
+</div>