aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-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
-rw-r--r--packages/shared-react/hooks/lists.ts15
-rw-r--r--packages/shared/types/lists.ts13
-rw-r--r--packages/trpc/models/lists.ts46
-rw-r--r--packages/trpc/routers/lists.ts13
8 files changed, 325 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": {
diff --git a/packages/shared-react/hooks/lists.ts b/packages/shared-react/hooks/lists.ts
index 4dd9bc2b..1a98cac5 100644
--- a/packages/shared-react/hooks/lists.ts
+++ b/packages/shared-react/hooks/lists.ts
@@ -36,6 +36,21 @@ export function useEditBookmarkList(
});
}
+export function useMergeLists(
+ ...opts: Parameters<typeof api.lists.merge.useMutation>
+) {
+ const apiUtils = api.useUtils();
+ return api.lists.merge.useMutation({
+ ...opts[0],
+ onSuccess: (res, req, meta) => {
+ apiUtils.lists.list.invalidate();
+ apiUtils.bookmarks.getBookmarks.invalidate({ listId: req.targetId });
+ apiUtils.lists.stats.invalidate();
+ return opts[0]?.onSuccess?.(res, req, meta);
+ },
+ });
+}
+
export function useAddBookmarkToList(
...opts: Parameters<typeof api.lists.addToList.useMutation>
) {
diff --git a/packages/shared/types/lists.ts b/packages/shared/types/lists.ts
index 474405ee..7ef5687c 100644
--- a/packages/shared/types/lists.ts
+++ b/packages/shared/types/lists.ts
@@ -85,3 +85,16 @@ export const zEditBookmarkListSchemaWithValidation = zEditBookmarkListSchema
"Smart lists cannot have unqualified terms (aka full text search terms) in the query",
path: ["query"],
});
+
+export const zMergeListSchema = z
+ .object({
+ sourceId: z.string(),
+ targetId: z.string(),
+ deleteSourceAfterMerge: z.boolean(),
+ })
+ .refine((val) => val.sourceId !== val.targetId, {
+ message: "Cannot merge a list into itself",
+ path: ["targetId"],
+ });
+
+export type ZMergeList = z.infer<typeof zMergeListSchema>;
diff --git a/packages/trpc/models/lists.ts b/packages/trpc/models/lists.ts
index a6b1720c..8072060f 100644
--- a/packages/trpc/models/lists.ts
+++ b/packages/trpc/models/lists.ts
@@ -145,6 +145,10 @@ export abstract class List implements PrivacyAware {
abstract getSize(ctx: AuthedContext): Promise<number>;
abstract addBookmark(bookmarkId: string): Promise<void>;
abstract removeBookmark(bookmarkId: string): Promise<void>;
+ abstract mergeInto(
+ targetList: List,
+ deleteSourceAfterMerge: boolean,
+ ): Promise<void>;
}
export class SmartList extends List {
@@ -200,6 +204,16 @@ export class SmartList extends List {
message: "Smart lists cannot be removed from",
});
}
+
+ mergeInto(
+ _targetList: List,
+ _deleteSourceAfterMerge: boolean,
+ ): Promise<void> {
+ throw new TRPCError({
+ code: "BAD_REQUEST",
+ message: "Smart lists cannot be merged",
+ });
+ }
}
export class ManualList extends List {
@@ -276,4 +290,36 @@ export class ManualList extends List {
}
return super.update(input);
}
+
+ async mergeInto(
+ targetList: List,
+ deleteSourceAfterMerge: boolean,
+ ): Promise<void> {
+ if (targetList.type !== "manual") {
+ throw new TRPCError({
+ code: "BAD_REQUEST",
+ message: "You can only merge into a manual list",
+ });
+ }
+
+ const bookmarkIds = await this.getBookmarkIds();
+
+ await this.ctx.db.transaction(async (tx) => {
+ await tx
+ .insert(bookmarksInLists)
+ .values(
+ bookmarkIds.map((id) => ({
+ bookmarkId: id,
+ listId: targetList.list.id,
+ })),
+ )
+ .onConflictDoNothing();
+
+ if (deleteSourceAfterMerge) {
+ await tx
+ .delete(bookmarkLists)
+ .where(eq(bookmarkLists.id, this.list.id));
+ }
+ });
+ }
}
diff --git a/packages/trpc/routers/lists.ts b/packages/trpc/routers/lists.ts
index f988eb8b..12960316 100644
--- a/packages/trpc/routers/lists.ts
+++ b/packages/trpc/routers/lists.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
import {
zBookmarkListSchema,
zEditBookmarkListSchemaWithValidation,
+ zMergeListSchema,
zNewBookmarkListSchema,
} from "@karakeep/shared/types/lists";
@@ -39,6 +40,18 @@ export const listsAppRouter = router({
.mutation(async ({ input, ctx }) => {
return await ctx.list.update(input);
}),
+ merge: authedProcedure
+ .input(zMergeListSchema)
+ .mutation(async ({ input, ctx }) => {
+ const [sourceList, targetList] = await Promise.all([
+ List.fromId(ctx, input.sourceId),
+ List.fromId(ctx, input.targetId),
+ ]);
+ return await sourceList.mergeInto(
+ targetList,
+ input.deleteSourceAfterMerge,
+ );
+ }),
delete: authedProcedure
.input(
z.object({
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 11:02:57 +0000