Better design audio record button

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

@@ -142,33 +142,30 @@ const InsertMenu = observer((props: Props) => {
 
   return (
     <>
+      {audioRecorder.isRecording ? (
+        <div className="flex flex-row items-center gap-2 mr-2">
+          <div className="flex flex-row items-center px-2 py-1 rounded-md bg-red-50 text-red-600 border border-red-200">
+            <div className={`w-2 h-2 rounded-full bg-red-500 mr-2 ${!audioRecorder.isPaused ? "animate-pulse" : ""}`} />
+            <span className="font-mono text-sm">{new Date(audioRecorder.recordingTime * 1000).toISOString().substr(14, 5)}</span>
+          </div>
+          <Button variant="outline" size="icon" onClick={audioRecorder.togglePause} className="shrink-0">
+            {audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}
+          </Button>
+          <Button variant="outline" size="icon" onClick={handleStopRecording} className="shrink-0 text-red-600 hover:text-red-700">
+            <div className="w-3 h-3 bg-current rounded-sm" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">
+            <XIcon className="w-4 h-4" />
+          </Button>
+        </div>
+      ) : (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-          {audioRecorder.isRecording ? (
-            <Button variant="outline" className="text-red-500 border-red-500 hover:text-red-600 hover:bg-red-50">
-              <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse mr-2" />
-              {new Date(audioRecorder.recordingTime * 1000).toISOString().substr(14, 5)}
-            </Button>
-          ) : (
             <Button variant="outline" size="icon" className="shadow-none" disabled={isUploading}>
               {isUploading ? <LoaderIcon className="size-4 animate-spin" /> : <PlusIcon className="size-4" />}
             </Button>
-          )}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-          {audioRecorder.isRecording ? (
-            <>
-              <DropdownMenuItem onClick={handleStopRecording} className="text-red-500 focus:text-red-600 focus:bg-red-50">
-                <div className="w-2 h-2 rounded-full bg-red-500 mr-2" />
-                Stop Recording
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={audioRecorder.cancelRecording}>
-                <XIcon className="w-4 h-4 mr-2" />
-                Cancel Recording
-              </DropdownMenuItem>
-            </>
-          ) : (
-            <>
             <DropdownMenuItem onClick={handleUploadClick}>
               <FileIcon className="w-4 h-4" />
               {t("common.upload")}
@@ -199,10 +196,9 @@ const InsertMenu = observer((props: Props) => {
                 </DropdownMenuItem>
               </DropdownMenuSubContent>
             </DropdownMenuSub>
-            </>
-          )}
           </DropdownMenuContent>
         </DropdownMenu>
+      )}
 
       {/* Hidden file input */}
       <input

web/src/components/MemoEditor/ActionButton/InsertMenu/useAudioRecorder.ts

@@ -33,7 +33,12 @@ export const useAudioRecorder = () => {
             setState((prev: AudioRecorderState) => ({ ...prev, isRecording: true, mediaRecorder }));
 
             timerRef.current = window.setInterval(() => {
-                setState((prev: AudioRecorderState) => ({ ...prev, recordingTime: prev.recordingTime + 1 }));
+                setState((prev) => {
+                    if (prev.isPaused) {
+                        return prev;
+                    }
+                    return { ...prev, recordingTime: prev.recordingTime + 1 };
+                });
             }, 1000);
         } catch (error) {
             console.error("Error accessing microphone:", error);
@@ -93,11 +98,26 @@ export const useAudioRecorder = () => {
         });
     };
 
+    const togglePause = () => {
+        const { mediaRecorder, isPaused } = state;
+        if (!mediaRecorder) return;
+
+        if (isPaused) {
+            mediaRecorder.resume();
+        } else {
+            mediaRecorder.pause();
+        }
+
+        setState((prev) => ({ ...prev, isPaused: !prev.isPaused }));
+    };
+
     return {
         isRecording: state.isRecording,
+        isPaused: state.isPaused,
         recordingTime: state.recordingTime,
         startRecording,
         stopRecording,
         cancelRecording,
+        togglePause,
     };
 };