From a6264271420a23a0346095486a1fd40fa201d341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 10:25:06 +0100
Subject: [PATCH] feat: implement Phase 12.3 - Project Export/Import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added full export/import functionality for projects:

Export Features:
- Export button for each project in Projects dialog
- Downloads project as JSON file with all data
- Includes tracks, audio buffers, effects, automation, settings
- Filename format: {project_name}_{timestamp}.json

Import Features:
- Import button in Projects dialog header
- File picker for .json files
- Automatically generates new project ID to avoid conflicts
- Appends "(Imported)" to project name
- Preserves all project data

This enables:
- Backup of projects outside the browser
- Sharing projects with collaborators
- Migration between computers/browsers
- Version snapshots at different stages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/dialogs/ProjectsDialog.tsx | 22 ++++++++-
 components/editor/AudioEditor.tsx     | 68 +++++++++++++++++++++++++++
 lib/storage/projects.ts               | 61 ++++++++++++++++++++++++
 3 files changed, 150 insertions(+), 1 deletion(-)

diff --git a/components/dialogs/ProjectsDialog.tsx b/components/dialogs/ProjectsDialog.tsx
index b8cd5bd..94ac591 100644
--- a/components/dialogs/ProjectsDialog.tsx
+++ b/components/dialogs/ProjectsDialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { X, Plus, Trash2, Copy, FolderOpen } from 'lucide-react';
+import { X, Plus, Trash2, Copy, FolderOpen, Download, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import type { ProjectMetadata } from '@/lib/storage/db';
 import { formatDuration } from '@/lib/audio/decoder';
@@ -14,6 +14,8 @@ export interface ProjectsDialogProps {
   onLoadProject: (projectId: string) => void;
   onDeleteProject: (projectId: string) => void;
   onDuplicateProject: (projectId: string) => void;
+  onExportProject: (projectId: string) => void;
+  onImportProject: () => void;
 }
 
 export function ProjectsDialog({
@@ -24,6 +26,8 @@ export function ProjectsDialog({
   onLoadProject,
   onDeleteProject,
   onDuplicateProject,
+  onExportProject,
+  onImportProject,
 }: ProjectsDialogProps) {
   if (!open) return null;
 
@@ -44,6 +48,15 @@ export function ProjectsDialog({
         <div className="flex items-center justify-between p-6 border-b border-border">
           <h2 className="text-lg font-semibold text-foreground">Projects</h2>
           <div className="flex items-center gap-2">
+            <Button
+              onClick={onImportProject}
+              variant="outline"
+              size="sm"
+              className="gap-2"
+            >
+              <Upload className="h-4 w-4" />
+              Import
+            </Button>
             <Button
               onClick={onNewProject}
               variant="default"
@@ -111,6 +124,13 @@ export function ProjectsDialog({
                       >
                         Open
                       </button>
+                      <button
+                        onClick={() => onExportProject(project.id)}
+                        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
+                        title="Export project"
+                      >
+                        <Download className="h-4 w-4" />
+                      </button>
                       <button
                         onClick={() => onDuplicateProject(project.id)}
                         className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index dc56755..44aa9ba 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -42,6 +42,8 @@ import {
   listProjects,
   removeProject,
   duplicateProject,
+  exportProjectAsJSON,
+  importProjectFromJSON,
   type ProjectMetadata,
 } from '@/lib/storage/projects';
 import { getAudioContext } from '@/lib/audio/context';
@@ -1110,6 +1112,70 @@ export function AudioEditor() {
     }
   }, [projects, loadProjectsList, addToast]);
 
+  // Export project
+  const handleExportProject = React.useCallback(async (projectId: string) => {
+    try {
+      const project = projects.find(p => p.id === projectId);
+      if (!project) return;
+
+      await exportProjectAsJSON(projectId);
+
+      addToast({
+        title: 'Project Exported',
+        description: `"${project.name}" exported successfully`,
+        variant: 'success',
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Failed to export project:', error);
+      addToast({
+        title: 'Export Failed',
+        description: 'Could not export project',
+        variant: 'error',
+        duration: 3000,
+      });
+    }
+  }, [projects, addToast]);
+
+  // Import project
+  const handleImportProject = React.useCallback(async () => {
+    try {
+      // Create file input
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.json';
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+
+        try {
+          const projectId = await importProjectFromJSON(file);
+          await loadProjectsList();
+
+          addToast({
+            title: 'Project Imported',
+            description: 'Project imported successfully',
+            variant: 'success',
+            duration: 2000,
+          });
+        } catch (error) {
+          console.error('Failed to import project:', error);
+          addToast({
+            title: 'Import Failed',
+            description: 'Could not import project file',
+            variant: 'error',
+            duration: 3000,
+          });
+        }
+      };
+
+      input.click();
+    } catch (error) {
+      console.error('Failed to open file picker:', error);
+    }
+  }, [loadProjectsList, addToast]);
+
   // Zoom controls
   const handleZoomIn = () => {
     setZoom((prev) => Math.min(20, prev + 1));
@@ -1586,6 +1652,8 @@ export function AudioEditor() {
         onLoadProject={handleLoadProject}
         onDeleteProject={handleDeleteProject}
         onDuplicateProject={handleDuplicateProject}
+        onExportProject={handleExportProject}
+        onImportProject={handleImportProject}
       />
     </>
   );
diff --git a/lib/storage/projects.ts b/lib/storage/projects.ts
index 11958cf..d79aad2 100644
--- a/lib/storage/projects.ts
+++ b/lib/storage/projects.ts
@@ -210,3 +210,64 @@ export async function duplicateProject(sourceProjectId: string, newName: string)
   await saveProject(newProject);
   return newId;
 }
+
+/**
+ * Export project as JSON file
+ */
+export async function exportProjectAsJSON(projectId: string): Promise<void> {
+  const project = await loadProject(projectId);
+  if (!project) throw new Error('Project not found');
+
+  // Convert the project to JSON
+  const json = JSON.stringify(project, null, 2);
+
+  // Create blob and download
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${project.metadata.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${Date.now()}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Import project from JSON file
+ */
+export async function importProjectFromJSON(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = async (e) => {
+      try {
+        const json = e.target?.result as string;
+        const project = JSON.parse(json) as ProjectData;
+
+        // Generate new ID to avoid conflicts
+        const newId = generateProjectId();
+        const now = Date.now();
+
+        const importedProject: ProjectData = {
+          ...project,
+          metadata: {
+            ...project.metadata,
+            id: newId,
+            name: `${project.metadata.name} (Imported)`,
+            createdAt: now,
+            updatedAt: now,
+          },
+        };
+
+        await saveProject(importedProject);
+        resolve(newId);
+      } catch (error) {
+        reject(new Error('Failed to parse project file'));
+      }
+    };
+
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsText(file);
+  });
+}