fix(react/ribbon): solve some type errors

apps/client/src/widgets/containers/ribbon_container.ts

@@ -1,78 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import keyboardActionsService from "../../services/keyboard_actions.js";
-import attributeService from "../../services/attributes.js";
-import type CommandButtonWidget from "../buttons/command_button.js";
-import type FNote from "../../entities/fnote.js";
-import type { NoteType } from "../../entities/fnote.js";
-import type { EventData, EventNames } from "../../components/app_context.js";
-import type NoteActionsWidget from "../buttons/note_actions.js";
-
-type ButtonWidget = (CommandButtonWidget | NoteActionsWidget);
-
-export default class RibbonContainer extends NoteContextAwareWidget {
-
-    private lastActiveComponentId?: string | null;
-    private lastNoteType?: NoteType;
-
-    private ribbonWidgets: NoteContextAwareWidget[];
-    private buttonWidgets: ButtonWidget[];
-    private $tabContainer!: JQuery<HTMLElement>;
-    private $buttonContainer!: JQuery<HTMLElement>;
-    private $bodyContainer!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.contentSized();
-        this.ribbonWidgets = [];
-        this.buttonWidgets = [];
-    }
-
-
-    async handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>) {
-        if (["activeContextChanged", "setNoteContext"].includes(name)) {
-            // won't trigger .refresh();
-            await super.handleEventInChildren("setNoteContext", data as EventData<"activeContextChanged" | "setNoteContext">);
-        } else if (this.isEnabled() || name === "initialRenderComplete") {
-            const activeRibbonWidget = this.getActiveRibbonWidget();
-
-            // forward events only to active ribbon tab, inactive ones don't need to be updated
-            if (activeRibbonWidget) {
-                await activeRibbonWidget.handleEvent(name, data);
-            }
-
-            for (const buttonWidget of this.buttonWidgets) {
-                await buttonWidget.handleEvent(name, data);
-            }
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (!this.note) {
-            return;
-        }
-
-        if (this.noteId && loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
-            // note type influences the list of available ribbon tabs the most
-            // check for the type is so that we don't update on each title rename
-            this.lastNoteType = this.note.type;
-
-            this.refresh();
-        } else if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) {
-            this.refreshWithNote(this.note, true);
-        }
-    }
-    /**
-     * Executed as soon as the user presses the "Edit" floating button in a read-only text note.
-     *
-     * <p>
-     * We need to refresh the ribbon for cases such as the classic editor which relies on the read-only state.
-     */
-    readOnlyTemporarilyDisabledEvent() {
-        this.refresh();
-    }
-
-    getActiveRibbonWidget() {
-        return this.ribbonWidgets.find((ch) => ch.componentId === this.lastActiveComponentId);
-    }
-}

apps/client/src/widgets/note_title.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import FormTextBox from "./react/FormTextBox";
-import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEvent } from "./react/hooks";
+import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEvent, useTriliumEvents } from "./react/hooks";
 import protected_session_holder from "../services/protected_session_holder";
 import server from "../services/server";
 import "./note_title.css";
@@ -48,12 +48,12 @@ export default function NoteTitleWidget() {
     useEffect(() => {
         appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate());        
     }, []);
-    useTriliumEvent([ "beforeNoteSwitch", "beforeNoteContextRemove" ], () => spacedUpdate.updateNowIfNecessary());
+    useTriliumEvents([ "beforeNoteSwitch", "beforeNoteContextRemove" ], () => spacedUpdate.updateNowIfNecessary());
 
     // Manage focus.
     const textBoxRef = useRef<HTMLInputElement>(null);
     const isNewNote = useRef<boolean>();
-    useTriliumEvent([ "focusOnTitle", "focusAndSelectTitle" ], (e) => {
+    useTriliumEvents([ "focusOnTitle", "focusAndSelectTitle" ], (e) => {
         if (noteContext?.isActive() && textBoxRef.current) {
             textBoxRef.current.focus();
             isNewNote.current = ("isNewNote" in e ? e.isNewNote : false);

apps/client/src/widgets/react/FormCheckbox.tsx

@@ -6,7 +6,7 @@ import { CSSProperties, memo } from "preact/compat";
 import { useUniqueName } from "./hooks";
 
 interface FormCheckboxProps {
-    name: string;
+    name?: string;
     label: string | ComponentChildren;
     /**
      * If set, the checkbox label will be underlined and dotted, indicating a hint. When hovered, it will show the hint text.

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -124,7 +124,7 @@ function ProtectedNoteSwitch({ note }: { note?: FNote | null }) {
             <FormToggle
                 switchOnName={t("protect_note.toggle-on")} switchOnTooltip={t("protect_note.toggle-on-hint")}
                 switchOffName={t("protect_note.toggle-off")} switchOffTooltip={t("protect_note.toggle-off-hint")}
-                currentValue={isProtected}
+                currentValue={!!isProtected}
                 onChange={(shouldProtect) => note && protected_session.protectNote(note.noteId, shouldProtect, false)}
             />
         </div>