chore(react/launch_bar): reintroduce month dropdown

apps/client/src/stylesheets/theme-next/shell.css

@@ -212,7 +212,7 @@ body[dir=ltr] #launcher-container {
 }
 
 #launcher-pane .launcher-button,
-#launcher-pane .dropdown {
+#launcher-pane .right-dropdown-widget {
     width: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
     height: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
     margin: var(--launcher-pane-button-gap) var(--launcher-pane-button-margin);

apps/client/src/widgets/buttons/calendar.ts

@@ -10,20 +10,7 @@ import type { EventData } from "../../components/app_context.js";
 import { dayjs, type Dayjs } from "@triliumnext/commons";
 import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
 
-const MONTHS = [
-    t("calendar.january"),
-    t("calendar.february"),
-    t("calendar.march"),
-    t("calendar.april"),
-    t("calendar.may"),
-    t("calendar.june"),
-    t("calendar.july"),
-    t("calendar.august"),
-    t("calendar.september"),
-    t("calendar.october"),
-    t("calendar.november"),
-    t("calendar.december")
-];
+
 
 const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
@@ -33,11 +20,6 @@ const DROPDOWN_TPL = `
                 data-bs-toggle="dropdown" data-bs-auto-close="true"
                 aria-expanded="false"
                 data-calendar-input="month"></button>
-            <ul class="dropdown-menu" data-calendar-input="month-list">
-                ${Object.entries(MONTHS)
-        .map(([i, month]) => `<li><button class="dropdown-item" data-value=${i}>${month}</button></li>`)
-        .join("")}
-            </ul>
 
             <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="next"></button>
         </div>

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

@@ -1,4 +1,4 @@
-import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useMemo, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
@@ -6,6 +6,24 @@ import appContext from "../../components/app_context";
 import "./CalendarWidget.css";
 import Calendar from "./Calendar";
 import ActionButton from "../react/ActionButton";
+import Dropdown from "../react/Dropdown";
+import { t } from "../../services/i18n";
+import FormDropdownList from "../react/FormDropdownList";
+
+const MONTHS = [
+    t("calendar.january"),
+    t("calendar.february"),
+    t("calendar.march"),
+    t("calendar.april"),
+    t("calendar.may"),
+    t("calendar.june"),
+    t("calendar.july"),
+    t("calendar.august"),
+    t("calendar.september"),
+    t("calendar.october"),
+    t("calendar.november"),
+    t("calendar.december")
+];
 
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
@@ -21,6 +39,9 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                 const date = dayjs(activeDate || todaysDate).startOf('month');
                 setDate(date);
             }}
+            dropdownOptions={{
+                autoClose: "outside"
+            }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
                 <CalendarHeader date={date} setDate={setDate} />
@@ -44,9 +65,23 @@ function CalendarHeader(props: CalendarHeaderProps) {
 }
 
 function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
+    const months = useMemo(() => (
+        Array.from(MONTHS.entries().map(([ index, text ]) => ({
+            index: index.toString(), text
+        })))
+    ), []);
+    console.log("Got months ", months);
+
     return (
         <div className="calendar-month-selector">
             <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="month" />
+            <FormDropdownList
+                values={months} currentValue={date.month().toString()}
+                keyProperty="index" titleProperty="text"
+                onChange={value => {
+
+                }}
+            />
             <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
         </div>
     );

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

@@ -20,7 +20,7 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
     )
 }
 
-export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown"> & { icon: string }) {
+export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions"> & { icon: string }) {
     return (
         <Dropdown
             className="right-dropdown-widget"

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

@@ -21,9 +21,10 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
     forceShown?: boolean;
     onShown?: () => void;
     onHidden?: () => void;
+    dropdownOptions?: Partial<BootstrapDropdown.Options>;
 }
 
-export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -32,7 +33,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
     useEffect(() => {
         if (!triggerRef.current) return;
 
-        const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
+        const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current, dropdownOptions);
         if (forceShown) {
             dropdown.show();
             setShown(true);