Improve feed caching and UI accessibility (#124)

* feat: improve caching and ui accessibility

* fix: correct aria-pressed type in Icon component

Change pressedAttr from 'string | undefined' to 'true | false | undefined'
to match the expected type for the aria-pressed attribute.

* fix: update tests to match accessibility improvements

- Image.test.ts: add interactive={true} prop since Image now only renders as button when interactive
- TopBar.test.ts: replace tabindex checks with disabled attribute checks for semantic button elements
- TopBar.test.ts: update test name and use click instead of keyboard event (native buttons handle keyboard automatically)

* fix: restore static import of FeedParser for test compatibility

- Revert dynamic import back to static import to fix vitest mock
- Add feedCache settings to integration test mock for completeness
- Dynamic imports bypass vitest mocks, breaking integration tests

Author: chhoumann

src/constants.ts

@@ -70,4 +70,8 @@ export const DEFAULT_SETTINGS: IPodNotesSettings = {
 		template:
 			"# {{title}}\n\nPodcast: {{podcast}}\nDate: {{date}}\n\n{{transcript}}",
 	},
+	feedCache: {
+		enabled: true,
+		ttlHours: 6,
+	},
 };

src/main.ts

@@ -64,7 +64,7 @@ export default class PodNotes extends Plugin implements IPodNotes {
 	private downloadedEpisodesController: StoreController<{
 		[podcastName: string]: DownloadedEpisode[];
 	}>;
-	private transcriptionService: TranscriptionService;
+	private transcriptionService?: TranscriptionService;
 
 	private maxLayoutReadyAttempts = 10;
 	private layoutReadyAttempts = 0;
@@ -103,8 +103,6 @@ export default class PodNotes extends Plugin implements IPodNotes {
 			this,
 		).on();
 
-		this.transcriptionService = new TranscriptionService(this);
-
 		this.api = new API();
 
 		this.addCommand({
@@ -265,7 +263,18 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		this.addCommand({
 			id: "podnotes-transcribe",
 			name: "Transcribe current episode",
-			callback: () => this.transcriptionService.transcribeCurrentEpisode(),
+			checkCallback: (checking) => {
+				const canTranscribe =
+					!!this.api.podcast && !!this.settings.openAIApiKey?.trim();
+
+				if (checking) {
+					return canTranscribe;
+				}
+
+				if (canTranscribe) {
+					void this.getTranscriptionService().transcribeCurrentEpisode();
+				}
+			},
 		});
 
 		this.addSettingTab(new PodNotesSettingsTab(this.app, this));
@@ -311,6 +320,14 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		}
 	}
 
+	private getTranscriptionService(): TranscriptionService {
+		if (!this.transcriptionService) {
+			this.transcriptionService = new TranscriptionService(this);
+		}
+
+		return this.transcriptionService;
+	}
+
 	onunload() {
 		this?.playedEpisodeController.off();
 		this?.savedFeedsController.off();

src/services/FeedCacheService.ts

@@ -0,0 +1,137 @@
+import type { Episode } from "src/types/Episode";
+import type { PodcastFeed } from "src/types/PodcastFeed";
+
+type SerializableEpisode = Omit<Episode, "episodeDate"> & {
+	episodeDate?: string;
+};
+
+interface CachedFeedData {
+	episodes: SerializableEpisode[];
+	updatedAt: number;
+}
+
+type FeedCache = Record<string, CachedFeedData>;
+
+const STORAGE_KEY = "podnotes:feed-cache:v1";
+const DEFAULT_TTL_MS = 1000 * 60 * 60 * 6; // 6 hours.
+const MAX_EPISODES_PER_FEED = 75;
+
+let cache: FeedCache | null = null;
+
+function getStorage(): Storage | null {
+	try {
+		return typeof localStorage === "undefined" ? null : localStorage;
+	} catch (error) {
+		console.error("Unable to access localStorage for feed cache:", error);
+		return null;
+	}
+}
+
+function loadCache(): FeedCache {
+	if (cache) {
+		return cache;
+	}
+
+	const storage = getStorage();
+	if (!storage) {
+		cache = {};
+		return cache;
+	}
+
+	try {
+		const raw = storage.getItem(STORAGE_KEY);
+		if (!raw) {
+			cache = {};
+			return cache;
+		}
+
+		const parsed = JSON.parse(raw) as FeedCache;
+		cache = parsed;
+		return cache;
+	} catch (error) {
+		console.error("Failed to parse feed cache:", error);
+		cache = {};
+		return cache;
+	}
+}
+
+function persistCache(): void {
+	const storage = getStorage();
+	if (!storage) {
+		return;
+	}
+
+	try {
+		storage.setItem(STORAGE_KEY, JSON.stringify(cache ?? {}));
+	} catch (error) {
+		console.error("Failed to persist feed cache:", error);
+	}
+}
+
+function serializeEpisode(episode: Episode): SerializableEpisode {
+	return {
+		...episode,
+		episodeDate: episode.episodeDate?.toISOString(),
+	};
+}
+
+function deserializeEpisode(episode: SerializableEpisode): Episode {
+	return {
+		...episode,
+		episodeDate: episode.episodeDate ? new Date(episode.episodeDate) : undefined,
+	};
+}
+
+function getFeedKey(feed: PodcastFeed): string {
+	return feed.url ?? feed.title;
+}
+
+export function getCachedEpisodes(
+	feed: PodcastFeed,
+	maxAgeMs: number = DEFAULT_TTL_MS,
+): Episode[] | null {
+	const store = loadCache();
+	const cacheKey = getFeedKey(feed);
+	const cachedValue = store[cacheKey];
+
+	if (!cachedValue) {
+		return null;
+	}
+
+	const isExpired = Date.now() - cachedValue.updatedAt > maxAgeMs;
+	if (isExpired) {
+		delete store[cacheKey];
+		persistCache();
+		return null;
+	}
+
+	return cachedValue.episodes.map(deserializeEpisode);
+}
+
+export function setCachedEpisodes(feed: PodcastFeed, episodes: Episode[]): void {
+	if (!episodes.length) {
+		return;
+	}
+
+	const store = loadCache();
+	const cacheKey = getFeedKey(feed);
+
+	store[cacheKey] = {
+		updatedAt: Date.now(),
+		episodes: episodes
+			.slice(0, MAX_EPISODES_PER_FEED)
+			.map(serializeEpisode),
+	};
+
+	persistCache();
+}
+
+export function clearFeedCache(): void {
+	cache = {};
+	const storage = getStorage();
+	try {
+		storage?.removeItem(STORAGE_KEY);
+	} catch (error) {
+		console.error("Failed to clear feed cache:", error);
+	}
+}

src/services/TranscriptionService.ts

@@ -1,5 +1,5 @@
 import { Notice, TFile } from "obsidian";
-import { OpenAI } from "openai";
+import type { OpenAI } from "openai";
 import type PodNotes from "../main";
 import { downloadEpisode } from "../downloadEpisode";
 import {
@@ -50,16 +50,13 @@ function formatTime(ms: number): string {
 
 export class TranscriptionService {
 	private plugin: PodNotes;
-	private client: OpenAI;
+	private client: OpenAI | null = null;
+	private cachedApiKey: string | null = null;
 	private MAX_RETRIES = 3;
 	private isTranscribing = false;
 
 	constructor(plugin: PodNotes) {
 		this.plugin = plugin;
-		this.client = new OpenAI({
-			apiKey: this.plugin.settings.openAIApiKey,
-			dangerouslyAllowBrowser: true,
-		});
 	}
 
 	async transcribeCurrentEpisode(): Promise<void> {
@@ -68,6 +65,13 @@ export class TranscriptionService {
 			return;
 		}
 
+		if (!this.plugin.settings.openAIApiKey?.trim()) {
+			new Notice(
+				"Please add your OpenAI API key in the transcript settings first.",
+			);
+			return;
+		}
+
 		const currentEpisode = this.plugin.api.podcast;
 		if (!currentEpisode) {
 			new Notice("No episode is currently playing.");
@@ -126,7 +130,8 @@ export class TranscriptionService {
 			notice.update("Transcription completed and saved.");
 		} catch (error) {
 			console.error("Transcription error:", error);
-			notice.update(`Transcription failed: ${error.message}`);
+			const message = error instanceof Error ? error.message : String(error);
+			notice.update(`Transcription failed: ${message}`);
 		} finally {
 			this.isTranscribing = false;
 			setTimeout(() => notice.hide(), 5000);
@@ -178,6 +183,7 @@ export class TranscriptionService {
 		files: File[],
 		updateNotice: (message: string) => void,
 	): Promise<string> {
+		const client = await this.getClient();
 		const transcriptions: string[] = new Array(files.length);
 		let completedChunks = 0;
 
@@ -195,7 +201,7 @@ export class TranscriptionService {
 				let retries = 0;
 				while (retries < this.MAX_RETRIES) {
 					try {
-						const result = await this.client.audio.transcriptions.create({
+						const result = await client.audio.transcriptions.create({
 							model: "whisper-1",
 							file,
 						});
@@ -261,4 +267,24 @@ export class TranscriptionService {
 			throw new Error("Expected a file but got a folder");
 		}
 	}
+
+	private async getClient(): Promise<OpenAI> {
+		const apiKey = this.plugin.settings.openAIApiKey?.trim();
+		if (!apiKey) {
+			throw new Error("Missing OpenAI API key");
+		}
+
+		if (this.client && this.cachedApiKey === apiKey) {
+			return this.client;
+		}
+
+		const { OpenAI } = await import("openai");
+		this.client = new OpenAI({
+			apiKey,
+			dangerouslyAllowBrowser: true,
+		});
+		this.cachedApiKey = apiKey;
+
+		return this.client;
+	}
 }

src/types/IPodNotesSettings.ts

@@ -36,4 +36,8 @@ export interface IPodNotesSettings {
 		path: string;
 		template: string;
 	};
+	feedCache: {
+		enabled: boolean;
+		ttlHours: number;
+	};
 }

src/ui/PodcastView/EpisodeList.svelte

@@ -50,11 +50,14 @@
 			<Icon
 				icon={hidePlayedEpisodes ? "eye-off" : "eye"}
 				size={25}
+				label={hidePlayedEpisodes ? "Show played episodes" : "Hide played episodes"}
+				pressed={hidePlayedEpisodes}
 				on:click={() => (hidePlayedEpisodes = !hidePlayedEpisodes)}
 			/>
 			<Icon
 				icon="refresh-cw"
 				size={25}
+				label="Refresh episodes"
 				on:click={() => dispatch("clickRefresh")}
 			/>
 		</div>

src/ui/PodcastView/EpisodeListItem.svelte

@@ -17,13 +17,6 @@
 		dispatch("contextMenu", { episode, event });
 	}
 
-	function onKeyActivate(event: KeyboardEvent) {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			onClickEpisode();
-		}
-	}
-
 	let _date: Date;
 	let date: string;
 
@@ -33,13 +26,11 @@
 	}
 </script>
 
-<div
+<button
+	type="button"
 	class="podcast-episode-item" 
 	on:click={onClickEpisode} 
 	on:contextmenu={onContextMenu}
-	role="button"
-	tabindex="0"
-	on:keydown={onKeyActivate}
 >
 	{#if showEpisodeImage && episode?.artworkUrl} 
 		<div class="podcast-episode-thumbnail-container">
@@ -60,7 +51,7 @@
 		<span class="episode-item-date">{date.toUpperCase()}</span>
 		<span class={`episode-item-title ${episodeFinished && "strikeout"}`}>{episode.title}</span>
 	</div>
-</div>
+</button>
 
 <style>
 	.podcast-episode-item {
@@ -72,14 +63,17 @@
 		width: 100%;
 		border: solid 1px var(--background-divider);
 		gap: 0.25rem;
+		background: transparent;
+		text-align: left;
 	}
 
-	.podcast-episode-item:hover {
-		background-color: var(--background-divider);
+	.podcast-episode-item:focus-visible {
+		outline: 2px solid var(--interactive-accent);
+		outline-offset: 2px;
 	}
 
 	.podcast-episode-item:hover {
-		cursor: pointer;
+		background-color: var(--background-divider);
 	}
 
 	.strikeout {