feat(react/widgets): port api_log

apps/client/src/layouts/desktop_layout.tsx

@@ -13,7 +13,6 @@ import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status
 import SpacerWidget from "../widgets/spacer.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
@@ -24,7 +23,6 @@ import TocWidget from "../widgets/toc.js";
 import HighlightsListWidget from "../widgets/highlights_list.js";
 import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
-import ApiLogWidget from "../widgets/api_log.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import ScrollPadding from "../widgets/scroll_padding.js";
@@ -43,6 +41,7 @@ import SqlResults from "../widgets/sql_result.js";
 import SqlTableSchemas from "../widgets/sql_table_schemas.js";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
+import ApiLog from "../widgets/api_log.jsx";
 
 export default class DesktopLayout {
 
@@ -144,7 +143,7 @@ export default class DesktopLayout {
                                                                 .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
-                                                        .child(new ApiLogWidget())
+                                                        .child(<ApiLog />)
                                                         .child(new FindWidget())
                                                         .child(
                                                             ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC

apps/client/src/widgets/api_log.css

@@ -0,0 +1,26 @@
+.api-log-widget {
+    padding: 15px;
+    flex-grow: 1;
+    max-height: 40%;
+    position: relative;
+}
+
+.api-log-container {
+    overflow: auto;
+    height: 100%;
+    font-family: var(--monospace-font-family);
+    font-size: 0.8em;
+    white-space: pre;
+}
+
+.close-api-log-button {
+    padding: 5px;
+    border: 1px solid var(--button-border-color);
+    background-color: var(--button-background-color);
+    border-radius: var(--button-border-radius);
+    color: var(--button-text-color);
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    cursor: pointer;
+}

apps/client/src/widgets/api_log.ts

@@ -1,80 +0,0 @@
-import type { EventData } from "../components/app_context.js";
-import type FNote from "../entities/fnote.js";
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<div class="api-log-widget">
-    <style>
-    .api-log-widget {
-        padding: 15px;
-        flex-grow: 1;
-        max-height: 40%;
-        position: relative;
-    }
-
-    .hidden-api-log {
-        display: none;
-    }
-
-    .api-log-container {
-        overflow: auto;
-        height: 100%;
-    }
-
-    .close-api-log-button {
-        padding: 5px;
-        border: 1px solid var(--button-border-color);
-        background-color: var(--button-background-color);
-        border-radius: var(--button-border-radius);
-        color: var(--button-text-color);
-        position: absolute;
-        top: 10px;
-        right: 40px;
-        cursor: pointer;
-    }
-    </style>
-
-    <div class="bx bx-x close-api-log-button" title="${t("api_log.close")}"></div>
-
-    <div class="api-log-container"></div>
-</div>`;
-
-export default class ApiLogWidget extends NoteContextAwareWidget {
-
-    private $logContainer!: JQuery<HTMLElement>;
-    private $closeButton!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return !!this.note && this.note.mime.startsWith("application/javascript;env=") && super.isEnabled();
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.toggle(false);
-
-        this.$logContainer = this.$widget.find(".api-log-container");
-        this.$closeButton = this.$widget.find(".close-api-log-button");
-        this.$closeButton.on("click", () => this.toggle(false));
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$logContainer.empty();
-    }
-
-    apiLogMessagesEvent({ messages, noteId }: EventData<"apiLogMessages">) {
-        if (!this.isNote(noteId)) {
-            return;
-        }
-
-        this.toggle(true);
-
-        for (const message of messages) {
-            this.$logContainer.append(message).append($("<br>"));
-        }
-    }
-
-    toggle(show: boolean) {
-        this.$widget.toggleClass("hidden-api-log", !show);
-    }
-}

apps/client/src/widgets/api_log.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "preact/hooks";
+import "./api_log.css";
+import { useNoteContext, useTriliumEvent } from "./react/hooks";
+import ActionButton from "./react/ActionButton";
+import { t } from "../services/i18n";
+
+/**
+ * Displays the messages that are logged by the current note via `api.log`, for frontend and backend scripts.
+ */
+export default function ApiLog() {
+    const { note, noteId } = useNoteContext();
+    const [ messages, setMessages ] = useState<string[]>();
+
+    useTriliumEvent("apiLogMessages", ({ messages, noteId: eventNoteId }) => {
+        if (eventNoteId !== noteId) return;
+        setMessages(messages);
+    });
+
+    // Clear when navigating away.
+    useEffect(() => setMessages(undefined), [ note ]);
+
+    const isEnabled = note?.mime.startsWith("application/javascript;env=") && messages?.length;
+    return (
+        <div className={`api-log-widget ${!isEnabled ? "hidden-ext" : ""}`}>
+            {isEnabled && (
+                <>
+                    <ActionButton
+                        icon="bx bx-x"
+                        className="close-api-log-button"
+                        text={t("api_log.close")}
+                        onClick={() => setMessages(undefined)}
+                    />
+
+                    <div className="api-log-container">
+                        {messages.join("\n")}
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}