fix(client): ribbon adapter not working

Author: eliandoran

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

@@ -146,7 +146,7 @@ function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: stri
     )
 }
 
-async function shouldShowTab(showConfig: boolean | ((context: TitleContext) => Promise<boolean | null | undefined> | boolean | null | undefined), context: TitleContext) {
+export async function shouldShowTab(showConfig: boolean | ((context: TitleContext) => Promise<boolean | null | undefined> | boolean | null | undefined), context: TitleContext) {
     if (showConfig === null || showConfig === undefined) return true;
     if (typeof showConfig === "boolean") return showConfig;
     if ("then" in showConfig) return await showConfig(context);

apps/client/src/widgets/ribbon/components/StandaloneRibbonAdapter.tsx

@@ -1,8 +1,9 @@
 import { ComponentChildren } from "preact";
 import { useNoteContext } from "../../react/hooks";
-import { TabContext, TitleContext } from "../ribbon-interface";
+import { TabContext } from "../ribbon-interface";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { RIBBON_TAB_DEFINITIONS } from "../RibbonDefinition";
+import { shouldShowTab } from "../Ribbon";
 
 interface StandaloneRibbonAdapterProps {
     component: (props: TabContext) => ComponentChildren;
@@ -16,10 +17,11 @@ export default function StandaloneRibbonAdapter({ component }: StandaloneRibbonA
     const Component = component;
     const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId } = useNoteContext();
     const definition = useMemo(() => RIBBON_TAB_DEFINITIONS.find(def => def.content === component), [ component ]);
-    const [ shown, setShown ] = useState(unwrapShown(definition?.show, { note }));
+    const [ shown, setShown ] = useState<boolean | null | undefined>(false);
 
     useEffect(() => {
-        setShown(unwrapShown(definition?.show, { note }));
+        if (!definition) return;
+        shouldShowTab(definition.show, { note, noteContext }).then(setShown);
     }, [ note ]);
 
     return (
@@ -35,9 +37,3 @@ export default function StandaloneRibbonAdapter({ component }: StandaloneRibbonA
         />
     );
 }
-
-function unwrapShown(value: boolean | ((context: TitleContext) => boolean | null | undefined) | undefined, context: TitleContext) {
-    if (!value) return true;
-    if (typeof value === "boolean") return value;
-    return !!value(context);
-}