ui: support empty hls

frontend/app/components/Highlights/HighlightClip.tsx

@@ -8,6 +8,7 @@ import copy from "copy-to-clipboard";
 import { Eye, Link } from "lucide-react";
 import { toast } from "react-toastify";
 import { resentOrDate } from 'App/date'
+import { noNoteMsg } from 'App/mstore/notesStore'
 
 function HighlightClip({
   note = 'Highlight note',
@@ -20,7 +21,7 @@ function HighlightClip({
   onItemClick = () => undefined,
   onDelete = () => undefined,
 }: {
-  note: string;
+  note: string | null;
   tag: string;
   user: string;
   createdAt: string;
@@ -30,6 +31,7 @@ function HighlightClip({
   onItemClick: (id: any) => any;
   onDelete: (id: any) => any;
 }) {
+  const noteMsg = note || noNoteMsg
   const copyToClipboard = () => {
     const currUrl = window.location.href;
     const hUrl = `${currUrl}?highlight=${hId}`;
@@ -86,7 +88,7 @@ function HighlightClip({
   };
   return (
     <GridItem
-      title={note}
+      title={noteMsg}
       onItemClick={onItemClick}
       thumbnail={thumbnail}
       setLoading={() => null}

frontend/app/components/Highlights/HighlightsList.tsx

@@ -39,7 +39,6 @@ function HighlightsList() {
   });
   const { total, notes } = data;
   const debounceTimeout = React.useRef(0);
-
   const onSearch = (value: string) => {
     notesStore.setQuery(value);
   };

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

@@ -11,6 +11,7 @@ import { TeamBadge } from 'Shared/SessionsTabOverview/components/Notes';
 import { Tag, Dropdown, Button } from 'antd'
 import { MoreOutlined } from "@ant-design/icons";
 import { MessageSquareDot } from 'lucide-react'
+import { noNoteMsg } from 'App/mstore/notesStore'
 
 interface Props {
   note: Note;
@@ -92,7 +93,7 @@ function NoteEvent(props: Props) {
         className="text-base capitalize-first my-3 overflow-y-scroll overflow-x-hidden"
         style={{ maxHeight: 200, maxWidth: 220 }}
       >
-        {props.note.message}
+        {props.note.message || noNoteMsg}
       </div>
       <div>
         <div className="flex items-center flex-wrap w-full">

frontend/app/mstore/notesStore.ts

@@ -3,6 +3,7 @@ import { makeAutoObservable } from "mobx";
 import { notesService } from "App/services";
 import { Note, NotesFilter, WriteNote, iTag } from 'App/services/NotesService';
 
+export const noNoteMsg = 'No Comment';
 
 export default class NotesStore {
   notes: Note[] = []