chore(client/ts): port floating buttons

src/public/app/components/app_context.ts

@@ -355,6 +355,10 @@ type EventMappings = {
     };
     noteTypeMimeChanged: { noteId: string };
     zenModeChanged: { isEnabled: boolean };
+    relationMapCreateChildNote: { ntxId: string | null | undefined };
+    relationMapResetPanZoom: { ntxId: string | null | undefined };
+    relationMapResetZoomIn: { ntxId: string | null | undefined };
+    relationMapResetZoomOut: { ntxId: string | null | undefined };
 };
 
 export type EventListener<T extends EventNames> = {

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

@@ -1,11 +1,12 @@
 import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import ws from "../../services/ws.js";
-import appContext from "../../components/app_context.js";
+import appContext, { type EventData } from "../../components/app_context.js";
 import toastService from "../../services/toast.js";
 import treeService from "../../services/tree.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import keyboardActionService from "../../services/keyboard_actions.js";
+import type FNote from "../../entities/fnote.js";
 
 const TPL = `
 <div class="code-buttons-widget">
@@ -19,17 +20,27 @@ const TPL = `
     <button data-trigger-command="runActiveNote" class="execute-button floating-button btn" title="${t("code_buttons.execute_button_title")}">
         <span class="bx bx-run"></span>
     </button>
-    
+
     <button class="trilium-api-docs-button floating-button btn" title="${t("code_buttons.trilium_api_docs_button_title")}">
         <span class="bx bx-help-circle"></span>
     </button>
-    
+
     <button class="save-to-note-button floating-button btn" title="${t("code_buttons.save_to_note_button_title")}">
         <span class="bx bx-save"></span>
     </button>
 </div>`;
 
+// TODO: Deduplicate with server.
+interface SaveSqlConsoleResponse {
+    notePath: string;
+}
+
 export default class CodeButtonsWidget extends NoteContextAwareWidget {
+
+    private $openTriliumApiDocsButton!: JQuery<HTMLElement>;
+    private $executeButton!: JQuery<HTMLElement>;
+    private $saveToNoteButton!: JQuery<HTMLElement>;
+
     isEnabled() {
         return super.isEnabled() && this.note && (this.note.mime.startsWith("application/javascript") || this.note.mime === "text/x-sqlite;schema=trilium");
     }
@@ -40,7 +51,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
         this.$openTriliumApiDocsButton.on("click", () => {
             toastService.showMessage(t("code_buttons.opening_api_docs_message"));
 
-            if (this.note.mime.endsWith("frontend")) {
+            if (this.note?.mime.endsWith("frontend")) {
                 window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank");
             } else {
                 window.open("https://zadam.github.io/trilium/backend_api/BackendScriptApi.html", "_blank");
@@ -50,7 +61,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
         this.$executeButton = this.$widget.find(".execute-button");
         this.$saveToNoteButton = this.$widget.find(".save-to-note-button");
         this.$saveToNoteButton.on("click", async () => {
-            const { notePath } = await server.post("special-notes/save-sql-console", { sqlConsoleNoteId: this.noteId });
+            const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: this.noteId });
 
             await ws.waitForMaxKnownEntityChangeId();
 
@@ -66,7 +77,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
         super.doRender();
     }
 
-    async refreshWithNote(note) {
+    async refreshWithNote(note: FNote) {
         this.$executeButton.toggle(note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium");
 
         this.$saveToNoteButton.toggle(note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely());
@@ -74,7 +85,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
         this.$openTriliumApiDocsButton.toggle(note.mime.startsWith("application/javascript;env="));
     }
 
-    async noteTypeMimeChangedEvent({ noteId }) {
+    async noteTypeMimeChangedEvent({ noteId }: EventData<"noteTypeMimeChangedEvent">) {
         if (this.isNote(noteId)) {
             await this.refresh();
         }

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

@@ -1,5 +1,7 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import { t } from "../../services/i18n.js";
+import type FNote from "../../entities/fnote.js";
+import type BasicWidget from "../basic_widget.js";
 
 const TPL = `
 <div class="floating-buttons no-print">
@@ -84,21 +86,26 @@ const TPL = `
 </div>`;
 
 export default class FloatingButtons extends NoteContextAwareWidget {
+
+    private $children!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$children = this.$widget.find(".floating-buttons-children");
 
         for (const widget of this.children) {
-            this.$children.append(widget.render());
+            if ("render" in widget) {
+                this.$children.append((widget as BasicWidget).render());
+            }
         }
     }
 
-    async refreshWithNote(note) {
+    async refreshWithNote(note: FNote) {
         this.toggle(true);
         this.$widget.find(".show-floating-buttons-button").on("click", () => this.toggle(true));
     }
 
-    toggle(show) {
+    toggle(show: boolean) {
         this.$widget.find(".floating-buttons-children").toggleClass("temporarily-hidden", !show);
     }
 

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

@@ -30,6 +30,12 @@ const TPL = `
 </div>`;
 
 export default class RelationMapButtons extends NoteContextAwareWidget {
+
+    private $createChildNote!: JQuery<HTMLElement>;
+    private $zoomInButton!: JQuery<HTMLElement>;
+    private $zoomOutButton!: JQuery<HTMLElement>;
+    private $resetPanZoomButton!: JQuery<HTMLElement>;
+
     isEnabled() {
         return super.isEnabled() && this.note?.type === "relationMap";
     }