feat(react/ribbon): port note paths tab

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

@@ -1,7 +1,7 @@
 import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions";
-import { separateByCommas } from "./react_utils";
+import { joinElements } from "./react_utils";
 
 interface KeyboardShortcutProps {
     actionName: KeyboardActionNames;
@@ -22,7 +22,7 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
         <>
             {action.effectiveShortcuts?.map((shortcut, i) => {
                 const keys = shortcut.split("+");
-                return separateByCommas(keys
+                return joinElements(keys
                     .map((key, i) => (
                         <>
                             <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}

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

@@ -6,9 +6,10 @@ interface NoteLinkOpts {
     notePath: string | string[];
     showNotePath?: boolean;
     style?: Record<string, string | number>;
+    noPreview?: boolean;
 }
 
-export default function NoteLink({ notePath, showNotePath, style }: NoteLinkOpts) {
+export default function NoteLink({ notePath, showNotePath, style, noPreview }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
     const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
 
@@ -21,6 +22,13 @@ export default function NoteLink({ notePath, showNotePath, style }: NoteLinkOpts
         jqueryEl?.css(style);
     }
 
+    const $linkEl = jqueryEl?.find("a");
+    if (noPreview) {
+        $linkEl?.addClass("no-tooltip-preview");
+    }
+
+    $linkEl?.addClass("tn-link");
+
     return <RawHtml html={jqueryEl} />
     
 }

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

@@ -43,7 +43,7 @@ export function disposeReactWidget(container: Element) {
     render(null, container);
 }
 
-export function separateByCommas(components: ComponentChild[]) {
+export function joinElements(components: ComponentChild[], separator = ", ") {
     return components.reduce<any>((acc, item) =>
-        (acc.length ? [...acc, ", ", item] : [item]), []);
+        (acc.length ? [...acc, separator, item] : [item]), []);
 }