feat(note_actions): reintroduce help pages

apps/client/src/stylesheets/style.css

@@ -423,16 +423,16 @@ body.desktop .tabulator-popup-container,
     pointer-events: none;
 }
 
-.dropdown-menu .disabled .disabled-tooltip {
+.dropdown-menu .disabled .contextual-help {
     pointer-events: all;
     margin-inline-start: 8px;
     font-size: 0.75rem;
-    color: var(--disabled-tooltip-icon-color);
+    color: var(--contextual-help-icon-color);
     cursor: help;
     opacity: 0.75;
 }
 
-.dropdown-menu .disabled .disabled-tooltip:hover {
+.dropdown-menu .disabled .contextual-help:hover {
     opacity: 1;
 }
 

apps/client/src/stylesheets/theme-dark.css

@@ -19,7 +19,7 @@
     --dropdown-border-color: #555;
     --dropdown-shadow-opacity: 0.4;
     --dropdown-item-icon-destructive-color: #de6e5b;
-    --disabled-tooltip-icon-color: #7fd2ef;
+    --contextual-help-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
     --more-accented-background-color: #777;
@@ -114,4 +114,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
-}
+}

apps/client/src/stylesheets/theme-light.css

@@ -23,7 +23,7 @@ html {
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: 0.2;
     --dropdown-item-icon-destructive-color: #ec5138;
-    --disabled-tooltip-icon-color: #004382;
+    --contextual-help-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
     --more-accented-background-color: #ddd;
@@ -98,4 +98,4 @@ html {
 
 .use-note-color {
     --custom-color: var(--light-theme-custom-color);
-}
+}

apps/client/src/stylesheets/theme-next-dark.css

@@ -6,7 +6,7 @@
  */
 :root {
 
-    /* 
+    /*
      * ⚠️ NOTICE: This theme is currently in the beta stage of development.
      * The names and purposes of these CSS variables are subject to frequent changes.
      */
@@ -22,7 +22,7 @@
     --dropdown-border-color: #404040;
     --dropdown-shadow-opacity: 0.6;
     --dropdown-item-icon-destructive-color: #de6e5b;
-    --disabled-tooltip-icon-color: #7fd2ef;
+    --contextual-help-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
 
@@ -182,7 +182,7 @@
 
     --tab-close-button-hover-background: #a45353;
     --tab-close-button-hover-color: white;
-    
+
     --active-tab-background-color: #ffffff1c;
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --active-tab-icon-color: #a9a9a9;
@@ -201,7 +201,7 @@
 
     --promoted-attribute-card-background-color: #ffffff21;
     --promoted-attribute-card-shadow: none;
-    
+
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
     --floating-button-color: var(--button-text-color);
@@ -226,7 +226,7 @@
     --scrollbar-border-color: unset; /* Deprecated */
 
     --selection-background-color: #3399FF70;
-    
+
     --link-color: lightskyblue;
 
     --mermaid-theme: dark;
@@ -320,4 +320,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
-}
+}

apps/client/src/stylesheets/theme-next-light.css

@@ -6,7 +6,7 @@
  */
 :root {
 
-    /* 
+    /*
      * ⚠️ NOTICE: This theme is currently in the beta stage of development.
      * The names and purposes of these CSS variables are subject to frequent changes.
      */
@@ -22,7 +22,7 @@
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: 0.2;
     --dropdown-item-icon-destructive-color: #ec5138;
-    --disabled-tooltip-icon-color: #004382;
+    --contextual-help-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
 
@@ -138,7 +138,7 @@
     /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
     --launcher-pane-background-color: unset;
     --launcher-pane-text-color: unset;
-    
+
     --launcher-pane-vert-background-color: #e8e8e8;
     --launcher-pane-vert-text-color: #000000bd;
     --launcher-pane-vert-button-hover-color: black;
@@ -174,7 +174,7 @@
 
     --tab-close-button-hover-background: #c95a5a;
     --tab-close-button-hover-color: white;
-    
+
     --active-tab-background-color: white;
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --active-tab-icon-color: gray;
@@ -291,4 +291,4 @@
     --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
     --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
-}
+}

apps/client/src/widgets/react/FormList.css

@@ -17,7 +17,12 @@
         --switch-thumb-width: 12px;
         --switch-thumb-height: var(--switch-thumb-width);
 
-        .switch-name {
+        .contextual-help {
+            margin-inline-start: 0.25em;
+            cursor: pointer;
+        }
+
+        .switch-spacer {
             flex-grow: 1;
         }
     }

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

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact
 import "./FormList.css";
 import { CommandNames } from "../../components/app_context";
 import { useStaticTooltip } from "./hooks";
-import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
+import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
 import clsx from "clsx";
 import FormToggle from "./FormToggle";
 
@@ -95,12 +95,13 @@ interface FormListItemOpts {
     description?: string;
     className?: string;
     rtl?: boolean;
+    postContent?: ComponentChildren;
 }
 
 const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
     placement: handleRightToLeftPlacement("right"),
     fallbackPlacements: [ handleRightToLeftPlacement("right") ]
-}
+};
 
 export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
     const itemRef = useRef<HTMLLIElement>(null);
@@ -133,9 +134,10 @@ export function FormListItem({ className, icon, value, title, active, disabled,
     );
 }
 
-export function FormListToggleableItem({ title, currentValue, onChange, disabled, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
+export function FormListToggleableItem({ title, currentValue, onChange, disabled, helpPage, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
     title: string;
     currentValue: boolean;
+    helpPage?: string;
     onChange(newValue: boolean): void | Promise<void>;
 }) {
     const isWaiting = useRef(false);
@@ -145,6 +147,10 @@ export function FormListToggleableItem({ title, currentValue, onChange, disabled
             {...props}
             disabled={disabled}
             onClick={async (e) => {
+                if ((e.target as HTMLElement | null)?.classList.contains("contextual-help")) {
+                    return;
+                }
+
                 e.stopPropagation();
                 if (!disabled && !isWaiting.current) {
                     isWaiting.current = true;
@@ -157,6 +163,15 @@ export function FormListToggleableItem({ title, currentValue, onChange, disabled
                 switchOffName={title}
                 currentValue={currentValue}
                 onChange={() => {}}
+                afterName={<>
+                    {helpPage && (
+                        <span
+                            class="bx bx-help-circle contextual-help"
+                            onClick={() => openInAppHelpFromUrl(helpPage)}
+                        />
+                    )}
+                    <span class="switch-spacer" />
+                </>}
             />
         </FormListItem>
     );
@@ -169,7 +184,7 @@ function FormListContent({ children, badges, description, disabled, disabledTool
             <span className={`badge ${className ?? ""}`}>{text}</span>
         ))}
         {disabled && disabledTooltip && (
-            <span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
+            <span class="bx bx-info-circle contextual-help" title={disabledTooltip} />
         )}
         {description && <div className="description">{description}</div>}
     </>;

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

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import "./FormToggle.css";
 import HelpButton from "./HelpButton";
 import { useEffect, useState } from "preact/hooks";
+import { ComponentChildren } from "preact";
 
 interface FormToggleProps {
     currentValue: boolean | null;
@@ -12,9 +13,10 @@ interface FormToggleProps {
     switchOffTooltip?: string;
     helpPage?: string;
     disabled?: boolean;
+    afterName?: ComponentChildren;
 }
 
-export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) {
+export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled, afterName }: FormToggleProps) {
     const [ disableTransition, setDisableTransition ] = useState(true);
 
     useEffect(() => {
@@ -27,6 +29,7 @@ export default function FormToggle({ currentValue, helpPage, switchOnName, switc
     return (
         <div className="switch-widget">
             <span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
+            { afterName }
 
             <label>
                 <div

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

@@ -134,12 +134,14 @@ function NoteBasicProperties({ note }: { note: FNote }) {
             icon="bx bx-copy-alt"
             title={t("template_switch.template")}
             currentValue={isTemplate} onChange={setIsTemplate}
+            helpPage="KC1HB96bqqHX"
             disabled={note?.noteId.startsWith("_options")}
         />
         <FormListToggleableItem
             icon="bx bx-share-alt"
             title={t("shared_switch.shared")}
             currentValue={isShared} onChange={switchShareState}
+            helpPage="R9pX4DGra2Vt"
             disabled={["root", "_share", "_hidden"].includes(note?.noteId ?? "") || note?.noteId.startsWith("_options")}
         />
         <EditabilityDropdown note={note} />