Fixing warnings

src/App.svelte

@@ -52,6 +52,7 @@
   let duration = $state(loadDuration());
   let volume = $state(loadVolume());
   let playbackPosition = $state(-1);
+  let cuePoint = $state(0);
   let waveformColor = $state(generateRandomColor());
   let showModal = $state(true);
   let isProcessed = $state(false);
@@ -195,7 +196,7 @@
     onProcess: processSound,
     onDownload: download,
     onUndo: undo,
-    onPlayFromStart: replaySound,
+    onPlayFromStart: togglePlayback,
     onDurationDecrease: (large) => {
       duration = Math.max(0.05, duration - (large ? 1 : 0.05));
     },
@@ -267,6 +268,7 @@
       pitchLock,
     );
     currentBuffer = audioService.createAudioBuffer(data);
+    cuePoint = 0;
     audioService.play(currentBuffer);
   }
 
@@ -276,9 +278,15 @@
     }
   }
 
-  function playFromPosition(offset: number) {
+  function setCuePoint(offset: number) {
-    if (currentBuffer) {
+    cuePoint = offset;
-      audioService.play(currentBuffer, offset);
+  }
+
+  function togglePlayback() {
+    if (playbackPosition >= 0) {
+      audioService.stop();
+    } else if (currentBuffer) {
+      audioService.play(currentBuffer, cuePoint);
     }
   }
 
@@ -673,10 +681,11 @@
             buffer={currentBuffer}
             color={waveformColor}
             {playbackPosition}
+            {cuePoint}
             {selectionStart}
             {selectionEnd}
             onselectionchange={handleSelectionChange}
-            onclick={playFromPosition}
+            onclick={setCuePoint}
           />
         {/if}
 
@@ -705,7 +714,7 @@
             >
               <button onclick={processSound}>Process (P)</button>
               {#if showProcessorPopup}
-                <div onmouseenter={keepPopupOpen} onmouseleave={scheduleHidePopup}>
+                <div role="menu" tabindex="-1" onmouseenter={keepPopupOpen} onmouseleave={scheduleHidePopup}>
                   <ProcessorPopup
                     onselect={applyProcessor}
                     selectedCategory={selectedProcessorCategory}

src/lib/components/WaveformDisplay.svelte

@@ -5,6 +5,7 @@
     buffer: AudioBuffer | null;
     color?: string;
     playbackPosition?: number;
+    cuePoint?: number;
     selectionStart?: number | null;
     selectionEnd?: number | null;
     onselectionchange?: (start: number | null, end: number | null) => void;
@@ -15,6 +16,7 @@
     buffer,
     color = '#646cff',
     playbackPosition = 0,
+    cuePoint = 0,
     selectionStart = null,
     selectionEnd = null,
     onselectionchange,
@@ -43,6 +45,7 @@
     buffer;
     color;
     playbackPosition;
+    cuePoint;
     selectionStart;
     selectionEnd;
     draw();
@@ -251,6 +254,16 @@
       const duration = buffer.length / buffer.sampleRate;
       const x = (playbackPosition / duration) * width;
 
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, height);
+      ctx.stroke();
+    } else if (cuePoint > 0 && buffer) {
+      const duration = buffer.length / buffer.sampleRate;
+      const x = (cuePoint / duration) * width;
+
       ctx.strokeStyle = '#fff';
       ctx.lineWidth = 2;
       ctx.beginPath();

src/lib/components/WelcomeModal.svelte

@@ -157,15 +157,6 @@
     border: 1px solid #444;
   }
 
-  .modal-content ul {
-    margin: 0 0 1rem 0;
-    padding-left: 1.25rem;
-  }
-
-  .modal-content ul li {
-    margin-bottom: 0;
-  }
-
   .text-column ol li {
     margin-bottom: 0;
   }
@@ -229,10 +220,6 @@
     .modal-content .description {
       font-size: 0.9375rem;
     }
-
-    .modal-links p {
-      font-size: 0.875rem;
-    }
   }
 
   @media (min-width: 768px) {
@@ -257,10 +244,6 @@
       line-height: 1.7;
     }
 
-    .modal-content ul {
-      margin: 0;
-    }
-
     .modal-footer {
       margin: 0 0 2.1rem 0;
       font-size: 0.875rem;
@@ -282,9 +265,5 @@
     .modal-close {
       transition: none;
     }
-
-    .modal-links a {
-      transition: none;
-    }
   }
 </style>