Try not to focus it first. It doesn't quite work though.

src-tauri/capabilities/default.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
-  "description": "Capability for the main window",
-  "windows": ["main"],
+  "description": "Capabilities for the app",
+  "windows": ["main", "recording_overlay"],
   "permissions": [
     "core:default",
     "opener:default",

src-tauri/src/managers/audio.rs

@@ -268,7 +268,6 @@ impl AudioRecordingManager {
     fn show_overlay(&self) {
         if let Some(overlay_window) = self.app_handle.get_webview_window("recording_overlay") {
             let _ = overlay_window.show();
-            let _ = overlay_window.set_focus();
         } else {
             // Get screen dimensions for positioning
             if let Ok(monitors) = self.app_handle.primary_monitor() {
@@ -280,22 +279,27 @@ impl AudioRecordingManager {
 
                     // Position at bottom center, 30px from bottom
                     let x = (screen_width - 150) / 2;
-                    let y = screen_height - 50 - 30;
+                    let y = screen_height - 30 - 30;
 
-                    match WebviewWindowBuilder::new(&self.app_handle, "recording_overlay")
-                        .title("Recording")
-                        .position(x as f64, y as f64)
-                        .resizable(false)
-                        .maximizable(false)
-                        .minimizable(false)
-                        .closable(false)
-                        .decorations(false)
-                        .always_on_top(true)
-                        .skip_taskbar(true)
-                        .transparent(true)
-                        .build()
+                    match WebviewWindowBuilder::new(
+                        &self.app_handle,
+                        "recording_overlay",
+                        tauri::WebviewUrl::App("src/overlay/index.html".into()),
+                    )
+                    .title("Recording")
+                    .position(x as f64, y as f64)
+                    .resizable(false)
+                    .maximizable(false)
+                    .minimizable(false)
+                    .closable(false)
+                    .decorations(false)
+                    .always_on_top(true)
+                    .skip_taskbar(true)
+                    .transparent(true)
+                    .focused(false)
+                    .build()
                     {
-                        Ok(window) => {
+                        Ok(_window) => {
                             debug!("Recording overlay window created successfully");
                         }
                         Err(e) => {

src/overlay/RecordingOverlay.css

@@ -1,38 +1,39 @@
 .recording-overlay {
-  width: 150px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 8px;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+    width: 128px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 .bars-container {
-  display: flex;
-  align-items: end;
-  justify-content: center;
-  gap: 3px;
-  height: 30px;
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    gap: 3px;
+    height: 30px;
 }
 
 .bar {
-  width: 4px;
-  background: linear-gradient(to top, #FAA2CA, #F28CBB);
-  border-radius: 2px;
-  animation: pulse infinite ease-in-out;
-  min-height: 4px;
+    width: 4px;
+    background: linear-gradient(to top, #faa2ca, #f28cbb);
+    border-radius: 2px;
+    animation: pulse infinite ease-in-out;
+    min-height: 4px;
 }
 
 @keyframes pulse {
-  0%, 100% {
-    height: 4px;
-    opacity: 0.6;
-  }
-  50% {
-    height: 30px;
-    opacity: 1;
-  }
+    0%,
+    100% {
+        height: 4px;
+        opacity: 0.6;
+    }
+    50% {
+        height: 30px;
+        opacity: 1;
+    }
 }

src/overlay/RecordingOverlay.tsx

@@ -1,7 +1,14 @@
-import React from 'react';
-import './RecordingOverlay.css';
+import React, { useEffect } from "react";
+import "./RecordingOverlay.css";
+import { resolveResource } from "@tauri-apps/api/path";
 
 const RecordingOverlay: React.FC = () => {
+  useEffect(() => {
+    resolveResource("tray_idle.png").then((r) => {
+      console.log("res", r);
+    });
+  }, []);
+
   return (
     <div className="recording-overlay">
       <div className="bars-container">
@@ -11,7 +18,7 @@ const RecordingOverlay: React.FC = () => {
             className="bar"
             style={{
               animationDelay: `${i * 100}ms`,
-              animationDuration: `${800 + Math.random() * 400}ms`
+              animationDuration: `${800 + Math.random() * 400}ms`,
             }}
           />
         ))}

vite.config.ts

@@ -3,7 +3,6 @@ import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { resolve } from "path";
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/