feat: brain inline PDF viewer — reuses PdfInlinePreview from trips

- PDF detail sheet now shows inline rendered PDF pages
- Click to expand inline, "Full view" for overlay viewer
- Uses pdfjs-dist canvas rendering (same as trips app)
- Falls back to screenshot if no original upload found

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-04-01 19:08:42 -05:00
parent b58313ec8e
commit 783faa0abd

View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import PdfInlinePreview from '$lib/components/trips/PdfInlinePreview.svelte';
interface BrainItem { interface BrainItem {
id: string; id: string;
@@ -462,10 +463,18 @@
<a class="detail-screenshot" href={selectedItem.url} target="_blank" rel="noopener"> <a class="detail-screenshot" href={selectedItem.url} target="_blank" rel="noopener">
<img src="/api/brain/storage/{selectedItem.id}/screenshot/screenshot.png" alt="" /> <img src="/api/brain/storage/{selectedItem.id}/screenshot/screenshot.png" alt="" />
</a> </a>
{:else if selectedItem.type === 'pdf' && selectedItem.assets?.some(a => a.asset_type === 'screenshot')} {:else if selectedItem.type === 'pdf'}
<div class="detail-screenshot"> {@const pdfAsset = selectedItem.assets?.find(a => a.asset_type === 'original_upload')}
<img src="/api/brain/storage/{selectedItem.id}/screenshot/screenshot.png" alt="" /> {#if pdfAsset}
</div> <PdfInlinePreview
url="/api/brain/storage/{selectedItem.id}/original_upload/{pdfAsset.filename}"
name={selectedItem.title || pdfAsset.filename}
/>
{:else if selectedItem.assets?.some(a => a.asset_type === 'screenshot')}
<div class="detail-screenshot">
<img src="/api/brain/storage/{selectedItem.id}/screenshot/screenshot.png" alt="" />
</div>
{/if}
{:else if selectedItem.type === 'image' && selectedItem.assets?.some(a => a.asset_type === 'original_upload')} {:else if selectedItem.type === 'image' && selectedItem.assets?.some(a => a.asset_type === 'original_upload')}
{@const imgAsset = selectedItem.assets.find(a => a.asset_type === 'original_upload')} {@const imgAsset = selectedItem.assets.find(a => a.asset_type === 'original_upload')}
<div class="detail-screenshot"> <div class="detail-screenshot">