From 4a580d713621f99abb8baabc9b847ce039d44842 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sat, 4 Oct 2025 13:40:24 +0100 Subject: feat: Revamp import experience (#2001) * WIP: import v2 * remove new session button * don't redirect after import * store and lint to root list * models + tests * redesign the progress * simplify the import session for ow * drop status from session schema * split the import session page * i18n * fix test * remove pagination * fix some colors in darkmode * one last fix * add privacy filter * privacy check * fix interactivity of import progress * fix test --- apps/web/app/settings/import/page.tsx | 6 +- apps/web/components/settings/ImportExport.tsx | 21 +- apps/web/components/settings/ImportSessionCard.tsx | 257 +++++++++++++++++++++ .../components/settings/ImportSessionsSection.tsx | 79 +++++++ apps/web/lib/hooks/useBookmarkImport.ts | 21 +- apps/web/lib/hooks/useImportSessions.ts | 62 +++++ apps/web/lib/i18n/locales/en/translation.json | 27 +++ 7 files changed, 455 insertions(+), 18 deletions(-) create mode 100644 apps/web/components/settings/ImportSessionCard.tsx create mode 100644 apps/web/components/settings/ImportSessionsSection.tsx create mode 100644 apps/web/lib/hooks/useImportSessions.ts (limited to 'apps') diff --git a/apps/web/app/settings/import/page.tsx b/apps/web/app/settings/import/page.tsx index e27aa9a8..11780d51 100644 --- a/apps/web/app/settings/import/page.tsx +++ b/apps/web/app/settings/import/page.tsx @@ -1,9 +1,5 @@ import ImportExport from "@/components/settings/ImportExport"; export default function ImportSettingsPage() { - return ( -
- -
- ); + return ; } diff --git a/apps/web/components/settings/ImportExport.tsx b/apps/web/components/settings/ImportExport.tsx index c644af27..ee220342 100644 --- a/apps/web/components/settings/ImportExport.tsx +++ b/apps/web/components/settings/ImportExport.tsx @@ -19,6 +19,7 @@ import { Download, Loader2, Upload } from "lucide-react"; import { Card, CardContent } from "../ui/card"; import { toast } from "../ui/use-toast"; +import { ImportSessionsSection } from "./ImportSessionsSection"; function ImportCard({ text, @@ -266,11 +267,21 @@ export function ImportExportRow() { export default function ImportExport() { const { t } = useTranslation(); return ( -
-

- {t("settings.import.import_export_bookmarks")} -

- +
+
+
+
+

+ {t("settings.import.import_export_bookmarks")} +

+ +
+
+
+ +
+ +
); } diff --git a/apps/web/components/settings/ImportSessionCard.tsx b/apps/web/components/settings/ImportSessionCard.tsx new file mode 100644 index 00000000..690caaa5 --- /dev/null +++ b/apps/web/components/settings/ImportSessionCard.tsx @@ -0,0 +1,257 @@ +"use client"; + +import Link from "next/link"; +import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; +import { Progress } from "@/components/ui/progress"; +import { + useDeleteImportSession, + useImportSessionStats, +} from "@/lib/hooks/useImportSessions"; +import { useTranslation } from "@/lib/i18n/client"; +import { formatDistanceToNow } from "date-fns"; +import { + AlertCircle, + CheckCircle2, + ClipboardList, + Clock, + ExternalLink, + Loader2, + Trash2, +} from "lucide-react"; + +import type { ZImportSessionWithStats } from "@karakeep/shared/types/importSessions"; + +interface ImportSessionCardProps { + session: ZImportSessionWithStats; +} + +function getStatusColor(status: string) { + switch (status) { + case "pending": + return "bg-muted text-muted-foreground"; + case "in_progress": + return "bg-blue-500/10 text-blue-700 dark:text-blue-400"; + case "completed": + return "bg-green-500/10 text-green-700 dark:text-green-400"; + case "failed": + return "bg-destructive/10 text-destructive"; + default: + return "bg-muted text-muted-foreground"; + } +} + +function getStatusIcon(status: string) { + switch (status) { + case "pending": + return ; + case "in_progress": + return ; + case "completed": + return ; + case "failed": + return ; + default: + return ; + } +} + +export function ImportSessionCard({ session }: ImportSessionCardProps) { + const { t } = useTranslation(); + const { data: liveStats } = useImportSessionStats(session.id); + const deleteSession = useDeleteImportSession(); + + const statusLabels: Record = { + pending: t("settings.import_sessions.status.pending"), + in_progress: t("settings.import_sessions.status.in_progress"), + completed: t("settings.import_sessions.status.completed"), + failed: t("settings.import_sessions.status.failed"), + }; + + // Use live stats if available, otherwise fallback to session stats + const stats = liveStats || session; + const progress = + stats.totalBookmarks > 0 + ? ((stats.completedBookmarks + stats.failedBookmarks) / + stats.totalBookmarks) * + 100 + : 0; + + const canDelete = stats.status !== "in_progress"; + + return ( + + +
+
+

{session.name}

+

+ {t("settings.import_sessions.created_at", { + time: formatDistanceToNow(session.createdAt, { + addSuffix: true, + }), + })} +

+
+
+ + {getStatusIcon(stats.status)} + + {statusLabels[stats.status] ?? stats.status.replace("_", " ")} + + +
+
+ + + +
+ {/* Progress Section */} +
+
+

+ {t("settings.import_sessions.progress")} +

+
+ + {stats.completedBookmarks + stats.failedBookmarks} /{" "} + {stats.totalBookmarks} + + + {Math.round(progress)}% + +
+
+ {stats.totalBookmarks > 0 && ( + + )} +
+ + {/* Stats Breakdown */} + {stats.totalBookmarks > 0 && ( +
+
+ {stats.pendingBookmarks > 0 && ( + + + {t("settings.import_sessions.badges.pending", { + count: stats.pendingBookmarks, + })} + + )} + {stats.processingBookmarks > 0 && ( + + + {t("settings.import_sessions.badges.processing", { + count: stats.processingBookmarks, + })} + + )} + {stats.completedBookmarks > 0 && ( + + + {t("settings.import_sessions.badges.completed", { + count: stats.completedBookmarks, + })} + + )} + {stats.failedBookmarks > 0 && ( + + + {t("settings.import_sessions.badges.failed", { + count: stats.failedBookmarks, + })} + + )} +
+
+ )} + + {/* Root List Link */} + {session.rootListId && ( +
+
+ + + {t("settings.import_sessions.imported_to")} + + + {t("settings.import_sessions.view_list")} + + +
+
+ )} + + {/* Message */} + {stats.message && ( +
+ {stats.message} +
+ )} + + {/* Actions */} +
+
+ {canDelete && ( + + {t("settings.import_sessions.delete_dialog_description", { + name: session.name, + })} +
+ } + actionButton={(setDialogOpen) => ( + + )} + > + + + )} +
+
+
+ + + ); +} diff --git a/apps/web/components/settings/ImportSessionsSection.tsx b/apps/web/components/settings/ImportSessionsSection.tsx new file mode 100644 index 00000000..38f248d2 --- /dev/null +++ b/apps/web/components/settings/ImportSessionsSection.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { Card, CardContent } from "@/components/ui/card"; +import { useListImportSessions } from "@/lib/hooks/useImportSessions"; +import { useTranslation } from "@/lib/i18n/client"; +import { Package } from "lucide-react"; + +import { FullPageSpinner } from "../ui/full-page-spinner"; +import { ImportSessionCard } from "./ImportSessionCard"; + +export function ImportSessionsSection() { + const { t } = useTranslation(); + const { data: sessions, isLoading, error } = useListImportSessions(); + + if (isLoading) { + return ( +
+
+

+ {t("settings.import_sessions.title")} +

+
+ +
+ ); + } + + if (error) { + return ( +
+
+

+ {t("settings.import_sessions.title")} +

+
+ + +

+ {t("settings.import_sessions.load_error")} +

+ + +
+ ); + } + + return ( +
+
+

+ {t("settings.import_sessions.title")} +

+

+ {t("settings.import_sessions.description")} +

+
+ + {sessions && sessions.length > 0 ? ( +
+ {sessions.map((session) => ( + + ))} +
+ ) : ( + + + +

+ {t("settings.import_sessions.no_sessions")} +

+

+ {t("settings.import_sessions.no_sessions_detail")} +

+ + + )} +
+ ); +} diff --git a/apps/web/lib/hooks/useBookmarkImport.ts b/apps/web/lib/hooks/useBookmarkImport.ts index de515677..a4ebdd9c 100644 --- a/apps/web/lib/hooks/useBookmarkImport.ts +++ b/apps/web/lib/hooks/useBookmarkImport.ts @@ -1,7 +1,6 @@ "use client"; import { useState } from "react"; -import { useRouter } from "next/navigation"; import { toast } from "@/components/ui/use-toast"; import { useTranslation } from "@/lib/i18n/client"; import { useMutation } from "@tanstack/react-query"; @@ -24,6 +23,8 @@ import { MAX_BOOKMARK_TITLE_LENGTH, } from "@karakeep/shared/types/bookmarks"; +import { useCreateImportSession } from "./useImportSessions"; + export interface ImportProgress { done: number; total: number; @@ -31,12 +32,12 @@ export interface ImportProgress { export function useBookmarkImport() { const { t } = useTranslation(); - const router = useRouter(); const [importProgress, setImportProgress] = useState( null, ); + const { mutateAsync: createImportSession } = useCreateImportSession(); const { mutateAsync: createBookmark } = useCreateBookmarkWithPostHook(); const { mutateAsync: createList } = useCreateBookmarkList(); const { mutateAsync: addToList } = useAddBookmarkToList(); @@ -56,8 +57,12 @@ export function useBookmarkImport() { source, rootListName: t("settings.import.imported_bookmarks"), deps: { - createList: createList, - createBookmark: async (bookmark: ParsedBookmark) => { + createImportSession, + createList, + createBookmark: async ( + bookmark: ParsedBookmark, + sessionId: string, + ) => { if (bookmark.content === undefined) { throw new Error("Content is undefined"); } @@ -69,6 +74,7 @@ export function useBookmarkImport() { : undefined, note: bookmark.notes, archived: bookmark.archived, + importSessionId: sessionId, ...(bookmark.content.type === BookmarkTypes.LINK ? { type: BookmarkTypes.LINK, @@ -120,6 +126,8 @@ export function useBookmarkImport() { return result; }, onSuccess: async (result) => { + setImportProgress(null); + if (result.counts.total === 0) { toast({ description: "No bookmarks found in the file." }); return; @@ -127,7 +135,7 @@ export function useBookmarkImport() { const { successes, failures, alreadyExisted } = result.counts; if (successes > 0 || alreadyExisted > 0) { toast({ - description: `Imported ${successes} bookmarks and skipped ${alreadyExisted} bookmarks that already existed`, + description: `Imported ${successes} bookmarks into import session. Background processing will start automatically.`, variant: "default", }); } @@ -137,9 +145,6 @@ export function useBookmarkImport() { variant: "destructive", }); } - - if (result.rootListId) - router.push(`/dashboard/lists/${result.rootListId}`); }, onError: (error) => { setImportProgress(null); diff --git a/apps/web/lib/hooks/useImportSessions.ts b/apps/web/lib/hooks/useImportSessions.ts new file mode 100644 index 00000000..cee99bbc --- /dev/null +++ b/apps/web/lib/hooks/useImportSessions.ts @@ -0,0 +1,62 @@ +"use client"; + +import { toast } from "@/components/ui/use-toast"; + +import { api } from "@karakeep/shared-react/trpc"; + +export function useCreateImportSession() { + const apiUtils = api.useUtils(); + + return api.importSessions.createImportSession.useMutation({ + onSuccess: () => { + apiUtils.importSessions.listImportSessions.invalidate(); + }, + onError: (error) => { + toast({ + description: error.message || "Failed to create import session", + variant: "destructive", + }); + }, + }); +} + +export function useListImportSessions() { + return api.importSessions.listImportSessions.useQuery( + {}, + { + select: (data) => data.sessions, + }, + ); +} + +export function useImportSessionStats(importSessionId: string) { + return api.importSessions.getImportSessionStats.useQuery( + { + importSessionId, + }, + { + refetchInterval: 5000, // Refetch every 5 seconds to show progress + enabled: !!importSessionId, + }, + ); +} + +export function useDeleteImportSession() { + const apiUtils = api.useUtils(); + + return api.importSessions.deleteImportSession.useMutation({ + onSuccess: () => { + apiUtils.importSessions.listImportSessions.invalidate(); + toast({ + description: "Import session deleted successfully", + variant: "default", + }); + }, + onError: (error) => { + toast({ + description: error.message || "Failed to delete import session", + variant: "destructive", + }); + }, + }); +} diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json index ab1306be..450949c6 100644 --- a/apps/web/lib/i18n/locales/en/translation.json +++ b/apps/web/lib/i18n/locales/en/translation.json @@ -314,6 +314,33 @@ "loading_usage": "Loading usage information...", "free": "Free", "paid": "Paid" + }, + "import_sessions": { + "title": "Import Sessions", + "description": "View and manage your bulk import sessions. Sessions are automatically created when you import bookmarks.", + "load_error": "Failed to load import sessions", + "no_sessions": "No import sessions yet", + "no_sessions_detail": "Import sessions will appear here automatically when you import bookmarks", + "created_at": "Created {{time}}", + "progress": "Progress", + "status": { + "pending": "Pending", + "in_progress": "In progress", + "completed": "Completed", + "failed": "Failed", + "processing": "Processing" + }, + "badges": { + "pending": "{{count}} pending", + "processing": "{{count}} processing", + "completed": "{{count}} completed", + "failed": "{{count}} failed" + }, + "imported_to": "Imported to:", + "view_list": "View List", + "delete_dialog_title": "Delete Import Session", + "delete_dialog_description": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone. The bookmarks themselves will not be deleted.", + "delete_session": "Delete Session" } }, "admin": { -- cgit v1.2.3-70-g09d2