chore(react/launch_bar): reimplement week notes

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

@@ -46,28 +46,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.manageFirstDayOfWeek();
         this.initWeekCalculation();
 
-        // Week click
-        this.$dropdownContent.on("click", ".calendar-week-number", async (ev) => {
-            if (!this.weekNoteEnable) {
-                return;
-            }
-
-            const week = $(ev.target).closest(".calendar-week-number").attr("data-calendar-week-number");
-
-            if (week) {
-                const note = await dateNoteService.getWeekNote(week);
-
-                if (note) {
-                    appContext.tabManager.getActiveContext()?.setNote(note.noteId);
-                    this.dropdown?.hide();
-                } else {
-                    toastService.showError(t("calendar.cannot_find_week_note"));
-                }
-            }
-
-            ev.stopPropagation();
-        });
-
         // Handle click events for the entire calendar widget
         this.$dropdownContent.on("click", (e) => {
             const $target = $(e.target);
@@ -85,16 +63,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         });
     }
 
-    private async getWeekNoteEnable() {
-        const noteId = await server.get<string[]>(`search/${encodeURIComponent('#calendarRoot')}`);
-        if (noteId.length === 0) {
-            this.weekNoteEnable = false;
-            return;
-        }
-        const noteAttributes = await server.get<AttributeRow[]>(`notes/${noteId}/attributes`);
-        this.weekNoteEnable = noteAttributes.some(a => a.name === 'enableWeekNote');
-    }
-
     initWeekCalculation() {
         this.weekCalculationOptions = {
             firstWeekType: options.getInt("firstWeekOfYear") || 0,
@@ -109,11 +77,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
     }
 
     createWeekNumber(weekNumber: number) {
-        const weekNoteId = this.date.local().format('YYYY-') + 'W' + String(weekNumber).padStart(2, '0');
+
         let $newWeekNumber;
 
         if (this.weekNoteEnable) {
-            $newWeekNumber = $("<a>").addClass("calendar-date");
             if (this.weekNotes.includes(weekNoteId)) {
                 $newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`);
             }

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

@@ -30,6 +30,7 @@ export interface CalendarArgs {
     todaysDate: Dayjs;
     activeDate: Dayjs | null;
     onDateClicked(date: string, e: TargetedMouseEvent<HTMLAnchorElement>): void;
+    onWeekClicked?: (week: string, e: TargetedMouseEvent<HTMLAnchorElement>) => void;
 }
 
 export default function Calendar(args: CalendarArgs) {
@@ -76,7 +77,7 @@ function PreviousMonthDays({ date, info: { dates, weekNumbers }, ...args }: { da
 
     return (
         <>
-            <CalendarWeek weekNumber={weekNumbers[0]} />
+            <CalendarWeek date={date} weekNumber={weekNumbers[0]} onWeekClicked={args.onWeekClicked} />
             {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" {...args} />)}
         </>
     )
@@ -96,7 +97,7 @@ function CurrentMonthDays({ date, firstDayOfWeekISO, ...args }: { date: Dayjs, f
     while (dateCursor.month() === currentMonth) {
         const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
         if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
-            items.push(<CalendarWeek weekNumber={weekNumber} />)
+            items.push(<CalendarWeek date={dateCursor} weekNumber={weekNumber} onWeekClicked={args.onWeekClicked} />)
         }
 
         items.push(<CalendarDay date={dateCursor} dateNotesForMonth={dateNotesForCurMonth} {...args} />)
@@ -140,10 +141,18 @@ function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDat
     );
 }
 
-function CalendarWeek({ weekNumber }: { weekNumber: number }) {
+function CalendarWeek({ date, weekNumber, onWeekClicked }: { weekNumber: number } & Pick<CalendarArgs, "date" | "onWeekClicked">) {
-    return (
+    if (onWeekClicked) {
-        <span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
+        const weekNoteId = date.local().format('YYYY-') + 'W' + String(weekNumber).padStart(2, '0');
-    )
+        return (
+            <a
+                className="calendar-week-number calendar-date"
+                onClick={(e) => onWeekClicked(weekNoteId, e)}
+            >{weekNumber}</a>
+        )
+    }
+
+    return (<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>);
 }
 
 export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {

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

@@ -12,6 +12,7 @@ import FormTextBox from "../react/FormTextBox";
 import toast from "../../services/toast";
 import date_notes from "../../services/date_notes";
 import { Dropdown } from "bootstrap";
+import search from "../../services/search";
 
 const MONTHS = [
     t("calendar.january"),
@@ -33,6 +34,19 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
     const [ calendarArgs, setCalendarArgs ] = useState<Pick<CalendarArgs, "activeDate" | "todaysDate">>();
     const [ date, setDate ] = useState<Dayjs>();
     const dropdownRef = useRef<Dropdown>(null);
+    const [ enableWeekNotes, setEnableWeekNotes ] = useState(false);
+    const calendarRootRef = useRef<FNote>();
+
+    async function checkEnableWeekNotes() {
+        if (!calendarRootRef.current) {
+            const notes = await search.searchForNotes("#calendarRoot");
+            if (!notes.length) return;
+            calendarRootRef.current = notes[0];
+        }
+
+        if (!calendarRootRef.current) return;
+        setEnableWeekNotes(calendarRootRef.current.hasLabel("enableWeekNote"));
+    }
 
     return (
         <LaunchBarDropdownButton
@@ -46,6 +60,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                     todaysDate,
                 });
                 setDate(dayjs(activeDate || todaysDate).startOf('month'));
+                checkEnableWeekNotes();
             }}
             dropdownRef={dropdownRef}
             dropdownOptions={{
@@ -66,6 +81,16 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                         }
                         e.stopPropagation();
                     }}
+                    onWeekClicked={enableWeekNotes ? async (week, e) => {
+                        const note = await date_notes.getWeekNote(week);
+                        if (note) {
+                            appContext.tabManager.getActiveContext()?.setNote(note.noteId);
+                            dropdownRef.current?.hide();
+                        } else {
+                            toast.showError(t("calendar.cannot_find_week_note"));
+                        }
+                        e.stopPropagation();
+                    } : undefined}
                     {...calendarArgs}
                 />
             </div>}