Fix settings not updating in svelte views and add fixed width calendar setting

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-book-tracker",
 	"name": "Book Tracker",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"minAppVersion": "0.15.0",
 	"description": "Simplifies tracking your reading progress and managing your book collection in Obsidian.",
 	"author": "FiFiTiDo",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-book-tracker",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "Simplifies tracking your reading progress and managing your book collection in Obsidian.",
 	"main": "main.js",
 	"scripts": {

src/main.ts

@@ -43,6 +43,14 @@ export default class BookTrackerPlugin extends Plugin {
 	public readingLog: ReadingLog;
 	public goodreads: Goodreads = new Goodreads();
 
+	private onSettingsSavedHandlers: ((
+		settings: BookTrackerPluginSettings
+	) => void)[] = [];
+
+	private onSettingsChangedHandlers: ((
+		settings: BookTrackerPluginSettings
+	) => void)[] = [];
+
 	async onload() {
 		await this.loadSettings();
 
@@ -100,12 +108,41 @@ export default class BookTrackerPlugin extends Plugin {
 			DEFAULT_SETTINGS,
 			await this.loadData()
 		);
+		this.onSettingsChangedHandlers.forEach((handler) =>
+			handler(this.settings)
+		);
 	}
 
 	async saveSettings() {
+		this.onSettingsSavedHandlers.forEach((handler) =>
+			handler(this.settings)
+		);
 		await this.saveData(this.settings);
 	}
 
+	onSettingsChanged(
+		handler: (settings: BookTrackerPluginSettings) => void
+	): () => void {
+		this.onSettingsChangedHandlers.push(handler);
+
+		return () => {
+			this.onSettingsChangedHandlers =
+				this.onSettingsChangedHandlers.filter((h) => h !== handler);
+		};
+	}
+
+	onSettingsSaved(
+		handler: (settings: BookTrackerPluginSettings) => void
+	): () => void {
+		this.onSettingsSavedHandlers.push(handler);
+
+		return () => {
+			this.onSettingsSavedHandlers = this.onSettingsSavedHandlers.filter(
+				(h) => h !== handler
+			);
+		};
+	}
+
 	async downloadCoverImage(
 		coverImageUrl: string,
 		fileName: string,

src/ui/code-blocks/AToZChallengeCodeBlockView.svelte

@@ -14,6 +14,7 @@
 	import BookCover from "@ui/components/BookCover.svelte";
 	import { setAppContext } from "@ui/stores/app";
 	import { titleSortValue } from "@utils/text";
+	import { onDestroy } from "svelte";
 
 	const { plugin }: SvelteCodeBlockProps = $props();
 	setAppContext(plugin.app);
@@ -67,6 +68,11 @@
 
 		return dates[0];
 	});
+
+	onDestroy(() => {
+		settingsStore.destroy();
+		metadataStore.destroy();
+	});
 </script>
 
 <div class="reading-bingo">

src/ui/code-blocks/ReadingCalendarCodeBlockView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { TFile } from "obsidian";
+	import { Platform, TFile } from "obsidian";
 	import type { SvelteCodeBlockProps } from "./SvelteCodeBlockRenderer";
 	import {
 		createSettings,
@@ -86,6 +86,7 @@
 	});
 
 	onDestroy(() => {
+		settingsStore.destroy();
 		metadataStore.destroy();
 		readingLog.destroy();
 	});
@@ -147,7 +148,11 @@
 	);
 </script>
 
-<div class="reading-calendar">
+<div
+	class="reading-calendar"
+	class:fixed-width={settingsStore.settings.fixedWidthCalendar ||
+		(settingsStore.settings.fixedWidthCalendarMobile && Platform.isMobile)}
+>
 	<div class="controls">
 		<div class="left">
 			<button
@@ -191,7 +196,7 @@
 			<ArrowRight />
 		</button>
 	</div>
-	<table>
+	<table id="calendar">
 		<thead>
 			<tr>
 				{#each daysOfWeek as day}
@@ -215,7 +220,7 @@
 								(month + 1) % 12}
 						>
 							<div class="header">
-								<span>{day.date()}</span>
+								<span class="date">{day.date()}</span>
 								{#if isThisMonth && date in bookMap}
 									{@const data = bookMap[date]}
 									<span class="total-pages-read">
@@ -250,6 +255,9 @@
 	$cell-padding: var(--size-4-2);
 
 	.reading-calendar {
+		container-name: reading-calendar;
+		container-type: inline-size;
+
 		display: flex;
 		flex-direction: column;
 		overflow: auto;
@@ -272,9 +280,62 @@
 				align-items: center;
 			}
 		}
+
+		&.fixed-width {
+			--table-width: 600px;
+
+			table#calendar,
+			.controls {
+				min-width: unset;
+				width: var(--table-width) !important;
+				margin-left: auto;
+				margin-right: auto;
 			}
 
-	table {
+			table#calendar th {
+				width: calc(var(--table-width) / 7);
+			}
+
+			@container reading-calendar (max-width: 800px) {
+				table#calendar {
+					th {
+						font-size: 0.75em;
+					}
+
+					.date {
+						font-size: 0.8em;
+					}
+
+					.total-pages-read {
+						font-size: 0.6em;
+					}
+				}
+			}
+
+			@container reading-calendar (min-width: 800px) {
+				table#calendar,
+				.controls {
+					--table-width: 800px;
+				}
+			}
+
+			@container reading-calendar (min-width: 1000px) {
+				table#calendar,
+				.controls {
+					--table-width: 1000px;
+				}
+			}
+
+			@container reading-calendar (min-width: 1200px) {
+				table#calendar,
+				.controls {
+					--table-width: 1200px;
+				}
+			}
+		}
+	}
+
+	table#calendar {
 		table-layout: fixed;
 		border-collapse: collapse;
 		min-width: 800px;

src/ui/code-blocks/ReadingStatsCodeBlockView.svelte

@@ -78,6 +78,7 @@
 	});
 
 	onDestroy(() => {
+		settingsStore.destroy();
 		metadataStore.destroy();
 		readingLogStore.destroy();
 	});

src/ui/code-blocks/ShelfCodeBlockView.svelte

@@ -43,7 +43,10 @@
 
 	let view = $state(settings.defaultView);
 
-	onDestroy(() => metadataStore.destroy());
+	onDestroy(() => {
+		settingsStore.destroy();
+		metadataStore.destroy();
+	});
 </script>
 
 <div

src/ui/modals/ReadingLogEntryEditModalView.svelte

@@ -15,6 +15,7 @@
 		createReadingLog,
 		setReadingLogContext,
 	} from "@ui/stores/reading-log.svelte";
+	import { onDestroy } from "svelte";
 
 	const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
 
@@ -92,6 +93,12 @@
 			createdAt: moment(createdAt),
 		});
 	}
+
+	onDestroy(() => {
+		settingsStore.destroy();
+		metadataStore.destroy();
+		readingLogStore.destroy();
+	});
 </script>
 
 <div class="obt-reading-log-entry-editor">

src/ui/settings/BookTrackerSettingTabView.svelte

@@ -7,7 +7,7 @@
 	import ToggleItem from "@ui/components/setting/ToggleItem.svelte";
 	import type BookTrackerPlugin from "@src/main";
 	import { createSettings } from "@ui/stores/settings.svelte";
-	import { onMount } from "svelte";
+	import { onDestroy, onMount } from "svelte";
 	import type { BookTrackerSettings } from "./types";
 	import { setAppContext } from "@ui/stores/app";
 
@@ -164,6 +164,8 @@
 			type: "text",
 		},
 	];
+
+	onDestroy(() => settingsStore.destroy());
 </script>
 
 <div class="obt-settings">
@@ -233,6 +235,22 @@
 		bind:checked={settingsStore.settings.overwriteExistingCovers}
 	/>
 
+	<Header title="Reading Calendar" />
+	<ToggleItem
+		id="fixed-width-calendar"
+		name="Fixed Width Calendar"
+		description={`Use a fixed with for the reading calendar
+		Useful on mobile where the images rely on a fixed width for proper sizing.`}
+		bind:checked={settingsStore.settings.fixedWidthCalendar}
+	/>
+	<ToggleItem
+		id="fixed-width-calendar-mobile"
+		name="Fixed Width Calendar (Mobile)"
+		description={`Use a fixed with for the reading calendar on the mobile app
+		Useful on mobile where the images rely on a fixed width for proper sizing.`}
+		bind:checked={settingsStore.settings.fixedWidthCalendarMobile}
+	/>
+
 	<Header title="Book Properties" />
 	{#each properties as property}
 		<PropertySuggestItem

src/ui/settings/types.ts

@@ -9,6 +9,8 @@ export interface BookTrackerSettings {
 	coverFolder: string;
 	groupCoversByFirstLetter: boolean;
 	overwriteExistingCovers: boolean;
+	fixedWidthCalendar: boolean;
+	fixedWidthCalendarMobile: boolean;
 	titleProperty: string;
 	subtitleProperty: string;
 	descriptionProperty: string;
@@ -42,6 +44,8 @@ export const DEFAULT_SETTINGS: BookTrackerSettings = {
 	coverFolder: "images/covers",
 	groupCoversByFirstLetter: true,
 	overwriteExistingCovers: false,
+	fixedWidthCalendar: false,
+	fixedWidthCalendarMobile: true,
 	titleProperty: "title",
 	subtitleProperty: "subtitle",
 	descriptionProperty: "description",

src/ui/stores/settings.svelte.ts

@@ -5,6 +5,7 @@ import { getContext, setContext } from "svelte";
 export interface SettingsStore {
 	settings: BookTrackerSettings;
 	load(): Promise<void>;
+	destroy(): void;
 }
 
 export function createSettings(plugin: BookTrackerPlugin) {
@@ -19,6 +20,14 @@ export function createSettings(plugin: BookTrackerPlugin) {
 		plugin.saveSettings();
 	});
 
+	const savedHandlerCleanup = plugin.onSettingsSaved((newSettings) => {
+		settings = newSettings;
+	});
+
+	const changedHandlerCleanup = plugin.onSettingsChanged((newSettings) => {
+		settings = newSettings;
+	});
+
 	return {
 		get settings() {
 			return settings;
@@ -31,6 +40,10 @@ export function createSettings(plugin: BookTrackerPlugin) {
 				...newSettings,
 			};
 		},
+		destroy() {
+			savedHandlerCleanup();
+			changedHandlerCleanup();
+		},
 	};
 }
 

versions.json

@@ -8,5 +8,6 @@
 	"1.4.0": "0.15.0",
 	"1.4.1": "0.15.0",
 	"1.4.2": "0.15.0",
-	"1.5.0": "0.15.0"
+	"1.5.0": "0.15.0",
+	"1.6.0": "0.15.0"
 }