refacto: cleanning the codebase

src/components/3d/TriggerObject.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import { RigidBody } from "@react-three/rapier";
 import { InteractableObject } from "@/components/3d/InteractableObject";
@@ -50,7 +50,6 @@ export function TriggerObject({
   spawnOffset = TRIGGER_DEFAULT_SPAWN_OFFSET,
 }: TriggerObjectProps): React.JSX.Element {
   const [spawned, setSpawned] = useState<SpawnedModel[]>([]);
-  const positionRef = useRef(position);
 
   return (
     <>
@@ -66,9 +65,9 @@ export function TriggerObject({
 
             if (spawnModel) {
               const spawnPos: [number, number, number] = [
-                positionRef.current[0] + spawnOffset[0],
-                positionRef.current[1] + spawnOffset[1],
-                positionRef.current[2] + spawnOffset[2],
+                position[0] + spawnOffset[0],
+                position[1] + spawnOffset[1],
+                position[2] + spawnOffset[2],
               ];
               setSpawned((prev) => [
                 ...prev,

src/components/ui/Crosshair.tsx

@@ -1,9 +1,9 @@
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
-import { useInteraction } from "@/hooks/useInteraction";
+import { useInteractionSelector } from "@/hooks/useInteraction";
 
 export function Crosshair(): React.JSX.Element | null {
   const cameraMode = useCameraMode();
-  const { focused } = useInteraction();
+  const focused = useInteractionSelector((state) => state.focused);
 
   if (cameraMode !== "player") return null;
 

src/components/ui/InteractPrompt.tsx

@@ -1,16 +1,18 @@
+import { INTERACT_KEY } from "@/data/keybindings";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
-import { useInteraction } from "@/hooks/useInteraction";
+import { useInteractionSelector } from "@/hooks/useInteraction";
 
 export function InteractPrompt(): React.JSX.Element | null {
   const cameraMode = useCameraMode();
-  const { focused, holding } = useInteraction();
+  const focused = useInteractionSelector((state) => state.focused);
+  const holding = useInteractionSelector((state) => state.holding);
 
   if (cameraMode !== "player") return null;
   if (!focused || holding || focused.kind !== "trigger") return null;
 
   return (
     <div className="interact-prompt" aria-live="polite">
-      <kbd className="interact-prompt__key">E</kbd>
+      <kbd className="interact-prompt__key">{INTERACT_KEY.toUpperCase()}</kbd>
       <span className="interact-prompt__label">{focused.label}</span>
     </div>
   );