feat: add private media dashboard slice
This commit is contained in:
jjbrunton committed
1 parent
8d4eae7ab5
commit
768470204b
8 files changed
+688
No files matched your search
@@ -0,0 +1,43 @@
|
||||
import type { ZodType } from 'zod';
|
||||
import {
|
||||
ErrorResponseSchema,
|
||||
MediaResponseSchema,
|
||||
MediaSyncStatusSchema,
|
||||
MediaSyncTriggerResponseSchema,
|
||||
type MediaItem,
|
||||
type MediaSyncStatus,
|
||||
} from '../../../../../packages/api-contracts/src/index.js';
|
||||
|
||||
async function parseResponse<T>(response: Response, schema: ZodType<T>): Promise<T> {
|
||||
const payload: unknown = await response.json();
|
||||
if (!response.ok) {
|
||||
const parsedError = ErrorResponseSchema.safeParse(payload);
|
||||
throw new Error(parsedError.success ? parsedError.data.error : `Request failed (${response.status})`);
|
||||
}
|
||||
return schema.parse(payload);
|
||||
}
|
||||
|
||||
function request(path: string, init?: RequestInit): Promise<Response> {
|
||||
return globalThis.fetch(path, { credentials: 'same-origin', ...init });
|
||||
}
|
||||
|
||||
export async function fetchMedia(): Promise<MediaItem[]> {
|
||||
return parseResponse(await request('/api/media'), MediaResponseSchema);
|
||||
}
|
||||
|
||||
export async function fetchMediaSyncStatus(): Promise<MediaSyncStatus> {
|
||||
return parseResponse(await request('/api/media/sync'), MediaSyncStatusSchema);
|
||||
}
|
||||
|
||||
export async function triggerMediaSync(isFull: boolean): Promise<void> {
|
||||
const path = isFull ? '/api/media/sync/full' : '/api/media/sync';
|
||||
const response = await parseResponse(
|
||||
await request(path, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: isFull ? undefined : JSON.stringify({ full: false }),
|
||||
}),
|
||||
MediaSyncTriggerResponseSchema,
|
||||
);
|
||||
if (!response.success) throw new Error(response.reason);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
|
||||
|
||||
export interface MediaFilters {
|
||||
conversation: string;
|
||||
sender: string;
|
||||
type: 'all' | 'image' | 'gif';
|
||||
dateRange: 'all' | '24h' | '7d' | '30d';
|
||||
}
|
||||
|
||||
export function mediaConversation(item: MediaItem): string {
|
||||
return item.chatUsername ?? item.chatRoomId ?? 'unknown';
|
||||
}
|
||||
|
||||
export function mediaType(item: MediaItem): 'image' | 'gif' {
|
||||
return item.fileName.toLowerCase().endsWith('.gif') ? 'gif' : 'image';
|
||||
}
|
||||
|
||||
export function filterMedia(items: MediaItem[], filters: MediaFilters, now: number): MediaItem[] {
|
||||
const rangeMs = {
|
||||
all: null,
|
||||
'24h': 86_400_000,
|
||||
'7d': 7 * 86_400_000,
|
||||
'30d': 30 * 86_400_000,
|
||||
}[filters.dateRange];
|
||||
|
||||
return items.filter((item) => {
|
||||
if (filters.conversation !== 'all' && mediaConversation(item) !== filters.conversation) return false;
|
||||
if (filters.sender !== 'all' && item.sender !== filters.sender) return false;
|
||||
if (filters.type !== 'all' && mediaType(item) !== filters.type) return false;
|
||||
if (rangeMs !== null && item.timestamp < now - rangeMs) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
interface FullSyncDialogProps {
|
||||
isPending: boolean;
|
||||
onCancel(): void;
|
||||
onConfirm(): void;
|
||||
}
|
||||
|
||||
export function FullSyncDialog({ isPending, onCancel, onConfirm }: FullSyncDialogProps) {
|
||||
const cancelButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
cancelButtonRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div aria-labelledby="full-sync-title" aria-modal="true" className="dialog-backdrop" role="dialog">
|
||||
<div className="dialog-card">
|
||||
<span className="eyebrow">Confirm expensive action</span>
|
||||
<h2 id="full-sync-title">Run full media sync?</h2>
|
||||
<p>This scans every conversation and can take several minutes. Routine refreshes should use Sync new media.</p>
|
||||
<div className="dialog-actions">
|
||||
<button className="button secondary" disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">
|
||||
Cancel
|
||||
</button>
|
||||
<button className="button danger" disabled={isPending} onClick={onConfirm} type="button">
|
||||
{isPending ? 'Syncing…' : 'Run full sync'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
|
||||
import { mediaConversation, mediaType } from './filters.js';
|
||||
|
||||
interface MediaCardProps {
|
||||
item: MediaItem;
|
||||
isRevealed: boolean;
|
||||
onToggleReveal(): void;
|
||||
}
|
||||
|
||||
function formatMediaDate(timestamp: number): string {
|
||||
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
|
||||
}
|
||||
|
||||
export function MediaCard({ item, isRevealed, onToggleReveal }: MediaCardProps) {
|
||||
return (
|
||||
<article className="media-card">
|
||||
<div className="media-preview">
|
||||
<img
|
||||
alt={`Media from ${item.sender}`}
|
||||
className={isRevealed ? 'media-image' : 'media-image is-blurred'}
|
||||
loading="lazy"
|
||||
src={item.urlPath}
|
||||
/>
|
||||
{!isRevealed ? <span className="privacy-label">Private media hidden</span> : null}
|
||||
</div>
|
||||
<div className="media-card-body">
|
||||
<div>
|
||||
<strong>{item.sender}</strong>
|
||||
<span>{mediaConversation(item)}</span>
|
||||
</div>
|
||||
<dl>
|
||||
<div><dt>Type</dt><dd>{mediaType(item) === 'gif' ? 'GIF' : 'Image'}</dd></div>
|
||||
<div><dt>Received</dt><dd>{formatMediaDate(item.timestamp)}</dd></div>
|
||||
</dl>
|
||||
<button
|
||||
className="button secondary media-reveal"
|
||||
onClick={onToggleReveal}
|
||||
type="button"
|
||||
>
|
||||
{isRevealed ? `Hide media from ${item.sender}` : `Reveal media from ${item.sender}`}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { filterMedia, mediaConversation, type MediaFilters } from './filters.js';
|
||||
import { FullSyncDialog } from './full-sync-dialog.js';
|
||||
import { MediaCard } from './media-card.js';
|
||||
import { useMediaQuery, useMediaSyncStatusQuery, useTriggerMediaSyncMutation } from './queries.js';
|
||||
import './media.css';
|
||||
|
||||
const initialFilters: MediaFilters = {
|
||||
conversation: 'all',
|
||||
sender: 'all',
|
||||
type: 'all',
|
||||
dateRange: 'all',
|
||||
};
|
||||
|
||||
function errorMessage(error: Error | null): string {
|
||||
return error?.message ?? 'Something went wrong.';
|
||||
}
|
||||
|
||||
function formatLastSync(timestamp: number): string {
|
||||
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
|
||||
}
|
||||
|
||||
export function MediaPage() {
|
||||
const mediaQuery = useMediaQuery();
|
||||
const statusQuery = useMediaSyncStatusQuery();
|
||||
const syncMutation = useTriggerMediaSyncMutation();
|
||||
const [filters, setFilters] = useState<MediaFilters>(initialFilters);
|
||||
const [revealedIds, setRevealedIds] = useState<Set<string>>(() => new Set());
|
||||
const [isRevealAll, setIsRevealAll] = useState(false);
|
||||
const [isFullSyncDialogOpen, setIsFullSyncDialogOpen] = useState(false);
|
||||
|
||||
const items = mediaQuery.data ?? [];
|
||||
const visibleItems = useMemo(() => filterMedia(items, filters, Date.now()), [items, filters]);
|
||||
const conversations = useMemo(
|
||||
() => [...new Set(items.map(mediaConversation))].sort((left, right) => left.localeCompare(right)),
|
||||
[items],
|
||||
);
|
||||
const senders = useMemo(
|
||||
() => [...new Set(items.map((item) => item.sender))].sort((left, right) => left.localeCompare(right)),
|
||||
[items],
|
||||
);
|
||||
const isSyncBusy = statusQuery.data?.isSyncing === true || syncMutation.isPending;
|
||||
|
||||
function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
|
||||
setFilters((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
function toggleItem(itemId: string) {
|
||||
if (isRevealAll) {
|
||||
setIsRevealAll(false);
|
||||
setRevealedIds(new Set(items.filter((item) => item.id !== itemId).map((item) => item.id)));
|
||||
return;
|
||||
}
|
||||
setRevealedIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (next.has(itemId)) next.delete(itemId);
|
||||
else next.add(itemId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function runSync(isFull: boolean) {
|
||||
syncMutation.mutate(isFull, {
|
||||
onSuccess: () => {
|
||||
if (isFull) setIsFullSyncDialogOpen(false);
|
||||
},
|
||||
onError: () => {
|
||||
if (isFull) setIsFullSyncDialogOpen(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (mediaQuery.isPending) {
|
||||
return <div aria-label="Loading media" className="page-state" role="status"><span className="spinner" />Loading media…</div>;
|
||||
}
|
||||
|
||||
if (mediaQuery.isError) {
|
||||
return (
|
||||
<div className="page-state error-state" role="alert">
|
||||
<strong>Media unavailable</strong>
|
||||
<span>{errorMessage(mediaQuery.error)}</span>
|
||||
<button className="button secondary" onClick={() => void mediaQuery.refetch()} type="button">Retry media</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page media-page">
|
||||
<header className="page-header">
|
||||
<div>
|
||||
<span className="eyebrow">Private gallery</span>
|
||||
<h1>Media</h1>
|
||||
<p>Browse authenticated conversation media. Everything stays blurred until you choose to reveal it.</p>
|
||||
</div>
|
||||
<div className="header-actions">
|
||||
{items.length > 0 ? (
|
||||
<button
|
||||
className="button secondary"
|
||||
onClick={() => {
|
||||
setIsRevealAll((current) => !current);
|
||||
setRevealedIds(new Set());
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
{isRevealAll ? 'Blur all media' : 'Reveal all media'}
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
className="button secondary"
|
||||
disabled={isSyncBusy}
|
||||
onClick={() => {
|
||||
syncMutation.reset();
|
||||
setIsFullSyncDialogOpen(true);
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Full sync
|
||||
</button>
|
||||
<button className="button primary" disabled={isSyncBusy} onClick={() => runSync(false)} type="button">
|
||||
{isSyncBusy ? 'Syncing…' : 'Sync new media'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section aria-label="Media sync status" className="status-strip media-sync-status">
|
||||
{statusQuery.isPending ? <span role="status">Loading sync status…</span> : null}
|
||||
{statusQuery.isError ? (
|
||||
<div role="alert">
|
||||
<span>{errorMessage(statusQuery.error)}</span>
|
||||
<button className="button secondary" onClick={() => void statusQuery.refetch()} type="button">Retry sync status</button>
|
||||
</div>
|
||||
) : null}
|
||||
{statusQuery.data ? (
|
||||
statusQuery.data.isSyncing ? (
|
||||
<div role="status"><span className="spinner" /><strong>Media sync in progress</strong></div>
|
||||
) : (
|
||||
<div>
|
||||
<span className="status-dot running" aria-hidden="true" />
|
||||
<div>
|
||||
<small>Sync status</small>
|
||||
<strong>{statusQuery.data.lastSyncChats === null ? 'No completed sync yet' : `Last synced ${statusQuery.data.lastSyncChats} conversations`}</strong>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
{statusQuery.data?.lastSyncAt ? <span className="status-note">{formatLastSync(statusQuery.data.lastSyncAt)}</span> : null}
|
||||
</section>
|
||||
|
||||
{statusQuery.data?.lastError ? <div className="cooldown-banner" role="alert"><strong>Last sync failed</strong><span>{statusQuery.data.lastError}</span></div> : null}
|
||||
{syncMutation.isSuccess ? <div className="media-notice success" role="status">{syncMutation.variables ? 'Full media sync completed.' : 'Media sync completed.'}</div> : null}
|
||||
{syncMutation.isError ? <div className="media-notice error" role="alert">{errorMessage(syncMutation.error)}</div> : null}
|
||||
|
||||
{items.length === 0 ? (
|
||||
<section className="panel empty-state"><strong>No media yet.</strong><span>Use Sync new media to check recent conversations.</span></section>
|
||||
) : (
|
||||
<>
|
||||
<section aria-label="Media filters" className="panel media-filters">
|
||||
<label>Conversation
|
||||
<select value={filters.conversation} onChange={(event) => updateFilter('conversation', event.target.value)}>
|
||||
<option value="all">All conversations</option>
|
||||
{conversations.map((conversation) => <option key={conversation} value={conversation}>{conversation}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Sender
|
||||
<select value={filters.sender} onChange={(event) => updateFilter('sender', event.target.value)}>
|
||||
<option value="all">All senders</option>
|
||||
{senders.map((sender) => <option key={sender} value={sender}>{sender}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Media type
|
||||
<select value={filters.type} onChange={(event) => updateFilter('type', event.target.value as MediaFilters['type'])}>
|
||||
<option value="all">All types</option><option value="image">Images</option><option value="gif">GIFs</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Date range
|
||||
<select value={filters.dateRange} onChange={(event) => updateFilter('dateRange', event.target.value as MediaFilters['dateRange'])}>
|
||||
<option value="all">Any time</option><option value="24h">Past 24 hours</option><option value="7d">Past 7 days</option><option value="30d">Past 30 days</option>
|
||||
</select>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{visibleItems.length === 0 ? (
|
||||
<section className="panel empty-state"><strong>No media matches these filters.</strong><span>Try broadening one or more filters.</span></section>
|
||||
) : (
|
||||
<section aria-label="Media gallery" className="media-grid">
|
||||
{visibleItems.map((item) => (
|
||||
<MediaCard
|
||||
isRevealed={isRevealAll || revealedIds.has(item.id)}
|
||||
item={item}
|
||||
key={item.id}
|
||||
onToggleReveal={() => toggleItem(item.id)}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isFullSyncDialogOpen ? (
|
||||
<FullSyncDialog
|
||||
isPending={syncMutation.isPending}
|
||||
onCancel={() => setIsFullSyncDialogOpen(false)}
|
||||
onConfirm={() => runSync(true)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.media-page { max-width: 86rem; }
|
||||
.media-sync-status { min-height: 4.4rem; }
|
||||
.media-sync-status > div[role="alert"] { width: 100%; justify-content: space-between; }
|
||||
.media-sync-status .spinner { width: 1rem; height: 1rem; }
|
||||
.media-notice { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: .75rem; font-weight: 700; }
|
||||
.media-notice.success { color: #aaf0c4; background: #163a26; border: 1px solid #28593d; }
|
||||
.media-notice.error { color: #ffd1ce; background: #461b18; border: 1px solid #80352f; }
|
||||
.media-filters { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-bottom: 1rem; }
|
||||
.media-filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
|
||||
.media-filters select { width: 100%; min-height: 2.6rem; padding: .5rem .7rem; color: #e9f1ec; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .6rem; }
|
||||
.media-filters select:focus-visible, .media-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
.media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
|
||||
.media-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; }
|
||||
.media-preview { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #050907; }
|
||||
.media-image { width: 100%; height: 100%; object-fit: cover; transition: filter 160ms ease, transform 160ms ease; }
|
||||
.media-image.is-blurred { filter: blur(24px) brightness(.55); transform: scale(1.12); }
|
||||
.privacy-label { position: absolute; padding: .45rem .65rem; color: white; background: rgba(0, 0, 0, .72); border-radius: 999px; font-size: .75rem; font-weight: 800; }
|
||||
.media-card-body { display: grid; gap: .8rem; padding: .9rem; }
|
||||
.media-card-body > div:first-child { display: flex; justify-content: space-between; gap: .75rem; }
|
||||
.media-card-body > div:first-child span { color: var(--muted); }
|
||||
.media-card-body dl { display: grid; gap: .4rem; margin: 0; }
|
||||
.media-card-body dl div { display: flex; justify-content: space-between; gap: .75rem; }
|
||||
.media-card-body dt { color: var(--muted); }
|
||||
.media-card-body dd { margin: 0; text-align: right; }
|
||||
.media-reveal { width: 100%; }
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.media-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 72rem) {
|
||||
.media-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { fetchMedia, fetchMediaSyncStatus, triggerMediaSync } from './api.js';
|
||||
|
||||
export const mediaQueryKeys = {
|
||||
items: ['dashboard', 'media'] as const,
|
||||
syncStatus: ['dashboard', 'media', 'sync-status'] as const,
|
||||
};
|
||||
|
||||
export function useMediaQuery() {
|
||||
return useQuery({ queryKey: mediaQueryKeys.items, queryFn: fetchMedia });
|
||||
}
|
||||
|
||||
export function useMediaSyncStatusQuery() {
|
||||
return useQuery({
|
||||
queryKey: mediaQueryKeys.syncStatus,
|
||||
queryFn: fetchMediaSyncStatus,
|
||||
refetchInterval(query) {
|
||||
return query.state.data?.isSyncing ? 1_000 : 15_000;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useTriggerMediaSyncMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn(isFull: boolean) {
|
||||
const syncRequest = triggerMediaSync(isFull);
|
||||
void queryClient.invalidateQueries({ queryKey: mediaQueryKeys.syncStatus });
|
||||
return syncRequest;
|
||||
},
|
||||
async onSuccess() {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: mediaQueryKeys.items }),
|
||||
queryClient.invalidateQueries({ queryKey: mediaQueryKeys.syncStatus }),
|
||||
]);
|
||||
},
|
||||
onError() {
|
||||
void queryClient.invalidateQueries({ queryKey: mediaQueryKeys.syncStatus });
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user