From 641933716c238e0bc757bacee8516f15a86217b0 Mon Sep 17 00:00:00 2001
From: Sergii Kostyrko <srg.kostyrko@gmail.com>
Date: Sun, 27 Oct 2024 16:51:40 +0200
Subject: [PATCH] feat: add journal shelves

---
 src/calendar-view/CalendarView.vue            | 61 +++++++++++------
 .../navigation/NavigationBlock.vue            | 14 ++--
 .../navigation/NavigationBlockRow.vue         | 14 +++-
 src/components/calendar/CalendarDay.vue       |  7 +-
 .../calendar/CalendarMonthButton.vue          | 11 +--
 .../calendar/CalendarQuarterButton.vue        | 11 +--
 .../calendar/CalendarWeekNumber.vue           |  7 +-
 .../calendar/CalendarYearButton.vue           | 13 ++--
 src/composables/use-shelf.ts                  | 67 +++++++++++++++++++
 src/defaults.ts                               |  3 +
 src/main.ts                                   | 15 +++++
 src/stores/settings.store.ts                  | 39 -----------
 src/types/provided-data.types.ts              | 12 ++++
 src/types/settings.types.ts                   |  6 +-
 tsconfig.app.json                             |  1 +
 15 files changed, 192 insertions(+), 89 deletions(-)
 create mode 100644 src/composables/use-shelf.ts
 create mode 100644 src/types/provided-data.types.ts

diff --git a/src/calendar-view/CalendarView.vue b/src/calendar-view/CalendarView.vue
index 29b8038..ee0d783 100644
--- a/src/calendar-view/CalendarView.vue
+++ b/src/calendar-view/CalendarView.vue
@@ -6,26 +6,26 @@ import CalendarMonth from "../components/calendar/CalendarMonth.vue";
 import DatePickerModal from "../components/modals/DatePicker.modal.vue";
 import { VueModal } from "../components/modals/vue-modal";
 import { today, date_from_string } from "../calendar";
-import {
-  journalsWithDays$,
-  journalsWithWeeks$,
-  journalsWithMonths$,
-  journalsWithQuarters$,
-  journalsWithYears$,
-  pluginSettings$,
-  journalsList$,
-} from "../stores/settings.store";
+import { pluginSettings$, journalsList$ } from "../stores/settings.store";
 import { openDate } from "@/journals/open-date";
 import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
 import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
 import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
 import { ShelfSuggestModal } from "@/components/suggests/shelf-suggest";
 import { app$ } from "@/stores/obsidian.store";
+import { useShelfProvider } from "@/composables/use-shelf";
 
 const refDateMoment = ref(today());
 const refDate = computed(() => refDateMoment.value.format("YYYY-MM-DD"));
 
-const selectedShelf = ref<string | null>(null);
+const selectedShelf = computed({
+  get() {
+    return pluginSettings$.value.ui.calendarShelf;
+  },
+  set(value) {
+    pluginSettings$.value.ui.calendarShelf = value;
+  },
+});
 const shouldShowShelf = computed(() => {
   return (
     (pluginSettings$.value.useShelves && Object.values(pluginSettings$.value.shelves).length > 0) ||
@@ -33,14 +33,13 @@ const shouldShowShelf = computed(() => {
   );
 });
 
+const { journals } = useShelfProvider(selectedShelf);
+
 const daysClickable = computed(() => {
-  return journalsWithDays$.value.length > 0;
+  return journals.day.value.length > 0;
 });
 const weeksClickable = computed(() => {
-  return journalsWithWeeks$.value.length > 0;
-});
-const quartersClickable = computed(() => {
-  return journalsWithQuarters$.value.length > 0;
+  return journals.week.value.length > 0;
 });
 
 function selectShelf() {
@@ -70,19 +69,39 @@ function pickDate() {
 }
 
 function openDay(date: string, event: MouseEvent) {
-  openDate(date, journalsWithDays$.value, event).catch(console.error);
+  openDate(
+    date,
+    journals.day.value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
 }
 function openWeek(date: string, event: MouseEvent) {
-  openDate(date, journalsWithWeeks$.value, event).catch(console.error);
+  openDate(
+    date,
+    journals.week.value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
 }
 function openMonth(event: MouseEvent) {
-  openDate(refDate.value, journalsWithMonths$.value, event).catch(console.error);
+  openDate(
+    refDate.value,
+    journals.month.value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
 }
 function openQuarter(event: MouseEvent) {
-  openDate(refDate.value, journalsWithQuarters$.value, event).catch(console.error);
+  openDate(
+    refDate.value,
+    journals.quarter.value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
 }
 function openYear(event: MouseEvent) {
-  openDate(refDate.value, journalsWithYears$.value, event).catch(console.error);
+  openDate(
+    refDate.value,
+    journals.year.value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
 }
 // TODO slim header to avoid scroll
 </script>
@@ -108,7 +127,7 @@ function openYear(event: MouseEvent) {
         <ObsidianIconButton icon="chevron-left" tooltip="Previous month" @click="navigate(-1, 'month')" />
         <div class="calendar-month-header">
           <CalendarMonthButton :date="refDateMoment" @select="openMonth" />
-          <CalendarQuarterButton v-if="quartersClickable" :date="refDateMoment" @select="openQuarter" />
+          <CalendarQuarterButton v-if="journals.quarter.value.length > 0" :date="refDateMoment" @select="openQuarter" />
           <CalendarYearButton :date="refDateMoment" @select="openYear" />
         </div>
 
diff --git a/src/code-blocks/navigation/NavigationBlock.vue b/src/code-blocks/navigation/NavigationBlock.vue
index 7935668..a061aee 100644
--- a/src/code-blocks/navigation/NavigationBlock.vue
+++ b/src/code-blocks/navigation/NavigationBlock.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { journals$, journalsList$ } from "@/stores/settings.store";
+import { journals$ } from "@/stores/settings.store";
 import NavigationBlockRow from "./NavigationBlockRow.vue";
 import { plugin$ } from "@/stores/obsidian.store";
 import { openDate, openDateInJournal } from "@/journals/open-date";
+import { useShelfProvider } from "@/composables/use-shelf";
+import { NavBlockRow } from "@/types/settings.types";
 
 const props = defineProps<{
   refDate: string;
@@ -14,8 +16,12 @@ defineEmits<(event: "move-up" | "move-down" | "edit" | "remove", index: number)
 
 const journalSettings = computed(() => journals$.value[props.journalName]);
 const journal = computed(() => plugin$.value.getJournal(props.journalName));
+const shelfName = computed(() => journalSettings.value?.shelves[0] ?? null);
 
-async function navigate(type: string, date: string, journalName?: string) {
+const { journals } = useShelfProvider(shelfName);
+
+async function navigate(type: NavBlockRow["link"], date: string, journalName?: string) {
+  if (type === "none") return;
   if (type === "self") {
     const metadata = journal.value?.get(props.refDate);
     if (metadata) await journal.value?.open(metadata);
@@ -23,8 +29,8 @@ async function navigate(type: string, date: string, journalName?: string) {
     if (!journalName) return;
     await openDateInJournal(date, journalName);
   } else {
-    const journals = journalsList$.value.filter((journal) => journal.write.type === type).map(({ name }) => name);
-    await openDate(date, journals);
+    const journalsToUse = journals[type].value.map((journal) => journal.name);
+    await openDate(date, journalsToUse);
   }
 }
 </script>
diff --git a/src/code-blocks/navigation/NavigationBlockRow.vue b/src/code-blocks/navigation/NavigationBlockRow.vue
index 26a8477..6fd23e2 100644
--- a/src/code-blocks/navigation/NavigationBlockRow.vue
+++ b/src/code-blocks/navigation/NavigationBlockRow.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { SHELF_DATA_KEY } from "@/constants";
 import type { Journal } from "@/journals/journal";
 import type { NavBlockRow } from "@/types/settings.types";
 import { replaceTemplateVariables } from "@/utils/template";
-import { computed } from "vue";
+import { computed, inject } from "vue";
 
 const props = defineProps<{
   row: NavBlockRow;
@@ -51,7 +52,16 @@ const text = computed(() => {
 const fontSize = computed(() => `${props.row.fontSize}em`);
 const fontWeight = computed(() => (props.row.bold ? "bold" : "normal"));
 const fontStyle = computed(() => (props.row.italic ? "italic" : "normal"));
-const cursor = computed(() => (props.row.link === "none" ? "default" : "pointer"));
+
+const { journals } = inject(SHELF_DATA_KEY);
+
+const isClickable = computed(() => {
+  if (props.row.link === "none") return false;
+  if (props.row.link === "self") return true;
+  if (props.row.link === "journal") return Boolean(props.row.journal);
+  return journals[props.row.link].value.length > 0;
+});
+const cursor = computed(() => (isClickable.value ? "pointer" : "default"));
 
 function onClick() {
   if (props.row.link === "none") return;
diff --git a/src/components/calendar/CalendarDay.vue b/src/components/calendar/CalendarDay.vue
index 88a07e9..b913c0a 100644
--- a/src/components/calendar/CalendarDay.vue
+++ b/src/components/calendar/CalendarDay.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { inject, toRefs } from "vue";
 import type { MomentDate } from "../../types/date.types";
 import { useDecorations } from "@/composables/use-decorations";
 import CalendarDecoration from "./CalendarDecoration.vue";
-import { decorationsForDays$ } from "@/stores/settings.store";
+import { SHELF_DATA_KEY } from "@/constants";
 const props = defineProps<{
   date: MomentDate;
 }>();
 
 const { date } = toRefs(props);
-const decorationsStyles = useDecorations(date, decorationsForDays$);
+const { decorations } = inject(SHELF_DATA_KEY);
+const decorationsStyles = useDecorations(date, decorations.day);
 </script>
 
 <template>
diff --git a/src/components/calendar/CalendarMonthButton.vue b/src/components/calendar/CalendarMonthButton.vue
index 1ca7213..c43ffd1 100644
--- a/src/components/calendar/CalendarMonthButton.vue
+++ b/src/components/calendar/CalendarMonthButton.vue
@@ -2,9 +2,9 @@
 import { useDecorations } from "@/composables/use-decorations";
 import type { MomentDate } from "@/types/date.types";
 import CalendarDecoration from "./CalendarDecoration.vue";
-import { decorationsForMonths$, journalsWithMonths$ } from "@/stores/settings.store";
 import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { toRefs } from "vue";
+import { inject, toRefs } from "vue";
+import { SHELF_DATA_KEY } from "@/constants";
 
 const props = defineProps<{
   date: MomentDate;
@@ -12,9 +12,10 @@ const props = defineProps<{
 const { date } = toRefs(props);
 const emit = defineEmits<(event: "select", nativeEvent: MouseEvent, date: MomentDate) => void>();
 
-const decorationsStyles = useDecorations(date, decorationsForMonths$);
+const { journals, decorations } = inject(SHELF_DATA_KEY);
+const decorationsStyles = useDecorations(date, decorations.month);
 function select(event: MouseEvent) {
-  if (journalsWithMonths$.value.length === 0) {
+  if (journals.month.value.length === 0) {
     return;
   }
   emit("select", event, props.date);
@@ -22,7 +23,7 @@ function select(event: MouseEvent) {
 </script>
 
 <template>
-  <ObsidianButton class="month-button" flat :disabled="journalsWithMonths$.length === 0" @click="select">
+  <ObsidianButton class="month-button" flat :disabled="journals.month.value.length === 0" @click="select">
     <CalendarDecoration :styles="decorationsStyles">{{ date.format("MMMM") }}</CalendarDecoration>
   </ObsidianButton>
 </template>
diff --git a/src/components/calendar/CalendarQuarterButton.vue b/src/components/calendar/CalendarQuarterButton.vue
index 228a0ad..e82e6dc 100644
--- a/src/components/calendar/CalendarQuarterButton.vue
+++ b/src/components/calendar/CalendarQuarterButton.vue
@@ -2,9 +2,9 @@
 import { useDecorations } from "@/composables/use-decorations";
 import type { MomentDate } from "@/types/date.types";
 import CalendarDecoration from "./CalendarDecoration.vue";
-import { decorationsForQuarters$, journalsWithQuarters$ } from "@/stores/settings.store";
 import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { toRefs } from "vue";
+import { inject, toRefs } from "vue";
+import { SHELF_DATA_KEY } from "@/constants";
 
 const props = defineProps<{
   date: MomentDate;
@@ -12,9 +12,10 @@ const props = defineProps<{
 const { date } = toRefs(props);
 const emit = defineEmits<(event: "select", nativeEvent: MouseEvent, date: MomentDate) => void>();
 
-const decorationsStyles = useDecorations(date, decorationsForQuarters$);
+const { journals, decorations } = inject(SHELF_DATA_KEY);
+const decorationsStyles = useDecorations(date, decorations.quarter);
 function select(event: MouseEvent) {
-  if (journalsWithQuarters$.value.length === 0) {
+  if (journals.quarter.value.length === 0) {
     return;
   }
   emit("select", event, props.date);
@@ -22,7 +23,7 @@ function select(event: MouseEvent) {
 </script>
 
 <template>
-  <ObsidianButton class="quarter-button" flat :disabled="journalsWithQuarters$.length === 0" @click="select">
+  <ObsidianButton class="quarter-button" flat :disabled="journals.quarter.value.length === 0" @click="select">
     <CalendarDecoration :styles="decorationsStyles">{{ date.format("[Q]Q") }}</CalendarDecoration>
   </ObsidianButton>
 </template>
diff --git a/src/components/calendar/CalendarWeekNumber.vue b/src/components/calendar/CalendarWeekNumber.vue
index 59785fe..2743a22 100644
--- a/src/components/calendar/CalendarWeekNumber.vue
+++ b/src/components/calendar/CalendarWeekNumber.vue
@@ -2,14 +2,15 @@
 import { useDecorations } from "@/composables/use-decorations";
 import type { MomentDate } from "@/types/date.types";
 import CalendarDecoration from "./CalendarDecoration.vue";
-import { decorationsForWeeks$ } from "@/stores/settings.store";
-import { toRefs } from "vue";
+import { inject, toRefs } from "vue";
+import { SHELF_DATA_KEY } from "@/constants";
 const props = defineProps<{
   date: MomentDate;
 }>();
 
 const { date } = toRefs(props);
-const decorationsStyles = useDecorations(date, decorationsForWeeks$);
+const { decorations } = inject(SHELF_DATA_KEY);
+const decorationsStyles = useDecorations(date, decorations.week);
 </script>
 
 <template>
diff --git a/src/components/calendar/CalendarYearButton.vue b/src/components/calendar/CalendarYearButton.vue
index 1b7c607..d929cea 100644
--- a/src/components/calendar/CalendarYearButton.vue
+++ b/src/components/calendar/CalendarYearButton.vue
@@ -2,19 +2,20 @@
 import { useDecorations } from "@/composables/use-decorations";
 import type { MomentDate } from "@/types/date.types";
 import CalendarDecoration from "./CalendarDecoration.vue";
-import { decorationsForYears$, journalsWithYears$ } from "@/stores/settings.store";
 import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { toRefs } from "vue";
+import { inject, toRefs } from "vue";
+import { SHELF_DATA_KEY } from "@/constants";
 
 const props = defineProps<{
   date: MomentDate;
 }>();
 const { date } = toRefs(props);
-const emit = defineEmits<(event: "select", event: MouseEvent, date: MomentDate) => void>();
+const emit = defineEmits<(event_: "select", event: MouseEvent, date: MomentDate) => void>();
 
-const decorationsStyles = useDecorations(date, decorationsForYears$);
+const { journals, decorations } = inject(SHELF_DATA_KEY);
+const decorationsStyles = useDecorations(date, decorations.year);
 function select(event: MouseEvent) {
-  if (journalsWithYears$.value.length === 0) {
+  if (journals.year.value.length === 0) {
     return;
   }
   emit("select", event, props.date);
@@ -22,7 +23,7 @@ function select(event: MouseEvent) {
 </script>
 
 <template>
-  <ObsidianButton class="year-button" flat :disabled="journalsWithYears$.length === 0" @click="select">
+  <ObsidianButton class="year-button" flat :disabled="journals.year.value.length === 0" @click="select">
     <CalendarDecoration :styles="decorationsStyles">{{ date.format("YYYY") }}</CalendarDecoration>
   </ObsidianButton>
 </template>
diff --git a/src/composables/use-shelf.ts b/src/composables/use-shelf.ts
new file mode 100644
index 0000000..67aa3ac
--- /dev/null
+++ b/src/composables/use-shelf.ts
@@ -0,0 +1,67 @@
+import { SHELF_DATA_KEY } from "@/constants";
+import { journalsList$, pluginSettings$ } from "@/stores/settings.store";
+import type { ProvidedShelfData } from "@/types/provided-data.types";
+import type { JournalSettings } from "@/types/settings.types";
+import { computed, type MaybeRef, provide, toRef } from "vue";
+
+export function useShelfProvider(shelfName: MaybeRef<string | null>) {
+  const _shelfName = toRef(shelfName);
+
+  const journals = computed(() => {
+    const name = _shelfName.value;
+    if (pluginSettings$.value.useShelves && name) {
+      return journalsList$.value.filter((journal) => journal.shelves.includes(name));
+    }
+    return journalsList$.value;
+  });
+  const dailyJournals = computed(() => journals.value.filter((journal) => journal.write.type === "day"));
+  const weeklyJournals = computed(() => journals.value.filter((journal) => journal.write.type === "week"));
+  const monthlyJournals = computed(() => journals.value.filter((journal) => journal.write.type === "month"));
+  const quarterlyJournals = computed(() => journals.value.filter((journal) => journal.write.type === "quarter"));
+  const yearlyJournals = computed(() => journals.value.filter((journal) => journal.write.type === "year"));
+  const customJournals = computed(() => journals.value.filter((journal) => journal.write.type === "custom"));
+  const weekdaysJournals = computed(() => journals.value.filter((journal) => journal.write.type === "weekdays"));
+
+  const dailyDecorations = computed(() => prepareDecorations(dailyJournals.value));
+  const weeklyDecorations = computed(() => prepareDecorations(weeklyJournals.value));
+  const monthlyDecorations = computed(() => prepareDecorations(monthlyJournals.value));
+  const quarterlyDecorations = computed(() => prepareDecorations(quarterlyJournals.value));
+  const yearlyDecorations = computed(() => prepareDecorations(yearlyJournals.value));
+  const customDecorations = computed(() => prepareDecorations(customJournals.value));
+  const weekdaysDecorations = computed(() => prepareDecorations(weekdaysJournals.value));
+
+  const providedShelfData: ProvidedShelfData = {
+    journals: {
+      all: journals,
+      day: dailyJournals,
+      week: weeklyJournals,
+      month: monthlyJournals,
+      quarter: quarterlyJournals,
+      year: yearlyJournals,
+      custom: customJournals,
+      weekdays: weekdaysJournals,
+    },
+    decorations: {
+      day: dailyDecorations,
+      week: weeklyDecorations,
+      month: monthlyDecorations,
+      quarter: quarterlyDecorations,
+      year: yearlyDecorations,
+      custom: customDecorations,
+      weekdays: weekdaysDecorations,
+    },
+  };
+
+  provide(SHELF_DATA_KEY, providedShelfData);
+
+  return providedShelfData;
+}
+
+function prepareDecorations(journals: JournalSettings[]) {
+  return journals.flatMap((journal) =>
+    journal.decorations.map((decoration) => ({
+      journalName: journal.name,
+      decoration,
+    })),
+  );
+}
diff --git a/src/defaults.ts b/src/defaults.ts
index 541f487..1426c2d 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -8,6 +8,9 @@ import type {
 
 export const defaultPluginSettings: PluginSettings = {
   version: 2,
+  ui: {
+    calendarShelf: null,
+  },
   useShelves: false,
   showReloadHint: false,
   journals: {},
diff --git a/src/main.ts b/src/main.ts
index 2b5af0d..19cc467 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,6 +17,7 @@ import { TimelineCodeBlockProcessor } from "./code-blocks/timeline/timeline-proc
 import { NavCodeBlockProcessor } from "./code-blocks/navigation/nav-processor";
 import { VueModal } from "./components/modals/vue-modal";
 import ConnectNoteModal from "./components/modals/ConnectNote.modal.vue";
+import { ShelfSuggestModal } from "./components/suggests/shelf-suggest";
 
 export default class JournalPlugin extends Plugin {
   #stopHandles: WatchStopHandle[] = [];
@@ -278,5 +279,19 @@ export default class JournalPlugin extends Plugin {
     for (const journal of this.#journals.values()) {
       journal.registerCommands();
     }
+
+    this.addCommand({
+      id: "change-calendar-shelf",
+      name: "Change calendar view shelf",
+      checkCallback: (checking: boolean): boolean => {
+        if (checking) {
+          return pluginSettings$.value.useShelves && Object.values(pluginSettings$.value.shelves).length > 0;
+        }
+        new ShelfSuggestModal(this.app, Object.keys(pluginSettings$.value.shelves), (name) => {
+          pluginSettings$.value.ui.calendarShelf = name;
+        }).open();
+        return true;
+      },
+    });
   }
 }
diff --git a/src/stores/settings.store.ts b/src/stores/settings.store.ts
index 7271313..ae65434 100644
--- a/src/stores/settings.store.ts
+++ b/src/stores/settings.store.ts
@@ -10,42 +10,3 @@ export const calendarViewSettings$ = computed(() => pluginSettings$.value.calend
 
 export const journals$ = computed(() => ({ ...pluginSettings$.value.journals }));
 export const journalsList$ = computed(() => Object.values(journals$.value));
-
-export const journalsWithDays$ = computed(() => {
-  return journalsList$.value.filter((journal) => journal.write.type === "day").map((journal) => journal.name);
-});
-
-export const journalsWithWeeks$ = computed(() => {
-  return journalsList$.value.filter((journal) => journal.write.type === "week").map((journal) => journal.name);
-});
-
-export const journalsWithMonths$ = computed(() => {
-  return journalsList$.value.filter((journal) => journal.write.type === "month").map((journal) => journal.name);
-});
-
-export const journalsWithQuarters$ = computed(() => {
-  return journalsList$.value.filter((journal) => journal.write.type === "quarter").map((journal) => journal.name);
-});
-
-export const journalsWithYears$ = computed(() => {
-  return journalsList$.value.filter((journal) => journal.write.type === "year").map((journal) => journal.name);
-});
-
-function decorationsForType(type: "day" | "week" | "month" | "quarter" | "year") {
-  return computed(() => {
-    return journalsList$.value
-      .filter((journal) => journal.write.type === type)
-      .flatMap((journal) =>
-        journal.decorations.map((decoration) => ({
-          journalName: journal.name,
-          decoration,
-        })),
-      );
-  });
-}
-
-export const decorationsForDays$ = decorationsForType("day");
-export const decorationsForWeeks$ = decorationsForType("week");
-export const decorationsForMonths$ = decorationsForType("month");
-export const decorationsForQuarters$ = decorationsForType("quarter");
-export const decorationsForYears$ = decorationsForType("year");
diff --git a/src/types/provided-data.types.ts b/src/types/provided-data.types.ts
new file mode 100644
index 0000000..7c02afc
--- /dev/null
+++ b/src/types/provided-data.types.ts
@@ -0,0 +1,12 @@
+import { type ComputedRef } from "vue";
+import type { JournalDecoration, JournalSettings } from "./settings.types";
+
+interface ProvidedDecorationData {
+  journalName: string;
+  decoration: JournalDecoration;
+}
+
+export interface ProvidedShelfData {
+  journals: Record<"all" | JournalSettings["write"]["type"], ComputedRef<JournalSettings[]>>;
+  decorations: Record<JournalSettings["write"]["type"], ComputedRef<ProvidedDecorationData[]>>;
+}
diff --git a/src/types/settings.types.ts b/src/types/settings.types.ts
index 7beaffe..786d3ba 100644
--- a/src/types/settings.types.ts
+++ b/src/types/settings.types.ts
@@ -5,6 +5,10 @@ export type OpenMode = "active" | "tab" | "split" | "window";
 export interface PluginSettings {
   version: number;
 
+  ui: {
+    calendarShelf: string | null;
+  };
+
   useShelves: boolean;
   showReloadHint: boolean;
 
@@ -264,6 +268,6 @@ export interface NavBlockRow {
   fontSize: number;
   bold: boolean;
   italic: boolean;
-  link: "none" | "self" | "journal" | FixedWriteIntervals["type"];
+  link: "none" | "self" | "journal" | JournalSettings["write"]["type"];
   journal: string;
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 9b41577..ba1791b 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -6,6 +6,7 @@
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "lib": ["es2021", "DOM", "ESNext"],
+    "target": "ES2015",
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,