fix highlighting elements in list on gaze

src/components/Widget/HistoryWidget.tsx

@@ -7,7 +7,7 @@ import {
 } from 'src/redux/slices/componentSlice';
 import { useAppSelector } from 'src/redux/hooks';
 import { getMessages } from 'src/redux/slices/minimapSlice';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -22,7 +22,13 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   );
   const activeElementID = useAppSelector(getSelectedElementID);
 
-  const highlightIndex = convoMessages.findIndex((message) => message.id === activeElementID)
+  useEffect(() => {
+    console.log('activeElementID: ', activeElementID);
+  }, [activeElementID]);
+
+  const highlightIndex = convoMessages.findIndex(
+    (message) => message.id === activeElementID,
+  );
 
   return (
     <div

src/components/Widget/ListWidget.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useState } from 'react';
 import Element from 'src/components/Element/Element';
-import { useAppDispatch } from 'src/redux/hooks';
+import useGaze from 'src/hooks/useGaze';
-import { setActiveConvoID, setSelectedElementID } from 'src/redux/slices/componentSlice';
+import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
+import {
+  setActiveConvoID,
+  setSelectedElementID,
+} from 'src/redux/slices/componentSlice';
+import { getElementsInGaze } from 'src/redux/slices/gazeSlice';
 import type { Widget } from 'src/types/widget';
 
 type ListWidgetProps = {
@@ -9,6 +14,15 @@ type ListWidgetProps = {
 };
 
 const ListWidget = ({ widget }: ListWidgetProps) => {
+  const elementsInGaze = useAppSelector(getElementsInGaze);
+
+  // just pick the first element in the gaze for now
+  const elementInGazeId = elementsInGaze[0]?.id;
+
+  // useEffect(() => {
+  //   console.log('elementsInGaze: ', elementsInGaze);
+  // }, [elementsInGaze]);
+
   const className =
     'absolute p-2 flex flex-col gap-6 items-center overflow-scroll overflow-x-hidden overflow-y-hidden';
 
@@ -21,16 +35,18 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
 
   const dispatch = useAppDispatch();
 
-  useEffect(() => {
+  // useEffect(() => {
-    dispatch(
+  //   dispatch(
-      setActiveConvoID(
+  //     setActiveConvoID(
-        sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
+  //       sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
-      ),
+  //     ),
-      dispatch(
+  //     dispatch(
-        setSelectedElementID(sortedElementsByPriority[selectedElement].message?.id)
+  //       setSelectedElementID(
-      )
+  //         sortedElementsByPriority[selectedElement].message?.id,
-    );
+  //       ),
-  }, [selectedElement]);
+  //     ),
+  //   );
+  // }, [selectedElement]);
 
   return (
     <div
@@ -44,11 +60,12 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
         left: widget.x,
       }}
     >
-      {sortedElementsByPriority.map((element, index) => {
+      {sortedElementsByPriority.map((element) => {
         const style =
-          selectedElement === index
+          element.id === elementInGazeId
             ? 'bg-[#444449] text-[28px] font-medium'
             : 'bg-[#323235] text-[24px]';
+
         return (
           // ListWidget enforces a certain layout and style for its Elements
           <div
@@ -56,7 +73,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
             key={element.id}
             style={{ height: 80 }}
             className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${style}`}
-            onMouseEnter={() => setSelectedElement(index)} // temporary test
           >
             <Element element={element} styleClass="w-full h-full">
               {/* Nested children here if wanted.. */}