From ba6514add202b4fbaa0863126e472e26990d2ba2 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Wed, 4 Mar 2026 06:19:58 +0000
Subject: [PATCH] style: add svg icons for waveforms in Tone Generator

---
 src/components/tools/ToneGenerator.vue | 36 ++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/tools/ToneGenerator.vue b/src/components/tools/ToneGenerator.vue
index afe85bf..d73ad1c 100644
--- a/src/components/tools/ToneGenerator.vue
+++ b/src/components/tools/ToneGenerator.vue
@@ -8,10 +8,10 @@ const waveform = ref('sine')
 const isPlaying = ref(false)
 
 const waveforms = [
-  { value: 'sine', label: 'Sine' },
-  { value: 'square', label: 'Square' },
-  { value: 'sawtooth', label: 'Sawtooth' },
-  { value: 'triangle', label: 'Triangle' }
+  { value: 'sine', label: 'Sine', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3.5-8 5.5-8 9 0 3.5 8 5.5 8 9 0"/></svg>' },
+  { value: 'square', label: 'Square', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15h6V9h6v6h6"/></svg>' },
+  { value: 'sawtooth', label: 'Sawtooth', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15l8-8v8l8-8v8"/></svg>' },
+  { value: 'triangle', label: 'Triangle', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-6 8 12 6-8"/></svg>' }
 ]
 
 let audioContext = null
@@ -169,7 +169,10 @@ onUnmounted(() => {
               @click="waveform = wf.value"
               v-ripple
             >
-              {{ wf.label }}
+              <div class="wf-btn-content">
+                <span class="wf-label">{{ wf.label }}</span>
+                <span class="wf-icon" v-html="wf.icon"></span>
+              </div>
             </button>
           </div>
         </div>
@@ -386,6 +389,25 @@ onUnmounted(() => {
   cursor: pointer;
   font-weight: bold;
   transition: all 0.2s;
+  flex: 1; /* make buttons take even space by default on desktop too */
+}
+
+.wf-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.wf-label {
+  flex: 1;
+  text-align: left;
+}
+
+.wf-icon {
+  display: flex;
+  opacity: 0.6;
+  transition: opacity 0.2s;
 }
 
 .wf-btn:hover {
@@ -399,6 +421,10 @@ onUnmounted(() => {
   box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.2);
 }
 
+.wf-btn.active .wf-icon {
+  opacity: 1;
+}
+
 .action-section {
   display: flex;
   justify-content: center;