added saving

src/BeatStore.ts

@@ -20,7 +20,7 @@ export function createBeatStore() {
     const activeBeatIndex = ref(0);
     const activeBeat = computed<Beat | null>(() => beats.value[activeBeatIndex.value] ?? null);
     const autoSave = ref(true);
-    const orientation = ref<'horizontal' | 'vertical' | null>(null);
+    const orientation = ref<'horizontal' | 'vertical'>('horizontal');
 
     function resetActiveBeat(): void {
         const current = activeBeat.value;
@@ -51,7 +51,7 @@ export function createBeatStore() {
             localStorage.setItem("drum-slayer-save", JSON.stringify({
                 beats: serials,
                 activeBeatIndex: activeBeatIndex.value,
-                orientation: orientation.value,
+                orientation: orientation.value ?? 'horizontal',
             }));
         }
     }

src/Track.ts

@@ -84,7 +84,7 @@ export function createTrack(options: TrackInitOptions) {
     const scope = effectScope();
     return scope.run(() => {
         const name = ref(options.name ?? 'New Track');
-        const timeSig = reactive({ up: 4, down: 4 });
+        const timeSig = reactive({ up: options.timeSig?.up ?? 4, down: options.timeSig?.down ?? 4 });
         const timeSigUp = computed({
             get() {
                 return timeSig.up;
@@ -105,7 +105,7 @@ export function createTrack(options: TrackInitOptions) {
                 }
             },
         });
-        const unitRecord = shallowRef<TrackUnit[]>([]);
+        const unitRecord = shallowRef<TrackUnit[]>(options.units ?? []);
         const barCount = ref(options.barCount ?? 4);
         const loopLengthInternal = ref(options?.loopLength ?? timeSigUp.value * barCount.value);
         const loopLength = computed({

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>"