Parse URLs from note field (#154)

src/renderer/components/virtual-table/cells/note-cell.tsx

@@ -0,0 +1,47 @@
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+import { useMemo } from 'react';
+import { Text } from '/@/renderer/components/text';
+
+const URL_REGEX =
+    /((?:https?:\/\/)?(?:[\w-]{1,32}(?:\.[\w-]{1,32})+)(?:\/[\w\-./?%&=][^.|^\s]*)?)/g;
+
+const replaceURLWithHTMLLinks = (text: string) => {
+    const urlRegex = new RegExp(URL_REGEX, 'g');
+    return text.replaceAll(
+        urlRegex,
+        (url) => `<a href="${url}" target="_blank" rel="noreferrer">${url}</a>`,
+    );
+};
+
+export const NoteCell = ({ value }: ICellRendererParams) => {
+    const formattedValue = useMemo(() => {
+        if (!value) {
+            return '';
+        }
+
+        return replaceURLWithHTMLLinks(value);
+    }, [value]);
+
+    if (value === undefined) {
+        return (
+            <CellContainer $position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
+
+    return (
+        <CellContainer $position="left">
+            <Text
+                $secondary
+                dangerouslySetInnerHTML={{ __html: formattedValue }}
+                overflow="hidden"
+            />
+        </CellContainer>
+    );
+};

src/renderer/components/virtual-table/index.tsx

@@ -36,6 +36,7 @@ import { TablePagination } from '/@/renderer/components/virtual-table/table-pagi
 import { ActionsCell } from '/@/renderer/components/virtual-table/cells/actions-cell';
 import { TitleCell } from '/@/renderer/components/virtual-table/cells/title-cell';
 import { useFixedTableHeader } from '/@/renderer/components/virtual-table/hooks/use-fixed-table-header';
+import { NoteCell } from '/@/renderer/components/virtual-table/cells/note-cell';
 
 export * from './table-config-dropdown';
 export * from './table-pagination';
@@ -150,7 +151,7 @@ const tableColumns: { [key: string]: ColDef } = {
         width: 100,
     },
     comment: {
-        cellRenderer: GenericCell,
+        cellRenderer: NoteCell,
         colId: TableColumn.COMMENT,
         headerName: 'Note',
         valueGetter: (params: ValueGetterParams) => (params.data ? params.data.comment : undefined),