add style to bookmark preview iframe

packages/web/src/app/bookmarks.tsx

@@ -12,6 +12,8 @@ import { FormField } from "~/components/form-field"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
 import { useLogOut } from "~/auth"
+import sakuraCssSrc from "~/reader-styles/sakura.css?url"
+import sakuraDarkCssSrc from "~/reader-styles/sakura-dark.css?url"
 
 const LAYOUT_MODE = {
 	popup: "popup",
@@ -85,7 +87,9 @@ const useBookmarkPageStore = create<BookmarkPageState>()((set, get) => ({
 	reconcileSelection(bookmarks: LinkBookmark[]) {
 		const { selectedBookmarkId, selectedBookmarkIndex } = get()
 
-		if (!selectedBookmarkId) {
+		if (bookmarks.length === 0) {
+			set({ selectedBookmarkId: "", selectedBookmarkIndex: 0 })
+		} else if (!selectedBookmarkId) {
 			set({ selectedBookmarkId: bookmarks[selectedBookmarkIndex].id })
 		} else {
 			const newIndex = bookmarks.findIndex((bookmark) => bookmark.id === selectedBookmarkId)
@@ -507,6 +511,23 @@ function BookmarkPreviewFrame() {
 		}).then((res) => res.text()),
 	)
 
+	function injectCss(event: React.SyntheticEvent<HTMLIFrameElement, Element>) {
+		const lightCssLink = document.createElement("link")
+		lightCssLink.rel = "stylesheet"
+		lightCssLink.href = sakuraCssSrc
+		lightCssLink.media = "screen"
+
+		const darkCssLink = document.createElement("link")
+		darkCssLink.rel = "stylesheet"
+		darkCssLink.href = sakuraDarkCssSrc
+		darkCssLink.media = "screen and (prefers-color-scheme: dark)"
+
+		if (event.currentTarget.contentDocument) {
+			event.currentTarget.contentDocument.head.appendChild(lightCssLink)
+			event.currentTarget.contentDocument.head.appendChild(darkCssLink)
+		}
+	}
+
 	switch (status) {
 		case "pending":
 			return (
@@ -516,11 +537,7 @@ function BookmarkPreviewFrame() {
 			)
 		case "success":
 			return (
-				<iframe
-					className="prose bg-stone-200 dark:bg-stone-900 w-full h-full"
-					style={{ paddingBottom: actionBarHeight }}
-					srcDoc={data}
-				/>
+				<iframe className="w-full h-full" style={{ paddingBottom: actionBarHeight }} srcDoc={data} onLoad={injectCss} />
 			)
 
 		default:
@@ -559,6 +576,9 @@ function BookmarkListItem({ bookmark, index }: { bookmark: LinkBookmark; index:
 	}
 
 	function expandOrOpenPreview() {
+		if (!isSelected) {
+			selectBookmark(bookmark, index)
+		}
 		setBookmarkItemExpanded(true)
 		if (useBookmarkPageStore.getState().layoutMode === LAYOUT_MODE.sideBySide) {
 			setBookmarkPreviewOpened(true)