add sort by tempo

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onBeforeUnmount } from "vue";
+import { ref, computed, onBeforeUnmount } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown } from "@fortawesome/free-solid-svg-icons";
 
@@ -148,6 +148,10 @@ function startPreset(preset) {
   start();
 }
 
+const sortedPresets = computed(() =>
+  [...presets.value].sort((a, b) => a.tempo - b.tempo)
+);
+
 </script>
 
 <template>
@@ -185,11 +189,11 @@ function startPreset(preset) {
   </header>
 
   <main>
-    <hr>
     <div id="presets">
       <h1>Presets</h1>
+      <h2 id="presetsMessage" v-if="presets.length == 0">No Presets defined</h2>
       <div id="presetsItems">
-        <div v-for="preset in presets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
+        <div v-for="preset in sortedPresets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
           <h2>{{ preset.tempo }}</h2>
           BPM
         </div>

src/assets/base.css

@@ -56,11 +56,6 @@
   --info: #3daee9;
   --info25: #3daee940;
 
-  --nav: var(--background);
-  --nav-button-hover: var(--light-gray);
-  --nav-button-selected: var(--dark);
-  --nav-secondary: var(--neutral-gray);
-  --nav-secondary-button-hover: var(--gray);
   --dark-border: var(--dark-gray);
   --light-border: var(--light-gray);
   --focused-border: var(--gray);

src/assets/main.css

@@ -1,8 +1,23 @@
 @import './base.css';
 
 html,
-body {
+body,
+#app {
   touch-action: manipulation;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  z-index: 1;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 body,
@@ -29,11 +44,12 @@ button {
 
 button.thinButton {
   width: 56px;
+  background-color: var(--white);
 }
 
 button#start,
 button#stop {
-  width: 128px;
+  width: 140px;
   padding: 24px;
   margin: 16px;
 }
@@ -46,6 +62,12 @@ button#stop {
   background: var(--orange);
 }
 
+#controls {
+  box-shadow: 0 0px 4px var(--shadow);
+  background-color: var(--background);
+  border-bottom: 1px solid var(--light-gray);
+}
+
 #controls,
 #presets {
   display: flex;
@@ -53,6 +75,17 @@ button#stop {
   align-items: center;
 }
 
+#presets {
+  flex-grow: 1;
+}
+
+#presetsMessage {
+  flex-grow: 1;
+  align-content: center;
+  font-weight: lighter;
+  color: var(--gray);
+}
+
 #speedControls {
   display: flex;
 }
@@ -60,6 +93,7 @@ button#stop {
 #bpm {
   font-size: 32pt;
   width: 140px;
+  margin: 0 8px
 }
 
 #presetsControls {
@@ -99,6 +133,7 @@ button#stop {
   margin: 4px;
   padding: 4px;
   text-align: center;
+  background-color: var(--white);
 }
 
 .presetItem.selected {