1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import LoadingSpinner from "@/components/ui/spinner";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists";
import { ZBookmarkList } from "@karakeep/shared/types/lists";
export function BookmarkListSelector({
value,
onChange,
hideSubtreeOf,
hideBookmarkIds = [],
placeholder = "Select a list",
className,
listTypes = ["manual", "smart"],
}: {
className?: string;
value?: string | null;
onChange: (value: string) => void;
placeholder?: string;
hideSubtreeOf?: string;
hideBookmarkIds?: string[];
listTypes?: ZBookmarkList["type"][];
}) {
const [open, setOpen] = useState(false);
const { data, isPending: isFetchingListsPending } = useBookmarkLists();
let { allPaths } = data ?? {};
if (isFetchingListsPending) {
return <LoadingSpinner />;
}
allPaths = allPaths?.filter((path) => {
const lastItem = path[path.length - 1];
if (hideBookmarkIds.includes(lastItem.id)) {
return false;
}
if (!listTypes.includes(lastItem.type)) {
return false;
}
// Hide lists where user is a viewer (can't add/remove bookmarks)
if (lastItem.userRole === "viewer") {
return false;
}
if (!hideSubtreeOf) {
return true;
}
return !path.map((p) => p.id).includes(hideSubtreeOf);
});
// Find the selected list's display name
const selectedListPath = allPaths?.find(
(path) => path[path.length - 1].id === value,
);
const selectedListName = selectedListPath
? selectedListPath.map((p) => `${p.icon} ${p.name}`).join(" / ")
: null;
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn("w-full justify-between", className)}
>
{selectedListName || placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
<Command>
<CommandInput placeholder="Search lists..." />
<CommandList>
<CommandEmpty>
{allPaths && allPaths.length === 0
? "You don't currently have any lists."
: "No lists found."}
</CommandEmpty>
<CommandGroup className="max-h-60 overflow-y-auto">
{allPaths?.map((path) => {
const l = path[path.length - 1];
const name = path.map((p) => `${p.icon} ${p.name}`).join(" / ");
return (
<CommandItem
key={l.id}
value={l.id}
keywords={[l.name, l.icon]}
onSelect={(currentValue) => {
onChange(currentValue);
setOpen(false);
}}
className="cursor-pointer"
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === l.id ? "opacity-100" : "opacity-0",
)}
/>
{name}
</CommandItem>
);
})}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
|
