aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web')
-rw-r--r--apps/web/components/dashboard/lists/ListOptions.tsx16
-rw-r--r--apps/web/components/dashboard/lists/MergeListModal.tsx209
-rw-r--r--apps/web/lib/i18n/locales/en/translation.json8
-rw-r--r--apps/web/lib/i18n/locales/zh/translation.json8
4 files changed, 238 insertions, 3 deletions
diff --git a/apps/web/components/dashboard/lists/ListOptions.tsx b/apps/web/components/dashboard/lists/ListOptions.tsx
index 6b900265..9a979686 100644
--- a/apps/web/components/dashboard/lists/ListOptions.tsx
+++ b/apps/web/components/dashboard/lists/ListOptions.tsx
@@ -6,12 +6,13 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTranslation } from "@/lib/i18n/client";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+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,
@@ -28,6 +29,7 @@ export function ListOptions({
const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
+ const [mergeListModalOpen, setMergeListModalOpen] = useState(false);
const [editModalOpen, setEditModalOpen] = useState(false);
return (
@@ -44,6 +46,11 @@ export function ListOptions({
setOpen={setEditModalOpen}
list={list}
/>
+ <MergeListModal
+ open={mergeListModalOpen}
+ setOpen={setMergeListModalOpen}
+ list={list}
+ />
<DeleteListConfirmationDialog
list={list}
open={deleteListDialogOpen}
@@ -67,6 +74,13 @@ export function ListOptions({
</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" />
diff --git a/apps/web/components/dashboard/lists/MergeListModal.tsx b/apps/web/components/dashboard/lists/MergeListModal.tsx
new file mode 100644
index 00000000..a6b23971
--- /dev/null
+++ b/apps/web/components/dashboard/lists/MergeListModal.tsx
@@ -0,0 +1,209 @@
+import { useEffect, useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { X } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { useMergeLists } from "@karakeep/shared-react/hooks/lists";
+import { ZBookmarkList, zMergeListSchema } from "@karakeep/shared/types/lists";
+
+import { BookmarkListSelector } from "./BookmarkListSelector";
+
+export function MergeListModal({
+ open: userOpen,
+ setOpen: userSetOpen,
+ list,
+ children,
+}: {
+ open?: boolean;
+ setOpen?: (v: boolean) => void;
+ list: ZBookmarkList;
+ children?: React.ReactNode;
+}) {
+ const { t } = useTranslation();
+ if (
+ (userOpen !== undefined && !userSetOpen) ||
+ (userOpen === undefined && userSetOpen)
+ ) {
+ throw new Error("You must provide both open and setOpen or neither");
+ }
+ const [customOpen, customSetOpen] = useState(false);
+ const form = useForm<z.infer<typeof zMergeListSchema>>({
+ resolver: zodResolver(zMergeListSchema),
+ defaultValues: {
+ sourceId: list.id,
+ targetId: "",
+ deleteSourceAfterMerge: true,
+ },
+ });
+ const [open, setOpen] = [
+ userOpen ?? customOpen,
+ userSetOpen ?? customSetOpen,
+ ];
+
+ useEffect(() => {
+ form.reset({
+ sourceId: list.id,
+ targetId: "",
+ deleteSourceAfterMerge: true,
+ });
+ }, [open]);
+
+ const { mutate: mergeLists, isPending: isMerging } = useMergeLists({
+ onSuccess: () => {
+ toast({
+ description: t("toasts.lists.merged"),
+ });
+ setOpen(false);
+ form.reset();
+ },
+ onError: (e) => {
+ if (e.data?.code == "BAD_REQUEST") {
+ if (e.data.zodError) {
+ toast({
+ variant: "destructive",
+ description: Object.values(e.data.zodError.fieldErrors)
+ .flat()
+ .join("\n"),
+ });
+ } else {
+ toast({
+ variant: "destructive",
+ description: e.message,
+ });
+ }
+ } else {
+ toast({
+ variant: "destructive",
+ title: t("common.something_went_wrong"),
+ });
+ }
+ },
+ });
+
+ const onSubmit = form.handleSubmit(
+ async (value: z.infer<typeof zMergeListSchema>) => {
+ mergeLists(value);
+ },
+ );
+
+ return (
+ <Dialog
+ open={open}
+ onOpenChange={(s) => {
+ form.reset();
+ setOpen(s);
+ }}
+ >
+ {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+ <DialogContent>
+ <Form {...form}>
+ <form onSubmit={onSubmit}>
+ <DialogHeader>
+ <DialogTitle>{t("lists.merge_list")}</DialogTitle>
+ </DialogHeader>
+ <div className="flex w-full gap-2 py-4">
+ <span className="inline-flex aspect-square h-10 items-center justify-center rounded border border-input bg-transparent px-2 text-2xl">
+ {list.icon}
+ </span>
+ <Input
+ type="text"
+ className="w-full"
+ value={list.name}
+ disabled
+ />
+ </div>
+
+ <FormField
+ control={form.control}
+ name="deleteSourceAfterMerge"
+ render={({ field }) => (
+ <FormItem className="flex flex-row items-center justify-between space-x-2 space-y-0 pb-4">
+ <label className="text-xs text-muted-foreground">
+ {t("lists.delete_after_merge")}
+ </label>
+ <FormControl>
+ <Switch
+ checked={field.value}
+ onCheckedChange={(checked) => {
+ field.onChange(checked);
+ }}
+ />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="targetId"
+ render={({ field }) => (
+ <FormItem className="grow pb-4">
+ <FormLabel>{t("lists.destination_list")}</FormLabel>
+ <div className="flex items-center gap-1">
+ <FormControl>
+ <BookmarkListSelector
+ hideSubtreeOf={list.id}
+ value={field.value}
+ onChange={field.onChange}
+ placeholder={t("lists.no_destination")}
+ />
+ </FormControl>
+ <Button
+ type="button"
+ variant="ghost"
+ onClick={() => {
+ form.resetField("targetId");
+ }}
+ >
+ <X />
+ </Button>
+ </div>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <DialogFooter className="sm:justify-end">
+ <DialogClose asChild>
+ <Button type="button" variant="secondary">
+ {t("actions.cancel")}
+ </Button>
+ </DialogClose>
+ <ActionButton
+ type="submit"
+ onClick={onSubmit}
+ loading={isMerging}
+ >
+ {t("actions.merge")}
+ </ActionButton>
+ </DialogFooter>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ );
+}
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 4cce6295..3398045e 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -223,6 +223,10 @@
"new_list": "New List",
"edit_list": "Edit List",
"new_nested_list": "New Nested List",
+ "merge_list": "Merge List",
+ "destination_list": "Destination List",
+ "delete_after_merge": "Delete original list after merge",
+ "no_destination": "No Destination",
"parent_list": "Parent List",
"no_parent": "No Parent",
"list_type": "List Type",
@@ -361,7 +365,9 @@
},
"lists": {
"created": "List has been created!",
- "updated": "List has been updated!"
+ "updated": "List has been updated!",
+ "merged": "List has been merged!",
+ "deleted": "List has been deleted!"
}
},
"banners": {
diff --git a/apps/web/lib/i18n/locales/zh/translation.json b/apps/web/lib/i18n/locales/zh/translation.json
index 8132cb1f..178baca8 100644
--- a/apps/web/lib/i18n/locales/zh/translation.json
+++ b/apps/web/lib/i18n/locales/zh/translation.json
@@ -214,6 +214,10 @@
"favourites": "收藏",
"new_list": "新列表",
"new_nested_list": "新嵌套列表",
+ "merge_list": "合并列表",
+ "destination_list": "目标列表",
+ "delete_after_merge": "合并后删除源列表",
+ "no_destination": "未选中目标",
"no_parent": "没有父级",
"parent_list": "父级列表",
"list_type": "列表类型",
@@ -309,7 +313,9 @@
},
"lists": {
"created": "列表已创建！",
- "updated": "列表已更新！"
+ "updated": "列表已更新！",
+ "merged": "列表已合并！",
+ "deleted": "列表已删除！"
}
},
"cleanups": {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 15:13:38 +0000