From 4040f8ba89df888ee64f24bd24505c52c0a37f84 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Sep 2025 10:38:05 +0300
Subject: [PATCH] chore(react): solve most type errors

---
 apps/client/src/widgets/collections/NoteList.tsx    |  2 +-
 apps/client/src/widgets/collections/board/card.tsx  |  4 ++--
 .../client/src/widgets/collections/board/column.tsx | 13 ++++++-------
 apps/client/src/widgets/collections/geomap/api.ts   |  2 +-
 .../client/src/widgets/collections/geomap/index.tsx |  2 +-
 apps/client/src/widgets/collections/geomap/map.tsx  |  2 +-
 .../widgets/collections/legacy/ListOrGridView.tsx   |  4 ++--
 .../src/widgets/collections/table/columns.tsx       |  2 +-
 .../src/widgets/collections/table/tabulator.tsx     |  6 ++++--
 9 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/collections/NoteList.tsx b/apps/client/src/widgets/collections/NoteList.tsx
index 3f0231b0d..f16db0b72 100644
--- a/apps/client/src/widgets/collections/NoteList.tsx
+++ b/apps/client/src/widgets/collections/NoteList.tsx
@@ -18,7 +18,7 @@ interface NoteListProps<T extends object> {
     /** if set to `true` then only collection-type views are displayed such as geo-map and the calendar. The original book types grid and list will be ignored. */
     displayOnlyCollections?: boolean;
     highlightedTokens?: string[] | null;
-    viewStorage: ViewModeStorage<T>;
+    viewStorage?: ViewModeStorage<T>;
 }
 
 export default function NoteList<T extends object>({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps<T>) {
diff --git a/apps/client/src/widgets/collections/board/card.tsx b/apps/client/src/widgets/collections/board/card.tsx
index 917fecefd..5b663e141 100644
--- a/apps/client/src/widgets/collections/board/card.tsx
+++ b/apps/client/src/widgets/collections/board/card.tsx
@@ -31,7 +31,7 @@ export default function Card({
     index: number,
     isDragging: boolean
 }) {
-    const { branchIdToEdit, setBranchIdToEdit, setDraggedCard } = useContext(BoardViewContext);
+    const { branchIdToEdit, setBranchIdToEdit, setDraggedCard } = useContext(BoardViewContext)!;
     const isEditing = branch.branchId === branchIdToEdit;
     const colorClass = note.getColorClass() || '';
     const editorRef = useRef<HTMLInputElement>(null);
@@ -78,7 +78,7 @@ export default function Card({
     return (
         <div
             className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${isEditing ? "editing" : ""} ${isArchived ? "archived" : ""}`}
-            draggable="true"
+            draggable
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
             onContextMenu={handleContextMenu}
diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx
index 584537387..01e71c8ff 100644
--- a/apps/client/src/widgets/collections/board/column.tsx
+++ b/apps/client/src/widgets/collections/board/column.tsx
@@ -17,7 +17,6 @@ interface DragContext {
     column: string;
     columnIndex: number,
     columnItems?: { note: FNote, branch: FBranch }[];
-    isEditing: boolean;
 }
 
 export default function Column({
@@ -36,7 +35,7 @@ export default function Column({
     isAnyColumnDragging?: boolean
 } & DragContext) {
     const [ isVisible, setVisible ] = useState(true);
-    const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext);
+    const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext)!;
     const isEditing = (columnNameToEdit === column);
     const editorRef = useRef<HTMLInputElement>(null);
     const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
@@ -90,7 +89,7 @@ export default function Column({
         >
             <h3
                 className={`${isEditing ? "editing" : ""}`}
-                draggable="true"
+                draggable
                 onDragStart={handleColumnDragStart}
                 onDragEnd={handleColumnDragEnd}
                 onContextMenu={handleContextMenu}
@@ -170,8 +169,8 @@ function AddNewItem({ column, api }: { column: string, api: BoardApi }) {
     );
 }
 
-function useDragging({ column, columnIndex, columnItems, isEditing }: DragContext) {
-    const { api, parentNote, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, dropPosition } = useContext(BoardViewContext);
+function useDragging({ column, columnIndex, columnItems, isEditing }: DragContext & { isEditing: boolean }) {
+    const { api, parentNote, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, dropPosition } = useContext(BoardViewContext)!;
     /** Needed to track if current column is dragged in real-time, since {@link draggedColumn} is populated one render cycle later.  */
     const isDraggingRef = useRef(false);
 
@@ -192,13 +191,13 @@ function useDragging({ column, columnIndex, columnItems, isEditing }: DragContex
 
     const handleDragOver = useCallback((e: DragEvent) => {
         if (isEditing || draggedColumn || isDraggingRef.current) return; // Don't handle card drops when dragging columns
-        if (!e.dataTransfer?.types.includes(CARD_CLIPBOARD_TYPE) && !e.dataTransfer.types.includes(TREE_CLIPBOARD_TYPE)) return;
+        if (!e.dataTransfer?.types.includes(CARD_CLIPBOARD_TYPE) && !e.dataTransfer?.types.includes(TREE_CLIPBOARD_TYPE)) return;
 
         e.preventDefault();
         setDropTarget(column);
 
         // Calculate drop position based on mouse position
-        const cards = Array.from(e.currentTarget.querySelectorAll('.board-note'));
+        const cards = Array.from((e.currentTarget as HTMLElement)?.querySelectorAll('.board-note'));
         const mouseY = e.clientY;
 
         let newIndex = cards.length;
diff --git a/apps/client/src/widgets/collections/geomap/api.ts b/apps/client/src/widgets/collections/geomap/api.ts
index d86ec50b7..5f7341560 100644
--- a/apps/client/src/widgets/collections/geomap/api.ts
+++ b/apps/client/src/widgets/collections/geomap/api.ts
@@ -1,4 +1,4 @@
-import { LatLng } from "leaflet";
+import type { LatLng, LeafletMouseEvent } from "leaflet";
 import { LOCATION_ATTRIBUTE } from ".";
 import attributes from "../../../services/attributes";
 import { prompt } from "../../../services/dialog";
diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index 416aadbe3..ccc1330d1 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -1,4 +1,4 @@
-import Map, { MapApi } from "./map";
+import Map from "./map";
 import "./index.css";
 import { ViewModeProps } from "../interface";
 import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTouchBar, useTriliumEvent } from "../../react/hooks";
diff --git a/apps/client/src/widgets/collections/geomap/map.tsx b/apps/client/src/widgets/collections/geomap/map.tsx
index 06ce63dc2..faf2ec654 100644
--- a/apps/client/src/widgets/collections/geomap/map.tsx
+++ b/apps/client/src/widgets/collections/geomap/map.tsx
@@ -8,7 +8,7 @@ import { useElementSize, useSyncedRef } from "../../react/hooks";
 export const ParentMap = createContext<L.Map | null>(null);
 
 interface MapProps {
-    apiRef?: RefObject<MapApi | null>;
+    apiRef?: RefObject<L.Map | null>;
     containerRef?: RefObject<HTMLDivElement>;
     coordinates: LatLng | [number, number];
     zoom: number;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 4d3f0f795..b88812d72 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -12,7 +12,7 @@ import link from "../../../services/link";
 import { t } from "../../../services/i18n";
 import attribute_renderer from "../../../services/attribute_renderer";
 
-export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps) {
+export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
     const { pageNotes, ...pagination } = usePagination(note, noteIds);
@@ -34,7 +34,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
     );
 }
 
-export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps) {
+export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
     const { pageNotes, ...pagination } = usePagination(note, noteIds);
 
diff --git a/apps/client/src/widgets/collections/table/columns.tsx b/apps/client/src/widgets/collections/table/columns.tsx
index 43390f04b..6351ba598 100644
--- a/apps/client/src/widgets/collections/table/columns.tsx
+++ b/apps/client/src/widgets/collections/table/columns.tsx
@@ -179,7 +179,6 @@ interface FormatterOpts {
 
 interface EditorOpts {
     cell: CellComponent,
-    onRendered: EmptyCallback,
     success: ValueBooleanCallback,
     cancel: ValueVoidCallback,
     editorParams: {}
@@ -194,6 +193,7 @@ function wrapFormatter(Component: (opts: FormatterOpts) => JSX.Element): ((cell:
 
 function wrapEditor(Component: (opts: EditorOpts) => JSX.Element): ((
     cell: CellComponent,
+    onRendered: EmptyCallback,
     success: ValueBooleanCallback,
     cancel: ValueVoidCallback,
     editorParams: {},
diff --git a/apps/client/src/widgets/collections/table/tabulator.tsx b/apps/client/src/widgets/collections/table/tabulator.tsx
index fdcbeb532..6b8bc0a42 100644
--- a/apps/client/src/widgets/collections/table/tabulator.tsx
+++ b/apps/client/src/widgets/collections/table/tabulator.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
 import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
-import { RefObject } from "preact";
+import { JSX, RefObject, VNode } from "preact";
 import { ParentComponent, renderReactWidget } from "../../react/react_utils";
 
 interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"> {
@@ -12,9 +12,10 @@ interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"
     modules?: (new (table: VanillaTabulator) => Module)[];
     events?: Partial<EventCallBackMethods>;
     index: keyof T;
+    footerElement?: JSX.Element;
 }
 
-export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, events, ...restProps }: TableProps<T>) {
+export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, events, index, ...restProps }: TableProps<T>) {
     const parentComponent = useContext(ParentComponent);
     const containerRef = useRef<HTMLDivElement>(null);
     const tabulatorRef = useRef<VanillaTabulator>(null);
@@ -33,6 +34,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
             columns,
             data,
             footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined),
+            index: index as string | number | undefined,
             ...restProps
         });