feat(note_bars/collection): support number fields

apps/client/src/widgets/note_bars/CollectionProperties.tsx

@@ -5,10 +5,11 @@ import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
 import Icon from "../react/Icon";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
-import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
+import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
-import { useNoteLabelBoolean } from "../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
 import { useContext } from "preact/hooks";
 import { ParentComponent } from "../react/react_utils";
+import FormTextBox from "../react/FormTextBox";
 
 const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
     grid: "bx bxs-grid",
@@ -83,6 +84,8 @@ function ViewProperty({ note, property }: { note: FNote, property: BookProperty
             return <SplitButtonPropertyView note={note} property={property} />;
         case "checkbox":
             return <CheckBoxPropertyView note={note} property={property} />;
+        case "number":
+            return <NumberPropertyView note={note} property={property} />;
     }
 }
 
@@ -123,6 +126,29 @@ function SplitButtonPropertyView({ note, property }: { note: FNote, property: Sp
     );
 }
 
+function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
+    //@ts-expect-error Interop with text box which takes in string values even for numbers.
+    const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
+    const disabled = property.disabled?.(note);
+
+    return (
+        <FormListItem
+            icon={property.icon}
+            disabled={disabled}
+            onClick={(e) => e.stopPropagation()}
+        >
+            {property.label}
+            <FormTextBox
+                type="number"
+                currentValue={value ?? ""} onChange={setValue}
+                style={{ width: (property.width ?? 100) }}
+                min={property.min ?? 0}
+                disabled={disabled}
+            />
+        </FormListItem>
+    );
+}
+
 function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
     const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
     return (

apps/client/src/widgets/note_title.css

@@ -37,6 +37,15 @@ body.experimental-feature-new-layout {
         padding-inline-start: 24px;
     }
 
+    .title-details {
+        .dropdown-menu {
+            input.form-control {
+                padding: 2px 8px;
+                margin-left: 1em;
+            }
+        }
+    }
+
     .title-row {
         margin-left: 12px;
 

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

@@ -155,7 +155,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
             <FormTextBox
                 type="number"
                 currentValue={value ?? ""} onChange={setValue}
-                style={{ width: (property.width ?? 100) + "px" }}
+                style={{ width: (property.width ?? 100) }}
                 min={property.min ?? 0}
                 disabled={disabled}
             />

apps/client/src/widgets/ribbon/collection-properties-config.tsx

@@ -41,6 +41,7 @@ export interface NumberProperty {
     bindToLabel: FilterLabelsByType<number>;
     width?: number;
     min?: number;
+    icon?: string;
     disabled?: (note: FNote) => boolean;
 }
 
@@ -160,6 +161,7 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
         properties: [
             {
                 label: t("book_properties_config.max-nesting-depth"),
+                icon: "bx bx-subdirectory-right",
                 type: "number",
                 bindToLabel: "maxNestingDepth",
                 width: 65,