From b607d1e6283020e1076a487ce4c27477924fab63 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 23 Aug 2025 23:59:41 +0300
Subject: [PATCH] refactor(react/ribbon): shared component for labelled entry

---
 .../ribbon/CollectionPropertiesTab.tsx        | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
index 77853e617..28f778348 100644
--- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -11,6 +11,7 @@ import { ParentComponent } from "../react/react_utils";
 import FNote from "../../entities/fnote";
 import FormCheckbox from "../react/FormCheckbox";
 import FormTextBox from "../react/FormTextBox";
+import { ComponentChildren } from "preact";
 
 const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
   grid: t("book_properties.grid"),
@@ -106,34 +107,38 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
     const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
 
     return (
-        <>
-            <label>
-                {property.label}
-                &nbsp;&nbsp;
-                <FormTextBox
-                    type="number"
-                    currentValue={value ?? ""} onChange={setValue}
-                    style={{ width: (property.width ?? 100) + "px" }}
-                    min={property.min ?? 0}
-                />
-            </label>
-        </>
+        <LabelledEntry label={property.label}>
+            <FormTextBox
+                type="number"
+                currentValue={value ?? ""} onChange={setValue}
+                style={{ width: (property.width ?? 100) + "px" }}
+                min={property.min ?? 0}
+            />
+        </LabelledEntry>
     )
 }
 
 function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
     const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
 
+    return (
+        <LabelledEntry label={property.label}>
+            <FormSelectWithGroups
+                values={property.options}
+                keyProperty="value" titleProperty="label"
+                currentValue={value ?? ""} onChange={setValue}
+            />
+        </LabelledEntry>
+    )
+}
+
+function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
     return (
         <>
             <label>
-                {property.label}
+                {label}
                 &nbsp;&nbsp;
-                <FormSelectWithGroups
-                    values={property.options}
-                    keyProperty="value" titleProperty="label"
-                    currentValue={value ?? ""} onChange={setValue}
-                />
+                {children}
             </label>
         </>
     )