refactor: migrate project storage from IndexedDB to OPFS with folder-based structure

- Replace monolithic KGStorage with KGProjectStorage (OPFS) and KGConfigStorage (IndexedDB)
- Each project stored as folder: project.json + meta.json + media/
- Add KGConfigUpgrader with V1 upgrader to auto-migrate existing IndexedDB projects to OPFS
- Request persistent storage via navigator.storage.persist() to prevent browser eviction
- Show loading spinner during one-time migration
- Enforce safe project name characters (letters, numbers, space, hyphen, underscore, period, parens)
- Export projects as .kgstudio zip bundles instead of raw JSON
- Import supports .kgstudio bundles (with meta.json validation) and legacy JSON files
- Auto-deduplicate project names on import with (1), (2), etc. suffix
- Add OPFS shell debugger (pwd, ls, cd, cat, dl) accessible via KGDebugger.opfs()
- Add ESLint semi rule for consistent semicolons
- Delete KGStorage.ts — all logic absorbed by new storage classes
- Add jszip dependency for zip export/import
This commit is contained in:
Xiaohan-Tian
2026-04-09 19:25:08 -07:00
parent 17610f12f3
commit 2d3ea33ce6
21 changed files with 1781 additions and 235 deletions
+22
View File
@@ -141,6 +141,9 @@ function App() {
{/* Global Loading Overlay for instrument buffer loading */}
<GlobalLoadingOverlayContainer />
{/* Migration Loading Overlay */}
<MigrationOverlayContainer />
</div>
);
}
@@ -210,3 +213,22 @@ const GlobalLoadingOverlayContainer: React.FC = () => {
/>
);
};
// Migration overlay — shown during one-time IndexedDB -> OPFS migration
const MigrationOverlayContainer: React.FC = () => {
const [isMigrating, setIsMigrating] = useState<boolean>(() => KGCore.instance().getIsMigrating());
useEffectReact(() => {
KGCore.instance().setMigrationStateChangeCallback(setIsMigrating);
return () => {
KGCore.instance().setMigrationStateChangeCallback(() => {});
};
}, []);
return (
<LoadingOverlay
visible={isMigrating}
message="Migrating projects to new storage..."
/>
);
};