Fix file links

src/ui/code-blocks/ReadingLogCodeBlockView.svelte

@@ -6,17 +6,15 @@
 	import { createReadingLog } from "@ui/stores/reading-log.svelte";
 	import { ALL_TIME } from "@ui/stores/date-filter.svelte";
 	import { onDestroy } from "svelte";
-	import { getLinkpath } from "obsidian";
+	import OpenFileLink from "@ui/components/OpenFileLink.svelte";
+	import { setAppContext } from "@ui/stores/app";
 
 	interface Props {
 		plugin: BookTrackerPlugin;
 	}
 
 	const { plugin }: Props = $props();
-
+	setAppContext(plugin.app);
-	function bookUri(book: string) {
-		return getLinkpath(book + ".md");
-	}
 
 	const store = createReadingLog(plugin.readingLog);
 	onDestroy(() => store.destroy());
@@ -95,9 +93,11 @@
 			{#each store.entries as entry}
 				<tr>
 					<td class="date">{entry.createdAt.format("YYYY-MM-DD")}</td>
-					<td class="book"
+					<td class="book">
-						><a href={bookUri(entry.book)}>{entry.book}</a></td
+						<OpenFileLink file={entry.book + ".md"}>
-					>
+							{entry.book}
+						</OpenFileLink>
+					</td>
 					<td class="pages-read">{entry.pagesRead}</td>
 					<td class="percent-complete">
 						{Math.round(

src/ui/code-blocks/ReadingStatsCodeBlockView.svelte

@@ -27,6 +27,7 @@
 		createReadingLog,
 		setReadingLogContext,
 	} from "@ui/stores/reading-log.svelte";
+	import { setAppContext } from "@ui/stores/app";
 
 	interface Props {
 		plugin: BookTrackerPlugin;
@@ -34,6 +35,7 @@
 	}
 
 	const { plugin, source }: Props = $props();
+	setAppContext(plugin.app);
 
 	const settingsStore = createSettings(plugin);
 	setSettingsContext(settingsStore);

src/ui/code-blocks/ShelfCodeBlockView.svelte

@@ -16,10 +16,7 @@
 	import BookshelfView from "@ui/components/BookshelfView.svelte";
 	import TableView from "@ui/components/TableView.svelte";
 	import DetailsView from "@ui/components/DetailsView.svelte";
-	import {
+	import { setAppContext } from "@ui/stores/app";
-		createReadingLog,
-		setReadingLogContext,
-	} from "@ui/stores/reading-log.svelte";
 
 	interface Props {
 		plugin: BookTrackerPlugin;
@@ -27,6 +24,7 @@
 	}
 
 	const { plugin, source }: Props = $props();
+	setAppContext(plugin.app);
 
 	const settings = ShelfSettingsSchema.parse(parseYaml(source));
 

src/ui/components/DetailsView.svelte

@@ -7,6 +7,7 @@
 	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";
 
 	interface Props {
 		plugin: BookTrackerPlugin;
@@ -53,11 +54,11 @@
 				alt={title}
 			/>
 			<div class="book-info">
-				<a href={getLinkpath(book.file.path)}>
+				<OpenFileLink file={book.file}>
 					<h2 class="book-title">
 						{title}
 					</h2>
-				</a>
+				</OpenFileLink>
 				{#if subtitle}
 					<p class="subtitle">{subtitle}</p>
 				{/if}

src/ui/components/OpenFileLink.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getLinkpath, TFile } from "obsidian";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		children?: Snippet;
+		file: TFile | string;
+	}
+
+	let { children, file }: Props = $props();
+
+	function makeUri(path: string) {
+		return `obsidian://open?file=${encodeURIComponent(path)}`;
+	}
+
+	const href = $derived(
+		makeUri(file instanceof TFile ? file.path : getLinkpath(file)),
+	);
+</script>
+
+<a {href}>
+	{@render children?.()}
+</a>

src/ui/components/TableView.svelte

@@ -6,6 +6,7 @@
 	import { getLinkpath } from "obsidian";
 	import Rating from "@ui/components/Rating.svelte";
 	import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
+	import OpenFileLink from "./OpenFileLink.svelte";
 
 	interface Props {
 		plugin: BookTrackerPlugin;
@@ -70,9 +71,9 @@
 					/>
 				</td>
 				<td>
-					<a href={getLinkpath(book.file.path)}>
+					<OpenFileLink file={book.file}>
 						{title}
-					</a>
+					</OpenFileLink>
 				</td>
 				<td>
 					{authors.join(", ")}

src/ui/stores/app.ts

@@ -0,0 +1,12 @@
+import type { App } from "obsidian";
+import { getContext, setContext } from "svelte";
+
+const APP_KEY = Symbol("app");
+
+export function setAppContext(app: App) {
+	setContext(APP_KEY, app);
+}
+
+export function getAppContext(): App {
+	return getContext(APP_KEY);
+}