feat: add user data export and sofa export re-import support

- Add `GET /api/export/user-data` route that streams a JSON attachment of the authenticated user's full library data, named `sofa-export-<name>-<date>.json`
- Add `generateUserExport` in `@sofa/core/export` and a matching `parseSofaExport` parser so exported files can be re-imported via the existing import pipeline
- Register `sofa` as a new `ImportSource` in the API contract/schemas and wire up `parseSofaExport` in the `parseFile` procedure
- Add `EXPORT_FAILED` error code to the API error registry and surface it in web and native error-message maps
- Update the account settings section with export/import UI (download button, import progress)
- Add tests for `generateUserExport`, `parseSofaExport`, and round-trip fidelity
This commit is contained in:
2026-03-21 17:12:15 -04:00
parent 58cf2e689f
commit 61013ee41f
23 changed files with 1214 additions and 39 deletions
+1
View File
@@ -32,6 +32,7 @@ export function appErrorMessages(
IMPORT_ALREADY_RUNNING: t`Import already running`,
IMPORT_CANNOT_CANCEL: t`Cannot cancel import`,
REGISTRATION_CLOSED: t`Registration closed`,
EXPORT_FAILED: t`Failed to export data`,
};
}
+2
View File
@@ -16,6 +16,7 @@ import { openApiHandler } from "./orpc/openapi-handler";
import authRoutes from "./routes/auth";
import avatarsRoutes from "./routes/avatars";
import backupsRoutes from "./routes/backups";
import exportRoutes from "./routes/export";
import healthRoutes from "./routes/health";
import imagesRoutes from "./routes/images";
import listsRoutes from "./routes/lists";
@@ -66,6 +67,7 @@ app.route("/api/health", healthRoutes);
app.route("/api/auth", authRoutes);
app.route("/api/avatars", avatarsRoutes);
app.route("/api/backup", backupsRoutes);
app.route("/api/export", exportRoutes);
app.route("/api/webhooks", webhooksRoutes);
app.route("/api/lists", listsRoutes);
@@ -8,6 +8,7 @@ import {
insertImportJob,
parseLetterboxdExport,
parseSimklPayload,
parseSofaExport,
parseTraktPayload,
processImportJob,
readImportJob,
@@ -57,6 +58,19 @@ export const parseFile = os.imports.parseFile.use(authed).handler(async ({ input
result = parseSimklPayload(json as Parameters<typeof parseSimklPayload>[0]);
break;
}
case "sofa": {
let json: unknown;
try {
json = await file.json();
} catch {
throw new ORPCError("BAD_REQUEST", {
message: "Invalid JSON file",
data: { code: AppErrorCode.IMPORT_INVALID_FILE },
});
}
result = parseSofaExport(json);
break;
}
}
return {
+35
View File
@@ -0,0 +1,35 @@
import { Hono } from "hono";
import { auth } from "@sofa/auth/server";
import { generateUserExport } from "@sofa/core/export";
const app = new Hono();
app.get("/user-data", async (c) => {
const session = await auth.api.getSession({ headers: c.req.raw.headers });
if (!session) {
return c.json({ error: "Unauthorized" }, 401);
}
const data = generateUserExport(session.user.id, {
name: session.user.name,
email: session.user.email,
});
const safeName = session.user.name.replaceAll(/[^a-zA-Z0-9-_]/g, "-").toLowerCase();
const date = new Date().toISOString().slice(0, 10);
const filename = `sofa-export-${safeName}-${date}.json`;
const json = JSON.stringify(data, null, 2);
return new Response(json, {
status: 200,
headers: {
"Content-Type": "application/json; charset=utf-8",
"Content-Disposition": `attachment; filename="${filename}"`,
"Content-Length": String(new TextEncoder().encode(json).byteLength),
"Cache-Control": "no-store",
},
});
});
export default app;
@@ -1,8 +1,11 @@
import { Trans, useLingui } from "@lingui/react/macro";
import {
IconAlertTriangle,
IconArrowRight,
IconCamera,
IconCheck,
IconCloudDownload,
IconCloudUpload,
IconLockPassword,
IconLogout,
IconPencil,
@@ -33,11 +36,13 @@ import {
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { authClient, signOut } from "@/lib/auth/client";
import { getErrorMessage } from "@/lib/error-messages";
import { orpc } from "@/lib/orpc/client";
import { client, orpc } from "@/lib/orpc/client";
import type { NormalizedImport } from "@sofa/api/schemas";
import { formatDate } from "@sofa/i18n/format";
export function AccountSection({
@@ -166,7 +171,7 @@ export function AccountSection({
<Trans>Account</Trans>
</h2>
</div>
<Card>
<Card className="pb-0">
<CardContent className="flex items-center gap-4">
{/* Avatar: click to upload (no avatar) or remove (has avatar) */}
<Tooltip>
@@ -329,11 +334,459 @@ export function AccountSection({
</Button>
</div>
</CardContent>
<div className="border-border/30 space-y-px border-t">
<button
type="button"
onClick={() => {
window.location.href = "/api/export/user-data";
}}
className="group hover:bg-muted/40 flex w-full items-center gap-3 px-4 py-3 text-start transition-colors"
>
<div className="bg-muted group-hover:bg-primary/10 flex size-7.5 shrink-0 items-center justify-center rounded-lg">
<IconCloudDownload
aria-hidden={true}
className="text-muted-foreground group-hover:text-primary size-3.5"
/>
</div>
<div className="min-w-0 flex-1 space-y-0.5">
<p className="text-[13px] leading-none font-medium">
<Trans>Export</Trans>
</p>
<p className="text-muted-foreground text-[11px]">
<Trans>Download your library, watch history, and ratings as JSON</Trans>
</p>
</div>
<IconArrowRight
aria-hidden={true}
className="text-muted-foreground size-3.5 shrink-0"
/>
</button>
<SofaImportDialog />
</div>
</Card>
</div>
);
}
// ─── Sofa Import Dialog ─────────────────────────────────────
interface ImportPreview {
data: NormalizedImport;
warnings: string[];
diagnostics?: { unresolved: number; unsupported: number };
stats: { movies: number; episodes: number; watchlist: number; ratings: number };
}
interface ImportResult {
imported: number;
skipped: number;
failed: number;
errors: string[];
warnings: string[];
}
function SofaImportDialog() {
const { t } = useLingui();
const fileInputRef = useRef<HTMLInputElement>(null);
const importAbortRef = useRef<AbortController | null>(null);
const [open, setOpen] = useState(false);
const [step, setStep] = useState<"preview" | "importing" | "done">("preview");
const [preview, setPreview] = useState<ImportPreview | null>(null);
const [result, setResult] = useState<ImportResult | null>(null);
const [progress, setProgress] = useState<{
current: number;
total: number;
message: string;
} | null>(null);
const [options, setOptions] = useState({
importWatches: true,
importWatchlist: true,
importRatings: true,
});
const parseMutation = useMutation(
orpc.imports.parseFile.mutationOptions({
onSuccess: (data) => {
setPreview(data as ImportPreview);
setStep("preview");
setOpen(true);
},
onError: (err) => {
toast.error(getErrorMessage(err, t, t`Failed to parse file`));
},
onSettled: () => {
if (fileInputRef.current) fileInputRef.current.value = "";
},
}),
);
function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!file) return;
parseMutation.mutate({ source: "sofa", file });
}
async function handleImport() {
if (!preview) return;
setStep("importing");
setProgress(null);
const abort = new AbortController();
importAbortRef.current = abort;
try {
const job = await client.imports.createJob({
data: preview.data,
options,
});
const eventSource = await client.imports.jobEvents({ id: job.id }, { signal: abort.signal });
let receivedComplete = false;
for await (const event of eventSource) {
if (abort.signal.aborted) break;
if (event.type === "complete") {
receivedComplete = true;
setResult({
imported: event.job.importedCount,
skipped: event.job.skippedCount,
failed: event.job.failedCount,
errors: event.job.errors,
warnings: event.job.warnings,
});
setStep("done");
const importedCount = event.job.importedCount;
if (importedCount > 0) {
toast.success(t`Imported ${importedCount} items from Sofa export`);
}
} else if (event.type === "timeout") {
receivedComplete = true;
toast.info(t`Import is still running in the background. Check back later.`);
handleClose();
} else {
setProgress({
current: event.job.processedItems,
total: event.job.totalItems,
message: event.job.currentMessage ?? "",
});
}
}
if (!receivedComplete && !abort.signal.aborted) {
try {
const finalJob = await client.imports.getJob({ id: job.id });
const isTerminal =
finalJob.status === "success" ||
finalJob.status === "error" ||
finalJob.status === "cancelled";
if (isTerminal) {
setResult({
imported: finalJob.importedCount,
skipped: finalJob.skippedCount,
failed: finalJob.failedCount,
errors: finalJob.errors,
warnings: finalJob.warnings,
});
setStep("done");
} else {
toast.info(t`Import is still running in the background. Check back later.`);
handleClose();
}
} catch {
toast.error(t`Lost connection to import. Check status in settings.`);
handleClose();
}
}
} catch (err) {
if (abort.signal.aborted) return;
toast.error(getErrorMessage(err, t, t`Import failed`));
setStep("preview");
} finally {
importAbortRef.current = null;
}
}
function handleClose() {
importAbortRef.current?.abort();
importAbortRef.current = null;
setOpen(false);
setStep("preview");
setPreview(null);
setResult(null);
setProgress(null);
setOptions({ importWatches: true, importWatchlist: true, importRatings: true });
}
const isParsing = parseMutation.isPending;
const totalItems = preview
? (options.importWatches ? preview.stats.movies + preview.stats.episodes : 0) +
(options.importWatchlist ? preview.stats.watchlist : 0) +
(options.importRatings ? preview.stats.ratings : 0)
: 0;
const pct =
progress && progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : null;
return (
<>
<input
ref={fileInputRef}
type="file"
accept=".json"
className="hidden"
onChange={handleFileSelect}
/>
<button
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={isParsing}
className="group hover:bg-muted/40 flex w-full items-center gap-3 rounded-b-lg px-4 py-3 text-start transition-colors disabled:opacity-50"
>
<div className="bg-muted group-hover:bg-primary/10 flex size-7.5 shrink-0 items-center justify-center rounded-lg">
{isParsing ? (
<Spinner className="text-primary size-3.5" />
) : (
<IconCloudUpload
aria-hidden={true}
className="text-muted-foreground group-hover:text-primary size-3.5"
/>
)}
</div>
<div className="min-w-0 flex-1 space-y-0.5">
<p className="text-[13px] leading-none font-medium">
{isParsing ? <Trans>Parsing file...</Trans> : <Trans>Import</Trans>}
</p>
<p className="text-muted-foreground text-[11px]">
<Trans>Restore from a Sofa export file</Trans>
</p>
</div>
<IconArrowRight aria-hidden={true} className="text-muted-foreground size-3.5 shrink-0" />
</button>
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
<DialogContent className="sm:max-w-md">
{step === "preview" &&
preview &&
(() => {
const movieCount = preview.stats.movies;
const episodeCount = preview.stats.episodes;
const watchlistCount = preview.stats.watchlist;
const ratingCount = preview.stats.ratings;
return (
<>
<DialogHeader>
<DialogTitle>
<Trans>Import Sofa export</Trans>
</DialogTitle>
<DialogDescription>
<Trans>Review what was found and choose what to import.</Trans>
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-3">
<ImportStatBadge label={t`Movies`} count={movieCount} />
<ImportStatBadge label={t`Episodes`} count={episodeCount} />
<ImportStatBadge label={t`Library`} count={watchlistCount} />
<ImportStatBadge label={t`Ratings`} count={ratingCount} />
</div>
<div className="space-y-2">
<p className="text-sm font-medium">
<Trans>Import options</Trans>
</p>
<ImportOptionCheckbox
label={t`Watch history`}
description={t`${movieCount} movies, ${episodeCount} episodes`}
checked={options.importWatches}
onChange={(v) => setOptions({ ...options, importWatches: v })}
/>
<ImportOptionCheckbox
label={t`Library statuses`}
description={t`${watchlistCount} items`}
checked={options.importWatchlist}
onChange={(v) => setOptions({ ...options, importWatchlist: v })}
/>
<ImportOptionCheckbox
label={t`Ratings`}
description={t`${ratingCount} ratings`}
checked={options.importRatings}
onChange={(v) => setOptions({ ...options, importRatings: v })}
/>
</div>
{preview.warnings.length > 0 && (
<div className="rounded-lg bg-yellow-500/10 p-3">
<p className="mb-1 text-xs font-medium text-yellow-600">
<Trans>Warnings</Trans>
</p>
<ul className="space-y-0.5 text-xs text-yellow-600/80">
{preview.warnings.map((w, i) => (
<li key={i}>{w}</li>
))}
</ul>
</div>
)}
</div>
<DialogFooter>
<DialogClose render={<Button variant="outline" />} onClick={handleClose}>
<Trans>Cancel</Trans>
</DialogClose>
<Button onClick={handleImport} disabled={totalItems === 0}>
<Trans>Import {totalItems} items</Trans>
</Button>
</DialogFooter>
</>
);
})()}
{step === "importing" && (
<>
<DialogHeader>
<DialogTitle>
<Trans>Importing data</Trans>
</DialogTitle>
<DialogDescription>
<Trans>
This may take a few minutes for large libraries. Please don't close this tab.
</Trans>
</DialogDescription>
</DialogHeader>
<div className="flex flex-col items-center gap-4 py-8">
<Progress value={pct} className="w-full" />
<div className="flex flex-col items-center gap-1 text-center">
{progress ? (
<>
<p className="text-sm font-medium">
{progress.current} / {progress.total}
</p>
<p className="text-muted-foreground max-w-[300px] truncate text-xs">
{progress.message}
</p>
</>
) : (
<div className="flex items-center gap-2">
<Spinner className="size-3" />
<p className="text-muted-foreground text-sm">
<Trans>Starting import...</Trans>
</p>
</div>
)}
</div>
</div>
</>
)}
{step === "done" &&
result &&
(() => {
const errorCount = result.errors.length;
const warningCount = result.warnings.length;
const remainingErrors = errorCount - 50;
return (
<>
<DialogHeader>
<DialogTitle>
<Trans>Import complete</Trans>
</DialogTitle>
<DialogDescription>
<Trans>Finished importing your Sofa export.</Trans>
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid grid-cols-3 gap-3">
<ImportStatBadge label={t`Imported`} count={result.imported} />
<ImportStatBadge label={t`Skipped`} count={result.skipped} />
<ImportStatBadge label={t`Failed`} count={result.failed} />
</div>
{errorCount > 0 && (
<div className="bg-destructive/10 max-h-40 overflow-y-auto rounded-lg p-3">
<p className="text-destructive mb-1 text-xs font-medium">
<Trans>Errors ({errorCount})</Trans>
</p>
<ul className="text-destructive/80 space-y-0.5 text-xs">
{result.errors.slice(0, 50).map((e, i) => (
<li key={i}>{e}</li>
))}
{errorCount > 50 && (
<li>
<Trans>...and {remainingErrors} more</Trans>
</li>
)}
</ul>
</div>
)}
{warningCount > 0 && (
<div className="max-h-32 overflow-y-auto rounded-lg bg-yellow-500/10 p-3">
<p className="mb-1 text-xs font-medium text-yellow-600">
<Trans>Warnings ({warningCount})</Trans>
</p>
<ul className="space-y-0.5 text-xs text-yellow-600/80">
{result.warnings.slice(0, 20).map((w, i) => (
<li key={i}>{w}</li>
))}
</ul>
</div>
)}
</div>
<DialogFooter>
<Button onClick={handleClose}>
<Trans>Done</Trans>
</Button>
</DialogFooter>
</>
);
})()}
</DialogContent>
</Dialog>
</>
);
}
function ImportStatBadge({ label, count }: { label: string; count: number }) {
return (
<div className="bg-muted/50 rounded-lg p-2.5 text-center">
<p className="text-lg leading-none font-semibold">{count}</p>
<p className="text-muted-foreground mt-1 text-xs">{label}</p>
</div>
);
}
function ImportOptionCheckbox({
label,
description,
checked,
onChange,
}: {
label: string;
description: string;
checked: boolean;
onChange: (v: boolean) => void;
}) {
const id = `sofa-import-${label}`;
return (
<div className="flex items-center gap-3">
<Checkbox id={id} checked={checked} onCheckedChange={onChange} />
<div>
<Label htmlFor={id} className="text-sm">
{label}
</Label>
<p className="text-muted-foreground text-xs">{description}</p>
</div>
</div>
);
}
// ─── Change Password Dialog ─────────────────────────────────
function ChangePasswordDialog() {
const { t } = useLingui();
const [open, setOpen] = useState(false);
+1
View File
@@ -33,6 +33,7 @@ export function appErrorMessages(
IMPORT_ALREADY_RUNNING: t`An import is already in progress`,
IMPORT_CANNOT_CANCEL: t`This import cannot be cancelled`,
REGISTRATION_CLOSED: t`Registration is currently closed`,
EXPORT_FAILED: t`Failed to export data`,
};
}