Add props to FileSuggest to deduplicate code used in BookSuggest

src/ui/components/suggesters/BookSuggest.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { App, TFile } from "obsidian";
-	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
-
-	type Props = {
-		app: App;
-		id: string;
-		asString?: boolean;
-		value?: TFile | string;
-		bookFolder?: string;
-		onSelected?: (fileOrPath: TFile | string) => void;
-	};
-
-	let {
-		app,
-		id,
-		asString,
-		value = $bindable(),
-		bookFolder,
-		onSelected,
-	}: Props = $props();
-
-	let items: Item<TFile | string>[] = $state([]);
-
-	function handleChange(query: string) {
-		items = app.vault
-			.getMarkdownFiles()
-			.filter(
-				(f) =>
-					(bookFolder === undefined ||
-						f.path.startsWith(bookFolder)) &&
-					f.basename.toLowerCase().includes(query.toLowerCase()),
-			)
-			.map((f) => ({
-				text: f.basename,
-				value: asString ? f.basename : f,
-			}));
-	}
-</script>
-
-<TextInputSuggest
-	{app}
-	{id}
-	{items}
-	bind:value
-	onChange={handleChange}
-	{onSelected}
-/>

src/ui/components/suggesters/FileSuggest.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import type { App, TFile } from "obsidian";
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
+	import type { StringKeys } from "@utils/types";
 
 	type Props = {
 		app: App;
 		id: string;
 		asString?: boolean;
+		property?: StringKeys<TFile>;
+		inFolder?: string;
 		value?: TFile | string;
 		onSelected?: (fileOrPath: TFile | string) => void;
 	};
@@ -14,6 +17,8 @@
 		app,
 		id,
 		asString,
+		property = "path",
+		inFolder,
 		value = $bindable(),
 		onSelected,
 	}: Props = $props();
@@ -23,8 +28,15 @@
 	function handleChange(query: string) {
 		items = app.vault
 			.getMarkdownFiles()
-			.filter((f) => f.path.toLowerCase().includes(query.toLowerCase()))
+			.filter(
-			.map((f) => ({ text: f.path, value: asString ? f.path : f }));
+				(f) =>
+					(inFolder === undefined || f.path.startsWith(inFolder)) &&
+					f[property].toLowerCase().includes(query.toLowerCase()),
+			)
+			.map((f) => ({
+				text: f[property],
+				value: asString ? f[property] : f,
+			}));
 	}
 </script>
 

src/ui/components/suggesters/FolderSuggest.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { TFolder, type App } from "obsidian";
 	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
+	import type { StringKeys } from "@utils/types";
 
 	type Props = {
 		app: App;
 		id: string;
 		asString?: boolean;
+		property?: StringKeys<TFolder>;
+		inFolder?: string;
 		value?: TFolder | string;
 		onSelected?: (folderOrPath: TFolder | string) => void;
 	};
@@ -14,6 +17,8 @@
 		app,
 		id,
 		asString,
+		property = "path",
+		inFolder,
 		value = $bindable(),
 		onSelected,
 	}: Props = $props();
@@ -23,8 +28,15 @@
 	function handleChange(query: string) {
 		items = app.vault
 			.getAllFolders()
-			.filter((f) => f.path.toLowerCase().includes(query.toLowerCase()))
+			.filter(
-			.map((f) => ({ text: f.path, value: asString ? f.path : f }));
+				(f) =>
+					(inFolder === undefined || f.path.startsWith(inFolder)) &&
+					f[property].toLowerCase().includes(query.toLowerCase()),
+			)
+			.map((f) => ({
+				text: f[property],
+				value: asString ? f[property] : f,
+			}));
 	}
 </script>
 

src/ui/modals/ReadingLogEntryEditModalView.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type BookTrackerPlugin from "@src/main";
 	import type { ReadingLogEntry } from "@src/types";
-	import BookSuggest from "@ui/components/suggesters/BookSuggest.svelte";
+	import FileSuggest from "@ui/components/suggesters/FileSuggest.svelte";
+
 	interface Props {
 		plugin: BookTrackerPlugin;
 		entry?: ReadingLogEntry;
@@ -61,10 +62,12 @@
 	<form {onsubmit}>
 		<div class="fields">
 			<label for="book">Book</label>
-			<BookSuggest
+			<FileSuggest
 				id="book"
 				app={plugin.app}
-				bookFolder={plugin.settings.bookFolder}
+				asString
+				property="basename"
+				inFolder={plugin.settings.bookFolder}
 				bind:value={book}
 			/>
 			<label for="pagesRead">Pages Read</label>

src/utils/types.ts

@@ -0,0 +1,3 @@
+export type StringKeys<T> = {
+	[K in keyof T]: T[K] extends string ? K : never;
+}[keyof T];