From cb1caf763c95ac6675f33359f0ccaccad282e314 Mon Sep 17 00:00:00 2001
From: CJ Pais <cj@cjpais.com>
Date: Fri, 1 Aug 2025 15:59:00 -0700
Subject: [PATCH 1/2] add cancel to overlay

---
 src-tauri/src/utils.rs           |  3 ++-
 src/overlay/RecordingOverlay.css | 32 ++++++++++++++++++++++++++++----
 src/overlay/RecordingOverlay.tsx | 21 ++++++++++++++++++++-
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index 4ae14a4..a3d4c93 100644
--- a/src-tauri/src/utils.rs
+++ b/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)
diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css
index 80f7e35..431d792 100644
--- a/src/overlay/RecordingOverlay.css
+++ b/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);
+}
diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx
index 8297120..039815a 100644
--- a/src/overlay/RecordingOverlay.tsx
+++ b/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>
       )}

From a97d861f416eb6e29861bf4655c3dd4c50ff3671 Mon Sep 17 00:00:00 2001
From: CJ Pais <cj@cjpais.com>
Date: Fri, 1 Aug 2025 16:03:04 -0700
Subject: [PATCH 2/2] Clean up the overlays CSS.

---
 src/overlay/RecordingOverlay.css | 24 ++++++--
 src/overlay/RecordingOverlay.tsx | 94 +++++++++++++++++---------------
 2 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css
index 431d792..fb3c72f 100644
--- a/src/overlay/RecordingOverlay.css
+++ b/src/overlay/RecordingOverlay.css
@@ -1,9 +1,8 @@
 .recording-overlay {
     height: 40px;
-    width: fit-content;
-    min-width: 160px;
-    display: flex;
-    gap: 12px;
+    width: 160px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
     padding-left: 6px;
     padding-right: 6px;
@@ -13,6 +12,23 @@
     transition: opacity 300ms ease-out;
 }
 
+.overlay-left {
+    display: flex;
+    align-items: center;
+}
+
+.overlay-middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 .bars-container {
     display: flex;
     align-items: end;
diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx
index 039815a..6995f74 100644
--- a/src/overlay/RecordingOverlay.tsx
+++ b/src/overlay/RecordingOverlay.tsx
@@ -63,49 +63,57 @@ const RecordingOverlay: React.FC = () => {
 
   return (
     <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
-      <img
-        width="28"
-        height="28"
-        src={getIconPath()}
-        alt={getIconAlt()}
-        style={{}}
-      />
-      {state === "recording" && (
-        <div className="bars-container">
-          {levels.map((v, i) => (
-            <div
-              key={i}
-              className="bar"
-              style={{
-                height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual
-                transition: "height 60ms ease-out",
-                opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility
-              }}
-            />
-          ))}
-        </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>
-      )}
+      <div className="overlay-left">
+        <img
+          width="28"
+          height="28"
+          src={getIconPath()}
+          alt={getIconAlt()}
+          style={{}}
+        />
+      </div>
+
+      <div className="overlay-middle">
+        {state === "recording" && (
+          <div className="bars-container">
+            {levels.map((v, i) => (
+              <div
+                key={i}
+                className="bar"
+                style={{
+                  height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual
+                  transition: "height 60ms ease-out",
+                  opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility
+                }}
+              />
+            ))}
+          </div>
+        )}
+        {state === "transcribing" && (
+          <div className="transcribing-text">Transcribing...</div>
+        )}
+      </div>
+
+      <div className="overlay-right">
+        {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>
+        )}
+      </div>
     </div>
   );
 };