🛠️ fix: mainWindow reload on upload-video error in Electron app

📏 style: adjust floating window height and refactor Floating component styles
➕ feat: replace PauseIcon with StopCircle from lucide-react in Floating component

- In the Electron main process, added a line to reload the mainWindow in the event of an upload-video error. This ensures the UI is refreshed and can handle the error more gracefully.
- Adjusted the floating window's height from 130px to 140px to better accommodate UI elements.
- Refactored the Floating component by importing styles consistently with double quotes, adding the `StopCircle` icon from `lucide-react` for a more intuitive UI, and removing the unused `PauseIcon`. This improves code readability and user interaction with the recording controls.

Author: mangledbottles

apps/desktop/electron/main.ts

@@ -468,6 +468,7 @@ ipcMain.handle('upload-video', async (_, uploadFile, uploadLink: string) => {
       tags: { module: "uploadVideo" },
       extra: { error }
     });
+    mainWindow?.reload();
   }
 });
 
@@ -847,7 +848,7 @@ const requestPermissions = async (permission: string): Promise<boolean> => {
 function createFloatingWindow() {
   const floatingWindow = new BrowserWindow({
     width: 60,
-    height: 130,
+    height: 140,
     x: 0,
     y: 0,
     resizable: false,

apps/desktop/src/components/Floating.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import styles from '../styles/Floating.module.css';
+import styles from "../styles/Floating.module.css";
+import { StopCircle } from "lucide-react";
 
 const DragIcon: React.FC = () => {
   return (
@@ -25,26 +26,6 @@ const DragIcon: React.FC = () => {
   );
 };
 
-export const PauseIcon: React.FC = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="lucide lucide-stop-circle"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <rect width="6" height="6" x="9" y="9" />
-    </svg>
-  );
-};
-
 const stopRecording = async () => {
   console.log("stop recording");
   await window.electron.stopRecording();
@@ -82,24 +63,22 @@ export const Floating = () => {
   return (
     <div
       style={{
-        width: "100%",
-        height: "100%",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
       }}
-      className={`${styles.draggableArea} m-0 p-0 bg-white dark:bg-gray-800 overflow-hidden`}
+      className={`${styles.draggableArea} h-screen w-screen m-0 p-0 bg-white dark:bg-gray-800 overflow-hidden`}
     >
-      <div className="divide-y divide-gray-300 dark:divide-gray-600 rounded-md shadow-md md:flex md:divide-y-0 bg-gray-50 dark:bg-gray-700">
+      <div className="h-full divide-y divide-gray-300 dark:divide-gray-600 rounded-md shadow-md md:flex md:divide-y-0 bg-gray-50 dark:bg-gray-700">
         <button
-          className="group flex w-full items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-600"
+          className="group flex w-full items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer"
           onClick={() => {
             setTimer(0);
             stopRecording();
           }}
         >
           <span className="flex items-center px-4 py-4 text-sm font-medium text-gray-900 dark:text-gray-200">
-            <PauseIcon />
+            <StopCircle className={"text-red-400"} />
           </span>
         </button>
         <span className="group flex w-full items-center justify-center border-t border-b border-gray-300 dark:border-gray-600">