chore(react/dialog): improve recent changes

apps/client/src/stylesheets/theme-next/dialogs.css

@@ -233,11 +233,11 @@ div.tn-tool-dialog {
 
 /* Item title link */
 
-.recent-changes-content ul li .note-title a {
+.recent-changes-content ul li a {
     color: currentColor;
 }
 
-.recent-changes-content ul li .note-title a:hover {
+.recent-changes-content ul li a:hover {
     text-decoration: underline;
 }
 

apps/client/src/widgets/dialogs/recent_changes.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
-import { EventData } from "../../components/app_context";
+import appContext, { EventData } from "../../components/app_context";
-import { openDialog } from "../../services/dialog";
+import dialog, { closeActiveDialog, openDialog } from "../../services/dialog";
 import { t } from "../../services/i18n";
 import server from "../../services/server";
 import toast from "../../services/toast";
@@ -8,11 +8,12 @@ import Button from "../react/Button";
 import Modal from "../react/Modal";
 import ReactBasicWidget from "../react/ReactBasicWidget";
 import hoisted_note from "../../services/hoisted_note";
-import { RecentChangesRow } from "@triliumnext/commons";
+import type { RecentChangesRow } from "@triliumnext/commons";
 import froca from "../../services/froca";
 import { formatDateTime } from "../../utils/formatters";
 import link from "../../services/link";
 import RawHtml from "../react/RawHtml";
+import ws from "../../services/ws";
 
 interface RecentChangesDialogProps {
     ancestorNoteId?: string;
@@ -90,9 +91,9 @@ function RecentChangesTimeline({ groupedByDate }: { groupedByDate: Map<String, R
                                 return (
                                     <li className={isDeleted ? "deleted-note" : ""}>
                                         <span title={change.date}>{formattedTime}</span>
-                                        { !isDeleted && notePath
+                                        { !isDeleted
                                         ? <NoteLink notePath={notePath} title={change.current_title} />
-                                        : <span className="note-title">{change.current_title}</span> }
+                                        : <DeletedNoteLink change={change} /> }
                                     </li>
                                 );
                             })}
@@ -117,7 +118,35 @@ function NoteLink({ notePath, title }: { notePath: string, title: string }) {
         }).then(setNoteLink);
     }, [notePath, title]);
     return (
-        noteLink ? <RawHtml className="note-title" html={noteLink[0].innerHTML} /> : <span className="note-title">Foo {title}</span>
+        noteLink ? <RawHtml className="note-title" html={noteLink[0].innerHTML} /> : <span className="note-title">{title}</span>
+    );
+}
+
+function DeletedNoteLink({ change }: { change: RecentChangesRow }) {
+    return (
+        <>
+            <span className="note-title">{change.current_title}</span>
+            &nbsp;
+            (<a href="javascript:"
+                onClick={() => {
+                    async () => {
+                        const text = t("recent_changes.confirm_undelete");
+
+                        if (await dialog.confirm(text)) {
+                            await server.put(`notes/${change.noteId}/undelete`);
+                            closeActiveDialog();
+                            await ws.waitForMaxKnownEntityChangeId();
+
+                            const activeContext = appContext.tabManager.getActiveContext();
+                            if (activeContext) {
+                                activeContext.setNote(change.noteId);
+                            }
+                        }
+                    }
+                }}>
+                {t("recent_changes.undelete_link")})
+            </a>
+        </>
     );
 }
 

apps/server/src/routes/api/recent_changes.ts

@@ -5,18 +5,7 @@ import protectedSessionService from "../../services/protected_session.js";
 import noteService from "../../services/notes.js";
 import becca from "../../becca/becca.js";
 import type { Request } from "express";
-
+import type { RecentChangeRow } from "@triliumnext/commons";
-interface RecentChangeRow {
-    noteId: string;
-    current_isDeleted: boolean;
-    current_deleteId: string;
-    current_title: string;
-    current_isProtected: boolean;
-    title: string;
-    utcDate: string;
-    date: string;
-    canBeUndeleted?: boolean;
-}
 
 function getRecentChanges(req: Request) {
     const { ancestorNoteId } = req.params;

packages/commons/src/lib/server_api.ts

@@ -46,9 +46,16 @@ export interface RevisionPojo {
     contentLength?: number;
 }
 
-export interface RecentChangesRow {
+export interface RecentChangeRow {
     noteId: string;
+    current_isDeleted: boolean;
+    current_deleteId: string;
+    current_title: string;
+    current_isProtected: boolean;
+    title: string;
+    utcDate: string;
     date: string;
+    canBeUndeleted?: boolean;
 }
 
 export interface BulkActionAffectedNotes {