refactor(react/ribbon): solve type errors

apps/client/src/layouts/mobile_layout.ts

@@ -143,7 +143,7 @@ export default class MobileLayout {
                                     .css("font-size", "larger")
                                     .css("align-items", "center")
                                     .child(new ToggleSidebarButtonWidget().contentSized())
-                                    .child(new NoteTitleWidget().contentSized().css("position", "relative").css("padding-left", "0.5em"))
+                                    .child(NoteTitleWidget().contentSized().css("position", "relative").css("padding-left", "0.5em"))
                                     .child(new MobileDetailMenuWidget(true).contentSized())
                             )
                             .child(new SharedInfoWidget())

apps/client/src/widgets/react/FormTextArea.tsx

@@ -5,15 +5,13 @@ interface FormTextAreaProps extends Omit<TextareaHTMLAttributes, "onBlur" | "onC
     currentValue: string;
     onChange?(newValue: string): void;
     onBlur?(newValue: string): void;
-    rows: number;
     inputRef?: RefObject<HTMLTextAreaElement>
 }
-export default function FormTextArea({ inputRef, id, onBlur, onChange, rows, currentValue, className, ...restProps }: FormTextAreaProps) {
+export default function FormTextArea({ inputRef, id, onBlur, onChange, currentValue, className, ...restProps }: FormTextAreaProps) {
     return (
         <textarea
             ref={inputRef}
             id={id}
-            rows={rows}
             className={`form-control ${className ?? ""}`}
             onChange={(e) => {
                 onChange?.(e.currentTarget.value);

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

@@ -27,10 +27,14 @@ export default function CollectionPropertiesTab({ note }: TabContext) {
   const viewTypeWithDefault = viewType ?? "grid";
   const properties = bookPropertiesConfig[viewTypeWithDefault].properties;
 
-  return (note &&
+  return (
     <div className="book-properties-widget">
-      <CollectionTypeSwitcher viewType={viewTypeWithDefault} setViewType={setViewType} />
-      <BookProperties note={note} properties={properties} />
+      {note && (
+        <>
+          <CollectionTypeSwitcher viewType={viewTypeWithDefault} setViewType={setViewType} />
+          <BookProperties note={note} properties={properties} />
+        </>
+      )}
     </div>
   );
 }

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

@@ -14,7 +14,8 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
     const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
 
     function refresh() {
-        const attrs = note.getAttributes().filter((attr) => attr.noteId !== this.noteId);
+        if (!note) return;
+        const attrs = note.getAttributes().filter((attr) => attr.noteId !== note.noteId);
         attrs.sort((a, b) => {
             if (a.noteId === b.noteId) {
                 return a.position - b.position;
@@ -29,15 +30,15 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
 
     useEffect(refresh, [ note ]);
     useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
-        if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, this.note))) {
-            this.refresh();
+        if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, note))) {
+            refresh();
         }
     });
     
     return (
         <div className="inherited-attributes-widget">
             <div className="inherited-attributes-container">
-                {inheritedAttributes?.length > 0 ? (
+                {inheritedAttributes?.length ? (
                     joinElements(inheritedAttributes.map(attribute => (
                         <InheritedAttribute
                             attribute={attribute}

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

@@ -108,12 +108,12 @@ export const SEARCH_OPTIONS: SearchOption[] = [
 function SearchOption({ note, title, titleIcon, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
   note: FNote;
   title: string,
-  titleIcon: string,
+  titleIcon?: string,
   children?: ComponentChildren,
-  help: ComponentChildren,
+  help?: ComponentChildren,
   attributeName: string,
   attributeType: AttributeType,
-  additionalAttributesToDelete: { type: "label" | "relation", name: string }[]
+  additionalAttributesToDelete?: { type: "label" | "relation", name: string }[]
 }) {
   return (
     <tr>