feat: add logger highlighting

src/components/log/log-item.tsx

@@ -32,14 +32,37 @@ const Item = styled(Box)(({ theme: { palette, typography } }) => ({
     color: palette.text.primary,
     overflowWrap: "anywhere",
   },
+  "& .highlight": {
+    backgroundColor: palette.mode === "dark" ? "#ffeb3b40" : "#ffeb3b90",
+    borderRadius: 2,
+    padding: "0 2px",
+  },
 }));
 
 interface Props {
   value: ILogItem;
+  searchText?: string;
 }
 
-const LogItem = (props: Props) => {
-  const { value } = props;
+const LogItem = ({ value, searchText }: Props) => {
+  const renderHighlightText = (text: string) => {
+    if (!searchText?.trim()) return text;
+
+    try {
+      const parts = text.split(new RegExp(`(${searchText})`, "gi"));
+      return parts.map((part, index) =>
+        part.toLowerCase() === searchText.toLowerCase() ? (
+          <span key={index} className="highlight">
+            {part}
+          </span>
+        ) : (
+          part
+        ),
+      );
+    } catch {
+      return text;
+    }
+  };
 
   return (
     <Item>
@@ -50,7 +73,7 @@ const LogItem = (props: Props) => {
         </span>
       </div>
       <div>
-        <span className="data">{value.payload}</span>
+        <span className="data">{renderHighlightText(value.payload)}</span>
       </div>
     </Item>
   );

src/pages/logs.tsx

@@ -27,6 +27,7 @@ const LogPage = () => {
   );
   const [match, setMatch] = useState(() => (_: string) => true);
   const logData = useLogData(logLevel);
+  const [searchText, setSearchText] = useState("");
 
   const filterLogs = useMemo(() => {
     return logData
@@ -92,7 +93,12 @@ const LogPage = () => {
           <MenuItem value="error">ERROR</MenuItem>
           <MenuItem value="debug">DEBUG</MenuItem>
         </BaseStyledSelect>
-        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
+        <BaseSearchBox
+          onSearch={(matcher, state) => {
+            setMatch(() => matcher);
+            setSearchText(state.text);
+          }}
+        />
       </Box>
 
       <Box
@@ -107,7 +113,9 @@ const LogPage = () => {
           <Virtuoso
             initialTopMostItemIndex={999}
             data={filterLogs}
-            itemContent={(index, item) => <LogItem value={item} />}
+            itemContent={(index, item) => (
+              <LogItem value={item} searchText={searchText} />
+            )}
             followOutput={"smooth"}
           />
         ) : (