feat(ui): finish the v3 phone, accessibility and polish pass

src/commands.test.ts

@@ -108,6 +108,7 @@ function fakeWorkspace(notes: ReturnType<typeof fakeVault>["notes"]) {
 			return {};
 		}),
 		getLeavesOfType: (type: string) => (type === "markdown" ? [...open] : []),
+		iterateAllLeaves: vi.fn(),
 		getActiveViewOfType: () => null,
 		getRightLeaf: () => null,
 		revealLeaf: vi.fn(),

src/main.activateView.test.ts

@@ -291,7 +291,10 @@ describe("PodNotes onload wiring (#55)", () => {
 		vi.restoreAllMocks();
 	});
 
-	async function loadPlugin(loadedData: Record<string, unknown> = {}) {
+	async function loadPlugin(
+		loadedData: Record<string, unknown> = {},
+		own: Partial<Record<"loadData" | "registerView", unknown>> = {},
+	) {
 		const activateSpy = vi
 			.spyOn(PodNotes.prototype, "activateView")
 			.mockResolvedValue(undefined);
@@ -350,12 +353,14 @@ describe("PodNotes onload wiring (#55)", () => {
 					on: vi.fn(() => ({})),
 					offref: vi.fn(),
 					getLeavesOfType: vi.fn(() => []),
+					iterateAllLeaves: vi.fn(),
 					getRightLeaf: vi.fn(() => null),
 					getActiveViewOfType: vi.fn(() => null),
 					revealLeaf: vi.fn(),
 					detachLeavesOfType: vi.fn(),
 				},
 			},
+			...own,
 		});
 
 		await plugin.onload();
@@ -364,6 +369,33 @@ describe("PodNotes onload wiring (#55)", () => {
 		return { commands, ribbonCalls, activateSpy, plugin };
 	}
 
+	it("removes an earlier build's sheets before it loads anything, and keeps those its views append", async () => {
+		const sheet = (id: string) =>
+			document.head.appendChild(Object.assign(document.createElement("style"), { id }));
+		const shown = () => [...document.head.querySelectorAll("style")].map((style) => style.id);
+		sheet("pn-earlier");
+		const seen: Record<string, string[]> = {};
+		onTestFinished(() => document.head.replaceChildren());
+
+		await loadPlugin(
+			{ schemaVersion: 2 },
+			{
+				loadData: vi.fn(async () => {
+					seen.loadData = shown();
+					return { schemaVersion: 2 };
+				}),
+				// Obsidian mounts the restored views here, and each appends its sheet.
+				registerView: vi.fn(() => {
+					seen.registerView = shown();
+					sheet("pn-mounted");
+				}),
+			},
+		);
+
+		expect(seen).toEqual({ loadData: [], registerView: [] });
+		expect(shown()).toEqual(["pn-mounted"]);
+	});
+
 	it("starts no save once the window fires pagehide", async () => {
 		const { plugin } = await loadPlugin({ schemaVersion: 2 });
 		const domEvents = vi.mocked(plugin.registerDomEvent).mock.calls as unknown as Array<

src/main.fileRenames.test.ts

@@ -103,6 +103,7 @@ async function loadPlugin(data: Record<string, unknown>): Promise<PodNotes> {
 				onLayoutReady: vi.fn(),
 				on: vi.fn(() => ({})),
 				getLeavesOfType: vi.fn(() => []),
+				iterateAllLeaves: vi.fn(),
 				getRightLeaf: vi.fn(() => null),
 				getActiveViewOfType: vi.fn(() => null),
 				revealLeaf: vi.fn(),

src/main.ts

@@ -20,6 +20,7 @@ import { PodNotesSettingsTab } from "src/ui/settings/PodNotesSettingsTab";
 import { MainView } from "src/ui/PodcastView";
 import { Navigation } from "src/ui/PodcastView/Navigation";
 import { dismissUndoNotices } from "src/ui/undoNotice";
+import { removePreviousStyles } from "src/ui/removePreviousStyles";
 import type { IPodNotesSettings } from "./types/IPodNotesSettings";
 import type { IPodNotes } from "./types/IPodNotes";
 import type PartialAppExtension from "./global";
@@ -127,6 +128,8 @@ export default class PodNotes extends Plugin implements IPodNotes {
 	private persistenceUnknownFields: Record<string, unknown> = {};
 
 	override async onload() {
+		// Before registerView, where the views Obsidian restores mount and append their sheets.
+		removePreviousStyles(this.app.workspace);
 		this.isUnloaded = false;
 		this.podcastViewMountEnabled = !this.isMobileRuntime();
 		this.registerDomEvent(window, "pagehide", () => {

src/main.undo.test.ts

@@ -70,6 +70,7 @@ async function loadPlugin(secrets: obsidian.SecretStorage): Promise<PodNotes> {
 				on: vi.fn(() => ({})),
 				offref: vi.fn(),
 				getLeavesOfType: vi.fn(() => []),
+				iterateAllLeaves: vi.fn(),
 				getActiveViewOfType: vi.fn(() => null),
 			},
 		},

src/ui/PodcastView/AddPodcastPage.svelte

@@ -43,12 +43,12 @@
 
 {#snippet alternatives()}
 	<div class="pn-alts">
-		<button type="button" class="pn-alt" onclick={() => pickVaultMedia(app)}>
+		<button type="button" class="pn-bare pn-alt" onclick={() => pickVaultMedia(app)}>
 			<span {@attach icon("folder")}></span>Play a vault file
 		</button>
 		<button
 			type="button"
-			class="pn-alt"
+			class="pn-bare pn-alt"
 			onclick={() =>
 				pickFile(".opml", importOPML, {
 					tooLargeMessage: "That file is too large to be an OPML file.",
@@ -93,7 +93,7 @@
 			{@const added = actions.savedKey($savedFeeds, result.feed.url) !== undefined}
 			<button
 				type="button"
-				class="pn-result"
+				class="pn-bare pn-result"
 				aria-label="{added ? 'Open' : 'Add'} {result.feed.title}"
 				onclick={() => add(result)}
 			>
@@ -113,7 +113,7 @@
 {/if}
 
 <style>
-	.pn-empty {
+	.pn-empty :global {
 		flex: 1;
 		min-height: 0;
 		overflow-y: auto;
@@ -122,9 +122,7 @@
 		align-items: center;
 		padding: var(--size-4-6) var(--pn-pad) 72px;
 		text-align: center;
-	}
 
-	.pn-empty :global {
 		/* Centered, yet scrollable from its top when the view is short. */
 		> :first-child {
 			margin-top: auto;
@@ -161,33 +159,26 @@
 		}
 	}
 
-	.pn-alts {
+	.pn-alts :global {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
 		gap: var(--size-2-2);
 		margin-top: var(--size-4-2);
-	}
 
-	.pn-alts :global {
 		.pn-alt {
-			display: inline-flex;
-			align-items: center;
 			gap: var(--size-4-2);
 			height: var(--pn-btn);
 			padding: 0 var(--size-4-2);
-			border: 0;
 			border-radius: var(--radius-s);
-			background: none;
-			box-shadow: none;
 			color: var(--text-muted);
-			font-size: var(--font-ui-small);
-			cursor: var(--cursor);
 		}
 
-		.pn-alt:hover {
-			background: var(--background-modifier-hover);
-			color: var(--text-normal);
+		@media (hover: hover) {
+			.pn-alt:hover {
+				background: var(--background-modifier-hover);
+				color: var(--text-normal);
+			}
 		}
 
 		.pn-alt > span {
@@ -201,24 +192,24 @@
 		/* Obsidian's buttons keep their text on one line; this one wraps its title. */
 		.pn-result {
 			display: flex;
-			align-items: center;
 			gap: var(--size-4-3);
 			width: 100%;
 			height: auto;
 			padding: var(--size-4-2);
-			border: 0;
 			border-radius: var(--radius-s);
-			background: none;
-			box-shadow: none;
 			color: var(--text-normal);
-			font-size: var(--font-ui-small);
 			text-align: left;
 			white-space: normal;
-			cursor: var(--cursor);
 		}
 
-		.pn-result:hover {
-			background: var(--background-modifier-hover);
+		@media (hover: hover) {
+			.pn-result:hover {
+				background: var(--background-modifier-hover);
+			}
+
+			.pn-result:hover .end:not(.added) {
+				color: var(--text-accent);
+			}
 		}
 
 		.pn-result .pn-cover {
@@ -268,20 +259,16 @@
 			color: var(--text-success);
 		}
 
-		.pn-result:hover .end:not(.added) {
-			color: var(--text-accent);
-		}
-
 		.pn-linkchip {
 			display: inline-flex;
 			align-items: center;
 			gap: 4px;
 			vertical-align: bottom;
 			--icon-size: 12px;
 		}
-	}
 
-	:global(.is-phone) .pn-results :global(.pn-result .pn-cover) {
-		width: 52px;
+		.is-phone & .pn-result .pn-cover {
+			width: 52px;
+		}
 	}
 </style>

src/ui/PodcastView/ChaptersPanel.svelte

@@ -2,7 +2,7 @@
 	import type { Chapter } from "src/types/Chapter";
 	import { formatDuration } from "src/utility/formatDuration";
 	import { chapterAt } from "./chapters";
-	import Panel from "./Panel.svelte";
+	import Panel, { reveal } from "./Panel.svelte";
 
 	let {
 		chapters,
@@ -17,12 +17,8 @@
 	let list: HTMLElement | undefined = $state();
 	const current = $derived(chapterAt(chapters, position));
 
-	// Scrolls only the panel: scrollIntoView would also scroll the view and an editor around it.
 	$effect(() => {
-		const row = list?.children[current];
-		if (!list || !row) return;
-		const top = row.getBoundingClientRect().top - list.getBoundingClientRect().top;
-		list.scrollTop += top - list.clientHeight / 3;
+		if (list) reveal(list, current);
 	});
 </script>
 
@@ -31,7 +27,7 @@
 		<li>
 			<button
 				type="button"
-				class="pn-row pn-chap"
+				class="pn-bare pn-row"
 				class:is-now={index === current}
 				aria-current={index === current || undefined}
 				onclick={() => onseek(chapter.startTime)}
@@ -42,9 +38,3 @@
 		</li>
 	{/each}
 </Panel>
-
-<style>
-	.pn-chap :global(.nm) {
-		font-weight: var(--font-medium);
-	}
-</style>

src/ui/PodcastView/Cover.svelte

@@ -30,31 +30,38 @@
 {/if}
 
 <style>
-	.pn-cover {
+	.pn-cover :global {
 		display: block;
 		flex: none;
 		width: 100%;
 		aspect-ratio: 1;
 		border-radius: 6px;
 		object-fit: cover;
-	}
 
-	.pn-cover.is-text {
-		display: flex;
-		align-items: flex-end;
-		overflow: hidden;
-		background: var(--background-modifier-border);
-		color: var(--text-muted);
-		font-weight: var(--font-bold);
-		line-height: 1;
-		text-align: left;
-		overflow-wrap: anywhere;
-		container-type: inline-size;
-	}
+		&.is-text {
+			display: flex;
+			align-items: flex-end;
+			overflow: hidden;
+			background: var(--background-modifier-border);
+			color: var(--text-muted);
+			font-weight: var(--font-bold);
+			line-height: 1;
+			text-align: left;
+			overflow-wrap: anywhere;
+			container-type: inline-size;
 
-	/* cqw is the cover's width. A percentage padding on the cover is its row's. */
-	.pn-cover.is-text > :global(span) {
-		padding: 10cqw;
-		font-size: 12cqw;
+			/* cqw is the cover's width. Three lines keep a long title's beginning, at a size a
+			   row's small cover can show. A padding would show the fourth line in it, above the
+			   clip edge; a margin keeps that edge under the third. */
+			> span {
+				display: -webkit-box;
+				-webkit-line-clamp: 3;
+				line-clamp: 3;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				margin: 10cqw;
+				font-size: max(10px, 12cqw);
+			}
+		}
 	}
 </style>