From 0cec3c7764f3905ed3b7f2259a6438790439cd5a Mon Sep 17 00:00:00 2001
From: contributor <foss.contributor@gmail.com>
Date: Fri, 21 Nov 2025 13:29:00 +0200
Subject: [PATCH] make EditedNotes standalone component independent from ribbon

---
 apps/client/src/widgets/EditedNotes.tsx       | 51 +++++++++++++++++++
 .../src/widgets/ribbon/EditedNotesTab.tsx     | 40 ++-------------
 2 files changed, 54 insertions(+), 37 deletions(-)
 create mode 100644 apps/client/src/widgets/EditedNotes.tsx

diff --git a/apps/client/src/widgets/EditedNotes.tsx b/apps/client/src/widgets/EditedNotes.tsx
new file mode 100644
index 000000000..155cfca60
--- /dev/null
+++ b/apps/client/src/widgets/EditedNotes.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "preact/hooks";
+import { EditedNotesResponse, EditedNotes as EditedNotesList } from "@triliumnext/commons";
+import server from "../services/server";
+import { t } from "../services/i18n";
+import froca from "../services/froca";
+import NoteLink from "./react/NoteLink";
+import { joinElements } from "./react/react_utils";
+
+interface EditedNotesProps {
+    noteId?: string,
+    dateFilter: string,
+}
+
+export default function EditedNotes({ noteId, dateFilter } : EditedNotesProps) {
+   const [ editedNotes, setEditedNotes ] = useState<EditedNotesList>();
+
+    useEffect(() => {
+        if (!noteId || !dateFilter) return;
+        server.get<EditedNotesResponse>(`edited-notes/${dateFilter}`)
+            .then(async response => {
+                const filteredNotes = response.notes.filter((n) => n.noteId !== noteId);
+                const noteIds = filteredNotes.flatMap((n) => n.noteId);
+                await froca.getNotes(noteIds, true); // preload all at once
+                setEditedNotes(filteredNotes);
+            });
+    }, [noteId, dateFilter]);
+
+    return (
+        <>
+            {editedNotes?.length ? (
+                <div className="edited-notes-list use-tn-links">
+                    {joinElements(editedNotes.map(editedNote => {
+                        return (
+                            <span className="edited-note-line">
+                                {editedNote.isDeleted ? (
+                                    <i>{`${editedNote.title} ${t("edited_notes.deleted")}`}</i>
+                                ) : (
+                                    <>
+                                        {editedNote.notePath ? <NoteLink notePath={editedNote.notePath} showNotePath /> : <span>{editedNote.title}</span>}
+                                    </>
+                                )}
+                            </span>
+                        )
+                    }), " ")}
+                </div>
+            ) : (
+                <div className="no-edited-notes-found">{t("edited_notes.no_edited_notes_found")}</div>
+            )}
+        </>
+    )
+}
diff --git a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx
index 5e0f2095e..9d7b5003c 100644
--- a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx
+++ b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx
@@ -1,24 +1,8 @@
-import { useEffect, useState } from "preact/hooks";
 import { TabContext } from "./ribbon-interface";
-import { EditedNotesResponse, EditedNotes } from "@triliumnext/commons";
-import server from "../../services/server";
-import { t } from "../../services/i18n";
-import froca from "../../services/froca";
-import NoteLink from "../react/NoteLink";
-import { joinElements } from "../react/react_utils";
+import EditedNotes from "../../widgets/EditedNotes"
 
 export default function EditedNotesTab({ note }: TabContext) {
-    const [ editedNotes, setEditedNotes ] = useState<EditedNotes>();
-
-    useEffect(() => {
-        if (!note) return;
-        server.get<EditedNotesResponse>(`edited-notes/${note.getLabelValue("dateNote")}`).then(async response => {
-            const filteredNotes = response.notes.filter((n) => n.noteId !== note.noteId);
-            const noteIds = filteredNotes.flatMap((n) => n.noteId);
-            await froca.getNotes(noteIds, true); // preload all at once
-            setEditedNotes(filteredNotes);
-        });
-    }, [ note?.noteId ]);
+    const dateNoteLabelValue = note?.getLabelValue("dateNote") || "";
 
     return (
         <div className="edited-notes-widget" style={{
@@ -27,25 +11,7 @@ export default function EditedNotesTab({ note }: TabContext) {
             width: "100%",
             overflow: "auto"
         }}>
-            {editedNotes?.length ? (
-                <div className="edited-notes-list use-tn-links">
-                    {joinElements(editedNotes.map(editedNote => {
-                        return (
-                            <span className="edited-note-line">
-                                {editedNote.isDeleted ? (
-                                    <i>{`${editedNote.title} ${t("edited_notes.deleted")}`}</i>
-                                ) : (
-                                    <>
-                                        {editedNote.notePath ? <NoteLink notePath={editedNote.notePath} showNotePath /> : <span>{editedNote.title}</span> }
-                                    </>
-                                )}
-                            </span>
-                        )
-                    }), " ")}
-                </div>
-            ) : (
-                <div className="no-edited-notes-found">{t("edited_notes.no_edited_notes_found")}</div>
-            )}
+        <EditedNotes noteId={note?.noteId} dateFilter={dateNoteLabelValue} />
         </div>
     )
 }