feat: add project export/import for cross-device transfers

apps/web/src/app/projects/page.tsx

@@ -3,8 +3,8 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import type { KeyboardEvent, MouseEvent } from "react";
-import { useEffect, useState } from "react";
+import type { ChangeEvent, KeyboardEvent, MouseEvent } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { EditorCore } from "@/core";
 import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
@@ -45,6 +45,8 @@ import {
 	Edit03Icon,
 	ArrowDown02Icon,
 	InformationCircleIcon,
+	Download04Icon,
+	Upload04Icon,
 } from "@hugeicons/core-free-icons";
 import { OcVideoIcon } from "@/components/icons";
 import { Label } from "@/components/ui/label";
@@ -183,6 +185,7 @@ function ProjectsHeader() {
 
 				<div className="flex items-center gap-3 md:gap-4">
 					<SearchBar className="hidden md:block" />
+					<ImportProjectButton />
 					<NewProjectButton />
 				</div>
 			</div>
@@ -526,6 +529,44 @@ function NewProjectButton() {
 	);
 }
 
+function ImportProjectButton() {
+	const editor = useEditor();
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		await editor.project.importProjectFromFile({ file });
+
+		// Reset the input so the same file can be imported again
+		if (fileInputRef.current) {
+			fileInputRef.current.value = "";
+		}
+	};
+
+	return (
+		<>
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept=".opencut"
+				onChange={handleImport}
+				className="hidden"
+			/>
+			<Button
+				size="lg"
+				variant="outline"
+				className="flex px-5 md:px-6"
+				onClick={() => fileInputRef.current?.click()}
+			>
+				<HugeiconsIcon icon={Upload04Icon} className="size-4" />
+				<span className="text-sm font-medium hidden md:block">Import</span>
+			</Button>
+		</>
+	);
+}
+
 function ProjectItem({
 	project,
 	allProjectIds,
@@ -555,6 +596,9 @@ function ProjectItem({
 	const handleDuplicate = async () => {
 		await duplicateProjects({ editor, ids: [project.id] });
 	};
+	const handleExport = async () => {
+		await editor.project.exportProjectToFile({ id: project.id });
+	};
 	const handleDeleteClick = () => setIsDeleteDialogOpen(true);
 	const handleInfoClick = () => setIsInfoDialogOpen(true);
 	const handleDeleteConfirm = async () => {
@@ -674,6 +718,7 @@ function ProjectItem({
 					variant="list"
 					onRenameClick={handleRename}
 					onDuplicateClick={handleDuplicate}
+					onExportClick={handleExport}
 					onDeleteClick={handleDeleteClick}
 					onInfoClick={handleInfoClick}
 				/>
@@ -715,6 +760,7 @@ function ProjectItem({
 										onOpenChange={setIsDropdownOpen}
 										onRenameClick={handleRename}
 										onDuplicateClick={handleDuplicate}
+										onExportClick={handleExport}
 										onDeleteClick={handleDeleteClick}
 										onInfoClick={handleInfoClick}
 									/>
@@ -728,6 +774,7 @@ function ProjectItem({
 				<ProjectContextMenuContent
 					onRenameClick={handleRename}
 					onDuplicateClick={handleDuplicate}
+					onExportClick={handleExport}
 					onDeleteClick={handleDeleteClick}
 					onInfoClick={handleInfoClick}
 				/>
@@ -762,11 +809,13 @@ function ProjectItem({
 function ProjectContextMenuContent({
 	onRenameClick,
 	onDuplicateClick,
+	onExportClick,
 	onDeleteClick,
 	onInfoClick,
 }: {
 	onRenameClick: () => void;
 	onDuplicateClick: () => void;
+	onExportClick: () => void;
 	onDeleteClick: () => void;
 	onInfoClick: () => void;
 }) {
@@ -784,6 +833,12 @@ function ProjectContextMenuContent({
 			>
 				Duplicate
 			</ContextMenuItem>
+			<ContextMenuItem
+				icon={<HugeiconsIcon icon={Download04Icon} />}
+				onClick={onExportClick}
+			>
+				Export
+			</ContextMenuItem>
 			<ContextMenuItem
 				icon={<HugeiconsIcon icon={InformationCircleIcon} />}
 				onClick={onInfoClick}
@@ -808,6 +863,7 @@ function ProjectMenu({
 	variant = "grid",
 	onRenameClick,
 	onDuplicateClick,
+	onExportClick,
 	onDeleteClick,
 	onInfoClick,
 }: {
@@ -816,6 +872,7 @@ function ProjectMenu({
 	variant?: "grid" | "list";
 	onRenameClick: () => void;
 	onDuplicateClick: () => void;
+	onExportClick: () => void;
 	onDeleteClick: () => void;
 	onInfoClick: () => void;
 }) {
@@ -850,6 +907,11 @@ function ProjectMenu({
 		onOpenChange(false);
 	};
 
+	const handleExport = () => {
+		onExportClick();
+		onOpenChange(false);
+	};
+
 	const handleDeleteClick = () => {
 		onDeleteClick();
 		onOpenChange(false);
@@ -902,6 +964,10 @@ function ProjectMenu({
 					<HugeiconsIcon icon={Copy01Icon} />
 					Duplicate
 				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleExport}>
+					<HugeiconsIcon icon={Download04Icon} />
+					Export
+				</DropdownMenuItem>
 				<DropdownMenuItem onClick={handleInfoClick}>
 					<HugeiconsIcon icon={InformationCircleIcon} />
 					Info

apps/web/src/core/managers/project-manager.ts

@@ -9,6 +9,7 @@ import type {
 } from "@/lib/project/types";
 import type { ExportOptions, ExportResult, ExportState } from "@/lib/export";
 import { storageService } from "@/services/storage/service";
+import type { SerializedProject } from "@/services/storage/types";
 import { toast } from "sonner";
 import { generateUUID } from "@/utils/id";
 import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
@@ -640,6 +641,128 @@ export class ProjectManager {
 		this.notify();
 	}
 
+	async exportProjectToFile({ id }: { id: string }): Promise<void> {
+		try {
+			const serializedProject =
+				await storageService.exportProjectToJSON({ id });
+			if (!serializedProject) {
+				toast.error("Project not found");
+				return;
+			}
+
+			const exportData = {
+				formatVersion: 1,
+				exportedAt: new Date().toISOString(),
+				project: serializedProject,
+			};
+
+			const json = JSON.stringify(exportData, null, 2);
+			const blob = new Blob([json], { type: "application/json" });
+			const url = URL.createObjectURL(blob);
+
+			const safeName = serializedProject.metadata.name
+				.replace(/[^a-zA-Z0-9_-]/g, "_")
+				.substring(0, 100);
+			const filename = `${safeName}.opencut`;
+
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = filename;
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			URL.revokeObjectURL(url);
+
+			toast.success("Project exported successfully");
+		} catch (error) {
+			console.error("Failed to export project:", error);
+			toast.error("Failed to export project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+		}
+	}
+
+	async importProjectFromFile({
+		file,
+	}: {
+		file: File;
+	}): Promise<string | null> {
+		try {
+			const text = await file.text();
+			let parsed: unknown;
+
+			try {
+				parsed = JSON.parse(text);
+			} catch {
+				toast.error("Invalid file", {
+					description: "The file is not valid JSON",
+				});
+				return null;
+			}
+
+			const data = parsed as Record<string, unknown>;
+
+			if (
+				!data ||
+				typeof data !== "object" ||
+				!("formatVersion" in data) ||
+				!("project" in data)
+			) {
+				toast.error("Invalid file format", {
+					description: "This does not appear to be an OpenCut project file",
+				});
+				return null;
+			}
+
+			const serializedProject = data.project as SerializedProject;
+
+			if (
+				!serializedProject?.metadata?.id ||
+				!serializedProject?.metadata?.name ||
+				!Array.isArray(serializedProject?.scenes)
+			) {
+				toast.error("Invalid project data", {
+					description: "The project data is incomplete or corrupted",
+				});
+				return null;
+			}
+
+			// Assign a new ID to avoid collisions with existing projects
+			const newId = generateUUID();
+			serializedProject.metadata.id = newId;
+			serializedProject.metadata.updatedAt = new Date().toISOString();
+
+			await storageService.importProjectFromJSON({ serializedProject });
+
+			// Reload projects list
+			const metadata = {
+				id: serializedProject.metadata.id,
+				name: serializedProject.metadata.name,
+				thumbnail: serializedProject.metadata.thumbnail,
+				duration: serializedProject.metadata.duration ?? 0,
+				createdAt: new Date(serializedProject.metadata.createdAt),
+				updatedAt: new Date(serializedProject.metadata.updatedAt),
+			};
+
+			this.savedProjects = [metadata, ...this.savedProjects];
+			this.notify();
+
+			toast.success("Project imported successfully", {
+				description: serializedProject.metadata.name,
+			});
+
+			return newId;
+		} catch (error) {
+			console.error("Failed to import project:", error);
+			toast.error("Failed to import project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+			return null;
+		}
+	}
+
 	subscribe(listener: () => void): () => void {
 		this.listeners.add(listener);
 		return () => this.listeners.delete(listener);

apps/web/src/services/storage/service.ts

@@ -517,6 +517,27 @@ class StorageService {
 		return "indexedDB" in window;
 	}
 
+	async exportProjectToJSON({
+		id,
+	}: {
+		id: string;
+	}): Promise<SerializedProject | null> {
+		await this.ensureMigrations();
+		const serializedProject = await this.projectsAdapter.get(id);
+		return serializedProject ?? null;
+	}
+
+	async importProjectFromJSON({
+		serializedProject,
+	}: {
+		serializedProject: SerializedProject;
+	}): Promise<void> {
+		await this.projectsAdapter.set(
+			serializedProject.metadata.id,
+			serializedProject,
+		);
+	}
+
 	isFullySupported(): boolean {
 		return this.isIndexedDBSupported() && this.isOPFSSupported();
 	}