chore(react/launch_bar): reintroduce year selector

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

@@ -10,32 +10,6 @@ import type { EventData } from "../../components/app_context.js";
 import { dayjs, type Dayjs } from "@triliumnext/commons";
 import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
 
-
-
-const DROPDOWN_TPL = `
-<div class="calendar-dropdown-widget">
-    <div class="calendar-header">
-        <div class="calendar-month-selector">
-            <button class="btn dropdown-toggle select-button" type="button"
-                data-bs-toggle="dropdown" data-bs-auto-close="true"
-                aria-expanded="false"
-                data-calendar-input="month"></button>
-
-            <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="next"></button>
-        </div>
-
-        <div class="calendar-year-selector">
-            <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previousYear"></button>
-
-            <input type="number" min="1900" max="2999" step="1" data-calendar-input="year" />
-
-            <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="nextYear"></button>
-        </div>
-    </div>
-
-
-</div>`;
-
 interface WeekCalculationOptions {
     firstWeekType: number;
     minDaysInFirstWeek: number;

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

@@ -175,3 +175,7 @@
     color: var(--hover-item-text-color);
     text-decoration: underline;
 }
+
+.calendar-dropdown-widget .form-control {
+    padding: 0;
+}

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

@@ -9,6 +9,7 @@ import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { t } from "../../services/i18n";
 import FormDropdownList from "../react/FormDropdownList";
+import FormTextBox from "../react/FormTextBox";
 
 const MONTHS = [
     t("calendar.january"),
@@ -60,6 +61,7 @@ function CalendarHeader(props: CalendarHeaderProps) {
     return (
         <div className="calendar-header">
             <CalendarMonthSelector {...props} />
+            <CalendarYearSelector {...props} />
         </div>
     )
 }
@@ -70,7 +72,6 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
             index: index.toString(), text
         })))
     ), []);
-    console.log("Got months ", months);
 
     return (
         <div className="calendar-month-selector">
@@ -87,9 +88,30 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
     );
 }
 
+function CalendarYearSelector({ date, setDate }: CalendarHeaderProps) {
+    return (
+        <div className="calendar-year-selector">
+            <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="year" />
+            <FormTextBox
+                type="number"
+                min="1900" max="2999" step="1"
+                currentValue={date.year().toString()}
+                onChange={(newValue) => {
+                    const year = parseInt(newValue, 10);
+                    if (!Number.isNaN(year)) {
+                        setDate(date.set("year", year));
+                    }
+                }}
+                data-calendar-input="year"
+            />
+            <AdjustDateButton date={date} setDate={setDate} direction="next" unit="year" />
+        </div>
+    )
+}
+
 function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
     direction: "prev" | "next",
-    unit: "month"
+    unit: "month" | "year"
 }) {
     return (
         <ActionButton