From ebd59af81bdf5b48a5ebb8fbac26ac9004069712 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Thu, 8 Oct 2026 16:30:46 +0200
Subject: [PATCH] small design improvements for preset items

---
 src/App.vue         |  4 ++--
 src/assets/main.css | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2ed245e..e6f8f7d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -171,7 +171,6 @@ function switchView(val) {
 }
 
 // EXPORT / IMPORT
-
 function exportPresets() {
   const json = JSON.stringify(presets.value, null, 2);
   const blob = new Blob([json], { type: "application/json" });
@@ -258,8 +257,9 @@ watch(
       <h2 id="presetsMessage" v-if="presets.length == 0">No Presets defined</h2>
       <div id="presetsItems" :class="{ list: view == 'list', grid: view == 'grid' }">
         <button v-for="preset in sortedPresets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
+          <h3 class="grow left">{{ preset.title || preset.tempo }}</h3>
           <h2>{{ preset.tempo }}</h2>
-          BPM
+          <span style="color: var(--neutral-gray);">bpm</span>
         </button>
       </div>
     </div>
diff --git a/src/assets/main.css b/src/assets/main.css
index 1414def..d918f73 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -155,13 +155,29 @@ button#stop {
 
 #presetsItems.list .presetItem {
   align-items: center;
+}
 
+#presetsItems.list .presetItem h2 {
+  margin: 0 4px;
+}
+
+#presetsItems.list .presetItem h3 {
+  text-align: left;
 }
 
 #presetsItems.grid .presetItem {
   min-width: 86px;
   text-align: center;
   flex-direction: column;
+  padding: 4px;
+}
+
+#presetsItems.grid .presetItem h2 {
+  margin: 8px;
+}
+
+#presetsItems.grid .presetItem h3 {
+  margin: 0;
 }
 
 .presetItem.selected {