0.7.1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "hasInstallScript": true,
       "dependencies": {
         "@gkucmierz/utils": "^1.28.7",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/tools/ToneGenerator.vue

@@ -8,10 +8,10 @@ const waveform = ref('sine')
 const isPlaying = ref(false)
 
 const waveforms = [
-  { value: 'sine', label: 'Sine' },
+  { 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' },
+  { 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' },
+  { 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' }
+  { 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;