create or modify name for a preset fix #6

src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch, computed, onBeforeUnmount } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown, faList, faGrip, faDownload, faUpload, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown, faList, faGrip, faDownload, faUpload, faCheck, faPen } from "@fortawesome/free-solid-svg-icons";
 
 // App Einstellungen
 const view = ref(loadView());
@@ -41,7 +41,7 @@ function clampBpm() {
 function changeBpm(delta) {
   bpm.value = (Number.isFinite(bpm.value) ? bpm.value : 120) + delta;
   clampBpm();
-  selectedPreset = ref(null);
+  selectedPreset.value = null;
 }
 
 async function loadClickSound() {
@@ -133,13 +133,21 @@ function addPreset() {
   const nextId = Math.max(0, ...presets.value.map(p => p.id)) + 1;
   const preset = { tempo: bpm.value, id: nextId, title: "" };
   presets.value.push(preset);
-  editPreset.value = preset;
+  modifyPreset(preset);
+}
+
+function modifyPreset(preset = null) {
+  if (preset !== null) {
+    editPreset.value = preset;
+  } else if (selectedPreset) {
+    editPreset.value = selectedPreset.value;
+  }
 }
 
 function deletePreset() {
   presets.value = presets.value.filter(f => f.id != selectedPreset.value.id);
   stop();
-  selectedPreset = ref(null);
+  selectedPreset.value = null;
 }
 
 function startPreset(preset) {
@@ -228,7 +236,7 @@ watch(
   <div id="dialog" ref="dialog" v-if="editPreset">
     <div id="dialogPreset">
       <h1>{{ editPreset.tempo }} bpm</h1>
-      <input type="text" placeholder="Title (optional)" name="presetTitle" id="presetTitle" v-model="editPreset.title">
+      <input type="text" placeholder="Title (optional)" name="presetTitle" id="presetTitle" v-model="editPreset.title" @keydown.enter="savePreset">
       <button id="presetDone" @click="savePreset"> <font-awesome-icon :icon="faCheck" size="xl" /></button>
     </div>
   </div>
@@ -258,7 +266,10 @@ watch(
             <font-awesome-icon :icon="faStop" size="xl" />
           </button>
         </div>
-        <button id="addPreset" style="background: var(--blue)" class="presetsControl" @click="addPreset">
+        <button id="editPreset" v-if="selectedPreset" style="background: var(--blue)" class="presetsControl" @click="modifyPreset()">
+          <font-awesome-icon :icon="faPen" size="xl" />
+        </button>
+        <button id="addPreset" v-else style="background: var(--blue)" class="presetsControl" @click="addPreset">
           <font-awesome-icon :icon="faArrowDown" size="xl" />
         </button>
       </div>

src/assets/main.css

@@ -163,10 +163,14 @@ button#stop {
 
 #presetsItems.list .presetItem h3 {
   text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #presetsItems.grid .presetItem {
   min-width: 86px;
+  max-width: 86px;
   text-align: center;
   flex-direction: column;
   padding: 4px;
@@ -178,6 +182,9 @@ button#stop {
 
 #presetsItems.grid .presetItem h3 {
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .presetItem.selected {
@@ -213,7 +220,7 @@ input[type="number"] {
   background: var(--dark50);
   display: flex;
   flex-direction: column;
-  align-content: center;
+  justify-content: center;
 }
 
 #dialogPreset {