feat(backend-options): add a refresh floating button

src/public/app/components/app_context.ts

@@ -374,6 +374,7 @@ type EventMappings = {
     cloneNoteIdsTo: {
         noteIds: string[];
     };
+    refreshData: { ntxId: string | null | undefined };
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/layouts/desktop_layout.ts

@@ -92,6 +92,7 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import SwitchSplitOrientationButton from "../widgets/floating_buttons/switch_layout_button.js";
 import ToggleReadOnlyButton from "../widgets/floating_buttons/toggle_read_only_button.js";
 import PngExportButton from "../widgets/floating_buttons/png_export_button.js";
+import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 
 export default class DesktopLayout {
 
@@ -205,6 +206,7 @@ export default class DesktopLayout {
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(
                                                             new FloatingButtons()
+                                                                .child(new RefreshButton())
                                                                 .child(new SwitchSplitOrientationButton())
                                                                 .child(new ToggleReadOnlyButton())
                                                                 .child(new EditButton())

src/public/app/layouts/mobile_layout.ts

@@ -31,6 +31,7 @@ import TabRowWidget from "../widgets/tab_row.js";
 import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
 import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
 import PromptDialog from "../widgets/dialogs/prompt.js";
+import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 
 const MOBILE_CSS = `
 <style>
@@ -154,6 +155,7 @@ export default class MobileLayout {
                             .child(new SharedInfoWidget())
                             .child(
                                 new FloatingButtons()
+                                    .child(new RefreshButton())
                                     .child(new EditButton())
                                     .child(new RelationMapButtons())
                                     .child(new SvgExportButton())

src/public/app/widgets/floating_buttons/refresh_button.ts

@@ -0,0 +1,21 @@
+import appContext from "../../components/app_context.js";
+import { t } from "../../services/i18n.js";
+import OnClickButtonWidget from "../buttons/onclick_button.js";
+
+export default class RefreshButton extends OnClickButtonWidget {
+    constructor() {
+        super();
+
+        this
+            .title(t("backend_log.refresh"))
+            .icon("bx-refresh")
+            .onClick(() => this.triggerEvent("refreshData", { ntxId: this.noteContext?.ntxId }))
+    }
+
+    isEnabled(): boolean | null | undefined {
+        return super.isEnabled()
+            && this.note?.noteId === "_backendLog"
+            && this.noteContext?.viewScope?.viewMode === "default";
+    }
+
+}

src/public/app/widgets/type_widgets/content/backend_log.ts

@@ -1,6 +1,6 @@
 import server from "../../../services/server.js";
-import { t } from "../../../services/i18n.js";
 import AbstractCodeTypeWidget from "../abstract_code_type_widget.js";
+import type { EventData } from "../../../components/app_context.js";
 
 const TPL = `<div style="height: 100%; display: flex; flex-direction: column;">
     <style>
@@ -9,14 +9,11 @@ const TPL = `<div style="height: 100%; display: flex; flex-direction: column;">
             width: 100%;
             border: none;
             resize: none;
+            margin-bottom: 0;
         }
     </style>
 
-    <pre class="backend-log-editor"></pre>
+    <pre class="backend-log-editor"></pre
-
-    <div style="display: flex; justify-content: space-around; margin-top: 10px;">
-        <button class="refresh-backend-log-button btn btn-primary">${t("backend_log.refresh")}</button>
-    </div>
 </div>`;
 
 export default class BackendLogWidget extends AbstractCodeTypeWidget {
@@ -27,15 +24,20 @@ export default class BackendLogWidget extends AbstractCodeTypeWidget {
         super.doRender();
         this.$widget = $(TPL);
         this.$editor = this.$widget.find(".backend-log-editor");
-
-        this.$refreshBackendLog = this.$widget.find(".refresh-backend-log-button");
-        this.$refreshBackendLog.on("click", () => this.load());
     }
 
     async refresh() {
         await this.load();
     }
 
+    async refreshDataEvent({ ntxId }: EventData<"refreshData">) {
+        if (ntxId !== this.noteContext?.ntxId) {
+            return;
+        }
+
+        this.refresh();
+    }
+
     getExtraOpts(): Partial<CodeMirrorOpts> {
         return {
             readOnly: true
@@ -55,4 +57,5 @@ export default class BackendLogWidget extends AbstractCodeTypeWidget {
         this.show();
         this.scrollToEnd();
     }
+
 }

src/public/app/widgets/type_widgets/content_widget.ts

@@ -41,6 +41,8 @@ import type FNote from "../../entities/fnote.js";
 import type NoteContextAwareWidget from "../note_context_aware_widget.js";
 import { t } from "i18next";
 import LanguageOptions from "./options/i18n/language.js";
+import type { EventData, EventNames } from "../../components/app_context.js";
+import type BasicWidget from "../basic_widget.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -137,6 +139,7 @@ const CONTENT_WIDGETS: Record<string, (typeof NoteContextAwareWidget)[]> = {
 
 export default class ContentWidgetTypeWidget extends TypeWidget {
     private $content!: JQuery<HTMLElement>;
+    private widget?: BasicWidget;
 
     static getType() {
         return "contentWidget";
@@ -166,10 +169,20 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
                 this.child(widget);
 
                 this.$content.append(widget.render());
+                this.widget = widget;
                 await widget.refresh();
             }
         } else {
             this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
         }
     }
+
+    async handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>) {
+        if (this.widget && this.widget.handleEvent) {
+            return this.widget.handleEvent(name, data);
+        }
+
+        return super.handleEventInChildren(name, data);
+    }
+
 }