mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 13:22:14 +00:00
Marc-André Bombeck
11fd48cc0e
Auto-index on upload means content search is silent-by-default, so the old per-document index chore no longer reads as a task. Consolidate every AI reading action into one inviting block on the detail sheet, led by a prominent Read with AI action, and show each document's searchable status as a pill that distinguishes an AI-read document from a locally-indexed one. - New Read-with-AI block: prominent read/re-read action plus suggest and session-only summary, gated on provider availability; the calm settings pointer replaces the actions (never an error) when no provider is set up. - Searchable status pill reflects the auto-index: Read by AI (provider read the original, highlighted), Searchable (local), or a quiet not-yet state. - Card searchable marker distinguishes an AI-read document with a Sparkles glyph from a locally-indexed one; both carry an accessible label. - Drop the manual index/re-index chore copy; keep the corpus baseline affordance in the filter bar for older un-indexed documents.
351 lines
12 KiB
TypeScript
351 lines
12 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* One document in the vault timeline (compact-density Card) plus the two
|
|
* transient upload-state cards (in-flight with a live progress ring, failed
|
|
* with the translated §3.2 reason). All three share the card footprint so an
|
|
* optimistic entry morphs into the stored row without the grid jumping.
|
|
*
|
|
* Anatomy per the design standards: kind icon `text-foreground size-5`,
|
|
* title in foreground (`text-sm font-medium`, truncated), one muted meta
|
|
* line (date · size · filename), condition-tag pills, an attachment-class
|
|
* badge for download-only formats, and a selection checkbox that appears on
|
|
* hover / focus / while selected. The whole card is clickable through an
|
|
* invisible overlay button; the checkbox floats above it.
|
|
*/
|
|
import { Download, ScanSearch, Sparkles, X } from "lucide-react";
|
|
import { useRef } from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { useFormatters, useTranslations } from "@/lib/i18n/context";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
isAiReadSource,
|
|
type InboundDocumentDto,
|
|
} from "@/lib/validations/inbound-documents";
|
|
import { DOCUMENT_KIND_ICONS } from "./document-kind-meta";
|
|
import type { UploadQueueItem } from "./use-document-upload";
|
|
import { documentDateKey, formatBytes } from "./vault-utils";
|
|
|
|
/** Press-and-hold duration that flips a touch press into "select" mode. */
|
|
const LONG_PRESS_MS = 500;
|
|
|
|
export function DocumentCard({
|
|
document,
|
|
selected,
|
|
onToggleSelected,
|
|
onOpen,
|
|
onDelete,
|
|
highlighted,
|
|
tabIndex = 0,
|
|
onCardFocus,
|
|
onPrefetch,
|
|
}: {
|
|
document: InboundDocumentDto;
|
|
selected: boolean;
|
|
/** `range` = extend the selection from the last anchor (shift-click). */
|
|
onToggleSelected: (id: string, range?: boolean) => void;
|
|
onOpen: (id: string) => void;
|
|
/** Delete key on the focused card — undo-able delete owned by the page. */
|
|
onDelete?: (id: string) => void;
|
|
/** Brief ring after a duplicate upload resolved to this existing row. */
|
|
highlighted: boolean;
|
|
/** Roving-tabindex slot from the timeline (0 = the one tabbable card). */
|
|
tabIndex?: number;
|
|
/** The open-button gained focus (keyboard/roving bookkeeping). */
|
|
onCardFocus?: (id: string) => void;
|
|
/** Hover/focus intent — prefetches the detail metadata (never the blob). */
|
|
onPrefetch?: (id: string) => void;
|
|
}) {
|
|
const { t, locale } = useTranslations();
|
|
const format = useFormatters();
|
|
|
|
// Touch long-press selects instead of opening; the click that the
|
|
// browser fires after the release is swallowed once.
|
|
const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const longPressFired = useRef(false);
|
|
const cancelLongPress = () => {
|
|
if (longPressTimer.current) {
|
|
clearTimeout(longPressTimer.current);
|
|
longPressTimer.current = null;
|
|
}
|
|
};
|
|
|
|
const title =
|
|
document.title ?? document.filename ?? t("documents.card.untitled");
|
|
const Icon = DOCUMENT_KIND_ICONS[document.kind];
|
|
const date = format.date(`${documentDateKey(document)}T12:00:00.000Z`);
|
|
const size = formatBytes(document.byteSize, locale);
|
|
const showFilename =
|
|
document.filename !== null && document.filename !== title;
|
|
|
|
return (
|
|
<Card
|
|
data-slot="document-card"
|
|
data-document-id={document.id}
|
|
className={cn(
|
|
"group relative h-full gap-2 py-3 transition-shadow md:py-4",
|
|
"hover:shadow-sm",
|
|
highlighted && "ring-primary ring-2",
|
|
)}
|
|
>
|
|
<CardContent className="flex h-full flex-col gap-2 px-4">
|
|
<div className="flex items-start gap-2">
|
|
<Icon
|
|
className="text-foreground mt-0.5 size-5 shrink-0"
|
|
aria-hidden
|
|
/>
|
|
<p className="min-w-0 flex-1 truncate text-sm font-medium">{title}</p>
|
|
<Checkbox
|
|
checked={selected}
|
|
// Explicit click handling instead of onCheckedChange: the mouse
|
|
// event carries `shiftKey` for file-manager range selection.
|
|
// preventDefault stops Radix's internal toggle (state is fully
|
|
// controlled by the page's selection set anyway).
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onToggleSelected(document.id, e.shiftKey);
|
|
}}
|
|
aria-label={t("documents.card.selectLabel", { title })}
|
|
className={cn(
|
|
"relative z-10 shrink-0 transition-opacity",
|
|
"opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
|
|
selected && "opacity-100",
|
|
)}
|
|
/>
|
|
</div>
|
|
<p className="text-muted-foreground truncate text-xs">
|
|
{date} · {size}
|
|
{showFilename ? ` · ${document.filename}` : ""}
|
|
</p>
|
|
{document.conditionLinks.length > 0 ||
|
|
document.servingClass === "attachment" ||
|
|
document.hasContentIndex ? (
|
|
<div className="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
|
|
{document.conditionLinks.map((link) => (
|
|
<span
|
|
key={link.episodeId}
|
|
className="bg-muted text-foreground inline-flex max-w-40 items-center rounded-full px-2 py-0.5 text-xs"
|
|
>
|
|
<span className="truncate">{link.name}</span>
|
|
</span>
|
|
))}
|
|
{document.servingClass === "attachment" ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground gap-1 text-xs font-normal"
|
|
>
|
|
<Download className="size-3" aria-hidden />
|
|
{t("documents.card.attachmentBadge")}
|
|
</Badge>
|
|
) : null}
|
|
{document.hasContentIndex ? (
|
|
// Subtle searchable marker — icon-only to keep the row calm; the
|
|
// label rides an accessible name. An AI-read document gets the
|
|
// highlighted Sparkles (primary) so the richer read is legible at
|
|
// a glance; a locally-indexed one keeps the quiet muted glass.
|
|
isAiReadSource(document.contentIndexSource) ? (
|
|
<span
|
|
data-slot="document-searchable"
|
|
data-source="ai-read"
|
|
className="text-primary inline-flex items-center"
|
|
title={t("documents.card.aiReadBadge")}
|
|
>
|
|
<Sparkles className="size-3.5" aria-hidden />
|
|
<span className="sr-only">
|
|
{t("documents.card.aiReadBadge")}
|
|
</span>
|
|
</span>
|
|
) : (
|
|
<span
|
|
data-slot="document-searchable"
|
|
data-source="local"
|
|
className="text-muted-foreground inline-flex items-center"
|
|
title={t("documents.card.searchableBadge")}
|
|
>
|
|
<ScanSearch className="size-3.5" aria-hidden />
|
|
<span className="sr-only">
|
|
{t("documents.card.searchableBadge")}
|
|
</span>
|
|
</span>
|
|
)
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
{/* Whole-card click target. Painted last so it sits above the content
|
|
(the checkbox stays reachable via its own z-10). Keyboard contract
|
|
(roving tabindex owned by the timeline): Enter opens (native
|
|
click), Space toggles selection, Delete removes with undo. Touch:
|
|
press-and-hold selects instead of opening. */}
|
|
<button
|
|
type="button"
|
|
data-slot="document-open"
|
|
tabIndex={tabIndex}
|
|
onClick={() => {
|
|
if (longPressFired.current) {
|
|
longPressFired.current = false;
|
|
return;
|
|
}
|
|
onOpen(document.id);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === " ") {
|
|
e.preventDefault();
|
|
onToggleSelected(document.id, e.shiftKey);
|
|
} else if (e.key === "Delete" || e.key === "Backspace") {
|
|
e.preventDefault();
|
|
onDelete?.(document.id);
|
|
}
|
|
}}
|
|
onTouchStart={() => {
|
|
longPressFired.current = false;
|
|
cancelLongPress();
|
|
longPressTimer.current = setTimeout(() => {
|
|
longPressFired.current = true;
|
|
onToggleSelected(document.id);
|
|
}, LONG_PRESS_MS);
|
|
}}
|
|
onTouchMove={cancelLongPress}
|
|
onTouchEnd={cancelLongPress}
|
|
onTouchCancel={cancelLongPress}
|
|
onMouseEnter={() => onPrefetch?.(document.id)}
|
|
onFocus={() => {
|
|
onCardFocus?.(document.id);
|
|
onPrefetch?.(document.id);
|
|
}}
|
|
aria-label={t("documents.card.openLabel", { title })}
|
|
className="focus-visible:ring-ring/50 absolute inset-0 rounded-xl focus-visible:ring-[3px] focus-visible:outline-none"
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/** SVG progress ring for the in-flight upload card (0..1). */
|
|
function ProgressRing({ fraction }: { fraction: number }) {
|
|
const clamped = Math.min(1, Math.max(0, fraction));
|
|
const r = 13;
|
|
const circumference = 2 * Math.PI * r;
|
|
return (
|
|
<svg
|
|
viewBox="0 0 32 32"
|
|
className="size-8 shrink-0 -rotate-90"
|
|
role="progressbar"
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
aria-valuenow={Math.round(clamped * 100)}
|
|
>
|
|
<circle
|
|
cx="16"
|
|
cy="16"
|
|
r={r}
|
|
fill="none"
|
|
strokeWidth="3"
|
|
className="stroke-muted"
|
|
/>
|
|
<circle
|
|
cx="16"
|
|
cy="16"
|
|
r={r}
|
|
fill="none"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
className="stroke-primary transition-[stroke-dashoffset] duration-200"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={circumference * (1 - clamped)}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Transient card for a queue entry: uploading (progress ring) or failed
|
|
* (translated reason + dismiss). Shares the DocumentCard footprint.
|
|
*/
|
|
export function UploadStateCard({
|
|
item,
|
|
onDismiss,
|
|
}: {
|
|
item: UploadQueueItem;
|
|
onDismiss: (localId: string) => void;
|
|
}) {
|
|
const { t, locale } = useTranslations();
|
|
|
|
const failure = item.failure;
|
|
let failureCopy: string | null = null;
|
|
if (failure) {
|
|
switch (failure.reason) {
|
|
case "fileTooLarge":
|
|
failureCopy = t("documents.error.fileTooLarge", {
|
|
maxSize: formatBytes(failure.maxFileBytes ?? 0, locale),
|
|
});
|
|
break;
|
|
case "quotaExceeded":
|
|
failureCopy = t("documents.error.quotaExceeded", {
|
|
used: formatBytes(failure.usedBytes ?? 0, locale),
|
|
quota: formatBytes(failure.quotaBytes ?? 0, locale),
|
|
});
|
|
break;
|
|
case "unsupportedType":
|
|
failureCopy = t("documents.error.unsupportedType");
|
|
break;
|
|
case "purged":
|
|
failureCopy = t("documents.error.purged");
|
|
break;
|
|
case "duplicateExists":
|
|
failureCopy = t("documents.error.duplicateExists");
|
|
break;
|
|
case "rateLimited":
|
|
failureCopy = t("documents.error.rateLimited");
|
|
break;
|
|
default:
|
|
failureCopy = t("documents.error.generic");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
data-slot="document-upload-card"
|
|
className={cn(
|
|
"h-full gap-2 border-dashed py-3 md:py-4",
|
|
item.status === "error" && "border-destructive/50",
|
|
)}
|
|
>
|
|
<CardContent className="flex h-full flex-col gap-2 px-4">
|
|
<div className="flex items-center gap-3">
|
|
{item.status === "uploading" ? (
|
|
<ProgressRing fraction={item.progress} />
|
|
) : null}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{item.fileName}</p>
|
|
<p className="text-muted-foreground text-xs">
|
|
{item.status === "uploading"
|
|
? t("documents.card.uploading")
|
|
: formatBytes(item.byteSize, locale)}
|
|
</p>
|
|
</div>
|
|
{item.status === "error" ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 shrink-0"
|
|
onClick={() => onDismiss(item.localId)}
|
|
aria-label={t("documents.card.dismissFailed")}
|
|
>
|
|
<X className="size-4" aria-hidden />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
{failureCopy ? (
|
|
<p role="alert" className="text-destructive text-xs">
|
|
{failureCopy}
|
|
</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|