7090f9a0e0
Bumps the multi-page badge from text-xs (12px) / px-1.5 py-0.5 to text-sm (14px) / px-2 py-1. Meets senior-legibility on a 320px phone without crowding the 120-wide tile — the badge stays tucked in the top-right corner. Refs #305 Fixes @leonievoss senior-accessibility concern from PR review Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.2 KiB
Svelte
49 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { thumbnailUrl } from '$lib/thumbnails';
|
|
|
|
type Doc = {
|
|
id: string;
|
|
thumbnailKey?: string;
|
|
thumbnailGeneratedAt?: string;
|
|
thumbnailAspect?: 'PORTRAIT' | 'LANDSCAPE';
|
|
pageCount?: number;
|
|
};
|
|
|
|
let { doc }: { doc: Doc } = $props();
|
|
|
|
const url = $derived(thumbnailUrl(doc));
|
|
const aspect = $derived(doc.thumbnailAspect ?? 'PORTRAIT');
|
|
const pageCount = $derived(doc.pageCount ?? 1);
|
|
const tileClass = $derived(aspect === 'LANDSCAPE' ? 'h-[120px] w-[168px]' : 'h-[168px] w-[120px]');
|
|
</script>
|
|
|
|
<div
|
|
data-testid="conv-thumb-tile"
|
|
data-aspect={aspect}
|
|
class="relative {tileClass} flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
|
|
>
|
|
{#if url}
|
|
<img
|
|
src={url}
|
|
alt=""
|
|
class="h-full w-full object-cover object-top dark:mix-blend-multiply"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{:else}
|
|
<div
|
|
data-testid="conv-thumb-skeleton"
|
|
class="h-full w-full bg-line/60 motion-safe:animate-pulse"
|
|
aria-hidden="true"
|
|
></div>
|
|
{/if}
|
|
|
|
{#if pageCount > 1}
|
|
<span
|
|
data-testid="conv-thumb-page-badge"
|
|
class="absolute top-1 right-1 rounded-full bg-primary/90 px-2 py-1 text-sm leading-none font-bold text-surface"
|
|
>{pageCount}</span
|
|
>
|
|
{/if}
|
|
</div>
|