Highlight on timeline

frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx

@@ -12,6 +12,7 @@ import styles from 'Components/Session_/playerBlock.module.css';
 import ClipPlayerOverlay from 'Components/Session/Player/ClipPlayer/ClipPlayerOverlay';
 import { observer } from 'mobx-react-lite';
 import { Icon } from 'UI';
+import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip';
 
 
 interface Props {
@@ -74,7 +75,7 @@ function ClipPlayerContent(props: Props) {
           </div>
         </div>
         {props.isHighlight && props.message ? (
-          <div className={'shadow-inner p-3 bg-yellow flex gap-2 w-full items-center'}>
+          <div className={'shadow-inner p-3 flex gap-2 w-full items-center'}  style={{ background: 'rgba(252, 193, 0, 0.2)' }}>
             <Icon name="chat-square-quote" color="inherit" size={18} />
             <div className={'leading-none font-medium'}>
               {props.message}

frontend/app/components/Session_/EventsBlock/NoteEvent.tsx

@@ -61,7 +61,7 @@ function NoteEvent(props: Props) {
     { icon: <Icon name={'trash'} />, label: 'Delete', key: '3', onClick: onDelete },
   ];
   return (
-    <div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: '#FFFEF5' }}>
+    <div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: 'rgba(252, 193, 0, 0.1)' }}>
       <div className="flex items-center w-full relative">
         <MessageSquareDot size={16} strokeWidth={1} />
         <div className="ml-2">

frontend/app/components/Session_/Player/Controls/NotesList.tsx

@@ -3,35 +3,59 @@ import { Icon } from 'UI';
 import { useStore } from "App/mstore";
 import { observer } from 'mobx-react-lite'
 import { getTimelinePosition } from './getTimelinePosition'
+import {Tooltip} from 'antd';
 
 function NotesList({ scale }: { scale: number }) {
   const { notesStore } = useStore();
   const notes = notesStore.sessionNotes;
 
   const visibleNotes = React.useMemo(() => {
-    return notes.filter(note => note.timestamp > 0)
-  }, [notes.length])
+    return notes.filter(note => note.startAt >= 0 && note.endAt > note.startAt); // Ensure valid highlights
+  }, [notes.length]);
+
+  
 
   return (
     <>
-      {visibleNotes.map((note) => (
-        <div
-          key={note.noteId}
-          style={{
-            position: 'absolute',
-            background: 'white',
-            zIndex: 3,
-            pointerEvents: 'none',
-            height: 10,
-            width: 16,
-            left: `${getTimelinePosition(note.timestamp, scale)}%`,
-          }}
-        >
-          <Icon name="quotes" style={{ width: 16, height: 10 }} color="main" />
-        </div>
-      ))}
+      {visibleNotes.map((note) => {
+        const startPos = getTimelinePosition(note.startAt, scale);
+        const endPos = getTimelinePosition(note.endAt, scale);
+        const highlightWidth = endPos - startPos;
+        const iconPos = startPos + highlightWidth / 2;
+
+        return (
+          <React.Fragment key={note.noteId}>
+            <div
+              className="saved-highlight" 
+              style={{
+                position: 'absolute',
+                left: `${startPos}%`,
+                width: `${highlightWidth}%`,
+                height: '10px',
+                background: 'rgba(252, 193, 0, 0.4)', 
+                zIndex: 2,
+                pointerEvents: 'none',
+              }}
+            />
+            
+            <div
+              style={{
+                position: 'absolute',
+                zIndex: 3,
+                pointerEvents: 'none',
+                height: 10,
+                width: 16,
+                left: `${iconPos}%`, 
+                transform: 'translateX(-50%)',
+              }}
+            >
+              <Icon name="quotes" style={{ width: 16, height: 10 }} color="main" />
+            </div>
+          </React.Fragment>
+        );
+      })}
     </>
   );
 }
 
-export default observer(NotesList)
+export default observer(NotesList);

frontend/app/components/Session_/Player/Controls/timeline.module.css

@@ -215,7 +215,6 @@
   }
 }
 
-
 .stripes {
   background-size: 30px 30px;
   width: 100%;
@@ -225,6 +224,14 @@
   animation-direction: reverse;
 }
 
+.saved-highlight {
+  position: absolute;
+  height: 10px;
+  background: rgba(252, 193, 0, 0.4); 
+  z-index: 2;
+  pointer-events: none;
+}
+
 @keyframes animate-stripes {
   0% {
     background-position: 0 0;