updated ui and frame logic

Author: Ritika Mishra

src/components/Canvas.tsx

@@ -72,7 +72,6 @@ const Canvas = forwardRef(
 
   useEffect(() => {
     setNumX(getpoints(selectedBits) * currentValue);
-    console.log(numX);
   }, [samplingRate, currentValue]);
 
     const prevCanvasCountRef = useRef<number>(canvasCount);

src/components/Connection.tsx

@@ -270,6 +270,7 @@ const Connection: React.FC<ConnectionProps> = ({
 
           if (zipBlob) {
             saveAs(zipBlob, 'ChordsWeb.zip');
+            toast.success("File downloaded suceesfully.")
           } else if (error) {
             console.error(error);
           }
@@ -821,6 +822,7 @@ const Connection: React.FC<ConnectionProps> = ({
 
         transaction.oncomplete = () => {
           console.log("File deletion transaction completed.");
+           toast.success("File deleted successfully.");
         };
 
         transaction.onerror = () => {
@@ -909,20 +911,20 @@ const Connection: React.FC<ConnectionProps> = ({
       {/* Left-aligned section */}
       <div className="absolute left-4 flex items-center mx-0 px-0 space-x-1">
         {isRecordingRef.current && (
-          <div className="flex items-center space-x-1 w-min ml-2">
-            <button className="flex items-center justify-center px-3 py-2   select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
+          <div className="flex items-center space-x-1 w-min">
+            <button className="flex items-center justify-center px-1 py-2   select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
             >
               {formatTime(recordingElapsedTime)}
             </button>
-            <Separator orientation="vertical" className="bg-primary h-9 ml-2" />
+            <Separator orientation="vertical" className="bg-primary h-9 " />
             <div>
               <Popover
                 open={isEndTimePopoverOpen}
                 onOpenChange={setIsEndTimePopoverOpen}
               >
                 <PopoverTrigger asChild>
                   <Button
-                    className="flex items-center justify-center px-3 py-2   select-none min-w-12  text-destructive whitespace-nowrap rounded-xl"
+                    className="flex items-center justify-center px-1 py-2   select-none min-w-10  text-destructive whitespace-nowrap rounded-xl"
                     variant="destructive"
                   >
                     {endTimeRef.current === null ? (
@@ -987,7 +989,7 @@ const Connection: React.FC<ConnectionProps> = ({
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button className="flex items-center justify-center gap-1 py-2 px-6 sm:py-3 sm:px-8 rounded-xl font-semibold" onClick={handleClick}>
+              <Button className="flex items-center justify-center gap-1 py-2 px-2 sm:py-3 sm:px-4 rounded-xl font-semibold" onClick={handleClick}>
                 {isConnected ? (
                   <>
                     Disconnect

workers/indexedDBWorker.ts

@@ -1,4 +1,5 @@
 import JSZip from 'jszip';
+import { toast } from "sonner";
 let canvasCount = 0; 
 self.onmessage = async (event) => {
   const { action, data, filename} = event.data;
@@ -172,6 +173,7 @@ const saveAllDataAsZip = async (canvasCount: number): Promise<Blob> => {
         console.error(`Error processing record ${record.filename}:`, error);
       }
     });
+    toast.success("Data successfully downloaded as ZIP.");
 
     const content = await zip.generateAsync({ type: "blob" });
     return content;