From 927ebcbec918b170a2a2090d0681a0316900136b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 23 Aug 2025 23:32:12 +0300
Subject: [PATCH] feat(react/ribbon): reintroduce checkbox collection
 properties

---
 .../widgets/ribbon/CollectionPropertiesTab.tsx | 18 ++++++++++++++++--
 .../widgets/ribbon_widgets/book_properties.ts  | 17 -----------------
 .../ribbon_widgets/book_properties_config.ts   |  2 +-
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
index d1066f6a9..80726638a 100644
--- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -4,11 +4,12 @@ import { ViewTypeOptions } from "../../services/note_list_renderer";
 import FormSelect from "../react/FormSelect";
 import { TabContext } from "./ribbon-interface";
 import { mapToKeyValueArray } from "../../services/utils";
-import { useNoteLabel } from "../react/hooks";
-import { bookPropertiesConfig, BookProperty, ButtonProperty } from "../ribbon_widgets/book_properties_config";
+import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } from "../ribbon_widgets/book_properties_config";
 import Button from "../react/Button";
 import { ParentComponent } from "../react/react_utils";
 import FNote from "../../entities/fnote";
+import FormCheckbox from "../react/FormCheckbox";
 
 const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
   grid: t("book_properties.grid"),
@@ -63,6 +64,8 @@ function mapPropertyView({ note, property }: { note: FNote, property: BookProper
   switch (property.type) {
     case "button":
       return <ButtonPropertyView note={note} property={property} />
+    case "checkbox":
+      return <CheckboxPropertyView note={note} property={property} />
   }
 }
 
@@ -81,4 +84,15 @@ function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonP
     });
     }}
   />
+}
+
+function CheckboxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
+  const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
+
+  return (
+    <FormCheckbox
+      label={property.label}
+      currentValue={value} onChange={setValue}
+    />
+  )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
index a717cfe38..a6cf19f29 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
@@ -56,23 +56,6 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
             return $container;
         }
         switch (property.type) {
-            case "checkbox":
-                const $label = $("<label>").text(property.label);
-                const $checkbox = $("<input>", {
-                    type: "checkbox",
-                    class: "form-check-input",
-                });
-                $checkbox.on("change", () => {
-                    if ($checkbox.prop("checked")) {
-                        attributes.setLabel(note.noteId, property.bindToLabel);
-                    } else {
-                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
-                    }
-                });
-                $checkbox.prop("checked", note.hasOwnedLabel(property.bindToLabel));
-                $label.prepend($checkbox);
-                $container.append($label);
-                break;
             case "number":
                 const $numberInput = $("<input>", {
                     type: "number",
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
index ea178d47c..1a4ce291b 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
@@ -9,7 +9,7 @@ interface BookConfig {
     properties: BookProperty[];
 }
 
-interface CheckBoxProperty {
+export interface CheckBoxProperty {
     type: "checkbox",
     label: string;
     bindToLabel: string