From 0de67b6a69a00607ec461fb0510de0fc5593df74 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Dec 2025 19:29:27 +0200
Subject: [PATCH] feat(note_bars/collection): support button properties

---
 .../note_bars/CollectionProperties.tsx        | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.tsx b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
index 8cbbc540b..0de1e363a 100644
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -2,11 +2,13 @@ import { t } from "i18next";
 import FNote from "../../entities/fnote";
 import { ViewTypeOptions } from "../collections/interface";
 import Dropdown from "../react/Dropdown";
-import { FormListItem, FormListToggleableItem } from "../react/FormList";
+import { FormDropdownDivider, FormListItem, FormListToggleableItem } from "../react/FormList";
 import Icon from "../react/Icon";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
-import { BookProperty, CheckBoxProperty } from "../ribbon/collection-properties-config";
+import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } from "../ribbon/collection-properties-config";
 import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { useContext } from "preact/hooks";
+import { ParentComponent } from "../react/react_utils";
 
 const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
     grid: "bx bxs-grid",
@@ -19,17 +21,17 @@ const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
 };
 
 export default function CollectionProperties({ note }: { note: FNote }) {
+    const [ viewType, setViewType ] = useViewType(note);
+
     return (
         <>
-            <ViewTypeSwitcher note={note} />
-            <ViewOptions note={note} />
+            <ViewTypeSwitcher note={note} viewType={viewType} setViewType={setViewType} />
+            <ViewOptions note={note} viewType={viewType} />
         </>
     );
 }
 
-function ViewTypeSwitcher({ note }: { note: FNote }) {
-    const [ viewType, setViewType ] = useViewType(note);
-
+function ViewTypeSwitcher({ note, viewType, setViewType }: { note: FNote, viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) {
     return (
         <Dropdown
             text={<>
@@ -40,7 +42,7 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
             {Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
                 <FormListItem
                     key={key}
-                    onClick={() => setViewType(key)}
+                    onClick={() => setViewType(key as ViewTypeOptions)}
                     selected={viewType === key}
                     disabled={viewType === key}
                     icon={ICON_MAPPINGS[key as ViewTypeOptions]}
@@ -50,7 +52,9 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
     );
 }
 
-function ViewOptions({ note }: { note: FNote }) {
+function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOptions }) {
+    const properties = bookPropertiesConfig[viewType].properties;
+
     return (
         <Dropdown
             buttonClassName="bx bx-cog icon-action"
@@ -61,17 +65,42 @@ function ViewOptions({ note }: { note: FNote }) {
                 label: t("book_properties.include_archived_notes"),
                 bindToLabel: "includeArchived"
             } as CheckBoxProperty} />
+
+            {properties.length > 0 && <FormDropdownDivider />}
+            {properties.map(property => (
+                <ViewProperty key={property} note={note} property={property} />
+            ))}
         </Dropdown>
     );
 }
 
 function ViewProperty({ note, property }: { note: FNote, property: BookProperty }) {
     switch (property.type) {
+        case "button":
+            return <ButtonPropertyView note={note} property={property} />;
         case "checkbox":
             return <CheckBoxPropertyView note={note} property={property} />;
     }
 }
 
+function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <FormListItem
+            icon={property.icon}
+            title={property.title}
+            onClick={() => {
+                if (!parentComponent) return;
+                property.onClick({
+                    note,
+                    triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+                });
+            }}
+        >{property.label}</FormListItem>
+    );
+}
+
 function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
     const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
     return (
@@ -82,3 +111,4 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
         />
     );
 }
+