chore: move some more components to svelte 5

app/src/lib/result-viewer/Camera.svelte

@@ -7,11 +7,15 @@
   import type { PerspectiveCamera, Vector3Tuple } from "three";
   import type { OrbitControls as OrbitControlsType } from "three/examples/jsm/controls/OrbitControls.js";
 
-  let camera: PerspectiveCamera;
-  let controls: OrbitControlsType;
+  let camera = $state<PerspectiveCamera>();
+  let controls = $state<OrbitControlsType>();
 
-  export let center: Vector3;
-  export let centerCamera: boolean = true;
+  type Props = {
+    center: Vector3;
+    centerCamera: boolean;
+  };
+
+  const { center, centerCamera }: Props = $props();
 
   const cameraTransform = localStore<{
     camera: Vector3Tuple;
@@ -22,7 +26,7 @@
   });
 
   function saveCameraState() {
-    if (!camera) return;
+    if (!camera || !controls) return;
     let cPos = camera.position.toArray();
     let tPos = controls.target.toArray();
     // check if tPos is NaN or tPos is NaN
@@ -35,6 +39,7 @@
 
   let isRunning = false;
   const task = useTask(() => {
+    if (!controls) return;
     let length = center.clone().sub(controls.target).length();
     if (length < 0.01 || !centerCamera) {
       isRunning = false;
@@ -47,22 +52,24 @@
   });
   task.stop();
 
-  $: if (
-    center &&
-    controls &&
-    centerCamera &&
-    (center.x !== controls.target.x ||
-      center.y !== controls.target.y ||
-      center.z !== controls.target.z) &&
-    !isRunning
-  ) {
-    isRunning = true;
-    task.start();
-  }
+  $effect(() => {
+    if (
+      center &&
+      controls &&
+      centerCamera &&
+      (center.x !== controls.target.x ||
+        center.y !== controls.target.y ||
+        center.z !== controls.target.z) &&
+      !isRunning
+    ) {
+      isRunning = true;
+      task.start();
+    }
+  });
 
   onMount(() => {
-    controls.target.fromArray($cameraTransform.target);
-    controls.update();
+    controls?.target.fromArray($cameraTransform.target);
+    controls?.update();
   });
 </script>