Change how book covers are styled

src/ui/code-blocks/AToZChallengeCodeBlockView.svelte

@@ -12,8 +12,10 @@
 	import OpenFileLink from "@ui/components/OpenFileLink.svelte";
 	import DateFilter from "@ui/components/DateFilter.svelte";
 	import BookCover from "@ui/components/BookCover.svelte";
+	import { setAppContext } from "@ui/stores/app";
 
 	const { plugin }: SvelteCodeBlockProps = $props();
+	setAppContext(plugin.app);
 
 	const settingsStore = createSettings(plugin);
 	setSettingsContext(settingsStore);
@@ -88,7 +90,7 @@
 				{#if metadata[letter]}
 					{@const meta = metadata[letter]}
 					<OpenFileLink file={meta.file}>
-						<BookCover app={plugin.app} book={meta.book} />
+						<BookCover book={meta.book} size="fill" />
 					</OpenFileLink>
 				{:else}
 					<div class="placeholder">{letter}</div>
@@ -139,13 +141,6 @@
 					font-weight: bold;
 					font-style: italic;
 				}
-
-				:global(img) {
-					width: 100%;
-					height: 100%;
-					object-fit: cover;
-					border-radius: var(--radius-l);
-				}
 			}
 		}
 	}

src/ui/code-blocks/ReadingCalendarCodeBlockView.svelte

@@ -19,8 +19,10 @@
 	import OpenFileLink from "@ui/components/OpenFileLink.svelte";
 	import moment from "@external/moment";
 	import BookCover from "@ui/components/BookCover.svelte";
+	import { setAppContext } from "@ui/stores/app";
 
 	const { plugin }: SvelteCodeBlockProps = $props();
+	setAppContext(plugin.app);
 
 	const settingsStore = createSettings(plugin);
 	setSettingsContext(settingsStore);
@@ -228,8 +230,8 @@
 										<div class="cover">
 											<OpenFileLink file={meta.file}>
 												<BookCover
-													app={plugin.app}
 													book={meta.book}
+													size="fill"
 												/>
 											</OpenFileLink>
 										</div>
@@ -298,6 +300,7 @@
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
+				margin-bottom: -12px;
 
 				.total-pages-read {
 					font-size: var(--font-smallest);
@@ -322,15 +325,6 @@
 						width: 100%;
 						height: 100%;
 					}
-
-					:global(img) {
-						border-radius: var(--radius-l);
-						width: 100%;
-						height: 100%;
-						min-width: 100%;
-						min-height: 100%;
-						object-fit: cover;
-					}
 				}
 
 				&:has(.cover:first-child:nth-last-child(2)) {

src/ui/code-blocks/ShelfCodeBlockView.svelte

@@ -17,6 +17,10 @@
 	import DetailsView from "@ui/components/DetailsView.svelte";
 	import { setAppContext } from "@ui/stores/app";
 	import type { SvelteCodeBlockProps } from "./SvelteCodeBlockRenderer";
+	import {
+		createReadingLog,
+		setReadingLogContext,
+	} from "@ui/stores/reading-log.svelte";
 
 	const { plugin, source }: SvelteCodeBlockProps = $props();
 	setAppContext(plugin.app);
@@ -32,6 +36,11 @@
 	});
 	setMetadataContext(metadataStore);
 
+	const readingLog = createReadingLog(plugin.readingLog, {
+		disableAllFiltering: true,
+	});
+	setReadingLogContext(readingLog);
+
 	let view = $state(settings.defaultView);
 
 	onDestroy(() => metadataStore.destroy());
@@ -54,11 +63,11 @@
 		{/if}
 	</div>
 	{#if view === "bookshelf"}
-		<BookshelfView {plugin} />
+		<BookshelfView />
 	{:else if view === "table"}
-		<TableView {plugin} {settings} />
+		<TableView {settings} />
 	{:else if view === "details"}
-		<DetailsView {plugin} {settings} />
+		<DetailsView {settings} />
 	{/if}
 </div>
 

src/ui/components/BookCover.svelte

@@ -1,14 +1,49 @@
 <script lang="ts">
 	import type { BookMetadata } from "@src/types";
-	import type { App } from "obsidian";
+	import { getAppContext } from "@ui/stores/app";
+
+	type NumberUnit =
+		| "cap"
+		| "ch"
+		| "em"
+		| "ex"
+		| "ic"
+		| "lh"
+		| "rcap"
+		| "rch"
+		| "rem"
+		| "rex"
+		| "ric"
+		| "rlh"
+		| "vh"
+		| "vw"
+		| "vmax"
+		| "vmin"
+		| "vb"
+		| "vi"
+		| "cqw"
+		| "cqh"
+		| "cqi"
+		| "cqb"
+		| "cqmin"
+		| "cqmax"
+		| "px"
+		| "cm"
+		| "mm"
+		| "Q"
+		| "in"
+		| "pc"
+		| "pt"
+		| "%";
 
 	interface Props {
-		app: App;
 		book: BookMetadata;
-		size?: number;
+		size?: "fill" | number | `${number}${NumberUnit}`;
 	}
 
-	const { app, book, size }: Props = $props();
+	const { book, size = 500 }: Props = $props();
+
+	const app = getAppContext();
 
 	const coverPath = $derived(book.localCoverPath);
 	const coverFile = $derived(app.vault.getFileByPath(coverPath));
@@ -16,12 +51,54 @@
 		coverFile ? app.vault.getResourcePath(coverFile) : "",
 	);
 	const coverAlt = $derived(book.title);
+
+	const coverWidth = $derived.by(() => {
+		if (size === "fill") {
+			return "100%";
+		} else if (typeof size === "string") {
+			return size;
+		} else if (typeof size === "number") {
+			return `${size}px`;
+		} else {
+			return undefined;
+		}
+	});
+
+	const coverHeight = $derived.by(() => {
+		if (size === "fill") {
+			return "100%";
+		} else {
+			return undefined;
+		}
+	});
 </script>
 
-<img src={coverSrc} alt={coverAlt} width={size} />
+<div
+	class="book-cover"
+	style:--book-cover-width={coverWidth}
+	style:--book-cover-height={coverHeight}
+>
+	<img src={coverSrc} alt={coverAlt} />
+</div>
 
 <style lang="scss">
-	img {
-		border-radius: var(--radius-l);
+	:global(:root) {
+		--book-cover-aspect-ratio: 2 / 3;
+	}
+
+	.book-cover {
+		width: var(--book-cover-width);
+		height: var(
+			--book-cover-height,
+			calc(var(--book-cover-width) / (var(--book-cover-aspect-ratio)))
+		);
+
+		img {
+			border-radius: var(--radius-l);
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+			object-position: center;
+		}
 	}
 </style>

src/ui/components/BookshelfView.svelte

@@ -12,10 +12,7 @@
 	import { v4 as uuidv4 } from "uuid";
 	import memoize from "just-memoize";
 	import type { TFile } from "obsidian";
-
-	interface Props {
-		plugin: BookTrackerPlugin;
-	}
+	import { getAppContext } from "@ui/stores/app";
 
 	interface BookData {
 		id: string;
@@ -34,7 +31,7 @@
 		books: BookData[];
 	}
 
-	const { plugin }: Props = $props();
+	const app = getAppContext();
 
 	const metadataStore = getMetadataContext();
 
@@ -128,7 +125,7 @@
 						design={bookData.design}
 						orientation="flat"
 						onClick={() =>
-							plugin.app.workspace
+							app.workspace
 								.getLeaf(false)
 								.openFile(bookData.file)}
 					/>
@@ -143,8 +140,7 @@
 				color={book.color}
 				design={book.design}
 				orientation={book.orientation}
-				onClick={() =>
-					plugin.app.workspace.getLeaf(false).openFile(book.file)}
+				onClick={() => app.workspace.getLeaf(false).openFile(book.file)}
 			/>
 		{/if}
 	{/each}

src/ui/components/DetailsView.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
 	import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
-	import type BookTrackerPlugin from "@src/main";
 	import { getMetadataContext } from "@ui/stores/metadata.svelte";
 	import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
 	import { Dot, Flame, Star, StarHalf } from "lucide-svelte";
 	import RatingInput from "./RatingInput.svelte";
 	import OpenFileLink from "./OpenFileLink.svelte";
 	import BookCover from "./BookCover.svelte";
+	import { getReadingLogContext } from "@ui/stores/reading-log.svelte";
 
 	interface Props {
-		plugin: BookTrackerPlugin;
 		settings: ShelfSettings;
 	}
 
-	const { plugin, settings }: Props = $props();
+	const { settings }: Props = $props();
 
 	const metadataStore = getMetadataContext();
+	const readingLog = getReadingLogContext();
 </script>
 
 <div class="book-details-list">
 	{#each metadataStore.metadata as meta}
 		<div class="book-details">
-			<BookCover app={plugin.app} book={meta.book} />
+			<BookCover book={meta.book} />
 			<div class="book-info">
 				<OpenFileLink file={meta.file}>
 					<h2 class="book-title">
@@ -59,11 +59,18 @@
 						</p>
 					{/if}
 					{#if settings.statusFilter === STATUS_IN_PROGRESS}
+						{@const logEntryIndex =
+							readingLog.entries.findLastIndex(
+								(e) => e.book === meta.file.basename,
+							)}
+						{@const logEntry =
+							logEntryIndex !== -1
+								? readingLog.entries[logEntryIndex]
+								: null}
+
 						<Dot color="var(--text-muted)" />
 						<p class="current-page">
-							Current Page: {plugin.readingLog.getLastEntryForBook(
-								meta.file.basename,
-							)?.pagesReadTotal ?? 0}
+							Current Page: {logEntry?.pagesReadTotal ?? 0}
 						</p>
 					{/if}
 					{#if settings.statusFilter === STATUS_READ}
@@ -144,16 +151,20 @@
 			background-color: var(--background-secondary);
 			border-radius: var(--radius-l);
 
-			:global(img) {
-				border-radius: var(--radius-l);
+			:global(.book-cover) {
+				width: 100%;
+				height: auto;
+				max-height: 100%;
 				max-width: 30%;
 			}
 
-			@container (width < 600px) {
+			@container (width < 700px) {
 				flex-direction: column;
 				align-items: center;
 
-				:global(img) {
+				:global(.book-cover) {
+					height: 100%;
+					width: auto;
 					max-height: 30rem;
 					max-width: 100%;
 				}

src/ui/components/TableView.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
-	import type BookTrackerPlugin from "@src/main";
 	import { getMetadataContext } from "@ui/stores/metadata.svelte";
 	import Rating from "@ui/components/Rating.svelte";
 	import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
@@ -8,11 +7,10 @@
 	import BookCover from "./BookCover.svelte";
 
 	interface Props {
-		plugin: BookTrackerPlugin;
 		settings: ShelfSettings;
 	}
 
-	const { plugin, settings }: Props = $props();
+	const { settings }: Props = $props();
 
 	const metadataStore = getMetadataContext();
 </script>
@@ -38,7 +36,7 @@
 		{#each metadataStore.metadata as meta}
 			<tr>
 				<td class="cover">
-					<BookCover app={plugin.app} book={meta.book} size={50} />
+					<BookCover book={meta.book} size={50} />
 				</td>
 				<td>
 					<OpenFileLink file={meta.file}>
@@ -96,6 +94,10 @@
 			&.cover {
 				padding: 0;
 				margin: 0;
+
+				:global(.book-cover) {
+					margin: 0 auto;
+				}
 			}
 		}
 	}

src/ui/components/setting/FileSuggestItem.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import type { App, TFile } from "obsidian";
 	import FileSuggest from "../suggesters/FileSuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
-		app: App;
 		id: string;
 		value?: string;
 	};
 
-	let { name, description, app, id, value = $bindable() }: Props = $props();
+	let { name, description, id, value = $bindable() }: Props = $props();
 </script>
 
 <Item {name} {description}>
 	{#snippet control()}
-		<FileSuggest {id} {app} asString bind:value />
+		<FileSuggest {id} asString bind:value />
 	{/snippet}
 </Item>

src/ui/components/setting/FolderSuggestItem.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import type { App, TFolder } from "obsidian";
 	import FolderSuggest from "../suggesters/FolderSuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
-		app: App;
 		id: string;
 		value?: string;
 	};
 
-	let { name, description, app, id, value = $bindable() }: Props = $props();
+	let { name, description, id, value = $bindable() }: Props = $props();
 </script>
 
 <Item {name} {description}>
 	{#snippet control()}
-		<FolderSuggest {id} {app} asString bind:value />
+		<FolderSuggest {id} asString bind:value />
 	{/snippet}
 </Item>

src/ui/components/setting/PropertySuggestItem.svelte

@@ -1,18 +1,15 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import type { App } from "obsidian";
 	import PropertySuggest from "../suggesters/PropertySuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
-		app: App;
 		id: string;
 		value?: string;
 		accepts?: string[];
 	};
 
 	let {
-		app,
 		name,
 		description,
 		id,
@@ -23,6 +20,6 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<PropertySuggest {app} {id} asString bind:value {accepts} />
+		<PropertySuggest {id} asString bind:value {accepts} />
 	{/snippet}
 </Item>

src/ui/components/suggesters/FileSuggest.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { App, TFile } from "obsidian";
+	import type { TFile } from "obsidian";
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
 	import type { StringKeys } from "@utils/types";
+	import { getAppContext } from "@ui/stores/app";
 
 	type Props = {
-		app: App;
 		id: string;
 		asString?: boolean;
 		property?: StringKeys<TFile>;
@@ -15,7 +15,6 @@
 	};
 
 	let {
-		app,
 		id,
 		asString,
 		property = "path",
@@ -24,6 +23,7 @@
 		disabled,
 		onSelected,
 	}: Props = $props();
+	const app = getAppContext();
 
 	let items: Item<TFile | string>[] = $state([]);
 

src/ui/components/suggesters/FolderSuggest.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { TFolder, type App } from "obsidian";
+	import { TFolder } from "obsidian";
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
 	import type { StringKeys } from "@utils/types";
+	import { getAppContext } from "@ui/stores/app";
 
 	type Props = {
-		app: App;
 		id: string;
 		asString?: boolean;
 		property?: StringKeys<TFolder>;
@@ -15,7 +15,6 @@
 	};
 
 	let {
-		app,
 		id,
 		asString,
 		property = "path",
@@ -24,6 +23,7 @@
 		disabled,
 		onSelected,
 	}: Props = $props();
+	const app = getAppContext();
 
 	let items: Item<TFolder | string>[] = $state([]);
 

src/ui/components/suggesters/PropertySuggest.svelte

@@ -6,11 +6,11 @@
 </script>
 
 <script lang="ts">
-	import type { App } from "obsidian";
+	import { getAppContext } from "@ui/stores/app";
+
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
 
 	type Props = {
-		app: App;
 		id: string;
 		asString?: boolean;
 		value?: Property | string;
@@ -20,7 +20,6 @@
 	};
 
 	let {
-		app,
 		id,
 		asString,
 		value = $bindable(),
@@ -28,6 +27,7 @@
 		disabled,
 		onSelected,
 	}: Props = $props();
+	const app = getAppContext();
 
 	let items: Item<Property | string>[] = $state([]);
 

src/ui/modals/GoodreadsSearchModal.ts

@@ -11,7 +11,7 @@ export class GoodreadsSearchModal extends SvelteModal<
 		goodreads: Goodreads,
 		onSearch: (error: any, results: SearchResult[]) => void = () => {}
 	) {
-		super(app, GoodreadsSearchModalView, { goodreads, onSearch });
+		super(app, GoodreadsSearchModalView, { app, goodreads, onSearch });
 	}
 
 	static createAndOpen(

src/ui/modals/GoodreadsSearchModalView.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import { Goodreads, type SearchResult } from "@data-sources/Goodreads";
+	import { setAppContext } from "@ui/stores/app";
+	import type { App } from "obsidian";
 
 	interface Props {
+		app: App;
 		goodreads: Goodreads;
 		onSearch: (error: any, results?: SearchResult[]) => void;
 	}
 
-	let { goodreads, onSearch }: Props = $props();
+	let { app, goodreads, onSearch }: Props = $props();
+	setAppContext(app);
 
 	let query = $state("");
 

src/ui/modals/GoodreadsSearchSuggestModal.ts

@@ -19,7 +19,7 @@ export class GoodreadsSearchSuggestModal extends SuggestModal<SearchResult> {
 	renderSuggestion(searchResult: SearchResult, el: HTMLElement): void {
 		mount(GoodreadsSearchSuggestion, {
 			target: el,
-			props: { searchResult },
+			props: { app: this.app, searchResult },
 		});
 	}
 

src/ui/modals/GoodreadsSearchSuggestion.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
 	import type { SearchResult } from "@data-sources/Goodreads";
+	import { setAppContext } from "@ui/stores/app";
+	import type { App } from "obsidian";
 
 	interface Props {
+		app: App;
 		searchResult: SearchResult;
 	}
 
-	let { searchResult }: Props = $props();
+	let { app, searchResult }: Props = $props();
+	setAppContext(app);
 </script>
 
 <div class="obt-goodreads-search-suggestion">

src/ui/modals/RatingModal.ts

@@ -8,7 +8,7 @@ export class RatingModal extends SvelteModal<typeof RatingModalView> {
 		spiceConfigured: boolean,
 		onSubmit: (rating: number, spice: number) => void = () => {}
 	) {
-		super(app, RatingModalView, { spiceConfigured, onSubmit });
+		super(app, RatingModalView, { app, spiceConfigured, onSubmit });
 	}
 
 	static createAndOpen(

src/ui/modals/RatingModalView.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import RatingInput from "@ui/components/RatingInput.svelte";
+	import { setAppContext } from "@ui/stores/app";
 	import { Flame } from "lucide-svelte";
+	import type { App } from "obsidian";
 
 	interface Props {
+		app: App;
 		spiceConfigured?: boolean;
 		onSubmit: (rating: number, spice: number) => void;
 	}
-	let { spiceConfigured = false, onSubmit }: Props = $props();
+	let { app, spiceConfigured = false, onSubmit }: Props = $props();
+	setAppContext(app);
 
 	let rating = $state(0);
 	let spice = $state(0);

src/ui/modals/ReadingLogEntryEditModalView.svelte

@@ -10,6 +10,7 @@
 		setSettingsContext,
 	} from "@ui/stores/settings.svelte";
 	import moment from "@external/moment";
+	import { setAppContext } from "@ui/stores/app";
 
 	const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
 
@@ -20,6 +21,7 @@
 	}
 
 	let { plugin, entry, onSubmit }: Props = $props();
+	setAppContext(plugin.app);
 
 	const settingsStore = createSettings(plugin);
 	setSettingsContext(settingsStore);
@@ -80,7 +82,6 @@
 			<label for="book">Book</label>
 			<FileSuggest
 				id="book"
-				app={plugin.app}
 				asString
 				property="basename"
 				inFolder={plugin.settings.bookFolder}

src/ui/modals/ReadingProgressModal.ts

@@ -10,7 +10,7 @@ export class ReadingProgressModal extends SvelteModal<
 		pageCount: number,
 		onSubmit: (pageNumber: number) => void = () => {}
 	) {
-		super(app, ReadingProgressModalView, { pageCount, onSubmit });
+		super(app, ReadingProgressModalView, { app, pageCount, onSubmit });
 	}
 
 	static createAndOpen(app: App, pageCount: number): Promise<number> {

src/ui/modals/ReadingProgressModalView.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import { Notice } from "obsidian";
+	import { setAppContext } from "@ui/stores/app";
+	import { App, Notice } from "obsidian";
 
 	interface Props {
+		app: App;
 		pageCount: number;
 		onSubmit: (pageNumber: number) => void;
 	}
-	let { pageCount, onSubmit }: Props = $props();
+	let { app, pageCount, onSubmit }: Props = $props();
+	setAppContext(app);
 
 	let value = $state(0);
 	let mode: "page-number" | "percentage" = $state("page-number");

src/ui/settings/BookTrackerSettingTabView.svelte

@@ -9,13 +9,14 @@
 	import { createSettings } from "@ui/stores/settings.svelte";
 	import { onMount } from "svelte";
 	import type { BookTrackerSettings } from "./types";
+	import { setAppContext } from "@ui/stores/app";
 
 	type Props = {
 		plugin: BookTrackerPlugin;
 	};
 
 	const { plugin }: Props = $props();
-	const { app } = plugin;
+	setAppContext(plugin.app);
 
 	const settingsStore = createSettings(plugin);
 
@@ -168,21 +169,18 @@
 <div class="obt-settings">
 	<Header title="Folders" />
 	<FolderSuggestItem
-		{app}
 		id="book-folder"
 		name="Book Folder"
 		description="Select the folder where book entries are stored."
 		bind:value={settingsStore.settings.bookFolder}
 	/>
 	<FolderSuggestItem
-		{app}
 		id="tbr-folder"
 		name="To Be Read Folder"
 		description="Select the folder to use for To Be Read entries"
 		bind:value={settingsStore.settings.tbrFolder}
 	/>
 	<FolderSuggestItem
-		{app}
 		id="read-folder"
 		name="Read Books Folder"
 		description="Select the folder to use for Read entries."
@@ -196,7 +194,6 @@
 	/>
 	<Header title="Book Creation" />
 	<FileSuggestItem
-		{app}
 		id="template-file"
 		name="Template File"
 		description="Select the template file to use for new book entries."
@@ -218,7 +215,6 @@
 		bind:checked={settingsStore.settings.downloadCovers}
 	/>
 	<FolderSuggestItem
-		{app}
 		id="cover-folder"
 		name="Cover Folder"
 		description="Select the folder to download covers to."
@@ -240,7 +236,6 @@
 	<Header title="Book Properties" />
 	{#each properties as property}
 		<PropertySuggestItem
-			{app}
 			id={property.key}
 			name={`${property.label} Property`}
 			description={property.description}

src/ui/stores/date-filter.svelte.ts

@@ -32,6 +32,13 @@ export interface DateFilterStoreOptions {
 	 * @default false
 	 */
 	disableMonthFilter?: boolean;
+
+	/**
+	 * If true, the year filter will be disabled
+	 *
+	 * @default false
+	 */
+	disableAllFiltering?: boolean;
 }
 
 export function createDateFilter<T>(
@@ -41,6 +48,7 @@ export function createDateFilter<T>(
 		initialMonth = false,
 		initialYear = true,
 		disableMonthFilter = false,
+		disableAllFiltering = false,
 	}: DateFilterStoreOptions
 ): DateFilterStore & {
 	filteredData: T[];
@@ -64,7 +72,7 @@ export function createDateFilter<T>(
 		return data()
 			.filter((item) => {
 				const date = selector(item);
-				if (filterYear !== ALL_TIME) {
+				if (filterYear !== ALL_TIME && !disableAllFiltering) {
 					if (date.year() !== filterYear) {
 						return false;
 					}