add cancel to overlay

src-tauri/src/utils.rs

@@ -326,7 +326,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
             let screen_height = (size.height as f64 / scale) as i32;
 
             // Position at bottom center, 30px from bottom
-            let x = (screen_width - 150) / 2;
+            let x = (screen_width - 160) / 2;
             let y = screen_height - 30 - 30;
 
             match WebviewWindowBuilder::new(
@@ -340,6 +340,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
             .maximizable(false)
             .minimizable(false)
             .closable(false)
+            .accept_first_mouse(true)
             .decorations(false)
             .always_on_top(true)
             .skip_taskbar(true)

src/overlay/RecordingOverlay.css

@@ -1,12 +1,12 @@
 .recording-overlay {
     height: 40px;
-    /*width: min-content;*/
-    width: 120px;
+    width: fit-content;
+    min-width: 160px;
     display: flex;
     gap: 12px;
     align-items: center;
     padding-left: 6px;
-    padding-right: 24px;
+    padding-right: 6px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 24px;
     opacity: 0;
@@ -37,7 +37,7 @@
 
 .transcribing-text {
     color: #faa2ca;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 600;
     font-family:
         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -53,3 +53,27 @@
         opacity: 1;
     }
 }
+
+.cancel-button {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #e53e3e;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition:
+        background-color 150ms ease-out,
+        transform 100ms ease-out;
+    flex-shrink: 0;
+}
+
+.cancel-button:hover {
+    background: #c53030;
+    transform: scale(1.05);
+}
+
+.cancel-button:active {
+    transform: scale(0.95);
+}

src/overlay/RecordingOverlay.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import "./RecordingOverlay.css";
 import { listen } from "@tauri-apps/api/event";
+import { invoke } from "@tauri-apps/api/core";
 
 type OverlayState = "recording" | "transcribing";
 
@@ -36,7 +37,7 @@ const RecordingOverlay: React.FC = () => {
 
         smoothedLevelsRef.current = smoothed;
         console.log(smoothed.length);
-        setLevels(smoothed.slice(0, 10));
+        setLevels(smoothed.slice(0, 9));
       });
 
       // Cleanup function
@@ -84,6 +85,24 @@ const RecordingOverlay: React.FC = () => {
           ))}
         </div>
       )}
+      {state === "recording" && (
+        <div
+          className="cancel-button"
+          onClick={() => {
+            invoke("cancel_operation");
+          }}
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M9 3L3 9M3 3L9 9"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      )}
       {state === "transcribing" && (
         <div className="transcribing-text">Transcribing...</div>
       )}