feat: use Swipeable Drawer instead of Accordian

src/components/molecules/InterpretationLog.tsx

@@ -1,30 +1,34 @@
 import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Highlight from 'react-highlight'
+import Highlight from 'react-highlight';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSocketStore } from "../../context/socket";
 
 export const InterpretationLog = () => {
-  const [expanded, setExpanded] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [log, setLog] = useState<string>('');
 
   const logEndRef = useRef<HTMLDivElement | null>(null);
 
-  const handleChange = (isExpanded: boolean) => (event: React.SyntheticEvent) => {
-    setExpanded(isExpanded);
+  const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+    if (
+      event.type === 'keydown' &&
+      ((event as React.KeyboardEvent).key === 'Tab' ||
+        (event as React.KeyboardEvent).key === 'Shift')
+    ) {
+      return;
+    }
+    setOpen(newOpen);
   };
 
   const { socket } = useSocketStore();
 
   const scrollLogToBottom = () => {
     if (logEndRef.current) {
-      logEndRef.current.scrollIntoView({ behavior: "smooth" })
+      logEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
-  }
+  };
 
   const handleLog = useCallback((msg: string, date: boolean = true) => {
     if (!date) {
@@ -33,14 +37,14 @@ export const InterpretationLog = () => {
       setLog((prevState) => prevState + '\n' + `[${new Date().toLocaleString()}] ` + msg);
     }
     scrollLogToBottom();
-  }, [log, scrollLogToBottom])
+  }, [scrollLogToBottom]);
 
   const handleSerializableCallback = useCallback((data: string) => {
     setLog((prevState) =>
       prevState + '\n' + '---------- Serializable output data received ----------' + '\n'
       + JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------');
     scrollLogToBottom();
-  }, [log, scrollLogToBottom])
+  }, [scrollLogToBottom]);
 
   const handleBinaryCallback = useCallback(({ data, mimetype }: any) => {
     setLog((prevState) =>
@@ -48,7 +52,7 @@ export const InterpretationLog = () => {
       + `mimetype: ${mimetype}` + '\n' + `data: ${JSON.stringify(data)}` + '\n'
       + '------------------------------------------------');
     scrollLogToBottom();
-  }, [log, scrollLogToBottom])
+  }, [scrollLogToBottom]);
 
   useEffect(() => {
     socket?.on('log', handleLog);
@@ -58,41 +62,39 @@ export const InterpretationLog = () => {
       socket?.off('log', handleLog);
       socket?.off('serializableCallback', handleSerializableCallback);
       socket?.off('binaryCallback', handleBinaryCallback);
-    }
-  }, [socket, handleLog])
+    };
+  }, [socket, handleLog]);
 
   return (
     <div>
-      <Accordion
-        expanded={expanded}
-        onChange={handleChange(!expanded)}
-        style={{ background: '#3f4853', color: 'white', borderRadius: '0px' }}
+      <button onClick={toggleDrawer(true)} style={{ color: 'white', background: '#3f4853', border: 'none', padding: '10px 20px' }}>
+        Interpretation Log
+      </button>
+      <SwipeableDrawer
+        anchor="bottom"
+        open={open}
+        onClose={toggleDrawer(false)}
+        onOpen={toggleDrawer(true)}
+        PaperProps={{
+          sx: { background: '#19171c', color: 'white', padding: '10px' }
+        }}
       >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon sx={{ color: 'white' }} />}
-          aria-controls="panel1bh-content"
-          id="panel1bh-header"
-        >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>
-            Interpretation Log
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails sx={{
-          background: '#19171c',
+        <Typography variant="h6" gutterBottom>
+          Interpretation Log
+        </Typography>
+        <div style={{
+          height: '50vh',
           overflowY: 'scroll',
-          width: '100%',
-          aspectRatio: '4/1',
-          boxSizing: 'border-box',
+          padding: '10px',
+          background: '#19171c',
         }}>
-          <div>
-            <Highlight className="javascript">
-              {log}
-            </Highlight>
-            <div style={{ float: "left", clear: "both" }}
-              ref={logEndRef} />
-          </div>
-        </AccordionDetails>
-      </Accordion>
+          <Highlight className="javascript">
+            {log}
+          </Highlight>
+          <div style={{ float: "left", clear: "both" }}
+            ref={logEndRef} />
+        </div>
+      </SwipeableDrawer>
     </div>
   );
 }