summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/toolbar
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib/toolbar')
-rw-r--r--frontend/src/lib/toolbar/FilterOrganized.svelte2
-rw-r--r--frontend/src/lib/toolbar/FilterOrphaned.svelte24
-rw-r--r--frontend/src/lib/toolbar/MarkBookmark.svelte4
-rw-r--r--frontend/src/lib/toolbar/MarkOrganized.svelte4
-rw-r--r--frontend/src/lib/toolbar/Search.svelte2
-rw-r--r--frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte3
-rw-r--r--frontend/src/lib/toolbar/Toolbar.svelte6
7 files changed, 37 insertions, 8 deletions
diff --git a/frontend/src/lib/toolbar/FilterOrganized.svelte b/frontend/src/lib/toolbar/FilterOrganized.svelte
index 0f95e5f..9fc9d21 100644
--- a/frontend/src/lib/toolbar/FilterOrganized.svelte
+++ b/frontend/src/lib/toolbar/FilterOrganized.svelte
@@ -24,7 +24,7 @@
class="btn-slate"
title="Filter 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/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}