chore(launch_bar): address requested changes

apps/client/src/widgets/launch_bar/BookmarkButtons.tsx

@@ -49,7 +49,7 @@ function BookmarkFolder({ note }: { note: FNote }) {
                 <ul className="children-notes">
                     {childNotes.map(childNote => (
                         <li>
-                            <NoteLink notePath={childNote.noteId} noPreview showNoteIcon containerClassName="note-link" noTnLink />
+                            <NoteLink key={childNote.noteId} notePath={childNote.noteId} noPreview showNoteIcon containerClassName="note-link" noTnLink />
                         </li>
                     ))}
                 </ul>

apps/client/src/widgets/launch_bar/Calendar.tsx

@@ -63,7 +63,7 @@ function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }
 
     return (
         <div className="calendar-week">
-            {localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
+            {localeDaysOfWeek.map(dayOfWeek => <span key={dayOfWeek}>{dayOfWeek}</span>)}
         </div>
     )
 }
@@ -79,7 +79,7 @@ function PreviousMonthDays({ date, info: { dates, weekNumbers }, ...args }: { da
     return (
         <>
             <CalendarWeek date={date} weekNumber={weekNumbers[0]} {...args} />
-            {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" {...args} />)}
+            {dates.map(date => <CalendarDay key={date.toISOString()} date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" {...args} />)}
         </>
     )
 }
@@ -98,10 +98,10 @@ function CurrentMonthDays({ date, firstDayOfWeekISO, ...args }: { date: Dayjs, f
     while (dateCursor.month() === currentMonth) {
         const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
         if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
-            items.push(<CalendarWeek date={dateCursor} weekNumber={weekNumber} {...args}/>)
+            items.push(<CalendarWeek key={`${dateCursor.year()}-W${weekNumber}`} date={dateCursor} weekNumber={weekNumber} {...args}/>)
         }
 
-        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={dateNotesForCurMonth} {...args} />)
+        items.push(<CalendarDay key={dateCursor.toISOString()} date={dateCursor} dateNotesForMonth={dateNotesForCurMonth} {...args} />)
         dateCursor = dateCursor.add(1, "day");
     }
 
@@ -117,7 +117,7 @@ function NextMonthDays({ date, dates, ...args }: { date: Dayjs, dates: Dayjs[] }
     }, [ date ]);
 
     return dates.map(date => (
-        <CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" {...args} />
+        <CalendarDay key={date.toISOString()} date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" {...args} />
     ));
 }
 

apps/client/src/widgets/launch_bar/GenericButtons.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "preact/hooks";
 import appContext from "../../components/app_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
@@ -13,11 +14,7 @@ export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNo
 }) {
     const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
-    // Keyboard shortcut.
+    const launch = useCallback(async (evt: MouseEvent | KeyboardEvent) => {
-    const [ shortcut ] = useNoteLabel(launcherNote, "keyboardShortcut");
-    useGlobalShortcut(shortcut, launch);
-
-    async function launch(evt: MouseEvent | KeyboardEvent) {
         if (evt.which === 3) {
             return;
         }
@@ -34,7 +31,11 @@ export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNo
         } else {
             await appContext.tabManager.openInSameTab(targetNoteId);
         }
-    }
+    }, [ launcherNote, getTargetNoteId, getHoistedNoteId ]);
+
+    // Keyboard shortcut.
+    const [ shortcut ] = useNoteLabel(launcherNote, "keyboardShortcut");
+    useGlobalShortcut(shortcut, launch);
 
     return (
         <LaunchBarActionButton

apps/client/src/widgets/launch_bar/LauncherDefinitions.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { useGlobalShortcut, useLegacyWidget, useNoteContext, useNoteLabel, useNoteRelationTarget, useTriliumOptionBool } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import BasicWidget from "../basic_widget";
@@ -53,7 +53,7 @@ export function NoteLauncher({ launcherNote, ...restProps }: { launcherNote: FNo
 export function ScriptLauncher({ launcherNote }: LauncherNoteProps) {
     const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
-    async function launch() {
+    const launch = useCallback(async () => {
         if (launcherNote.isLabelTruthy("scriptInLauncherContent")) {
             await launcherNote.executeScript();
         } else {
@@ -62,7 +62,7 @@ export function ScriptLauncher({ launcherNote }: LauncherNoteProps) {
                 await script.executeScript();
             }
         }
-    }
+    }, [ launcherNote ]);
 
     // Keyboard shortcut.
     const [ shortcut ] = useNoteLabel(launcherNote, "keyboardShortcut");

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

@@ -48,7 +48,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
     const [ shown, setShown ] = useState(false);
 
     useEffect(() => {
-        if (!triggerRef.current || !dropdownContainerRef) return;
+        if (!triggerRef.current || !dropdownContainerRef.current) return;
 
         const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current, dropdownOptions);
         if (dropdownRef) {
@@ -59,12 +59,9 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
             setShown(true);
         }
 
-        const dropdownContainer = dropdownContainerRef.current;
-        if (!dropdownContainer) return;
-
         // React to popup container size changes, which can affect the positioning.
         const resizeObserver = new ResizeObserver(() => dropdown.update());
-        resizeObserver.observe(dropdownContainer);
+        resizeObserver.observe(dropdownContainerRef.current);
 
         return () => {
             resizeObserver.disconnect();