before working context panel

src/components/Day.svelte

@@ -8,6 +8,7 @@
   import type { IDayMetadata } from "../types";
   import { isMetaPressed } from "../utils";
   import { onMount } from 'svelte';
+  import { selectedDate } from "../ui/stores";
 
   // Properties
   export let date: Moment;
@@ -18,24 +19,27 @@
     isMetaPressed: boolean
   ) => boolean;
   export let onClick: (date: Moment, isMetaPressed: boolean) => boolean;
-  export let onContextMenu: (date: Moment, event: MouseEvent) => boolean;
+  export let onFileMenu: (date: Moment, event: MouseEvent) => boolean;
 
   // Global state
+
+
   export let today: Moment;
-  export let displayedMonth: Moment = null;
-  export let selectedId: string = null;
 
+  export let displayedMonth: Moment = null;
+  // Use store with $ prefix for reactivity
+  $: isSelected = $selectedDate ? date.isSame($selectedDate, 'day') : false;
 </script>
 
 <td>
-  <MetadataResolver metadata="{metadata}" let:metadata>
+  <MetadataResolver {metadata} let:metadata>
     <div
       class="{`day ${metadata.classes.join(' ')}`}"
-      class:active="{selectedId === getDateUID(date, 'day')}"
+      class:selected={isSelected}
       class:inactive-month="{!date.isSame(displayedMonth, 'month')}"
       class:today="{date.isSame(today, 'day')}"
       on:click="{onClick && ((e) => onClick(date, isMetaPressed(e)))}"
-      on:contextmenu="{onContextMenu && ((e) => onContextMenu(date, e))}"
+      on:contextmenu="{onFileMenu && ((e) => onFileMenu(date, e))}"
       on:pointerover="{onHover &&
         ((e) => onHover(date, e.target, isMetaPressed(e)))}"
       {...metadata.dataAttributes || {}}
@@ -45,6 +49,7 @@
   </MetadataResolver>
 </td>
 
+
 <style>
     .day {
         background-color: var(--color-background-day);
@@ -67,32 +72,31 @@
         color: var(--color-text-day-hover);
     }
 
-    .day.has-note,
-    .day.active {
+    .day.has-note {
         background-color: var(--color-background-day-note);
         color: var(--color-text-day-note);
     }
 
-    .day.has-note:hover,
-    .day.active:hover {
+    .day.selected {
+        /*color: var(--color-text-day-note);*/
+        border: 2px solid var(--color-border-day-active);
+    }
+
+    .day.has-note:hover {
         background-color: var(--color-background-day-note-hover);
         color: var(--color-text-day-note-hover);
     }
 
-    /* Active adds border */
-    .day.active {
-        border: 2px solid var(--color-border-day-active);
-    }
 
     /* Today state - different text color */
     .day.today {
         /*color: var(--color-text-day-today);*/
-        border: 2px solid white;
+        border: 2px solid var(--color-base-100);
         /*outline-offset: -3px;*/
         /*border-radius: 25%;*/
         font-weight: bold;
     }
-    .day.today.active {
+    .day.today.selected {
         /*color: var(--color-text-day-today-note);*/
         border: 2px solid var(--color-border-day-active);
     }

src/components/Header.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
+  import type { Moment } from "moment";
+
   export let scrollToToday: () => void;
-  export let visibleYear; // the bound variable from the parent
+  export let visibleMonth: Moment = window.moment();
+  export let active: boolean = false;
+
+  let year;
+  $: year = visibleMonth.year();
 </script>
 
 <div class="calendar-header">
-  <button class="today-button" on:click={scrollToToday}>
+  <button class="today-button" class:active on:click={scrollToToday}>
     Today
   </button>
-  <div class="year-display">{visibleYear}</div>
+  <div class="year-display">{year}</div>
 </div>
 
+
 <style>
     .calendar-header {
         display: flex;
@@ -21,18 +28,27 @@
     }
     .year-display {
         font-size: 1.8em;
-        font-weight: 500;
+        font-weight: 600;
     }
+
     .today-button {
         padding: 0.25rem 0.6rem; /* Reduced padding */
         border-radius: 15%;
         font-size: 1.0em;
         font-weight: 200;
-        /*border: 1px solid var(--background-modifier-border);*/
+        /*border: 1px solid orange;*/
         /*color: var(--text-on-accent);*/
+        border: 2px solid transparent;
         cursor: pointer;
         /*background-color: var(--background-secondary);*/
     }
+    .today-button.active {
+        /*background-color: var(--interactive-accent);*/
+        background: var(--interactive-normal);
+        border: 2px solid white;
+        opacity: 0.8;  /* Maintains some of that glassy feel */
+        font-weight: 300;  /* Slightly bolder than normal state */
+    }
     .today-button:hover {
         background-color: var(--interactive-hover);
     }

src/components/MonthCalendar.svelte

@@ -25,14 +25,13 @@
     targetEl: EventTarget,
     isMetaPressed: boolean
   ) => boolean;
-  export let onContextMenuDay: (date: Moment, event: MouseEvent) => boolean;
-  export let onContextMenuWeek: (date: Moment, event: MouseEvent) => boolean;
+  export let onFileMenuDay: (date: Moment, event: MouseEvent) => boolean;
   export let onClickDay: (date: Moment, isMetaPressed: boolean) => boolean;
-  export let onClickWeek: (date: Moment, isMetaPressed: boolean) => boolean;
 
   // External sources (All optional)
   export let sources: ICalendarSource[] = [];
-  export let selectedId: string;
+  // export let selectedId: string;
+  export let selectedDate: Moment | null;
 
 
   // Override-able local state
@@ -100,10 +99,9 @@
               today="{today}"
               displayedMonth="{displayedMonth}"
               onClick="{onClickDay}"
-              onContextMenu="{onContextMenuDay}"
+              onFileMenu="{onFileMenuDay}"
               onHover="{onHoverDay}"
               metadata="{getDailyMetadata(sources, day, today)}"
-              selectedId="{selectedId}"
             />
           {/each}
         </tr>

src/components/OnThisDay.svelte

@@ -2,8 +2,12 @@
 <script lang="ts">
   import type { Moment } from "moment";
   import moment from "moment";
-  import { getDailyNote } from "obsidian-daily-notes-interface";
-  import { activeFile, dailyNotes, weeklyNotes } from "../ui/stores";
+  import { activeFile, dailyNotes, selectedDate } from "../ui/stores";
+  import {
+    getDailyNote,
+    getDailyNoteSettings,
+    getDateFromFile,
+  } from "obsidian-daily-notes-interface";
 
   export let onClickDate: (date: Moment) => boolean;
 
@@ -13,18 +17,8 @@
     name: string;
   }
 
-
-  function parseUUIDToMoment(uuid: string): Moment | null {
-    if (!uuid) return null;
-    const match = uuid.match(/day-(.+)/);
-    if (!match) return null;
-
-    const dateString = match[1];
-    return moment(dateString);
-  }
-
-  $: historicalNotes = getHistoricalNotes(parseUUIDToMoment($activeFile));
-
+  // We'll now get historical notes based on selectedDate
+  $: historicalNotes = getHistoricalNotes($selectedDate);
 
   function getHistoricalNotes(date: Moment | null): HistoricalNote[] {
     if (!date) return [];
@@ -38,20 +32,19 @@
     for (let year = currentYear - 60; year <= currentYear + 60; year++) {
       const historicalDate = window.moment().year(year).month(month).date(day);
       const file = getDailyNote(historicalDate, $dailyNotes);
-
       if (file) {
-        // console.log("file contents:");
-        // console.dir(file);
         notes.push({
           date: historicalDate,
           name: file.basename,
           exists: true
         });
       }
     }
-
     return notes;
   }
+
+  // Debug logging for store changes
+  $: console.log('selectedDate in historical notes:', $selectedDate ? $selectedDate.format('YYYY-MM-DD') : 'none');
 </script>
 
 {#if historicalNotes && historicalNotes.length > 0}
@@ -74,7 +67,6 @@
   </div>
 {/if}
 
-
 <style>
     .on-this-day {
         padding: 1rem;

src/components/ScrollingCalendar.svelte

@@ -16,11 +16,8 @@
   // Props
   export let sources: ICalendarSource[];
   export let onHoverDay: (date: Moment, targetEl: EventTarget) => boolean;
-  export let onHoverWeek: (date: Moment, targetEl: EventTarget) => boolean;
   export let onClickDay: (date: Moment, isMetaPressed: boolean) => boolean;
-  export let onClickWeek: (date: Moment, isMetaPressed: boolean) => boolean;
-  export let onContextMenuDay: (date: Moment, event: MouseEvent) => boolean;
-  export let onContextMenuWeek: (date: Moment, event: MouseEvent) => boolean;
+  export let onFileMenuDay: (date: Moment, event: MouseEvent) => boolean;
 
   // State
   let today: Moment;
@@ -29,7 +26,7 @@
   let virtualScroll: VirtualScroll; // Reference to hold the component instance
   let isLoading = false;
   let visibleIndex = 0;
-  export let visibleYear;
+  export let visibleMonth;
 
 
   $: today = getToday($settings);
@@ -93,32 +90,29 @@
   }
 
 
-
-  // Transform months array into objects with unique keys
   $: monthsData = displayedMonths.map((month) => ({
-    key: month.format('YYYY-MM'), // Unique key for each month
+    key: month.format('YYYY-MM'),
     month: month
   }));
 
-  $: visibleYear = displayedMonths[visibleIndex]
-    ? displayedMonths[visibleIndex].year()
-    : null;
+  $: visibleMonth = displayedMonths[visibleIndex]
+    ? displayedMonths[visibleIndex]
+    : window.moment();
 
 
 
   onMount(() => {
     let {months, i} = generateInitialMonths();
     displayedMonths = months;
     currentMonthIndex = i;
-    // todo
     virtualScroll.scrollToIndex(currentMonthIndex);
   });
 
   // 1 minute heartbeat to keep today reflecting the current day
   let heartbeat = setInterval(() => {
     today = window.moment();
 
-    // todo: change this to yearly logic for updating display months lol
+    // todo: change this to monthkt logic for updating display months index lol idk
     // if (!today.isSame(displayedMonths[currentMonthIndex], 'month')) {
     //   displayedMonths = [today.clone(), ...displayedMonths];
     // }
@@ -161,14 +155,10 @@
         {sources}
         {today}
         {onHoverDay}
-        {onHoverWeek}
-        {onContextMenuDay}
-        {onContextMenuWeek}
+        {onFileMenuDay}
         {onClickDay}
-        {onClickWeek}
         displayedMonth={item.month}
         localeData={today.localeData()}
-        selectedId={$activeFile}
         showWeekNums={$settings.showWeeklyNote}
       />
     </svelte:fragment>

src/components/VirtualScroll.svelte

@@ -52,7 +52,7 @@
       offset: startIndex * height
     };
 
-    visibleIndex = range.start + buffer;
+    visibleIndex = Math.floor(scrollTop / height);
   }
 
   /**