move preset saving to separate component

src/App.vue

@@ -22,20 +22,7 @@
         <PresetLoader />
       </template>
       <template #save>
-        <p>
+        <PresetSaver />
-          <label>
-            Save current system as:
-            <input placeholder="fancy star system" v-model="currentName" />
-          </label>
-        </p>
-        <p>
-          <b>Local Storage </b>
-          <button @click="savePreset(star, objects)">save as "{{ currentName }}"</button>
-        </p>
-        <p>
-          <b>File System </b>
-          <a :href="fileBlob" :download="`${currentName}.json`">download as {{ currentName }}.json</a>
-        </p>
       </template>
       <template #x></template>
     </AppMenu>
@@ -56,6 +43,7 @@ import SystemSettings from './components/SystemSettings.vue'
 import ObjectList from './components/ObjectList.vue'
 import ObjectSettings from './components/ObjectSettings.vue'
 import PresetLoader from './components/PresetLoader.vue'
+import PresetSaver from './components/PresetSaver.vue'
 
 import useObjects from './useObjects'
 import useStorage from './useStorage'

src/components/PresetSaver.vue

@@ -0,0 +1,27 @@
+<template>
+  <p>
+    <label>
+      Save current system as:
+      <input placeholder="fancy star system" v-model="currentName" />
+    </label>
+  </p>
+  <p>
+    <b>Local Storage </b>
+    <button @click="savePreset(star, objects)">save as "{{ currentName }}"</button>
+  </p>
+  <p>
+    <b>File System </b>
+    <a :href="fileBlob" :download="`${currentName}.json`">download as {{ currentName }}.json</a>
+  </p>
+</template>
+
+<script setup>
+import useObjects from '../useObjects'
+import useStorage from '../useStorage'
+
+const { star, objects } = useObjects()
+const {
+  savePreset,
+  currentName,
+} = useStorage(star, objects)
+</script>

src/constants.js

@@ -12,4 +12,3 @@ export const MAX_AMOUNT_RINGS = 15
 
 export const MIN_DISTANCE_PLANET = 32
 export const MAX_DISTANCE_PLANET = 999
-