chore(react/ribbon): add part of the note actions menu

apps/client/src/widgets/buttons/note_actions.ts

@@ -38,31 +38,6 @@ const TPL = /*html*/`
     </style>
 
     <div class="dropdown-menu dropdown-menu-right">
-        <li data-trigger-command="renderActiveNote" class="dropdown-item render-note-button">
-            <span class="bx bx-extension"></span> ${t("note_actions.re_render_note")}<kbd data-command="renderActiveNote"></kbd>
-        </li>
-
-        <li data-trigger-command="findInText" class="dropdown-item find-in-text-button">
-            <span class='bx bx-search'></span> ${t("note_actions.search_in_note")}<kbd data-command="findInText"></kbd>
-        </li>
-
-        <li data-trigger-command="printActiveNote" class="dropdown-item print-active-note-button">
-            <span class="bx bx-printer"></span> ${t("note_actions.print_note")}<kbd data-command="printActiveNote"></kbd>
-        </li>
-
-        <li data-trigger-command="exportAsPdf" class="dropdown-item export-as-pdf-button">
-            <span class="bx bxs-file-pdf"></span> ${t("note_actions.print_pdf")}<kbd data-command="exportAsPdf"></kbd>
-        </li>
-
-        <div class="dropdown-divider"></div>
-
-
-        <li class="dropdown-item import-files-button"><span class="bx bx-import"></span> ${t("note_actions.import_files")}</li>
-
-        <li class="dropdown-item export-note-button"><span class="bx bx-export"></span> ${t("note_actions.export_note")}</li>
-
-
-        <div class="dropdown-divider"></div>
 
 
 
@@ -135,25 +110,6 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         this.$renderNoteButton = this.$widget.find(".render-note-button");
         this.$saveRevisionButton = this.$widget.find(".save-revision-button");
 
-        this.$exportNoteButton = this.$widget.find(".export-note-button");
-        this.$exportNoteButton.on("click", () => {
-            if (this.$exportNoteButton.hasClass("disabled") || !this.noteContext?.notePath) {
-                return;
-            }
-
-            this.triggerCommand("showExportDialog", {
-                notePath: this.noteContext.notePath,
-                defaultType: "single"
-            });
-        });
-
-        this.$importNoteButton = this.$widget.find(".import-files-button");
-        this.$importNoteButton.on("click", () => {
-            if (this.noteId) {
-                this.triggerCommand("showImportDialog", { noteId: this.noteId });
-            }
-        });
-
         this.$widget.on("click", ".dropdown-item", () => this.$widget.find("[data-bs-toggle='dropdown']").dropdown("toggle"));
 
         this.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
@@ -170,22 +126,16 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
     }
 
     async refreshVisibility(note: FNote) {
-        const isInOptions = note.noteId.startsWith("_options");
-
         this.$convertNoteIntoAttachmentButton.toggle(note.isEligibleForConversionToAttachment());
 
-        this.toggleDisabled(this.$findInTextButton, ["text", "code", "book", "mindMap", "doc"].includes(note.type));
-
         this.toggleDisabled(this.$showAttachmentsButton, !isInOptions);
         this.toggleDisabled(this.$showSourceButton, ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type));
 
-        const canPrint = ["text", "code"].includes(note.type);
+
         this.toggleDisabled(this.$printActiveNoteButton, canPrint);
         this.toggleDisabled(this.$exportAsPdfButton, canPrint);
         this.$exportAsPdfButton.toggleClass("hidden-ext", !utils.isElectron());
 
-        this.$renderNoteButton.toggle(note.type === "render");
-
         this.toggleDisabled(this.$openNoteExternallyButton, utils.isElectron() && !["search", "book"].includes(note.type));
         this.toggleDisabled(
             this.$openNoteCustomButton,

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

@@ -1,5 +1,5 @@
 import { ConvertToAttachmentResponse } from "@triliumnext/commons";
-import appContext from "../../components/app_context";
+import appContext, { CommandNames } from "../../components/app_context";
 import FNote from "../../entities/fnote"
 import dialog from "../../services/dialog";
 import { t } from "../../services/i18n"
@@ -8,10 +8,15 @@ import toast from "../../services/toast";
 import ws from "../../services/ws";
 import ActionButton from "../react/ActionButton"
 import Dropdown from "../react/Dropdown";
-import { FormListItem } from "../react/FormList";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import { isElectron as getIsElectron } from "../../services/utils";
+import { ParentComponent } from "../react/react_utils";
+import { useContext } from "preact/hooks";
+import NoteContext from "../../components/note_context";
 
 interface NoteActionsProps {
   note?: FNote;
+  noteContext?: NoteContext;
 }
 
 export default function NoteActions(props: NoteActionsProps) {
@@ -37,6 +42,17 @@ function RevisionsButton({ note }: NoteActionsProps) {
 }
 
 function NoteContextMenu(props: NoteActionsProps) {
+  const { note, noteContext } = props;
+  if (!note) {
+    return <></>;
+  }
+
+  const parentComponent = useContext(ParentComponent);
+  const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(note.type);
+  const isInOptions = note.noteId.startsWith("_options");
+  const isPrintable = ["text", "code"].includes(note.type);
+  const isElectron = getIsElectron();
+
   return (
     <Dropdown
       buttonClassName="bx bx-dots-vertical-rounded"
@@ -44,10 +60,33 @@ function NoteContextMenu(props: NoteActionsProps) {
       noSelectButtonStyle
     >
       <ConvertToAttachment {...props} />
+      {note.type === "render" && <CommandItem command="renderActiveNote" icon="bx bx-extension" text={t("note_actions.re_render_note")} />}
+      <CommandItem command="findInText" icon="bx bx-search" disabled={!isSearchable} text={t("note_actions.search_in_note")} />
+      <CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
+      {isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" text={t("note_actions.print_pdf")} />}
+      <FormDropdownDivider />
+
+      <CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
+        command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
+      <CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
+        command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
+          notePath: noteContext.notePath, 
+          defaultType: "single"
+        })} />
+      <FormDropdownDivider />
     </Dropdown>
   );
 }
 
+function CommandItem({ icon, text, command, disabled }: { icon: string, text: string, command: CommandNames | (() => void), disabled?: boolean }) {
+  return <FormListItem
+    icon={icon}
+    triggerCommand={typeof command === "string" ? command : undefined}
+    onClick={typeof command === "function" ? command : undefined}
+    disabled={disabled}
+  >{text}</FormListItem>
+}
+
 function ConvertToAttachment({ note }: NoteActionsProps) {
   return (note?.isEligibleForConversionToAttachment() &&
     <FormListItem

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

@@ -205,7 +205,7 @@ export default function Ribbon() {
                     ))}
                 </div>
                 <div className="ribbon-button-container">
-                    <NoteActions note={note} />
+                    { note && <NoteActions note={note} noteContext={noteContext} /> }
                 </div>
             </div>