docs: adding docstring to ConnectionToast

frontend/src/components/ConnectionToast.tsx

@@ -5,6 +5,21 @@ type ConnectionToastProps = {
   connectionStatus: string;
 };
 
+/**
+ * ConnectionToast Component
+ *
+ * Displays a toast notification that reflects the current connection status.
+ *
+ * Props:
+ * - connectionStatus (string): The current status of the connection which can be
+ *   'connecting', 'connected', 'disconnected', or 'reconnecting'. The component uses this
+ *   status to determine the message, background color (`bg`), and auto-hide delay of the toast.
+ *
+ * The toast is designed to automatically appear based on changes to the `connectionStatus` prop
+ * and provides a close button to manually dismiss the toast. It uses `react-bootstrap`'s Toast
+ * component to show the connection status in a stylized format, and Bootstrap's utility classes
+ * for alignment and spacing.
+ */
 export const ConnectionToast = React.memo(
   ({ connectionStatus }: ConnectionToastProps) => {
     const [show, setShow] = useState(true);