add view socket

reader/src/ViewPage.jsx

@@ -58,9 +58,18 @@ export function ViewPage() {
       setSelectedOptionId(null);
       setSelectedIdx(0);
     });
+    socket.on("selectedOptionChanged", (newId) => {
+      setSelectedOptionId(newId);
+    });
+    socket.on("lookingAtIdxChanged", (newIdx) => {
+      setSelectedIdx(newIdx);
+    });
 
     return () => {
       socket.off("connect");
+      socket.off("dataChanged");
+      socket.off("selectedOptionChanged");
+      socket.off("lookingAtIdxChanged");
       socket.off("disconnect");
     };
   }, []);
@@ -159,7 +168,10 @@ export function ViewPage() {
         {options.map((option, optionIdx) => (
           <button
             key={option.id}
-            onClick={() => setSelectedIdx(optionIdx)}
+            onClick={() => {
+              setSelectedIdx(optionIdx);
+              socket.emit("setLookingAtIdx", optionIdx);
+            }}
             className={`flex-1 border-r border-gray-200 text-sm px-4 py-2 hover:bg-blue-200 cursor-pointer flex align-center justify-center ${optionIdx === selectedIdx ? "bg-gray-300" : ""}`}
           >
             {option.title}