feat(housekeeping): personalize command deck

src/features/housekeeping/foundation/shell/recent-work.tsx

@@ -0,0 +1,47 @@
+import Link from "@/components/link";
+import type { HousekeepingSurface } from "../contracts";
+import type { HousekeepingRecentItem } from "../recent/recent-work";
+import { toHousekeepingHref } from "../routing/href";
+
+export interface RecentWorkLabels {
+	readonly title: string;
+	readonly empty: string;
+}
+
+export function RecentWork({
+	items,
+	labels,
+	surface,
+	titles = {},
+}: {
+	readonly items: readonly HousekeepingRecentItem[];
+	readonly labels: RecentWorkLabels;
+	readonly surface: HousekeepingSurface;
+	readonly titles?: Readonly<Record<string, string>>;
+}) {
+	return (
+		<section aria-labelledby="housekeeping-recent-title" className="space-y-3">
+			<h2 id="housekeeping-recent-title" className="text-lg font-semibold">
+				{labels.title}
+			</h2>
+			{items.length === 0 ? <p>{labels.empty}</p> : null}
+			<ul className="space-y-2">
+				{items.map((item) => (
+					<li
+						key={item.routeId}
+						className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3"
+					>
+						<Link href={toHousekeepingHref(item.canonicalHref, surface)}>
+							{titles[item.labelKey] ?? item.labelKey}
+						</Link>
+						<div className="text-xs text-[var(--admin-text-muted)]">
+							<span>{item.source}</span>
+							{" · "}
+							<time dateTime={item.occurredAt}>{item.occurredAt}</time>
+						</div>
+					</li>
+				))}
+			</ul>
+		</section>
+	);
+}