manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-book-tracker",
 	"name": "Book Tracker",
-	"version": "1.7.1",
+	"version": "1.6.1",
 	"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.7.1",
+	"version": "1.6.1",
 	"description": "Simplifies tracking your reading progress and managing your book collection in Obsidian.",
 	"main": "main.js",
 	"scripts": {

src/ui/components/form/TextControl.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	interface Props {
-		id?: string;
-		name?: string;
-		value?: string;
-	}
-
-	let { id, name, value = $bindable() }: Props = $props();
-</script>
-
-<input {id} {name} type="text" bind:value />

src/ui/components/form/ToggleControl.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	interface Props {
-		id?: string;
-		name?: string;
-		checked?: boolean;
-	}
-
-	let { id, name, checked = $bindable() }: Props = $props();
-</script>
-
-<div
-	class="checkbox-container"
-	class:is-enabled={checked}
-	onclick={() => (checked = !checked)}
-	onkeypress={(e) => e.key === "Space" && (checked = !checked)}
-	role="switch"
-	aria-checked={checked}
-	tabindex="0"
->
-	<input {id} {name} type="checkbox" bind:checked tabindex="0" />
-</div>

src/ui/components/setting/FileSuggestItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import FileSuggest from "../form/suggesters/FileSuggest.svelte";
+	import FileSuggest from "../suggesters/FileSuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
 		id: string;
@@ -13,6 +13,6 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<FileSuggest {id} bind:value />
+		<FileSuggest {id} asString bind:value />
 	{/snippet}
 </Item>

src/ui/components/setting/FolderSuggestItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import FolderSuggest from "../form/suggesters/FolderSuggest.svelte";
+	import FolderSuggest from "../suggesters/FolderSuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
 		id: string;
@@ -13,6 +13,6 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<FolderSuggest {id} bind:value />
+		<FolderSuggest {id} asString bind:value />
 	{/snippet}
 </Item>

src/ui/components/setting/PropertySuggestItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import PropertySuggest from "../form/suggesters/PropertySuggest.svelte";
+	import PropertySuggest from "../suggesters/PropertySuggest.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
 		id: string;
@@ -20,6 +20,6 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<PropertySuggest {id} bind:value {accepts} />
+		<PropertySuggest {id} asString bind:value {accepts} />
 	{/snippet}
 </Item>

src/ui/components/setting/TextInputItem.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import TextControl from "../form/TextControl.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
 		id?: string;
@@ -13,6 +12,6 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<TextControl {id} bind:value />
+		<input {id} type="text" bind:value />
 	{/snippet}
 </Item>

src/ui/components/setting/ToggleItem.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import Item from "./Item.svelte";
-	import ToggleControl from "../form/ToggleControl.svelte";
 
 	type Props = Omit<ComponentProps<typeof Item>, "control"> & {
 		id?: string;
@@ -13,6 +12,15 @@
 
 <Item {name} {description}>
 	{#snippet control()}
-		<ToggleControl {id} bind:checked />
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- input only covers part of the toggle element. onclick here covers the rest -->
+		<div
+			class="checkbox-container"
+			class:is-enabled={checked}
+			onclick={() => (checked = !checked)}
+		>
+			<input {id} type="checkbox" bind:checked tabindex="0" />
+		</div>
 	{/snippet}
 </Item>

src/ui/components/suggesters/FileSuggest.svelte

@@ -3,39 +3,42 @@
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
 	import type { StringKeys } from "@utils/types";
 	import { getAppContext } from "@ui/stores/app";
-	import { isInAnyFolder } from "@utils/fs";
 
 	type Props = {
 		id: string;
+		asString?: boolean;
 		property?: StringKeys<TFile>;
-		folderFilter?: string[];
-		value?: string;
+		inFolder?: string;
+		value?: TFile | string;
 		disabled?: boolean;
-		onSelected?: (propertyValue: string) => void;
+		onSelected?: (fileOrPath: TFile | string) => void;
 	};
 
 	let {
 		id,
+		asString,
 		property = "path",
-		folderFilter,
+		inFolder,
 		value = $bindable(),
 		disabled,
 		onSelected,
 	}: Props = $props();
 	const app = getAppContext();
 
-	let items: Item<string>[] = $state([]);
+	let items: Item<TFile | string>[] = $state([]);
 
 	function handleChange(query: string) {
 		items = app.vault
 			.getMarkdownFiles()
 			.filter(
 				(f) =>
-					(folderFilter === undefined ||
-						isInAnyFolder(f, folderFilter)) &&
+					(inFolder === undefined || f.path.startsWith(inFolder)) &&
 					f[property].toLowerCase().includes(query.toLowerCase()),
 			)
-			.map((f) => f[property]);
+			.map((f) => ({
+				text: f[property],
+				value: asString ? f[property] : f,
+			}));
 	}
 </script>
 

src/ui/components/suggesters/FolderSuggest.svelte

@@ -3,21 +3,22 @@
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
 	import type { StringKeys } from "@utils/types";
 	import { getAppContext } from "@ui/stores/app";
-	import { isInAnyFolder } from "@utils/fs";
 
 	type Props = {
 		id: string;
+		asString?: boolean;
 		property?: StringKeys<TFolder>;
-		folderFilter?: string[];
-		value?: string;
+		inFolder?: string;
+		value?: TFolder | string;
 		disabled?: boolean;
-		onSelected?: (propertyValue: string) => void;
+		onSelected?: (folderOrPath: TFolder | string) => void;
 	};
 
 	let {
 		id,
+		asString,
 		property = "path",
-		folderFilter,
+		inFolder,
 		value = $bindable(),
 		disabled,
 		onSelected,
@@ -31,11 +32,13 @@
 			.getAllFolders()
 			.filter(
 				(f) =>
-					(folderFilter === undefined ||
-						isInAnyFolder(f, folderFilter)) &&
+					(inFolder === undefined || f.path.startsWith(inFolder)) &&
 					f[property].toLowerCase().includes(query.toLowerCase()),
 			)
-			.map((f) => f[property]);
+			.map((f) => ({
+				text: f[property],
+				value: asString ? f[property] : f,
+			}));
 	}
 </script>
 

src/ui/components/suggesters/PropertySuggest.svelte

@@ -12,14 +12,16 @@
 
 	type Props = {
 		id: string;
-		value?: string;
+		asString?: boolean;
+		value?: Property | string;
 		accepts?: string[];
 		disabled?: boolean;
-		onSelected?: (propertyName: string) => void;
+		onSelected?: (propertyOrName: Property | string) => void;
 	};
 
 	let {
 		id,
+		asString,
 		value = $bindable(),
 		accepts,
 		disabled,
@@ -27,7 +29,7 @@
 	}: Props = $props();
 	const app = getAppContext();
 
-	let items: Item<string>[] = $state([]);
+	let items: Item<Property | string>[] = $state([]);
 
 	async function handleChange(query: string) {
 		const typesContent = await app.vault.adapter.read(
@@ -43,7 +45,10 @@
 
 				return name.toLowerCase().includes(query.toLowerCase());
 			})
-			.map(([name, _]) => name);
+			.map(([name, type]) => ({
+				text: name,
+				value: asString ? name : { name, type },
+			}));
 	}
 </script>
 

src/ui/components/suggesters/TextInputSuggest.svelte

@@ -1,10 +1,8 @@
 <script lang="ts" module>
-	export type Item<T> =
-		| {
-				label: string;
-				value: T;
-		  }
-		| (T extends string ? T : never);
+	export type Item<T> = {
+		text: string;
+		value: T;
+	};
 </script>
 
 <script lang="ts">
@@ -28,7 +26,7 @@
 
 	let {
 		id,
-		items: itemsProp,
+		items,
 		value = $bindable(),
 		loading = false,
 		suggestion,
@@ -37,12 +35,6 @@
 		onSelected,
 	}: Props = $props();
 
-	const items = $derived(
-		itemsProp.map((item) =>
-			typeof item === "string" ? { label: item, value: item } : item,
-		),
-	);
-
 	let query = $state("");
 	let expanded = $state(false);
 	let selectedIndex = $state(0);
@@ -61,7 +53,7 @@
 			const idx = findIndex(value);
 			if (idx !== -1) {
 				const item = items[idx];
-				query = item.label;
+				query = item.text;
 				selectedIndex = idx;
 			}
 		});
@@ -107,7 +99,7 @@
 	async function selectItem(index: number) {
 		const item = items[index];
 		if (!item) return;
-		const { label: newQuery, value: newValue } = item;
+		const { text: newQuery, value: newValue } = item;
 		selectedIndex = index;
 		expanded = false;
 		query = newQuery;
@@ -203,7 +195,7 @@
 						{#if suggestion}
 							{@render suggestion(item)}
 						{:else}
-							{item.label}
+							{item.text}
 						{/if}
 					</li>
 				{/each}

src/ui/modals/ReadingLogEntryEditModalView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type BookTrackerPlugin from "@src/main";
 	import type { ReadingLogEntry } from "@utils/ReadingLog";
-	import FileSuggest from "@ui/components/form/suggesters/FileSuggest.svelte";
+	import FileSuggest from "@ui/components/suggesters/FileSuggest.svelte";
 	import { v4 as uuidv4 } from "uuid";
 	import { createPrevious } from "@ui/stores/previous.svelte";
 	import { createMetadata } from "@ui/stores/metadata.svelte";
@@ -16,7 +16,6 @@
 		setReadingLogContext,
 	} from "@ui/stores/reading-log.svelte";
 	import { onDestroy } from "svelte";
-	import ToggleControl from "@ui/components/form/ToggleControl.svelte";
 
 	const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
 
@@ -44,24 +43,13 @@
 	const bookMetadata = $derived(
 		metadataStore.metadata.find((m) => m.file.basename === book),
 	);
-	const previousEntry = $derived.by(() => {
-		const index = readingLogStore.entries.findIndex(
-			(e) => e.id === entry?.id,
-		);
+	const lastEntryIndex = $derived(
+		readingLogStore.entries.findLastIndex((e) => e.book === book),
+	);
+	const lastEntry = $derived(
+		lastEntryIndex !== -1 ? readingLogStore.entries[lastEntryIndex] : null,
+	);
 
-		let data = readingLogStore.entries;
-		if (index !== -1) {
-			data = data.slice(0, index);
-		}
-
-		const previousEntryIndex = data.findLastIndex((e) => e.book === book);
-
-		return previousEntryIndex !== -1
-			? readingLogStore.entries[previousEntryIndex]
-			: null;
-	});
-
-	let syncPageCounts = $state(true);
 	const pageCount = $derived(bookMetadata?.book.pageCount ?? 0);
 	let pagesRead = $state(entry?.pagesRead ?? 0);
 	const pagesReadPrev = createPrevious(() => pagesRead);
@@ -73,24 +61,20 @@
 	);
 
 	$effect(() => {
-		if (!syncPageCounts) return;
-		pagesReadTotal = (previousEntry?.pagesReadTotal ?? 0) + pagesRead;
+		pagesReadTotal = (lastEntry?.pagesReadTotal ?? 0) + pagesRead;
 	});
 
 	$effect(() => {
-		if (!syncPageCounts) return;
 		const diff = pagesRead - (pagesReadPrev.value ?? 0);
 		pagesRead = pagesRead;
 		pagesReadTotal = pagesReadTotal + diff;
 	});
 
 	$effect(() => {
-		if (!syncPageCounts) return;
 		pagesRemaining = pageCount - pagesReadTotal;
 	});
 
 	$effect(() => {
-		if (!syncPageCounts) return;
 		pagesReadTotal = Math.max(pagesReadTotal, pagesRead);
 	});
 
@@ -124,11 +108,9 @@
 			<label for="book">Book</label>
 			<FileSuggest
 				id="book"
+				asString
 				property="basename"
-				folderFilter={[
-					plugin.settings.tbrFolder,
-					plugin.settings.readBooksFolder,
-				]}
+				inFolder={plugin.settings.bookFolder}
 				bind:value={book}
 			/>
 			<label for="pagesRead">Pages Read</label>
@@ -154,12 +136,6 @@
 				id="pagesRemaining"
 				bind:value={pagesRemaining}
 			/>
-			<label for="syncPageCounts">Sync Page Counts</label>
-			<ToggleControl
-				name="syncPageCounts"
-				id="syncPageCounts"
-				bind:checked={syncPageCounts}
-			/>
 			<label for="createdAt">Created At</label>
 			<input
 				type="datetime-local"

src/ui/settings/BookTrackerSettingTabView.svelte

@@ -170,29 +170,35 @@
 
 <div class="obt-settings">
 	<Header title="Folders" />
+	<FolderSuggestItem
+		id="book-folder"
+		name="Book Folder"
+		description="Select the folder where book entries are stored."
+		bind:value={settingsStore.settings.bookFolder}
+	/>
 	<FolderSuggestItem
 		id="tbr-folder"
 		name="To Be Read Folder"
-		description="The folder to use for To Be Read or Currently Reading book entries."
+		description="Select the folder to use for To Be Read entries"
 		bind:value={settingsStore.settings.tbrFolder}
 	/>
 	<FolderSuggestItem
 		id="read-folder"
 		name="Read Books Folder"
-		description="The folder to use for Read book entries."
+		description="Select the folder to use for Read entries."
 		bind:value={settingsStore.settings.readBooksFolder}
 	/>
 	<ToggleItem
 		id="organize-read-books"
 		name="Organize Read Books"
-		description="Whether to automatically organize read books into folders, based on the date read, when finishing a book."
+		description="Organize read books into folders based on the date read."
 		bind:checked={settingsStore.settings.organizeReadBooks}
 	/>
 	<Header title="Book Creation" />
 	<FileSuggestItem
 		id="template-file"
 		name="Template File"
-		description="The template file to use when creating new book entries."
+		description="Select the template file to use for new book entries."
 		bind:value={settingsStore.settings.templateFile}
 	/>
 	<TextInputItem

src/ui/settings/types.ts

@@ -1,4 +1,5 @@
 export interface BookTrackerSettings {
+	bookFolder: string;
 	tbrFolder: string;
 	readBooksFolder: string;
 	organizeReadBooks: boolean;
@@ -33,6 +34,7 @@ export interface BookTrackerSettings {
 }
 
 export const DEFAULT_SETTINGS: BookTrackerSettings = {
+	bookFolder: "books",
 	tbrFolder: "books/tbr",
 	readBooksFolder: "books/read",
 	organizeReadBooks: true,

src/utils/fs.ts

@@ -1,4 +1,4 @@
-import { normalizePath, TAbstractFile, type Vault } from "obsidian";
+import { normalizePath, type Vault } from "obsidian";
 
 /**
  * A simple analog of Node.js's `path.join(...)`.
@@ -52,7 +52,3 @@ export async function mkdirRecursive(
 		await vault.adapter.mkdir(stack.pop()!);
 	}
 }
-
-export function isInAnyFolder(file: TAbstractFile, folders: string[]): boolean {
-	return folders.some((folder) => file.path.startsWith(folder));
-}

versions.json

@@ -10,7 +10,5 @@
 	"1.4.2": "0.15.0",
 	"1.5.0": "0.15.0",
 	"1.6.0": "0.15.0",
-	"1.6.1": "0.15.0",
-	"1.7.0": "0.15.0",
-	"1.7.1": "0.15.0"
+	"1.6.1": "0.15.0"
 }