Skip to content

Commit f5bab0a

Browse files
0x2E0x2E
committed
feat: add search in feed select
1 parent 3bd4990 commit f5bab0a

16 files changed

+382
-25
lines changed

‎frontend/package-lock.json

+58
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@types/dompurify": "^3.0.5",
4040
"bits-ui": "^0.19.7",
4141
"clsx": "^2.1.0",
42+
"cmdk-sv": "^0.0.15",
4243
"dompurify": "^3.0.9",
4344
"ky": "^1.2.2",
4445
"lucide-svelte": "^0.357.0",

‎frontend/src/lib/components/FeedsSelect.svelte

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script lang="ts">
2+
import Check from 'lucide-svelte/icons/check';
3+
import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
4+
import * as Popover from '$lib/components/ui/popover';
5+
import * as Command from '$lib/components/ui/command';
6+
import { cn } from '$lib/utils.js';
7+
import { tick } from 'svelte';
8+
import type { Feed } from '$lib/api/model';
9+
import { Button } from './ui/button';
10+
11+
export let data: Feed[];
12+
export let selected: number;
13+
let open = false;
14+
15+
let optionAll = { value: '-1', label: 'All' };
16+
let feeds = data
17+
.sort((a, b) => a.id - b.id)
18+
.map((f) => {
19+
return { value: String(f.id), label: f.name };
20+
});
21+
feeds.unshift(optionAll);
22+
23+
// We want to refocus the trigger button when the user selects
24+
// an item from the list so users can continue navigating the
25+
// rest of the form with the keyboard.
26+
function closeAndFocusTrigger(triggerId: string) {
27+
open = false;
28+
tick().then(() => {
29+
document.getElementById(triggerId)?.focus();
30+
});
31+
}
32+
</script>
33+
34+
<Popover.Root bind:open let:ids>
35+
<Popover.Trigger asChild let:builder>
36+
<Button
37+
builders={[builder]}
38+
variant="outline"
39+
role="combobox"
40+
aria-expanded={open}
41+
class="w-[200px] justify-between"
42+
>
43+
{feeds.find((f) => f.value === String(selected))?.label ?? 'Select a feed...'}
44+
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
45+
</Button>
46+
</Popover.Trigger>
47+
<Popover.Content class="w-[200px] p-0">
48+
<Command.Root
49+
filter={(value, search) => {
50+
// TODO: use better fuzz way: https://github.com/krisk/Fuse
51+
let name = '';
52+
if (value === optionAll.value) {
53+
name = optionAll.label;
54+
} else {
55+
name = data.find((v) => v.id === parseInt(value))?.name ?? '';
56+
}
57+
return name.includes(search) ? 1 : 0;
58+
}}
59+
>
60+
<Command.Input placeholder="Search feed..." />
61+
<Command.Empty>No feed found.</Command.Empty>
62+
<Command.Group>
63+
{#each feeds as f}
64+
<Command.Item
65+
value={String(f.value)}
66+
onSelect={(v) => {
67+
selected = parseInt(v);
68+
closeAndFocusTrigger(ids.trigger);
69+
}}
70+
>
71+
<Check class={cn('mr-2 h-4 w-4', String(selected) !== f.value && 'text-transparent')} />
72+
{f.label}
73+
</Command.Item>
74+
{/each}
75+
</Command.Group>
76+
</Command.Root>
77+
</Popover.Content>
78+
</Popover.Root>

‎frontend/src/lib/components/ItemList.svelte

+6-25
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,11 @@
1111
import { CheckCheckIcon, type Icon } from 'lucide-svelte';
1212
import { page } from '$app/stores';
1313
import { goto, invalidateAll } from '$app/navigation';
14+
import FeedsSelect from './FeedsSelect.svelte';
1415
1516
export let data: { feeds: Feed[]; items: { total: number; data: Item[] } };
1617
let filter = parseURLtoFilter($page.url.searchParams);
1718
18-
type feedOption = { label: string; value: number };
19-
const defaultSelectedFeed: feedOption = { value: -1, label: 'All Feeds' };
20-
let allFeeds = data.feeds
21-
.map((f) => {
22-
return { value: f.id, label: f.name };
23-
})
24-
.concat(defaultSelectedFeed)
25-
.sort((a, b) => a.value - b.value);
26-
2719
// NOTE: Svelte treats object as dirty, it may cause poorly reactive updates
2820
// when using it in two-way binding.
2921
// Therefore, we create an oldFilter as a control. Update url search params
@@ -33,11 +25,11 @@
3325
3426
let oldFilter = Object.assign({}, filter);
3527
36-
let selectedFeed = allFeeds.find((v) => v.value === filter?.feed_id) || defaultSelectedFeed;
28+
let selectedFeed = filter?.feed_id ?? -1;
3729
$: updateSelectedFeed(selectedFeed);
38-
function updateSelectedFeed(f: feedOption) {
39-
if (f.value == filter.feed_id) return;
40-
filter.feed_id = f.value !== -1 ? f.value : undefined;
30+
function updateSelectedFeed(id: number) {
31+
if (id == filter.feed_id) return;
32+
filter.feed_id = id !== -1 ? id : undefined;
4133
filter.page = 1;
4234
console.log(filter);
4335
}
@@ -100,18 +92,7 @@
10092
</script>
10193

10294
<div class="flex justify-between items-center w-full">
103-
<Select.Root items={allFeeds} bind:selected={selectedFeed}>
104-
<!-- FIX: auto width -->
105-
<!-- TODO: show relevant feeds only (api) -->
106-
<Select.Trigger class="w-[180px]">
107-
<Select.Value placeholder="Filter by Feed" />
108-
</Select.Trigger>
109-
<Select.Content class="max-h-[200px] overflow-y-scroll">
110-
{#each allFeeds as feed}
111-
<Select.Item value={feed.value} class="truncate">{feed.label}</Select.Item>
112-
{/each}
113-
</Select.Content>
114-
</Select.Root>
95+
<FeedsSelect data={data.feeds} bind:selected={selectedFeed} />
11596

11697
{#if data.items.data.length > 0}
11798
<div>

‎frontend/src/lib/components/ui/command/command-dialog.svelte

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import Command from "./command.svelte";
3+
import * as Dialog from "$lib/components/ui/dialog/index.js";
4+
import type { Dialog as DialogPrimitive } from "bits-ui";
5+
import type { Command as CommandPrimitive } from "cmdk-sv";
6+
7+
type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
8+
9+
export let open: $$Props["open"] = false;
10+
export let value: $$Props["value"] = undefined;
11+
</script>
12+
13+
<Dialog.Root bind:open {...$$restProps}>
14+
<Dialog.Content class="overflow-hidden p-0 shadow-lg">
15+
<Command
16+
class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
17+
{...$$restProps}
18+
bind:value
19+
>
20+
<slot />
21+
</Command>
22+
</Dialog.Content>
23+
</Dialog.Root>

‎frontend/src/lib/components/ui/command/command-empty.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = CommandPrimitive.EmptyProps;
6+
let className: string | undefined | null = undefined;
7+
export { className as class };
8+
</script>
9+
10+
<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
11+
<slot />
12+
</CommandPrimitive.Empty>

‎frontend/src/lib/components/ui/command/command-group.svelte

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
type $$Props = CommandPrimitive.GroupProps;
5+
6+
let className: string | undefined | null = undefined;
7+
export { className as class };
8+
</script>
9+
10+
<CommandPrimitive.Group
11+
class={cn(
12+
"overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground",
13+
className
14+
)}
15+
{...$$restProps}
16+
>
17+
<slot />
18+
</CommandPrimitive.Group>

‎frontend/src/lib/components/ui/command/command-input.svelte

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import Search from "lucide-svelte/icons/search";
4+
import { cn } from "$lib/utils.js";
5+
6+
type $$Props = CommandPrimitive.InputProps;
7+
8+
let className: string | undefined | null = undefined;
9+
export { className as class };
10+
export let value: string = "";
11+
</script>
12+
13+
<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
14+
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
15+
<CommandPrimitive.Input
16+
class={cn(
17+
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
18+
className
19+
)}
20+
{...$$restProps}
21+
bind:value
22+
/>
23+
</div>

‎frontend/src/lib/components/ui/command/command-item.svelte

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = CommandPrimitive.ItemProps;
6+
7+
export let asChild = false;
8+
9+
let className: string | undefined | null = undefined;
10+
export { className as class };
11+
</script>
12+
13+
<CommandPrimitive.Item
14+
{asChild}
15+
class={cn(
16+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17+
className
18+
)}
19+
{...$$restProps}
20+
let:action
21+
let:attrs
22+
>
23+
<slot {action} {attrs} />
24+
</CommandPrimitive.Item>

‎frontend/src/lib/components/ui/command/command-list.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = CommandPrimitive.ListProps;
6+
let className: string | undefined | null = undefined;
7+
export { className as class };
8+
</script>
9+
10+
<CommandPrimitive.List
11+
class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
12+
{...$$restProps}
13+
>
14+
<slot />
15+
</CommandPrimitive.List>

‎frontend/src/lib/components/ui/command/command-separator.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = CommandPrimitive.SeparatorProps;
6+
let className: string | undefined | null = undefined;
7+
export { className as class };
8+
</script>
9+
10+
<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />

‎frontend/src/lib/components/ui/command/command-shortcut.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import { cn } from "$lib/utils.js";
3+
import type { HTMLAttributes } from "svelte/elements";
4+
5+
type $$Props = HTMLAttributes<HTMLSpanElement>;
6+
7+
let className: string | undefined | null = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<span
12+
class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
13+
{...$$restProps}
14+
>
15+
<slot />
16+
</span>

‎frontend/src/lib/components/ui/command/command.svelte

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import { Command as CommandPrimitive } from "cmdk-sv";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = CommandPrimitive.CommandProps;
6+
7+
export let value: $$Props["value"] = undefined;
8+
9+
let className: string | undefined | null = undefined;
10+
export { className as class };
11+
</script>
12+
13+
<CommandPrimitive.Root
14+
class={cn(
15+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
16+
className
17+
)}
18+
bind:value
19+
{...$$restProps}
20+
>
21+
<slot />
22+
</CommandPrimitive.Root>

0 commit comments

Comments
 (0)