Add export / import function fix #4

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onBeforeUnmount } from "vue";
+import { ref, watch, computed, onBeforeUnmount } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown, faList, faGrip, faDownload, faUpload } from "@fortawesome/free-solid-svg-icons";
 
@@ -132,14 +132,10 @@ function addPreset() {
   const nextId = Math.max(0, ...presets.value.map(p => p.id)) + 1;
   const preset = { tempo: bpm.value, id: nextId };
   presets.value.push(preset);
-
-  localStorage.setItem(STORAGE_KEY_PRESETS, JSON.stringify(presets.value));
 }
 
 function deletePreset() {
   presets.value = presets.value.filter(f => f.id != selectedPreset.value.id);
-
-  localStorage.setItem(STORAGE_KEY_PRESETS, JSON.stringify(presets.value));
   stop();
   selectedPreset = ref(null);
 }
@@ -174,10 +170,55 @@ function switchView(val) {
   localStorage.setItem(STORAGE_KEY_VIEW, val);
 }
 
+// EXPORT / IMPORT
+
+function exportPresets() {
+  const json = JSON.stringify(presets.value, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "click-presets.json";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+
+  URL.revokeObjectURL(url);
+}
+
+async function importPresets(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+
+  try {
+    const data = JSON.parse(await file.text());
+    if (Array.isArray(data)) {
+      presets.value = data.filter(p => Number.isInteger(p.id) && Number.isFinite(p.tempo));
+    }
+  } catch (error) {
+    console.error("Import fehlgeschlagen:", error);
+  }
+  event.target.value = "";
+}
+
+// Watchers
+watch(
+  presets,
+  (value) => {
+    try {
+      localStorage.setItem(STORAGE_KEY_PRESETS, JSON.stringify(value));
+    } catch (error) {
+      console.error("Presets konnten nicht gespeichert werden:", error);
+    }
+  },
+  { deep: true }
+);
 
 </script>
 
 <template>
+  <input type="file" ref="fileInput" accept="application/json" @change="importPresets" hidden>
   <header>
     <div id="controls">
       <h1>Speed</h1>
@@ -225,10 +266,10 @@ function switchView(val) {
   </main>
   <footer>
     <div class="left">
-      <button>
+      <button @click="$refs.fileInput.click()">
         <font-awesome-icon :icon="faUpload" size="xl" />
       </button>
-      <button>
+      <button @click="exportPresets">
         <font-awesome-icon :icon="faDownload" size="xl" />
       </button>
     </div>