From d53faa8c01b60f14aef0f62f2fbdc61c6046876a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 23 Aug 2025 20:49:54 +0300
Subject: [PATCH] refactor(react/ribbon): imperative api for saving, reloading,
 updating attributes

---
 .../attribute_widgets/attribute_editor.ts     |  4 --
 .../ribbon/components/AttributeEditor.tsx     | 11 ++++-
 .../ribbon_widgets/owned_attribute_list.ts    | 40 -------------------
 3 files changed, 9 insertions(+), 46 deletions(-)
 delete mode 100644 apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts

diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts
index 87db417f5..38eec14e5 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts
@@ -17,8 +17,4 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
             this.handleAddNewAttributeCommand("addNewRelation");
         }
     }
-
-    async updateAttributeList(attributes: FAttribute[]) {
-        await this.renderOwnedAttributes(attributes, false);
-    }
 }
diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
index 9670b06fe..bb0e9b27e 100644
--- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -17,7 +17,7 @@ import Component from "../../../components/component";
 import link from "../../../services/link";
 import froca from "../../../services/froca";
 import contextMenu from "../../../menus/context_menu";
-import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
+import type { CommandData, CommandListenerData, FilteredCommandNames } from "../../../components/app_context";
 import { AttributeType } from "@triliumnext/commons";
 import attributes from "../../../services/attributes";
 import note_create from "../../../services/note_create";
@@ -245,7 +245,14 @@ export default function AttributeEditor({ note, componentId, notePath }: { note:
 
             return result?.note?.getBestNotePathString();
         }   
-    }), [ notePath ]))
+    }), [ notePath ]));
+
+    // Interaction with the attribute editor.
+    useLegacyImperativeHandlers(useMemo(() => ({
+        saveAttributesCommand: save,
+        reloadAttributesCommand: refresh,
+        updateAttributeListCommand: ({ attributes }: CommandListenerData<"updateAttributeList">) => renderOwnedAttributes(attributes as FAttribute[], false)
+    }), []));
     
     return (
         <>
diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts
deleted file mode 100644
index 6b036bd0e..000000000
--- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import AttributeDetailWidget from "../attribute_widgets/attribute_detail.js";
-import AttributeEditorWidget from "../attribute_widgets/attribute_editor.js";
-import type { CommandListenerData } from "../../components/app_context.js";
-import type FAttribute from "../../entities/fattribute.js";
-
-export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
-
-    private attributeDetailWidget: AttributeDetailWidget;
-    private attributeEditorWidget: AttributeEditorWidget;
-    private $title!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.attributeDetailWidget = new AttributeDetailWidget().contentSized().setParent(this);
-
-        this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).contentSized().setParent(this);
-
-        this.child(this.attributeEditorWidget, this.attributeDetailWidget);
-    }
-
-    async saveAttributesCommand() {
-        await this.attributeEditorWidget.save();
-    }
-
-    async reloadAttributesCommand() {
-        await this.attributeEditorWidget.refresh();
-    }
-
-    async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) {
-        // TODO: See why we need FAttribute[] and Attribute[]
-        await this.attributeEditorWidget.updateAttributeList(attributes as FAttribute[]);
-    }
-
-    focus() {
-        this.attributeEditorWidget.focus();
-    }
-}