make EditedNotes standalone component independent from ribbon

This commit is contained in:
contributor 2025-11-21 13:29:00 +02:00
parent 2a65b85302
commit 0cec3c7764
2 changed files with 54 additions and 37 deletions

View File

@ -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>
)}
</>
)
}

View File

@ -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>
)
}