obsidian-book-tracker/src/ui/settings/BookTrackerSettingTabView.svelte

<script lang="ts">
	import Header from "@ui/components/setting/Header.svelte";
	import FileSuggestItem from "@ui/components/setting/FileSuggestItem.svelte";
	import FolderSuggestItem from "@ui/components/setting/FolderSuggestItem.svelte";
	import TextInputItem from "@ui/components/setting/TextInputItem.svelte";
	import PropertySuggestItem from "@ui/components/setting/PropertySuggestItem.svelte";
	import ToggleItem from "@ui/components/setting/ToggleItem.svelte";
	import type BookTrackerPlugin from "@src/main";
	import { createSettings } from "@ui/stores/settings.svelte";
	import { onDestroy, onMount } from "svelte";
	import type { BookTrackerSettings } from "./types";
	import { setAppContext } from "@ui/stores/app";

	type Props = {
		plugin: BookTrackerPlugin;
	};

	const { plugin }: Props = $props();
	setAppContext(plugin.app);

	const settingsStore = createSettings(plugin);

	onMount(async () => settingsStore.load());

	interface Property {
		label: string;
		description: string;
		key: keyof BookTrackerSettings;
		type: "text" | "multitext" | "number" | "date";
	}

	const properties: Property[] = [
		{
			label: "Title",
			description: "The property which contains the book's title.",
			key: "titleProperty",
			type: "text",
		},
		{
			label: "Subtitle",
			description: "The property which contains the book's subtitle.",
			key: "subtitleProperty",
			type: "text",
		},
		{
			label: "Description",
			description:
				"The property which contains the description/blurb of the book.",
			key: "descriptionProperty",
			type: "text",
		},
		{
			label: "Authors",
			description:
				"The property which contains the list of the book's author names.",
			key: "authorsProperty",
			type: "multitext",
		},
		{
			label: "Series Title",
			description:
				"The property which contains the title of the series the book belongs to.",
			key: "seriesTitleProperty",
			type: "text",
		},
		{
			label: "Series Position",
			description:
				"The property which contains the position of the book in the series.",
			key: "seriesPositionProperty",
			type: "number",
		},
		{
			label: "Start Date",
			description:
				"The property where the book's start date will be stored.",
			key: "startDateProperty",
			type: "date",
		},
		{
			label: "End Date",
			description:
				"The property where the book's end date will be stored.",
			key: "endDateProperty",
			type: "date",
		},
		{
			label: "Status",
			description:
				"The property which contains the book's reading status.",
			key: "statusProperty",
			type: "text",
		},
		{
			label: "Rating",
			description:
				"The property where your rating of the book will be stored.",
			key: "ratingProperty",
			type: "number",
		},
		{
			label: "Spice",
			description: `The property where your spice rating of the book will be stored.
			Set to empty to if you're not interested in this feature.`,
			key: "spiceProperty",
			type: "number",
		},
		{
			label: "Format",
			description: `The property which contains the book's format.
			(e.g. E-Book, Audiobook, Physical, etc.)`,
			key: "formatProperty",
			type: "text",
		},
		{
			label: "Source",
			description: `The property which contains the where you obtained the book.
			(e.g. Amazon, Library, Bookstore, etc.)`,
			key: "sourceProperty",
			type: "multitext",
		},
		{
			label: "Categories",
			description: "The property which contains the book's categories.",
			key: "categoriesProperty",
			type: "multitext",
		},
		{
			label: "Publisher",
			description: "The property which contains the book's publisher.",
			key: "publisherProperty",
			type: "text",
		},
		{
			label: "Publish Date",
			description: "The property which contains the book's publish date.",
			key: "publishDateProperty",
			type: "date",
		},
		{
			label: "Page Count",
			description: "The property which contains the book's page count.",
			key: "pageCountProperty",
			type: "number",
		},
		{
			label: "ISBN",
			description: "The property which contains the book's ISBN.",
			key: "isbnProperty",
			type: "text",
		},
		{
			label: "Cover Image URL",
			description:
				"The property which contains the book's cover image URL.",
			key: "coverImageUrlProperty",
			type: "text",
		},
		{
			label: "Local Cover Path",
			description:
				"The property which contains the book's local cover path.",
			key: "localCoverPathProperty",
			type: "text",
		},
	];

	onDestroy(() => settingsStore.destroy());
</script>

<div class="obt-settings">
	<Header title="Folders" />
	<FolderSuggestItem
		id="tbr-folder"
		name="To Be Read Folder"
		description="The folder to use for To Be Read or Currently Reading book entries."
		bind:value={settingsStore.settings.tbrFolder}
	/>
	<FolderSuggestItem
		id="read-folder"
		name="Read Books Folder"
		description="The folder to use for Read book 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."
		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."
		bind:value={settingsStore.settings.templateFile}
	/>
	<TextInputItem
		id="file-name-format"
		name="File name Format"
		description={`Format for the file name of new book entries.
		Use {{title}} and {{authors}} as placeholders.`}
		bind:value={settingsStore.settings.fileNameFormat}
	/>

	<Header title="Cover Downloading" />
	<ToggleItem
		id="download-covers"
		name="Download Covers"
		description="Automatically download book covers when creating new entries."
		bind:checked={settingsStore.settings.downloadCovers}
	/>
	<FolderSuggestItem
		id="cover-folder"
		name="Cover Folder"
		description="Select the folder to download covers to."
		bind:value={settingsStore.settings.coverFolder}
	/>
	<ToggleItem
		id="group-covers"
		name="Group Covers by First Letter"
		description="Organize downloaded book covers into folders based on the first letter of the book title."
		bind:checked={settingsStore.settings.groupCoversByFirstLetter}
	/>
	<ToggleItem
		id="overwrite-covers"
		name="Overwrite Existing Covers"
		description="Overwrite existing covers when downloading new ones."
		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
			id={property.key}
			name={`${property.label} Property`}
			description={property.description}
			bind:value={settingsStore.settings[property.key] as string}
			accepts={[property.type]}
		/>
	{/each}
</div>