From 08cf95aa389a8562eda9a9a81f2b9fda18ca2d9f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 4 Jul 2025 20:22:55 +0300
Subject: [PATCH] feat(views/table): merge open note and icon into title

---
 .../widgets/view_widgets/table_view/data.ts   | 35 ++--------------
 .../view_widgets/table_view/formatters.ts     | 41 +++++++++++++++++++
 .../table_view/relation_editor.ts             | 19 ---------
 3 files changed, 45 insertions(+), 50 deletions(-)
 create mode 100644 apps/client/src/widgets/view_widgets/table_view/formatters.ts

diff --git a/apps/client/src/widgets/view_widgets/table_view/data.ts b/apps/client/src/widgets/view_widgets/table_view/data.ts
index e562f80eb..b84b4d50f 100644
--- a/apps/client/src/widgets/view_widgets/table_view/data.ts
+++ b/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, RelationFormatter } from "./relation_editor.js";
+import { RelationEditor } 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;
 }
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/formatters.ts b/apps/client/src/widgets/view_widgets/table_view/formatters.ts
new file mode 100644
index 000000000..8276bcdc4
--- /dev/null
+++ b/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;
+}
diff --git a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts b/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
index 37026055c..0bd1cb1f2 100644
--- a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
+++ b/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 "";
-}