feat: update file import/export to use .yvsnap extension instead of .json

This commit is contained in:
2026-01-08 09:51:41 +02:00
parent a09538a3c9
commit a960055532
3 changed files with 7 additions and 7 deletions
+2 -2
View File
@@ -38,7 +38,7 @@ function App() {
const handleImportFile = useCallback(() => { const handleImportFile = useCallback(() => {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.yvsnap';
input.onchange = (e) => { input.onchange = (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
@@ -64,7 +64,7 @@ function App() {
const blob = new Blob([json], { type: 'application/json' }); const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement('a'); const link = document.createElement('a');
link.download = `${snap.meta.title || 'canvas'}.json`; link.download = `${snap.meta.title || 'canvas'}.yvsnap`;
link.href = url; link.href = url;
link.click(); link.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
+2 -2
View File
@@ -33,7 +33,7 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
const handleImportFile = () => { const handleImportFile = () => {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.yvsnap';
input.onchange = (e) => { input.onchange = (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
@@ -101,7 +101,7 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
<FileText className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" /> <FileText className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
</div> </div>
<h3 className="font-medium mb-1">Import File</h3> <h3 className="font-medium mb-1">Import File</h3>
<p className="text-sm text-neutral-500">Open an existing .json project file</p> <p className="text-sm text-neutral-500">Open an existing .yvsnap project file</p>
<ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" /> <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
</button> </button>
+3 -3
View File
@@ -88,7 +88,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
const blob = new Blob([json], { type: 'application/json' }); const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement('a'); const link = document.createElement('a');
link.download = `${snap.meta.title || 'canvas'}.json`; link.download = `${snap.meta.title || 'canvas'}.yvsnap`;
link.href = url; link.href = url;
link.click(); link.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
@@ -101,7 +101,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
const handleImportJSON = useCallback(() => { const handleImportJSON = useCallback(() => {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.yvsnap';
input.onchange = (e) => { input.onchange = (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
@@ -324,7 +324,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
</div> </div>
<div className="flex flex-col items-start gap-0.5"> <div className="flex flex-col items-start gap-0.5">
<span className="text-sm font-medium text-neutral-200 group-hover:text-white transition-colors">Save Project</span> <span className="text-sm font-medium text-neutral-200 group-hover:text-white transition-colors">Save Project</span>
<span className="text-[10px] text-neutral-500">Edit later (.json)</span> <span className="text-[10px] text-neutral-500">Edit later (.yvsnap)</span>
</div> </div>
</div> </div>
</button> </button>