refactor: clean up imports and streamline JSX formatting in LaunchWindow component

src/components/launch/LaunchWindow.tsx

@@ -1,24 +1,17 @@
+import { ChevronDown } from "lucide-react";
 import { useEffect, useState } from "react";
 import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import {
+import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
-	MdMic,
-	MdMicOff,
-	MdMonitor,
-	MdVideoFile,
-	MdVolumeOff,
-	MdVolumeUp,
-} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
-import { ChevronDown } from "lucide-react";
-import { Tooltip } from "../ui/tooltip";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
 import { formatTimePadded } from "../../utils/timeUtils";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
+import { Tooltip } from "../ui/tooltip";
 import styles from "./LaunchWindow.module.css";
 
 const ICON_SIZE = 20;
@@ -168,9 +161,7 @@ export function LaunchWindow() {
 
 	return (
 		<div className="w-full h-full flex items-end justify-center bg-transparent">
-			<div
+			<div className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}>
-				className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}
-			>
 				{/* Mic controls panel */}
 				{showMicControls && (
 					<div
@@ -224,15 +215,9 @@ export function LaunchWindow() {
 					<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
 						<button
 							className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={() =>
+							onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
-								!recording && setSystemAudioEnabled(!systemAudioEnabled)
-							}
 							disabled={recording}
-							title={
+							title={systemAudioEnabled ? "Disable system audio" : "Enable system audio"}
-								systemAudioEnabled
-									? "Disable system audio"
-									: "Enable system audio"
-							}
 						>
 							{systemAudioEnabled
 								? getIcon("volumeOn", "text-green-400")
@@ -242,9 +227,7 @@ export function LaunchWindow() {
 							className={`${hudIconBtnClasses} ${microphoneEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
 							onClick={toggleMicrophone}
 							disabled={recording}
-							title={
+							title={microphoneEnabled ? "Disable microphone" : "Enable microphone"}
-								microphoneEnabled ? "Disable microphone" : "Enable microphone"
-							}
 						>
 							{microphoneEnabled
 								? getIcon("micOn", "text-green-400")
@@ -255,9 +238,7 @@ export function LaunchWindow() {
 					{/* Record/Stop group */}
 					<button
 						className={`flex items-center gap-0.5 rounded-full p-2 transition-colors duration-150 ${styles.electronNoDrag} ${
-							recording
+							recording ? "animate-record-pulse bg-red-500/10" : "bg-white/5 hover:bg-white/[0.08]"
-								? "animate-record-pulse bg-red-500/10"
-								: "bg-white/5 hover:bg-white/[0.08]"
 						}`}
 						onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
 						disabled={!hasSelectedSource && !recording}
@@ -271,10 +252,7 @@ export function LaunchWindow() {
 								</span>
 							</>
 						) : (
-							getIcon(
+							getIcon("record", hasSelectedSource ? "text-white/80" : "text-white/30")
-								"record",
-								hasSelectedSource ? "text-white/80" : "text-white/30",
-							)
 						)}
 					</button>
 
@@ -302,18 +280,10 @@ export function LaunchWindow() {
 
 					{/* Window controls */}
 					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
-						<button
+						<button className={windowBtnClasses} title="Hide HUD" onClick={sendHudOverlayHide}>
-							className={windowBtnClasses}
-							title="Hide HUD"
-							onClick={sendHudOverlayHide}
-						>
 							{getIcon("minimize", "text-white")}
 						</button>
-						<button
+						<button className={windowBtnClasses} title="Close App" onClick={sendHudOverlayClose}>
-							className={windowBtnClasses}
-							title="Close App"
-							onClick={sendHudOverlayClose}
-						>
 							{getIcon("close", "text-white")}
 						</button>
 					</div>

tailwind.config.cjs

@@ -29,10 +29,8 @@ module.exports = {
 				"mic-panel-in": "mic-panel-in 0.15s ease-out",
 			},
 			boxShadow: {
-				"hud-bar":
+				"hud-bar": "0 2px 16px rgba(0, 0, 0, 0.25), 0 0 40px rgba(100, 80, 200, 0.08)",
-					"0 2px 16px rgba(0, 0, 0, 0.25), 0 0 40px rgba(100, 80, 200, 0.08)",
+				"mic-panel": "0 2px 12px rgba(0, 0, 0, 0.2), 0 0 30px rgba(100, 80, 200, 0.06)",
-				"mic-panel":
-					"0 2px 12px rgba(0, 0, 0, 0.2), 0 0 30px rgba(100, 80, 200, 0.06)",
 			},
 			borderRadius: {
 				lg: "var(--radius)",