From 000a1e8a33ac3f1dea00ca21aac0f1771a0325f0 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 20 Feb 2025 16:09:08 +0100
Subject: frontend: Rework and improve accelerators

This commit switches around a couple of existing accelerators to make
them easier to activate with just the left hand on the keyboard and more
easily allow the addition of accelerators for all filter fields.
---
 frontend/src/lib/filter/ComicFilterForm.svelte   | 43 +++++++++++++-----------
 frontend/src/lib/filter/TagFilterForm.svelte     |  7 ++--
 frontend/src/lib/filter/components/Filter.svelte |  6 ++--
 3 files changed, 33 insertions(+), 23 deletions(-)

(limited to 'frontend/src/lib/filter')

diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte
index 331d571..4c6e2d2 100644
--- a/frontend/src/lib/filter/ComicFilterForm.svelte
+++ b/frontend/src/lib/filter/ComicFilterForm.svelte
@@ -2,6 +2,7 @@
 	import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries';
 	import { categories, censorships, languages, ratings } from '$lib/Enums';
 	import { ComicFilterContext } from '$lib/Filter.svelte';
+	import { accelerator } from '$lib/Shortcuts';
 	import { getContextClient } from '@urql/svelte';
 	import Filter from './components/Filter.svelte';
 	import FilterForm from './components/FilterForm.svelte';
@@ -21,38 +22,42 @@
 	let characters = $derived($charactersQuery.data?.characters.edges);
 	let circles = $derived($circlesQuery.data?.circles.edges);
 	let worlds = $derived($worldsQuery.data?.worlds.edges);
+
+	let inc = $derived(filter.include);
+	let exc = $derived(filter.exclude);
 </script>
 
 <FilterForm type="grid" apply={filter.apply}>
 	{#snippet include(type)}
-		<Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} />
-		<Filter {type} title="Artists" options={artists} filter={filter.include.artists} />
-		<Filter {type} title="Circles" options={circles} filter={filter.include.circles} />
-		<Filter {type} title="Characters" options={characters} filter={filter.include.characters} />
-		<Filter {type} title="Worlds" options={worlds} filter={filter.include.worlds} />
-		<Filter {type} title="Categories" options={categories} filter={filter.include.categories} />
-		<Filter {type} title="Ratings" options={ratings} filter={filter.include.ratings} />
-		<Filter {type} title="Censorship" options={censorships} filter={filter.include.censorships} />
-		<Filter {type} title="Languages" options={languages} filter={filter.include.languages} />
+		<Filter {type} wide title="Tags" options={tags} filter={inc.tags} accel="it" />
+		<Filter {type} title="Artists" options={artists} filter={inc.artists} accel="ia" />
+		<Filter {type} title="Circles" options={circles} filter={inc.circles} accel="ii" />
+		<Filter {type} title="Characters" options={characters} filter={inc.characters} accel="ih" />
+		<Filter {type} title="Worlds" options={worlds} filter={inc.worlds} accel="iw" />
+		<Filter {type} title="Categories" options={categories} filter={inc.categories} accel="ig" />
+		<Filter {type} title="Ratings" options={ratings} filter={inc.ratings} accel="ir" />
+		<Filter {type} title="Censorship" options={censorships} filter={inc.censorships} accel="is" />
+		<Filter {type} title="Languages" options={languages} filter={inc.languages} accel="il" />
 		<div class="flex flex-col">
 			<label for="include-url">URL</label>
 			<input
+				use:accelerator={'iu'}
 				id="include-url"
 				class="h-full"
 				placeholder="Search..."
-				bind:value={filter.include.url.contains}
+				bind:value={inc.url.contains}
 			/>
 		</div>
 	{/snippet}
 	{#snippet exclude(type)}
-		<Filter {type} wide title="Tags" options={tags} filter={filter.exclude.tags} />
-		<Filter {type} title="Artists" options={artists} filter={filter.exclude.artists} />
-		<Filter {type} title="Circles" options={circles} filter={filter.exclude.circles} />
-		<Filter {type} title="Characters" options={characters} filter={filter.exclude.characters} />
-		<Filter {type} title="Worlds" options={worlds} filter={filter.exclude.worlds} />
-		<Filter {type} title="Categories" options={categories} filter={filter.exclude.categories} />
-		<Filter {type} title="Ratings" options={ratings} filter={filter.exclude.ratings} />
-		<Filter {type} title="Censorship" options={censorships} filter={filter.exclude.censorships} />
-		<Filter {type} title="Languages" options={languages} filter={filter.exclude.languages} />
+		<Filter {type} wide title="Tags" options={tags} filter={exc.tags} accel="et" />
+		<Filter {type} title="Artists" options={artists} filter={exc.artists} accel="ea" />
+		<Filter {type} title="Circles" options={circles} filter={exc.circles} accel="ei" />
+		<Filter {type} title="Characters" options={characters} filter={exc.characters} accel="eh" />
+		<Filter {type} title="Worlds" options={worlds} filter={exc.worlds} accel="ew" />
+		<Filter {type} title="Categories" options={categories} filter={exc.categories} accel="eg" />
+		<Filter {type} title="Ratings" options={ratings} filter={exc.ratings} accel="er" />
+		<Filter {type} title="Censorship" options={censorships} filter={exc.censorships} accel="es" />
+		<Filter {type} title="Languages" options={languages} filter={exc.languages} accel="el" />
 	{/snippet}
 </FilterForm>
diff --git a/frontend/src/lib/filter/TagFilterForm.svelte b/frontend/src/lib/filter/TagFilterForm.svelte
index 1ca1a2d..c514163 100644
--- a/frontend/src/lib/filter/TagFilterForm.svelte
+++ b/frontend/src/lib/filter/TagFilterForm.svelte
@@ -11,13 +11,16 @@
 
 	let namespaceQuery = $derived(namespaceList(client));
 	let namespaces = $derived($namespaceQuery.data?.namespaces.edges);
+
+	let inc = $derived(filter.include);
+	let exc = $derived(filter.exclude);
 </script>
 
 <FilterForm apply={filter.apply}>
 	{#snippet include(type)}
-		<Filter {type} title="Namespaces" options={namespaces} filter={filter.include.namespaces} />
+		<Filter {type} title="Namespaces" options={namespaces} filter={inc.namespaces} accel="in" />
 	{/snippet}
 	{#snippet exclude(type)}
-		<Filter {type} title="Namespaces" options={namespaces} filter={filter.exclude.namespaces} />
+		<Filter {type} title="Namespaces" options={namespaces} filter={exc.namespaces} accel="en" />
 	{/snippet}
 </FilterForm>
diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte
index 832ac19..4ebbd7f 100644
--- a/frontend/src/lib/filter/components/Filter.svelte
+++ b/frontend/src/lib/filter/components/Filter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Association, Enum, type FilterType } from '$lib/Filter.svelte';
+	import { accelerator, type Shortcut } from '$lib/Shortcuts';
 	import type { ListItem } from '$lib/Utils';
 	import Select from '$lib/components/Select.svelte';
 
@@ -8,10 +9,11 @@
 		type: FilterType;
 		options: ListItem[] | undefined;
 		filter: Association<string> | Enum<string>;
+		accel: Shortcut;
 		wide?: boolean;
 	}
 
-	let { title, type, options, filter, wide = false }: Props = $props();
+	let { title, type, options, filter, accel, wide = false }: Props = $props();
 	let exclude = $derived(type === 'exclude');
 
 	const id = `${type}-${title.toLowerCase()}`;
@@ -19,7 +21,7 @@
 
 <div class:exclude class:wide class="[&.wide]:col-span-2">
 	<div class="flex gap-2">
-		<label for={id}>{title}</label>
+		<label use:accelerator={accel} for={id}>{title}</label>
 		<div class="ml-auto flex items-center gap-1 self-center text-xs">
 			{#if filter instanceof Association}
 				<button
-- 
cgit v1.2.3-2-gb3c3