added saving

src/ui/Beat/Beat.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="beat" :class="{ vertical: false }">
-        <h2 class="beat-title">{{ beat!.name.value }}</h2>
+        <editable-text-field node-type="h3" class="beat-title" v-model="beat!.name.value" />
         <div class="beat-main-container">
             <div class="beat-titles-container">
                 <div class="beat-track-title" v-for="title in titles">{{ title }}</div>
@@ -62,7 +62,7 @@
         color: var(--color-title-light);
         text-align: center;
         width: fit-content;
-        padding-left: 16px;
+        margin-left: 16px;
     }
 
     .vertical-mode .beat-title {

src/ui/Root/Root.vue

@@ -46,6 +46,12 @@
                     @click="resetActiveBeat">
                     <icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
                 </div>
+                <div
+                    class="root-quick-access-button"
+                    title="Reset all"
+                    @click="save('localStorage')">
+                    Save
+                </div>
             </div> 
         </div>
 
@@ -83,6 +89,7 @@
     provide(BeatStoreKey, beatStore);
 
     const {
+        save,
         resetActiveBeat,
         activeBeatIndex,
         beats,

src/ui/Widgets/EditableTextFIeld/EditableTextField.vue

@@ -3,25 +3,29 @@
         v-if="editing"
         :value="modelValue"
         ref="inputField"
-        class="editable-text-field-view"
+        class="input editable-text-field-view"
         type="text"
         @input="onInput"
         @blur="onBlur"
         @keyup="onKeyUp"
     /> 
-    <div
+    <component
         v-else
-        class="editable-text-field-view"
+        :is="nodeType"
+        class="static editable-text-field-view"
         @click="editing = true">
         {{ modelValue }}
-    </div>
+    </component>
 </template>
 
 <script setup lang="ts">import { ref, watch } from 'vue';
-    const props = defineProps<{
+    const props = withDefaults(defineProps<{
+        nodeType?: string,
         modelValue: string,
         noEmpty?: boolean,
-    }>();
+    }>(), {
+        nodeType: 'div',
+    });
 
     const emit = defineEmits<{
         (e: 'update:modelValue', value: string): true,
@@ -53,19 +57,24 @@
     }
 </script>
 
-<style lang="scss">
-    input.editable-text-field-view {
-        width: fit-content;
-        max-width: 200px;
+<style scoped lang="scss">
+    .editable-text-field-view {
+        min-width: 3em;
+        padding: 0.2em;
     }
 
-    div.editable-text-field-view {
-        width: 100%;
+    .input.editable-text-field-view {
+        color: black;
+        width: fit-content;
+    }
+
+    .static.editable-text-field-view {
         transition: background-color 200ms;
+        width: fit-content;
         cursor: pointer;
     }
 
-    div.editable-text-field-view:hover {
+    .static.editable-text-field-view:hover {
         background-color: var(--color-ui-neutral-dark-hover);
     }
 </style>"