Agregar indicador de la hora al resaltar un curso

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../../Estilos";
-import { For } from "solid-js";
+import { For, createSignal } from "solid-js";
 
 const e = StyleSheet.create({
     celdaComun: {
@@ -31,7 +31,9 @@ const e = StyleSheet.create({
 interface Props {
     datos: { id: string, txt: string, esLab: boolean }[],
     idHover: () => string,
-    setIdHover: (v: string) => string
+    setIdHover: (v: string) => string,
+    fnResaltarFila: () => void,
+    fnDesresaltarFila: () => void
 }
 
 export function CeldaFila(props: Props) {
@@ -40,19 +42,30 @@ export function CeldaFila(props: Props) {
     const idHover = props.idHover;
     const setIdHover = props.setIdHover;
 
+    const fnOnMouseEnter = (id: string) => setIdHover(id);
+    const fnOnMouseLeave = () => setIdHover("");
+
     return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
         <For each={datos}>
             {({id, txt, esLab}) => {
+                const [estabaResaltado, setEstabaResaltado] = createSignal(false);
 
                 const clases = () => {
                     const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
-                    if (id === idHover()) clases.push(e.celdaCursoActiva);
+                    if (id === idHover()) {
+                        props.fnResaltarFila();
+                        clases.push(e.celdaCursoActiva);
+                        setEstabaResaltado(true);
+                    } else if (estabaResaltado()) {
+                        props.fnDesresaltarFila();
+                        setEstabaResaltado(false);
+                    }
                     return css(...clases);
                 };
 
                 return <span className={clases()}
-                             onMouseEnter={() => setIdHover(id)}
+                             onMouseEnter={() => fnOnMouseEnter(id)}
-                             onMouseLeave={() => setIdHover("")}
+                             onMouseLeave={fnOnMouseLeave}
                 >
                     {txt}
                 </span>;

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -1,8 +1,8 @@
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../../Estilos";
-import { For } from "solid-js";
+import { For, createSignal } from "solid-js";
 import { dias } from "../../Store";
-import {CeldaFila} from "./CeldaFila";
+import { CeldaFila } from "./CeldaFila";
 import { DataProcesada } from "../../types/DatosHorario";
 
 const e = StyleSheet.create({
@@ -16,11 +16,12 @@ const e = StyleSheet.create({
     fila: {
         position: "relative",
         zIndex: 2,
-        transition: "background-color 250ms",
+        transition: "background-color 250ms, border 100ms",
         marginLeft: "4rem",
         display: "flex",
         alignItems: "center",
         minHeight: "1.5rem",
+        borderLeft: "solid transparent",
         ":hover": {
             // backgroundColor: "rgba(200, 200, 200, 0.25)"
         }
@@ -33,6 +34,9 @@ const e = StyleSheet.create({
         backgroundColor: "rgba(200, 200, 200, 0.25)",
         zIndex: 1
     },
+    filaResaltada: {
+        borderLeft: "solid"
+    }
 });
 
 interface Props {
@@ -43,15 +47,31 @@ interface Props {
 }
 
 export function FilaTabla(props: Props) {
+    const [filaResaltada, setFilaResaltada] = createSignal(false);
 
     const hora = props.hora;
     const data = props.data;
 
+    const claseFilaComun = css(e.fila);
+    const claseFilaResaltada = css(e.fila, e.filaResaltada);
+
+    const resaltarFila = () => {
+        if (!filaResaltada()) {
+            setFilaResaltada(true);
+        }
+    };
+
+    const desresaltarFila = () => {
+        if (filaResaltada()) {
+            setFilaResaltada(false);
+        }
+    }
+
     return <div style={{position: "relative"}}>
         <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
             {hora.substring(0, 5)}
         </div>
-        <div className={css(e.fila)}>
+        <div className={filaResaltada() ? claseFilaResaltada : claseFilaComun}>
             <For each={dias}>
                 {dia => {
                     const diaStr = dia.substring(0, 2);
@@ -59,7 +79,13 @@ export function FilaTabla(props: Props) {
 
                     const datos = data()?.[horaStr]?.[diaStr] ?? [];
 
-                    return <CeldaFila datos={datos} idHover={props.idHover} setIdHover={props.setIdHover}/>
+                    return <CeldaFila
+                        datos={datos}
+                        idHover={props.idHover}
+                        setIdHover={props.setIdHover}
+                        fnResaltarFila={resaltarFila}
+                        fnDesresaltarFila={desresaltarFila}
+                    />
                 }}
             </For>
             <div className={css(e.filaBorde)}/>