Add RTSP URL parsing utility and enhance camera settings handling

- Implement parseRTSPUrl function to extract username, password, IP, port, and path from RTSP URLs.
- Update CameraSettingFields to utilize parsed RTSP URL data for camera configuration.
- Modify WiFiSettingsForm to allow password visibility toggle.
- Improve SightingOverview loading and error handling UI.
- Adjust NavigationArrow component to reflect updated camera side logic.

src/components/SightingOverview/SightingOverview.tsx

@@ -22,10 +22,25 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (isLoading) return <p className="h-100">Loading</p>;
+  if (!mostRecent)
+    return (
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+        <NavigationArrow side={side} />
+        <p>No Recent Sightings</p>
+      </div>
+    );
+  if (isLoading)
+    return (
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+        <NavigationArrow side={side} />
+        <p>Loading</p>
+      </div>
+    );
 
-  if (isError)
-    return <p className="h-100">An error occurred, Cannot display footage</p>;
+  if (isError) return;
+  <div className="h-100 flex items-center justify-center text-red-500 text-lg">
+    An error occurred. Cannot display footage.
+  </div>;
 
   return (
     <div className="flex flex-col md:flex-row">