chore(react/collections/table): port note title formatter

apps/client/src/widgets/collections/table/columns.tsx

@@ -4,6 +4,8 @@ import { LabelType } from "../../../services/promoted_attribute_definition_parse
 import { RelationEditor } from "./relation_editor.js";
 import { JSX } from "preact";
 import { renderReactWidget } from "../../react/react_utils.jsx";
+import NoteTitleWidget from "../../note_title.jsx";
+import Icon from "../../react/Icon.jsx";
 
 type ColumnType = LabelType | "relation";
 
@@ -90,7 +92,16 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
             field: "title",
             title: "Title",
             editor: "input",
-            formatter: NoteTitleFormatter,
+            formatter: wrapFormatter(({ cell }) => {
+                const { noteId, iconClass, colorClass } = cell.getRow().getData();
+                if (!noteId) {
+                    return "";
+                }
+
+                return <span className={`reference-link ${colorClass}`} data-href={`#root/${noteId}`}>
+                    <Icon icon={iconClass} />{" "}{cell.getValue()}
+                </span>;
+            }),
             width: 400
         }
     ];

apps/client/src/widgets/collections/table/formatters.ts

@@ -47,28 +47,8 @@ export function NoteFormatter(cell: CellComponent, _formatterParams, onRendered)
     }
 }
 
-/**
- * Custom formatter for the note title that is quite similar to {@link NoteFormatter}, but where the title and icons are read from separate fields.
- */
-export function NoteTitleFormatter(cell: CellComponent) {
-    const { noteId, iconClass, colorClass } = cell.getRow().getData();
-    if (!noteId) {
-        return "";
-    }
-
-    const { $noteRef } = buildNoteLink(noteId, cell.getValue(), iconClass, colorClass);
-    return $noteRef[0].outerHTML;
-}
-
 function buildNoteLink(noteId: string, title: string, iconClass: string, colorClass?: string) {
     const $noteRef = $("<span>");
     const href = `#root/${noteId}`;
-    $noteRef.addClass("reference-link");
-    $noteRef.attr("data-href", href);
-    $noteRef.text(title);
-    $noteRef.prepend($("<span>").addClass(iconClass));
-    if (colorClass) {
-        $noteRef.addClass(colorClass);
-    }
     return { $noteRef, href };
 }