11 files changed, 43 insertions, 14 deletions
diff --git a/frontend/src/lib/toolbar/FilterBookmarked.svelte b/frontend/src/lib/toolbar/FilterBookmarked.svelte
index 76403ec..44895c6 100644
--- a/frontend/src/lib/toolbar/FilterBookmarked.svelte
+++ b/frontend/src/lib/toolbar/FilterBookmarked.svelte
@@ -17,7 +17,7 @@
 <button
 	class:toggled={bookmarked}
 	class="btn-slate"
-	title="Filter bookmarked"
+	title="Toggle bookmarks"
 	onclick={toggle}
 	use:accelerator={'b'}
 >
diff --git a/frontend/src/lib/toolbar/FilterFavourites.svelte b/frontend/src/lib/toolbar/FilterFavourites.svelte
index 5e9beb7..cdb497c 100644
--- a/frontend/src/lib/toolbar/FilterFavourites.svelte
+++ b/frontend/src/lib/toolbar/FilterFavourites.svelte
@@ -16,7 +16,7 @@
 <button
 	class:toggled={favourite}
 	class="btn-slate"
-	title="Filter favourites"
+	title="Toggle favourites"
 	onclick={toggle}
 	use:accelerator={'f'}
 >
diff --git a/frontend/src/lib/toolbar/FilterOrganized.svelte b/frontend/src/lib/toolbar/FilterOrganized.svelte
index 0f95e5f..d01a4f0 100644
--- a/frontend/src/lib/toolbar/FilterOrganized.svelte
+++ b/frontend/src/lib/toolbar/FilterOrganized.svelte
@@ -22,9 +22,9 @@
 	type="button"
 	class:toggled={organized !== undefined}
 	class="btn-slate"
-	title="Filter organized"
+	title="Toggle organized"
 	onclick={toggle}
-	use:accelerator={'o'}
+	use:accelerator={'z'}
 >
 	<Organized tristate {organized} />
 </button>
diff --git a/frontend/src/lib/toolbar/FilterOrphaned.svelte b/frontend/src/lib/toolbar/FilterOrphaned.svelte
new file mode 100644
index 0000000..7e79be1
--- /dev/null
+++ b/frontend/src/lib/toolbar/FilterOrphaned.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { BasicFilterContext, NamespaceFilterContext } from '$lib/Filter.svelte';
+	import { accelerator } from '$lib/Shortcuts';
+	import Orphan from '$lib/icons/Orphan.svelte';
+
+	let { filter }: { filter: BasicFilterContext | NamespaceFilterContext } = $props();
+	let orphaned = $derived(filter.include.orphan.value);
+
+	const toggle = () => {
+		filter.include.orphan.value = !orphaned;
+		filter.apply(page.url.searchParams);
+	};
+</script>
+
+<button
+	class:toggled={orphaned}
+	class="btn-slate"
+	title="Filter orphaned"
+	onclick={toggle}
+	use:accelerator={'r'}
+>
+	<Orphan {orphaned} />
+</button>
diff --git a/frontend/src/lib/toolbar/MarkBookmark.svelte b/frontend/src/lib/toolbar/MarkBookmark.svelte
index 776ddd8..e9693fc 100644
--- a/frontend/src/lib/toolbar/MarkBookmark.svelte
+++ b/frontend/src/lib/toolbar/MarkBookmark.svelte
@@ -15,11 +15,11 @@
 	}
 </script>
 
-<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}>
+<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}>
 	<Bookmark bookmarked={true} />
 	<span>Bookmark</span>
 </button>
-<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}>
+<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}>
 	<Bookmark bookmarked={false} />
 	<span>Unbookmark</span>
 </button>
diff --git a/frontend/src/lib/toolbar/MarkOrganized.svelte b/frontend/src/lib/toolbar/MarkOrganized.svelte
index 63c8622..c526393 100644
--- a/frontend/src/lib/toolbar/MarkOrganized.svelte
+++ b/frontend/src/lib/toolbar/MarkOrganized.svelte
@@ -15,11 +15,11 @@
 	}
 </script>
 
-<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}>
+<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}>
 	<Organized tristate organized={true} />
 	<span>Organized</span>
 </button>
-<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}>
+<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}>
 	<Organized dim tristate organized={false} />
 	<span>Unorganized</span>
 </button>
diff --git a/frontend/src/lib/toolbar/Search.svelte b/frontend/src/lib/toolbar/Search.svelte
index 4806971..d5971bc 100644
--- a/frontend/src/lib/toolbar/Search.svelte
+++ b/frontend/src/lib/toolbar/Search.svelte
@@ -19,5 +19,5 @@
 	placeholder="Search {name}..."
 	bind:value={field}
 	use:debounce={{ callback: () => filter.apply(page.url.searchParams) }}
-	use:accelerator={'F'}
+	use:accelerator={'q'}
 />
diff --git a/frontend/src/lib/toolbar/SelectItems.svelte b/frontend/src/lib/toolbar/SelectItems.svelte
index 68a0652..ce8045e 100644
--- a/frontend/src/lib/toolbar/SelectItems.svelte
+++ b/frontend/src/lib/toolbar/SelectItems.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <select class="btn-slate" value={pagination.items} {onchange} title="Limit displayed items to...">
-	{#each values as value}
+	{#each values as value (value)}
 		<option {value}>{value}</option>
 	{/each}
 </select>
diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte
index 0e59df6..cbcbd0e 100644
--- a/frontend/src/lib/toolbar/SelectSort.svelte
+++ b/frontend/src/lib/toolbar/SelectSort.svelte
@@ -40,8 +40,8 @@
 </script>
 
 <div class="rounded-group flex flex-row">
-	<select class="btn-slate" value={sort.on} {onchange} title="Sort on...">
-		{#each Object.entries(labels) as [value, label]}
+	<select class="btn-slate appearance-none" value={sort.on} {onchange} title="Sort by...">
+		{#each Object.entries(labels) as [value, label] (value)}
 			<option {value}>{label}</option>
 		{/each}
 	</select>
diff --git a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte
index ee07902..2ef63f4 100644
--- a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte
+++ b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { navigate } from '$lib/Navigation';
+	import { accelerator } from '$lib/Shortcuts';
 	import { slideXFast } from '$lib/Transitions';
 	import Badge from '$lib/components/Badge.svelte';
 	import { slide } from 'svelte/transition';
@@ -19,6 +20,7 @@
 		class="btn-slate relative"
 		title={`${expanded ? 'Hide' : 'Show'} filters`}
 		onclick={toggle}
+		use:accelerator={'F'}
 	>
 		{#if expanded}
 			<span class="icon-base icon-[material-symbols--filter-alt]"></span>
@@ -34,6 +36,7 @@
 			transition:slide={slideXFast}
 			title="Reset filters"
 			aria-label="Reset filters"
+			use:accelerator={'X'}
 		>
 			<div class="flex">
 				<span class="icon-base icon-[material-symbols--filter-alt-off]"></span>
diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte
index 9e961ed..fefc151 100644
--- a/frontend/src/lib/toolbar/Toolbar.svelte
+++ b/frontend/src/lib/toolbar/Toolbar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { slideYDefault } from '$lib/Transitions';
 	import { type Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
 
 	export interface ToolbarState {
 		expanded: boolean;
@@ -14,7 +16,7 @@
 		expand?: boolean;
 	}
 
-	let { start, center, end, expansion, expand: expand = false }: Props = $props();
+	let { start, center, end, expansion, expand = false }: Props = $props();
 
 	let expanded = $state(expand);
 
@@ -38,7 +40,7 @@
 		</div>
 	</div>
 	{#if expanded}
-		<div class="mt-4">
+		<div class="mt-4" transition:slide={slideYDefault}>
 			{@render expansion?.()}
 		</div>
 	{/if}