Adjusted save logic

src/lib/components/FileManagement/LoadButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { setSpec, type APISpec } from '$lib/db';
+
+	export let spec: APISpec;
+
+	function onLoad(e: Event): void {
+		console.log('load button clicked');
+		setSpec(spec);
+	}
+</script>
+
+<button class="btn variant-ghost-warning" on:click={onLoad}> Load </button>

src/lib/components/FileManagement/SaveNewButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { openApiStore } from '$lib';
+	import { db, selectedSpec } from '$lib/db';
+
+	function onSave(e: Event): void {
+		console.log('Save button clicked');
+		if (!$selectedSpec) {
+			$selectedSpec = {
+				name: 'New OpenAPI Spec',
+				spec: $openApiStore
+			};
+		}
+		console.log($selectedSpec);
+		$selectedSpec.id = undefined;
+		db.apiSpecs.put($selectedSpec);
+	}
+</script>
+
+<button class="btn variant-ghost-success" on:click={onSave}> Save New </button>

src/lib/components/FileManagement/Upload.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { openApiStore } from '$lib';
-	import { db, selectedSpec } from '$lib/db';
+	import { db, selectedSpec, setSpec } from '$lib/db';
 	import type { OpenAPIV3_1 } from '$lib/openAPITypes';
 	import {
 		FileButton,
@@ -29,11 +29,7 @@
 				} else {
 					content = parse(result);
 				}
-				openApiStore.set(content);
-				selectedSpec.set({
-					name: file.name,
-					spec: content
-				});
+				setSpec({ name: file.name, spec: content });
 			} catch (error) {
 				console.error(`Error parsing ${isJson ? 'json' : 'yaml'} file`, error);
 			}

src/lib/db.ts

@@ -5,19 +5,10 @@ import { writable, type Writable } from "svelte/store";
 
 export const selectedSpec: Writable<APISpec | undefined> = writable(undefined)
 
-openApiStore.subscribe((value) => {
-    if (selectedSpec) {
-        selectedSpec.update((v) => {
-            if (v) {
-                return {
-                    ...v,
-                    spec: value
-                }
-            }
-            return v;
-        })
-    }
-});
+export const setSpec = (spec: APISpec) => {
+    selectedSpec.set(spec);
+    openApiStore.set(spec.spec);
+}
 
 export interface APISpec {
     id?: string;

src/routes/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import CreateNewButton from '$lib/components/FileManagement/CreateNewButton.svelte';
 	import DeleteButton from '$lib/components/FileManagement/DeleteButton.svelte';
+	import LoadButton from '$lib/components/FileManagement/LoadButton.svelte';
 	import SaveButton from '$lib/components/FileManagement/SaveButton.svelte';
+	import SaveNewButton from '$lib/components/FileManagement/SaveNewButton.svelte';
 	import Upload from '$lib/components/FileManagement/Upload.svelte';
 	import { db, selectedSpec } from '$lib/db';
 	import { liveQuery } from 'dexie';
@@ -26,6 +28,7 @@
 						<td>{spec.id}</td>
 						<td>{spec.name}</td>
 						<td>
+							<LoadButton {spec} />
 							<DeleteButton {spec} />
 						</td>
 					</tr>
@@ -33,7 +36,7 @@
 			{/if}
 		</tbody>
 	</table>
-	{#if $selectedSpec?.name}
+	{#if $selectedSpec}
 		<input
 			class="input"
 			bind:value={$selectedSpec.name}
@@ -42,6 +45,7 @@
 		/>
 	{/if}
 	<SaveButton />
+	<SaveNewButton />
 	<CreateNewButton />
 	<Upload />
 </div>