chore(client): fix typecheck

2026-02-17 11:56:57 +01:00 · 2026-02-15 14:20:09 +02:00
parent 48773636ca
commit e411e5f2cf
3 changed files with 83 additions and 81 deletions
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -86,8 +86,8 @@ function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOption
            dropdownContainerClassName="mobile-bottom-menu"
            mobileBackdrop
        >
-            {properties.map(property => (
-                <ViewProperty key={property.label} note={note} property={property} />
+            {properties.map((property, index) => (
+                <ViewProperty key={index} note={note} property={property} />
            ))}
            {properties.length > 0 && <FormDropdownDivider />}

--- a/apps/client/src/widgets/react/NotePropertyMenu.tsx
+++ b/apps/client/src/widgets/react/NotePropertyMenu.tsx
@@ -53,7 +53,7 @@ export interface ComboBoxItem {
    label: string;
 }

-interface ComboBoxGroup {
+export interface ComboBoxGroup {
    title: string;
    items: ComboBoxItem[];
 }
--- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -1,18 +1,20 @@
-import { useContext, useMemo } from "preact/hooks";
-import { t } from "../../services/i18n";
-import FormSelect, { FormSelectWithGroups } from "../react/FormSelect";
-import { TabContext } from "./ribbon-interface";
-import { mapToKeyValueArray } from "../../services/utils";
-import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
-import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "./collection-properties-config";
-import Button, { SplitButton } from "../react/Button";
-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";
-import { ViewTypeOptions } from "../collections/interface";
+import { useContext, useMemo } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
+import { t } from "../../services/i18n";
+import { mapToKeyValueArray } from "../../services/utils";
+import { ViewTypeOptions } from "../collections/interface";
+import Button, { SplitButton } from "../react/Button";
+import FormCheckbox from "../react/FormCheckbox";
+import FormSelect, { FormSelectWithGroups } from "../react/FormSelect";
+import FormTextBox from "../react/FormTextBox";
+import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxGroup, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../react/NotePropertyMenu";
+import { ParentComponent } from "../react/react_utils";
+import { bookPropertiesConfig } from "./collection-properties-config";
+import { TabContext } from "./ribbon-interface";

 export const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
    grid: t("book_properties.grid"),
@@ -50,70 +52,70 @@ export function useViewType(note: FNote | null | undefined) {
 }

 function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, setViewType: (newValue: string) => void }) {
-  const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);
+    const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);

-  return (
-    <div style={{ display: "flex", alignItems: "baseline" }}>
-        <span style={{ whiteSpace: "nowrap" }}>{t("book_properties.view_type")}:&nbsp; &nbsp;</span>
-        <FormSelect
-          currentValue={viewType ?? "grid"} onChange={setViewType}
-          values={collectionTypes}
-          keyProperty="key" titleProperty="value"
-        />
-    </div>
-  )
+    return (
+        <div style={{ display: "flex", alignItems: "baseline" }}>
+            <span style={{ whiteSpace: "nowrap" }}>{t("book_properties.view_type")}:&nbsp; &nbsp;</span>
+            <FormSelect
+                currentValue={viewType ?? "grid"} onChange={setViewType}
+                values={collectionTypes}
+                keyProperty="key" titleProperty="value"
+            />
+        </div>
+    );
 }

-function BookProperties({ viewType, note, properties }: { viewType: ViewTypeOptions, note: FNote, properties: BookProperty[] }) {
-  return (
-    <>
-        {properties.map(property => (
-        <div className={`type-${property}`}>
-            {mapPropertyView({ note, property })}
-        </div>
-        ))}
+function BookProperties({ note, properties }: { viewType: ViewTypeOptions, note: FNote, properties: BookProperty[] }) {
+    return (
+        <>
+            {properties.map((property, index) => (
+                <div key={index} className={`type-${property}`}>
+                    {mapPropertyView({ note, property })}
+                </div>
+            ))}

-        <CheckboxPropertyView
-            note={note} property={{
-                bindToLabel: "includeArchived",
-                label: t("book_properties.include_archived_notes"),
-                type: "checkbox"
-            }}
-        />
-    </>
-  )
+            <CheckboxPropertyView
+                note={note} property={{
+                    bindToLabel: "includeArchived",
+                    label: t("book_properties.include_archived_notes"),
+                    type: "checkbox"
+                }}
+            />
+        </>
+    );
 }

 function mapPropertyView({ note, property }: { note: FNote, property: BookProperty }) {
-  switch (property.type) {
-    case "button":
-      return <ButtonPropertyView note={note} property={property} />
-    case "split-button":
-      return <SplitButtonPropertyView note={note} property={property} />
-    case "checkbox":
-      return <CheckboxPropertyView note={note} property={property} />
-    case "number":
-      return <NumberPropertyView note={note} property={property} />
-    case "combobox":
-      return <ComboBoxPropertyView note={note} property={property} />
-  }
+    switch (property.type) {
+        case "button":
+            return <ButtonPropertyView note={note} property={property} />;
+        case "split-button":
+            return <SplitButtonPropertyView note={note} property={property} />;
+        case "checkbox":
+            return <CheckboxPropertyView note={note} property={property} />;
+        case "number":
+            return <NumberPropertyView note={note} property={property} />;
+        case "combobox":
+            return <ComboBoxPropertyView note={note} property={property} />;
+    }
 }

 function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
-  const parentComponent = useContext(ParentComponent);
+    const parentComponent = useContext(ParentComponent);

-  return <Button
-    text={property.label}
-    title={property.title}
-    icon={property.icon}
-    onClick={() => {
-        if (!parentComponent) return;
-        property.onClick({
-            note,
-            triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
-        });
-    }}
-  />
+    return <Button
+        text={property.label}
+        title={property.title}
+        icon={property.icon}
+        onClick={() => {
+            if (!parentComponent) return;
+            property.onClick({
+                note,
+                triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+            });
+        }}
+    />;
 }

 function SplitButtonPropertyView({ note, property }: { note: FNote, property: SplitButtonProperty }) {
@@ -131,18 +133,18 @@ function SplitButtonPropertyView({ note, property }: { note: FNote, property: Sp
        onClick={() => clickContext && property.onClick(clickContext)}
    >
        {parentComponent && <ItemsComponent note={note} parentComponent={parentComponent} />}
-    </SplitButton>
+    </SplitButton>;
 }

 function CheckboxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
-  const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
+    const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);

-  return (
-    <FormCheckbox
-      label={property.label}
-      currentValue={value} onChange={setValue}
-    />
-  )
+    return (
+        <FormCheckbox
+            label={property.label}
+            currentValue={value} onChange={setValue}
+        />
+    );
 }

 function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
@@ -160,7 +162,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
                disabled={disabled}
            />
        </LabelledEntry>
-    )
+    );
 }

 function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
@@ -169,12 +171,12 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
    return (
        <LabelledEntry label={property.label}>
            <FormSelectWithGroups
-                values={property.options}
+                values={property.options.filter(i => !("type" in i)) as (ComboBoxItem | ComboBoxGroup)[]}
                keyProperty="value" titleProperty="label"
                currentValue={value ?? property.defaultValue} onChange={setValue}
            />
        </LabelledEntry>
-    )
+    );
 }

 function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
@@ -186,5 +188,5 @@ function LabelledEntry({ label, children }: { label: string, children: Component
                {children}
            </label>
        </>
-    )
+    );
 }