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
|
import { useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTranslation } from "@/lib/i18n/client";
import { FolderInput, Pencil, Plus, Trash2 } from "lucide-react";
import { ZBookmarkList } from "@karakeep/shared/types/lists";
import { EditListModal } from "../lists/EditListModal";
import DeleteListConfirmationDialog from "./DeleteListConfirmationDialog";
import { MergeListModal } from "./MergeListModal";
export function ListOptions({
list,
isOpen,
onOpenChange,
children,
}: {
isOpen?: boolean;
onOpenChange?: (open: boolean) => void;
list: ZBookmarkList;
children?: React.ReactNode;
}) {
const { t } = useTranslation();
const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
const [mergeListModalOpen, setMergeListModalOpen] = useState(false);
const [editModalOpen, setEditModalOpen] = useState(false);
return (
<DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
<EditListModal
open={newNestedListModalOpen}
setOpen={setNewNestedListModalOpen}
prefill={{
parentId: list.id,
}}
/>
<EditListModal
open={editModalOpen}
setOpen={setEditModalOpen}
list={list}
/>
<MergeListModal
open={mergeListModalOpen}
setOpen={setMergeListModalOpen}
list={list}
/>
<DeleteListConfirmationDialog
list={list}
open={deleteListDialogOpen}
setOpen={setDeleteListDialogOpen}
/>
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
className="flex gap-2"
onClick={() => setEditModalOpen(true)}
>
<Pencil className="size-4" />
<span>{t("actions.edit")}</span>
</DropdownMenuItem>
<DropdownMenuItem
className="flex gap-2"
onClick={() => setNewNestedListModalOpen(true)}
>
<Plus className="size-4" />
<span>{t("lists.new_nested_list")}</span>
</DropdownMenuItem>
<DropdownMenuItem
className="flex gap-2"
onClick={() => setMergeListModalOpen(true)}
>
<FolderInput className="size-4" />
<span>{t("lists.merge_list")}</span>
</DropdownMenuItem>
<DropdownMenuItem
className="flex gap-2"
onClick={() => setDeleteListDialogOpen(true)}
>
<Trash2 className="size-4" />
<span>{t("actions.delete")}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
|
