@hearthlog/module-gallery 0.0.0-stage → 1.0.1

package/src/components/gallery/gallery-blocks.svelte.ts

@@ -0,0 +1,30 @@
+import { BucketStore } from '@hearthlog/sdk/endless';
+import { queryDatabase } from '@hearthlog/sdk/data';
+import type { GalleryAlbumChip, GalleryFilter } from '../../data/gallery.js';
+import type { GalleryPhoto } from '@hearthlog/sdk/data';
+import { galleryBlockMonth, galleryBlockPart } from '../../gallery/timeline.js';
+
+export interface GalleryBlockData {
+    /** SQL-ordered photos, newest first. */
+    photos: GalleryPhoto[];
+    /** Albums named in the month header, which only a month's first block has. */
+    albums: GalleryAlbumChip[];
+}
+
+/**
+ * Loaded blocks of the gallery timeline. Each batch of blocks that scroll
+ * into view is one SQL session under the timeline's filter.
+ */
+export class GalleryBlocks extends BucketStore<GalleryBlockData> {
+    constructor(filter: GalleryFilter, chips: boolean) {
+        super(async (keys) => {
+            const blocks = await queryDatabase((repositories) => Promise.all(keys.map(async (key) => ({
+                photos: await repositories.gallery.blockPhotos(key, filter),
+                albums: chips && galleryBlockPart(key) === 0
+                    ? await repositories.gallery.monthAlbums(galleryBlockMonth(key), filter)
+                    : [],
+            }))));
+            return new Map(keys.map((key, index) => [key, blocks[index]]));
+        }, '[Gallery] Could not load photos');
+    }
+}

package/src/components/gallery/view/GallerySpine.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+    import { format } from 'date-fns';
+    import type { GalleryMonthSummary } from '../../../data/gallery.js';
+    import { formatNumber } from '@hearthlog/sdk/format';
+    import { listAxis, monthOffset, nearestKey, shiftMonthKey } from '@hearthlog/sdk/axis';
+
+    let {
+        months,
+        first,
+        last,
+        active = false,
+        onJump,
+        onLatest,
+    }: {
+        /** Months that hold photos, newest first. */
+        months: GalleryMonthSummary[];
+        /** The months on screen. */
+        first: string;
+        last: string;
+        /** Phones show the spine while the list scrolls. */
+        active?: boolean;
+        onJump: (month: string) => void;
+        onLatest: () => void;
+    } = $props();
+
+    let root = $state<HTMLDivElement>();
+    let canvas = $state<HTMLCanvasElement>();
+    let width = $state(0);
+    let height = $state(0);
+    let hover = $state<string | null>(null);
+    let dragging = $state(false);
+    let themeRevision = $state(0);
+
+    const axis = $derived(listAxis(months.map((month) => month.month), { descending: true }));
+    const photosByMonth = $derived(new Map(months.map((month) => [month.month, month.photos])));
+    const newest = $derived(months[0]?.month ?? '');
+    const total = $derived(newest ? monthOffset(months[months.length - 1].month, newest) + 1 : 0);
+    const wide = $derived(width >= 48);
+    const padding = 18;
+    /** A month's share of the rail; a short library keeps a compact scale in the middle. */
+    const step = $derived(total > 0 ? Math.min(24, Math.max(0.5, (height - padding * 2) / total)) : 0);
+    const top = $derived(Math.max(padding, (height - step * total) / 2));
+    const shown = $derived(active || dragging || hover !== null);
+
+    /** The rail reads newest first, so the newest month sits at the top. */
+    const monthY = (month: string) => top + (monthOffset(newest, month) + 0.5) * step;
+    const monthAt = (y: number) => shiftMonthKey(newest, -Math.max(0, Math.min(total - 1, Math.floor((y - top) / step))));
+    const label = (month: string) => format(new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)) - 1, 1), 'MMMM yyyy');
+
+    // Colours follow the theme, which can change while the page is open.
+    $effect(() => {
+        const observer = new MutationObserver(() => themeRevision++);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class'] });
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const changed = () => themeRevision++;
+        media.addEventListener('change', changed);
+        return () => {
+            observer.disconnect();
+            media.removeEventListener('change', changed);
+        };
+    });
+
+    $effect(() => {
+        void themeRevision;
+        if (!canvas || !width || !height || !newest) return;
+        const ratio = window.devicePixelRatio || 1;
+        canvas.width = Math.round(width * ratio);
+        canvas.height = Math.round(height * ratio);
+        const context = canvas.getContext('2d');
+        if (!context) return;
+        const style = getComputedStyle(canvas);
+        const color = (name: string) => style.getPropertyValue(name).trim();
+        context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        context.clearRect(0, 0, width, height);
+
+        const right = wide ? 10 : 4;
+        if (first && last) {
+            const bandTop = monthY(first) - step / 2 - 4;
+            const bandBottom = monthY(last) + step / 2 + 4;
+            context.fillStyle = color('--stor-accent-soft');
+            context.beginPath();
+            if (wide) context.roundRect(4, bandTop, width - 8, Math.max(10, bandBottom - bandTop), 7);
+            else context.roundRect(width - 11, bandTop, 8, Math.max(14, bandBottom - bandTop), 4);
+            context.fill();
+        }
+
+        const peak = months[0]?.peak || 1;
+        const thickness = Math.max(1, Math.min(4, step * 0.6));
+        for (let offset = 0; offset < total; offset++) {
+            const month = shiftMonthKey(newest, -offset);
+            const y = top + (offset + 0.5) * step;
+            const photos = photosByMonth.get(month);
+            if (!photos) {
+                context.globalAlpha = 1;
+                context.fillStyle = color('--stor-border');
+                context.fillRect(width - right - 2, y - 0.5, 2, 1);
+                continue;
+            }
+            const inView = month <= first && month >= last;
+            const length = (wide ? 4 : 3) + (wide ? 22 : 8) * Math.sqrt(photos / peak);
+            context.globalAlpha = inView ? 1 : 0.55;
+            context.fillStyle = inView ? color('--stor-accent-strong') : color('--stor-muted-text');
+            context.fillRect(width - right - length, y - thickness / 2, length, thickness);
+        }
+        context.globalAlpha = 1;
+
+        if (wide) {
+            context.font = `600 10.5px ${color('--stor-font-sans') || 'system-ui'}`;
+            context.textBaseline = 'middle';
+            context.fillStyle = color('--stor-muted-text');
+            let previous = -Infinity;
+            for (let offset = 0; offset < total; offset++) {
+                const month = shiftMonthKey(newest, -offset);
+                if (offset > 0 && !month.endsWith('-01')) continue;
+                const y = top + (offset + 0.5) * step;
+                if (y - previous < 18) continue;
+                context.fillText(month.slice(0, 4), 8, y);
+                previous = y;
+            }
+        }
+
+        if (hover) {
+            context.globalAlpha = 0.55;
+            context.fillStyle = color('--stor-ink');
+            context.fillRect(wide ? 4 : 0, monthY(hover) - 0.5, width - (wide ? 8 : 0), 1);
+            context.globalAlpha = 1;
+        }
+    });
+
+    let jumped = '';
+    function point(event: PointerEvent): string {
+        const month = monthAt(event.clientY - root!.getBoundingClientRect().top);
+        hover = month;
+        return month;
+    }
+
+    function jump(month: string) {
+        const target = nearestKey(axis, month);
+        if (target === jumped) return;
+        jumped = target;
+        onJump(target);
+    }
+
+    function keydown(event: KeyboardEvent) {
+        const index = axis.indexOf(first);
+        let target: string | null = null;
+        if (event.key === 'ArrowUp') target = axis.keyAt(Math.max(0, index - 1));
+        else if (event.key === 'ArrowDown') target = axis.keyAt(Math.min(axis.count - 1, index + 1));
+        else if (event.key === 'PageUp') target = nearestKey(axis, shiftMonthKey(first, 12));
+        else if (event.key === 'PageDown') target = nearestKey(axis, shiftMonthKey(first, -12));
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            onLatest();
+            return;
+        } else if (event.key === 'End') target = axis.keyAt(axis.count - 1);
+        if (!target) return;
+        event.preventDefault();
+        onJump(target);
+    }
+</script>
+
+{#if newest}
+    <div
+        bind:this={root}
+        bind:clientWidth={width}
+        bind:clientHeight={height}
+        class="gallery-spine"
+        class:shown
+        class:wide
+        role="slider"
+        tabindex="0"
+        aria-label="Months"
+        aria-orientation="vertical"
+        aria-valuemin={0}
+        aria-valuemax={Math.max(0, axis.count - 1)}
+        aria-valuenow={axis.indexOf(first)}
+        aria-valuetext={first ? label(first) : undefined}
+        onpointermove={(event) => { const month = point(event); if (dragging) jump(month); }}
+        onpointerdown={(event) => { dragging = true; jumped = ''; root?.setPointerCapture(event.pointerId); jump(point(event)); }}
+        onpointerup={() => { dragging = false; }}
+        onpointercancel={() => { dragging = false; hover = null; }}
+        onpointerleave={() => { if (!dragging) hover = null; }}
+        onkeydown={keydown}
+    >
+        <canvas bind:this={canvas} aria-hidden="true"></canvas>
+        {#if hover}
+            <span class="gallery-spine-tip" style:top={`${monthY(hover)}px`} aria-hidden="true">
+                {label(hover)}<small>{photosByMonth.has(hover) ? `${formatNumber(photosByMonth.get(hover) ?? 0)} ${photosByMonth.get(hover) === 1 ? 'photo' : 'photos'}` : 'No photos'}</small>
+            </span>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .gallery-spine {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 3;
+        width: 22px;
+        cursor: ns-resize;
+        touch-action: none;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 300ms ease;
+    }
+    .gallery-spine.shown, .gallery-spine:focus-visible { opacity: 1; pointer-events: auto; }
+    /* CSS sets the width; a wide spine is always shown. */
+    .gallery-spine.wide { opacity: 1; pointer-events: auto; }
+    .gallery-spine:focus-visible { outline: 2px solid var(--stor-focus); outline-offset: -4px; border-radius: 12px; }
+    canvas { display: block; width: 100%; height: 100%; }
+    .gallery-spine-tip {
+        position: absolute;
+        right: calc(100% + 6px);
+        z-index: 4;
+        display: inline-flex;
+        align-items: baseline;
+        gap: 6px;
+        padding: 7px 11px;
+        border-radius: 999px;
+        background: var(--stor-ink);
+        box-shadow: var(--stor-shadow-md);
+        color: var(--stor-surface);
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1;
+        white-space: nowrap;
+        pointer-events: none;
+        transform: translateY(-50%);
+    }
+    .gallery-spine-tip small { font-size: 11.5px; font-weight: 500; opacity: 0.72; }
+    @media (min-width: 640px) {
+        .gallery-spine { width: 72px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .gallery-spine { transition: none; }
+    }
+</style>

package/src/components/gallery/view/GalleryTile.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import { onMount, type Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import IconCheck from '~icons/mdi/check';
+
+    let {
+        src,
+        alt,
+        label,
+        size,
+        href,
+        day = '',
+        checkable = false,
+        selectable = false,
+        selected = false,
+        element = $bindable(),
+        onOpen,
+        onSelect,
+        overlay,
+        ...attributes
+    }: Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+        /** The image to show; empty while it loads. */
+        src: string;
+        alt: string;
+        /** What opening the tile does, for assistive technology. */
+        label: string;
+        /** The tile's size in its row; `null` fills the cell CSS gives it. */
+        size: { width: number; height: number } | null;
+        /** A real link, so the tile opens without a script. */
+        href?: string;
+        /** Shown on hover. */
+        day?: string;
+        /** A check in the corner selects the photo. */
+        checkable?: boolean;
+        selectable?: boolean;
+        selected?: boolean;
+        element?: HTMLElement;
+        onOpen?: (event: MouseEvent) => void;
+        onSelect?: () => void;
+        /** Markers over the photo, such as upload state. */
+        overlay?: Snippet;
+    } = $props();
+
+    let shown = $state('');
+    // Server-rendered photos show at once; once scripts run, a photo still loading fades in.
+    let mounted = $state(false);
+    onMount(() => { mounted = true; });
+
+    /**
+     * Marks the photo shown once it loads, including one that loaded before the
+     * page came alive. A listener rather than an `onload` attribute keeps
+     * server-rendered markup free of inline handlers, which the public CSP blocks.
+     */
+    function trackLoad(node: HTMLImageElement) {
+        const loaded = () => { shown = node.getAttribute('src') ?? ''; };
+        if (node.complete && node.naturalWidth > 0) loaded();
+        node.addEventListener('load', loaded);
+        return () => node.removeEventListener('load', loaded);
+    }
+
+    function activate(event: MouseEvent) {
+        if (checkable && !selectable && (event.target as Element).closest('[data-gallery-check]')) {
+            event.preventDefault();
+            onSelect?.();
+        } else onOpen?.(event);
+    }
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'button'}
+    bind:this={element}
+    {...attributes}
+    type={href ? undefined : 'button'}
+    {href}
+    class="gallery-tile"
+    class:fill={!size}
+    class:selectable
+    class:selected
+    style:width={size ? `${size.width}px` : undefined}
+    style:height={size ? `${size.height}px` : undefined}
+    aria-label={label}
+    aria-pressed={selectable ? selected : undefined}
+    onclick={activate}
+>
+    {#if src}<img {src} {alt} class:waiting={mounted && shown !== src} draggable="false" {@attach trackLoad} />{/if}
+    {#if checkable}<span class="gallery-check" data-gallery-check aria-hidden="true"><IconCheck /></span>{/if}
+    {#if day}<span class="gallery-day" aria-hidden="true">{day}</span>{/if}
+    {@render overlay?.()}
+</svelte:element>
+
+<style>
+    .gallery-tile {
+        position: relative;
+        flex: none;
+        display: block;
+        overflow: hidden;
+        border: 0;
+        border-radius: 8px;
+        padding: 0;
+        background: var(--stor-surface-muted);
+        color: inherit;
+        text-align: left;
+        transition: background-color 180ms ease;
+    }
+    .gallery-tile.fill { width: 100%; height: 100%; }
+    .gallery-tile:focus-visible { outline: 2px solid var(--stor-focus); outline-offset: 2px; }
+    img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: opacity 400ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 220ms ease;
+    }
+    img.waiting { opacity: 0; }
+    .selected { background: var(--stor-accent-soft); }
+    .selected img { transform: scale(0.86); border-radius: 6px; }
+    .gallery-check {
+        position: absolute;
+        top: 7px;
+        left: 7px;
+        z-index: 1;
+        display: grid;
+        width: 22px;
+        height: 22px;
+        place-items: center;
+        border-radius: 999px;
+        background: rgb(0 0 0 / 0.18);
+        box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.95), 0 1px 4px rgb(0 0 0 / 0.25);
+        color: transparent;
+        opacity: 0;
+        transition: opacity 150ms ease, background-color 150ms ease;
+    }
+    .gallery-check :global(svg) { width: 14px; height: 14px; }
+    .selectable .gallery-check, .gallery-tile:focus-visible .gallery-check { opacity: 1; }
+    .selected .gallery-check { background: var(--stor-accent); box-shadow: 0 0 0 2px var(--stor-surface); color: var(--stor-action-text, #fff); }
+    .gallery-day {
+        position: absolute;
+        inset: auto 0 0;
+        padding: 18px 9px 7px;
+        background: linear-gradient(transparent, rgb(0 0 0 / 0.42));
+        color: #fff;
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 1;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 180ms ease;
+    }
+    @media (hover: hover) {
+        .gallery-tile:hover .gallery-check, .gallery-tile:hover .gallery-day { opacity: 1; }
+        .gallery-tile:not(.selected):hover img { transform: scale(1.015); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        img, .gallery-check, .gallery-day { transition: none; }
+    }
+</style>

package/src/components/gallery/view/JustifiedRows.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" generics="T extends { width: number; height: number }">
+    import type { Snippet } from 'svelte';
+    import { justifiedRows, tileRatio } from '../../../gallery/layout.js';
+
+    let {
+        items,
+        key,
+        width = 0,
+        rowHeight,
+        gap,
+        tile,
+    }: {
+        items: readonly T[];
+        key: (item: T) => string;
+        /**
+         * The width rows fill. Until it is known (on the server, or before the
+         * first measure) rows flow in CSS, each photo growing by its ratio.
+         */
+        width?: number;
+        rowHeight: number;
+        gap: number;
+        /** Draws one photo at its size in the row; `null` while CSS sizes it. */
+        tile: Snippet<[item: T, size: { width: number; height: number } | null, index: number]>;
+    } = $props();
+
+    const rows = $derived(width > 0 ? justifiedRows(items.map(tileRatio), width, rowHeight, gap) : null);
+</script>
+
+{#if rows}
+    <div class="rows" style:--gap={`${gap}px`}>
+        {#each rows as row (row.start)}
+            <div class="row" style:height={`${row.height}px`}>
+                {#each items.slice(row.start, row.end) as item, offset (key(item))}
+                    {@render tile(item, { width: tileRatio(item) * row.height, height: row.height }, row.start + offset)}
+                {/each}
+            </div>
+        {/each}
+    </div>
+{:else}
+    <div class="flow" style:--gap={`${gap}px`} style:--row={`${rowHeight}px`}>
+        {#each items as item, index (key(item))}
+            <div class="cell" style:--r={tileRatio(item)}>{@render tile(item, null, index)}</div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    .rows { display: flex; flex-direction: column; gap: var(--gap); }
+    .row { display: flex; gap: var(--gap); }
+    .flow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); }
+    /* The last row keeps the target height instead of stretching. */
+    .flow::after { content: ''; flex: 1000 1 0%; }
+    .cell { display: flex; min-width: 0; flex: var(--r) 1 calc(var(--r) * var(--row)); aspect-ratio: var(--r); }
+</style>

package/src/components/gallery/view/MonthHeading.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { formatMonthParts, formatPhotoCount } from '../../../gallery/format.js';
+
+    let { month, count, before, after }: {
+        /** A `yyyy-MM` month. */
+        month: string;
+        count: number;
+        /** Controls ahead of the name, such as a select-all check. */
+        before?: Snippet;
+        /** Controls after the name, such as album chips. */
+        after?: Snippet;
+    } = $props();
+
+    const parts = $derived(formatMonthParts(month));
+</script>
+
+<header class="gallery-month-header" data-gallery-month={month}>
+    {@render before?.()}
+    <h2 class="gallery-month-title">{parts.name} <span>{parts.year}</span></h2>
+    {@render after?.()}
+    <span class="gallery-month-count">{formatPhotoCount(count)}</span>
+</header>
+
+<style>
+    .gallery-month-header {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        display: flex;
+        min-height: var(--gallery-header, 52px);
+        align-items: center;
+        gap: 10px;
+        margin-inline: calc(var(--gallery-inset-start, 0px) * -1) calc(var(--gallery-inset-end, 0px) * -1);
+        padding-inline: var(--gallery-inset-start, 0px) var(--gallery-inset-end, 0px);
+        background: var(--stor-surface);
+    }
+    .gallery-month-title {
+        margin: 0;
+        color: var(--stor-ink);
+        font-family: var(--stor-font-serif, ui-serif, Georgia, serif);
+        font-size: 20px;
+        font-weight: 600;
+        letter-spacing: -0.012em;
+        line-height: 1.1;
+        white-space: nowrap;
+    }
+    .gallery-month-title span { font-weight: 400; color: var(--stor-muted-text); }
+    .gallery-month-count { margin-left: auto; color: var(--stor-muted-text); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+    @media (min-width: 640px) {
+        .gallery-month-title { font-size: 23px; }
+    }
+</style>