feat: embed medication overview into shared links

Closes #424

frontend/src/components/ShareDialog.tsx

@@ -4,7 +4,6 @@
  */
 
 import { Check, Copy, Link2, X } from "lucide-react";
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface ShareDialogProps {
@@ -41,49 +40,9 @@ export function ShareDialog({
 	onCopyShareLink,
 }: ShareDialogProps) {
 	const { t } = useTranslation();
-	const [overviewCopied, setOverviewCopied] = useState(false);
 	const closeLabel = t("common.close");
 	const copyLabel = shareCopied ? t("share.copied") : t("share.copyLink");
-	const overviewCopyLabel = overviewCopied ? t("share.copied") : t("share.copyOverviewLink");
-	const overviewLink = shareLink ? `${shareLink}/overview` : null;
-
-	useEffect(() => {
-		if (!shareLink) {
-			setOverviewCopied(false);
-		}
-	}, [shareLink]);
-
-	const copyOverviewLink = async () => {
-		if (!overviewLink) return;
-
-		const markCopied = () => {
-			setOverviewCopied(true);
-			setTimeout(() => setOverviewCopied(false), 2000);
-		};
-
-		if (navigator.clipboard?.writeText) {
-			try {
-				await navigator.clipboard.writeText(overviewLink);
-				markCopied();
-				return;
-			} catch {
-				// Fall back to textarea-based copy.
-			}
-		}
-
-		const textarea = document.createElement("textarea");
-		textarea.value = overviewLink;
-		textarea.style.position = "fixed";
-		textarea.style.opacity = "0";
-		document.body.appendChild(textarea);
-		textarea.select();
-		try {
-			document.execCommand("copy");
-			markCopied();
-		} finally {
-			document.body.removeChild(textarea);
-		}
-	};
+	const getPersonLabel = (person: string) => (person === "all" ? t("share.allPeople") : person);
 
 	// ESC is handled by the global handler in App.tsx to avoid double history.back()
 
@@ -152,34 +111,13 @@ export function ShareDialog({
 										{shareCopied ? <Check size={18} aria-hidden="true" /> : <Copy size={18} aria-hidden="true" />}
 									</button>
 								</div>
-								<p className="share-link-label">{t("share.overviewLink")}</p>
-								<div className="share-link-box">
-									<input
-										type="text"
-										value={overviewLink ?? ""}
-										readOnly
-										className="share-link-input"
-										onClick={(e) => (e.target as HTMLInputElement).select()}
-									/>
-									<button
-										type="button"
-										className="btn-copy icon-only tooltip-trigger"
-										onClick={copyOverviewLink}
-										aria-label={overviewCopyLabel}
-										data-tooltip={overviewCopyLabel}
-									>
-										{overviewCopied ? <Check size={18} aria-hidden="true" /> : <Copy size={18} aria-hidden="true" />}
-									</button>
-								</div>
 								{shareCopied && <span className="share-copied-hint">{t("share.copied")}</span>}
-								{overviewCopied && <span className="share-copied-hint">{t("share.copied")}</span>}
 								<div className="share-dialog-footer">
 									<button
 										className="ghost"
 										onClick={() => {
 											onShareLinkChange(null);
 											onShareCopiedChange(false);
-											setOverviewCopied(false);
 										}}
 									>
 										{t("share.generateAnother")}
@@ -201,7 +139,7 @@ export function ShareDialog({
 								>
 									{sharePeople.map((person) => (
 										<option key={person} value={person}>
-											{person}
+											{getPersonLabel(person)}
 										</option>
 									))}
 								</select>

frontend/src/components/SharedMedicationOverviewSection.tsx

@@ -0,0 +1,194 @@
+import { useTranslation } from "react-i18next";
+import type { SharedMedicationOverviewItem } from "../types";
+import { formatDate } from "../utils/formatters";
+import { MedicationAvatar } from "./MedicationAvatar";
+
+function formatPackageInfo(medication: SharedMedicationOverviewItem): string {
+	if (medication.packageType === "blister") {
+		return `${medication.packCount} x ${medication.blistersPerPack} x ${medication.pillsPerBlister}`;
+	}
+
+	if (medication.totalPills !== null) {
+		return `${medication.packCount} x ${medication.totalPills}`;
+	}
+
+	return `${medication.packCount}`;
+}
+
+function getOverviewStatus(
+	priority: SharedMedicationOverviewItem["priority"]
+): { className: string; labelKey: string } | null {
+	if (priority === null) return null;
+	if (priority === "out-of-stock") {
+		return { className: "danger", labelKey: "status.outOfStock" };
+	}
+	if (priority === "high") {
+		return { className: "warning", labelKey: "status.lowStock" };
+	}
+	return { className: "normal", labelKey: "status.normal" };
+}
+
+export interface SharedMedicationOverviewSectionProps {
+	takenBy: string;
+	sharedBy: string | null;
+	medications: SharedMedicationOverviewItem[];
+	showTitle?: boolean;
+	onMedicationImageClick?: (imageUrl: string, name: string) => void;
+}
+
+export function SharedMedicationOverviewSection({
+	takenBy,
+	medications,
+	showTitle = true,
+	onMedicationImageClick,
+}: SharedMedicationOverviewSectionProps) {
+	const { t } = useTranslation();
+	const renderMedicationAvatar = (name: string, imageUrl: string | null) => {
+		const isClickable = Boolean(imageUrl && onMedicationImageClick);
+
+		return (
+			<div
+				className={isClickable ? "med-avatar clickable" : undefined}
+				onClick={() => {
+					if (imageUrl && onMedicationImageClick) onMedicationImageClick(imageUrl, name);
+				}}
+				onKeyDown={(e) => {
+					if ((e.key === "Enter" || e.key === " ") && imageUrl && onMedicationImageClick) {
+						onMedicationImageClick(imageUrl, name);
+					}
+				}}
+			>
+				<MedicationAvatar name={name} imageUrl={imageUrl} size="sm" />
+			</div>
+		);
+	};
+
+	return (
+		<section className="shared-overview-inline-section" aria-label={t("sharedOverview.title", { person: takenBy })}>
+			{showTitle ? (
+				<div className="shared-overview-section-header">
+					<h2>{t("sharedOverview.title", { person: takenBy })}</h2>
+				</div>
+			) : null}
+			{medications.length === 0 ? (
+				<p className="shared-schedule-empty">{t("sharedOverview.noMedications")}</p>
+			) : (
+				<>
+					<div className="shared-overview-table-wrap">
+						<table className="shared-overview-table">
+							<thead>
+								<tr>
+									<th>{t("sharedOverview.columns.name")}</th>
+									<th>{t("sharedOverview.columns.package")}</th>
+									<th>{t("sharedOverview.columns.stock")}</th>
+									<th>{t("sharedOverview.columns.daysLeft")}</th>
+									<th>{t("sharedOverview.columns.depletion")}</th>
+									<th>{t("sharedOverview.columns.priority")}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{medications.map((medication) => {
+									const overviewStatus = getOverviewStatus(medication.priority);
+
+									return (
+										<tr key={`${medication.name}-${medication.medicationStartDate ?? "no-start"}`}>
+											<td>
+												<div className="shared-overview-medication-cell">
+													{renderMedicationAvatar(medication.name, medication.imageUrl)}
+													<div className="shared-overview-medication-text">
+														<div className="shared-overview-med-name">
+															<strong>{medication.name}</strong>
+															{medication.genericName ? (
+																<span className="shared-overview-med-generic">{medication.genericName}</span>
+															) : null}
+														</div>
+													</div>
+												</div>
+											</td>
+											<td>{formatPackageInfo(medication)}</td>
+											<td>
+												<span className="shared-overview-stock-value">
+													{medication.currentStock === null || medication.capacity === null
+														? "-"
+														: t("sharedOverview.stock.of", {
+																current: medication.currentStock,
+																capacity: medication.capacity,
+															})}
+												</span>
+											</td>
+											<td>{medication.daysLeft === null ? "-" : medication.daysLeft}</td>
+											<td>
+												<span className="shared-overview-date-value">{formatDate(medication.depletionDate)}</span>
+											</td>
+											<td>
+												{overviewStatus === null ? (
+													"-"
+												) : (
+													<span className={`shared-overview-priority ${overviewStatus.className}`}>
+														{t(overviewStatus.labelKey)}
+													</span>
+												)}
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+
+					<div className="shared-overview-cards">
+						{medications.map((medication) => {
+							const overviewStatus = getOverviewStatus(medication.priority);
+
+							return (
+								<article
+									className="shared-overview-card"
+									key={`${medication.name}-${medication.medicationStartDate ?? "no-start"}`}
+								>
+									<div className="shared-overview-card-title">
+										{renderMedicationAvatar(medication.name, medication.imageUrl)}
+										<div className="shared-overview-medication-text">
+											<div className="shared-overview-med-name">
+												<strong>{medication.name}</strong>
+												{medication.genericName ? (
+													<span className="shared-overview-med-generic">{medication.genericName}</span>
+												) : null}
+											</div>
+										</div>
+									</div>
+									<div className="shared-overview-card-grid">
+										<span>{t("sharedOverview.columns.package")}</span>
+										<strong>{formatPackageInfo(medication)}</strong>
+										<span>{t("sharedOverview.columns.stock")}</span>
+										<strong>
+											<span className="shared-overview-stock-value">
+												{medication.currentStock === null || medication.capacity === null
+													? "-"
+													: t("sharedOverview.stock.of", {
+															current: medication.currentStock,
+															capacity: medication.capacity,
+														})}
+											</span>
+										</strong>
+										<span>{t("sharedOverview.columns.daysLeft")}</span>
+										<strong>{medication.daysLeft === null ? "-" : medication.daysLeft}</strong>
+
+										<span>{t("sharedOverview.columns.depletion")}</span>
+										<strong>
+											<span className="shared-overview-date-value">{formatDate(medication.depletionDate)}</span>
+										</strong>
+									</div>
+									{overviewStatus ? (
+										<span className={`shared-overview-priority ${overviewStatus.className}`}>
+											{t(overviewStatus.labelKey)}
+										</span>
+									) : null}
+								</article>
+							);
+						})}
+					</div>
+				</>
+			)}
+		</section>
+	);
+}

frontend/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as ProfileModal } from "./ProfileModal";
 export { default as ReportModal } from "./ReportModal";
 export type { ShareDialogProps } from "./ShareDialog";
 export { ShareDialog } from "./ShareDialog";
+export { SharedMedicationOverviewSection } from "./SharedMedicationOverviewSection";
 export { SharedSchedule } from "./SharedSchedule";
 export type { TagInputProps } from "./TagInput";
 export { TagInput } from "./TagInput";