feat(views/table): merge open note and icon into title

apps/client/src/widgets/view_widgets/table_view/data.ts

@@ -1,8 +1,8 @@
 import FNote from "../../../entities/fnote.js";
 import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
 import type { ColumnDefinition } from "tabulator-tables";
-import link from "../../../services/link.js";
+import { RelationEditor } from "./relation_editor.js";
-import { RelationEditor, RelationFormatter } from "./relation_editor.js";
+import { NoteFormatter, NoteTitleFormatter } from "./formatters.js";
 
 export type TableData = {
     iconClass: string;
@@ -47,7 +47,7 @@ const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
     },
     relation: {
         editor: RelationEditor,
-        formatter: RelationFormatter
+        formatter: NoteFormatter
     }
 };
 
@@ -74,18 +74,6 @@ export function buildColumnDefinitions(info: PromotedAttributeInformation[]) {
             resizable: false,
             frozen: true
         },
-        {
-            field: "iconClass",
-            title: "Note icon",
-            titleFormatter: emptyTitleFormatter,
-            width: 40,
-            headerSort: false,
-            hozAlign: "center",
-            formatter(cell) {
-                const iconClass = cell.getValue();
-                return `<span class="bx ${iconClass}"></span>`;
-            },
-        },
         {
             field: "noteId",
             title: "Note ID",
@@ -95,6 +83,7 @@ export function buildColumnDefinitions(info: PromotedAttributeInformation[]) {
             field: "title",
             title: "Title",
             editor: "input",
+            formatter: NoteTitleFormatter,
             width: 400
         }
     ];
@@ -110,22 +99,6 @@ export function buildColumnDefinitions(info: PromotedAttributeInformation[]) {
         });
     }
 
-    // End actions
-    columnDefs.push({
-        title: "Open note button",
-        width: 40,
-        hozAlign: "center",
-        headerSort: false,
-        formatter: () => `<span class="bx bx-window-open"></span>`,
-        titleFormatter: emptyTitleFormatter,
-        cellClick: (e, cell) => {
-            const noteId = cell.getRow().getCell("noteId").getValue();
-            if (noteId) {
-                link.goToLinkExt(e as MouseEvent, `#root/${noteId}`);
-            }
-        }
-    });
-
     return columnDefs;
 }
 

apps/client/src/widgets/view_widgets/table_view/formatters.ts

@@ -0,0 +1,41 @@
+import { CellComponent } from "tabulator-tables";
+import { loadReferenceLinkTitle } from "../../../services/link.js";
+
+/**
+ * Custom formatter to represent a note, with the icon and note title being rendered.
+ *
+ * The value of the cell must be the note ID.
+ */
+export function NoteFormatter(cell: CellComponent, formatterParams, onRendered) {
+    let noteId = cell.getValue();
+    if (!noteId) {
+        return "";
+    }
+
+    onRendered(async () => {
+        const $noteRef = $("<span>");
+        const href = `#root/${noteId}`;
+        $noteRef.addClass("reference-link");
+        $noteRef.attr("data-href", href);
+
+        await loadReferenceLinkTitle($noteRef, href);
+        cell.getElement().appendChild($noteRef[0]);
+    });
+    return "";
+}
+
+export function NoteTitleFormatter(cell: CellComponent, formatterParams, onRendered) {
+    const { noteId, iconClass } = cell.getRow().getData();
+    if (!noteId) {
+        return "";
+    }
+
+    const $noteRef = $("<span>");
+    const href = `#root/${noteId}`;
+    $noteRef.addClass("reference-link");
+    $noteRef.attr("data-href", href);
+    $noteRef.text(cell.getValue());
+    $noteRef.prepend($("<span>").addClass(iconClass));
+
+    return $noteRef[0].outerHTML;
+}

apps/client/src/widgets/view_widgets/table_view/relation_editor.ts

@@ -1,6 +1,5 @@
 import { CellComponent } from "tabulator-tables";
 import note_autocomplete from "../../../services/note_autocomplete";
-import { loadReferenceLinkTitle } from "../../../services/link";
 import froca from "../../../services/froca";
 
 export function RelationEditor(cell: CellComponent, onRendered, success, cancel, editorParams){
@@ -50,21 +49,3 @@ export function RelationEditor(cell: CellComponent, onRendered, success, cancel,
     container.appendChild(editor);
     return container;
 };
-
-export function RelationFormatter(cell: CellComponent, formatterParams, onRendered) {
-    const noteId = cell.getValue();
-    if (!noteId) {
-        return "";
-    }
-
-    onRendered(async () => {
-        const $noteRef = $("<span>");
-        const href = `#root/${noteId}`;
-        $noteRef.addClass("reference-link");
-        $noteRef.attr("data-href", href);
-
-        await loadReferenceLinkTitle($noteRef, href);
-        cell.getElement().appendChild($noteRef[0]);
-    });
-    return "";
-}