From c76ff2d371dc0ca93ecb71eae153be94492ce19a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Dec 2025 20:19:06 +0200
Subject: [PATCH] feat(note_bars/collection): add a help button

---
 .../widgets/FloatingButtonsDefinitions.tsx    |  3 ++-
 .../note_bars/CollectionProperties.tsx        | 22 ++++++++++++++++---
 apps/client/src/widgets/note_title.css        |  6 +++++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 1c7a904a9..171ea2fa8 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -300,8 +300,9 @@ function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingB
 
 function InAppHelpButton({ note }: FloatingButtonContext) {
     const helpUrl = getHelpUrlForNote(note);
+    const isEnabled = !!helpUrl && (!isNewLayout || (note?.type !== "book"));
 
-    return !!helpUrl && (
+    return isEnabled && (
         <FloatingButton
             icon="bx bx-help-circle"
             text={t("help-button.title")}
diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.tsx b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
index ab74b4324..17e424224 100644
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -12,6 +12,9 @@ import Icon from "../react/Icon";
 import { ParentComponent } from "../react/react_utils";
 import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
+import ActionButton from "../react/ActionButton";
+import { getHelpUrlForNote } from "../../services/in_app_help";
+import { openInAppHelpFromUrl } from "../../services/utils";
 
 const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
     grid: "bx bxs-grid",
@@ -28,13 +31,15 @@ export default function CollectionProperties({ note }: { note: FNote }) {
 
     return (
         <>
-            <ViewTypeSwitcher note={note} viewType={viewType} setViewType={setViewType} />
+            <ViewTypeSwitcher viewType={viewType} setViewType={setViewType} />
             <ViewOptions note={note} viewType={viewType} />
+            <div className="spacer" />
+            <HelpButton note={note} />
         </>
     );
 }
 
-function ViewTypeSwitcher({ note, viewType, setViewType }: { note: FNote, viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) {
+function ViewTypeSwitcher({ viewType, setViewType }: { viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) {
     return (
         <Dropdown
             text={<>
@@ -187,7 +192,7 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
                 }
             })}
         </FormDropdownSubmenu>
-    )
+    );
 }
 
 function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
@@ -202,3 +207,14 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
     );
 }
 
+function HelpButton({ note }: { note: FNote }) {
+    const helpUrl = getHelpUrlForNote(note);
+
+    return (helpUrl && (
+        <ActionButton
+            icon="bx bx-help-circle"
+            onClick={(() => openInAppHelpFromUrl(helpUrl))}
+            text={t("help-button.title")}
+        />
+    ));
+}
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 0d9912b33..79734e928 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -38,12 +38,18 @@ body.experimental-feature-new-layout {
     }
 
     .title-details {
+        padding-inline-end: 16px;
+
         .dropdown-menu {
             input.form-control {
                 padding: 2px 8px;
                 margin-left: 1em;
             }
         }
+
+        .spacer {
+            flex-grow: 1;
+        }
     }
 
     .title-row {