"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type UpdateTag = "new" | "improved" | "fixed"; export interface ProductUpdate { id: string; tag: UpdateTag; title: string; summary: string; /** Extra detail shown when expanded. */ details?: string[]; /** YYYY-MM-DD */ date: string; /** Show as the large spotlight card. */ featured?: boolean; unread?: boolean; href?: string; } export interface WhatsNewWidgetProps { title?: string; updates?: ProductUpdate[]; /** Start with the panel open. */ defaultOpen?: boolean; onFeedback?: (id: string, helpful: boolean) => void; onSubscribe?: (on: boolean) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#141414", bar: "#101010", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", hover: "rgba(255,255,255,0.035)", skel: "rgba(255,255,255,0.045)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#FB923C", ring: "rgba(245,244,241,0.6)", shadow: "0 30px 70px -20px rgba(0,0,0,0.85)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", bar: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", hover: "rgba(10,10,10,0.025)", skel: "rgba(10,10,10,0.05)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#EA580C", ring: "rgba(10,10,10,0.5)", shadow: "0 30px 70px -24px rgba(0,0,0,0.25)" }, }; const TAGS: Record = { new: { label: "New", color: "#FB923C" }, improved: { label: "Improved", color: "#60A5FA" }, fixed: { label: "Fixed", color: "#4ADE80" }, }; const DEFAULT_UPDATES: ProductUpdate[] = [ { id: "u1", tag: "new", title: "AI summaries for every thread", summary: "Long conversations now open with a three-line summary and the decisions that were made.", details: ["Works in English, German, Spanish and Turkish.", "Turn it off per workspace in Settings → AI.", "Summaries never leave your region."], date: "2026-10-30", featured: true, unread: true, href: "#" }, { id: "u2", tag: "new", title: "Recurring tasks", summary: "Repeat a task every day, week or month, or on the last Friday of the quarter.", details: ["Edit one occurrence or the whole series.", "Due dates move with the schedule."], date: "2026-10-24", unread: true, href: "#" }, { id: "u3", tag: "improved", title: "Search is 4× faster", summary: "Results now appear as you type, even in workspaces with a million items.", details: ["Filters for author, date and type.", "Search inside attachments."], date: "2026-10-18", unread: true }, { id: "u4", tag: "fixed", title: "Calendar sync on iOS", summary: "Events created on iPhone no longer show up an hour late after daylight saving changes.", date: "2026-10-12" }, { id: "u5", tag: "improved", title: "Bulk edit in tables", summary: "Select rows and change status, owner or due date for all of them at once.", date: "2026-10-03" }, ]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const fmt = (d: string) => `${Number(d.slice(8, 10))} ${MONTHS[Number(d.slice(5, 7)) - 1]}`; type Filter = "all" | UpdateTag; export function WhatsNewWidget({ title = "What's new", updates = DEFAULT_UPDATES, defaultOpen = true, onFeedback, onSubscribe, theme = "dark", className }: WhatsNewWidgetProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [open, setOpen] = React.useState(defaultOpen); const [read, setRead] = React.useState(() => updates.filter((u) => !u.unread).map((u) => u.id)); const [filter, setFilter] = React.useState("all"); const [expanded, setExpanded] = React.useState(null); const [votes, setVotes] = React.useState>({}); const [subscribed, setSubscribed] = React.useState(false); const wrap = React.useRef(null); const trigger = React.useRef(null); React.useEffect(() => { if (!open) return; const down = (e: MouseEvent) => { if (wrap.current && !wrap.current.contains(e.target as Node)) setOpen(false); }; // On the document, so Escape still works after a clicked control inside the panel disappears. const key = (e: KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); trigger.current?.focus(); } }; document.addEventListener("mousedown", down); document.addEventListener("keydown", key); return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); }; }, [open]); const unread = updates.filter((u) => !read.includes(u.id)).length; const rows = updates.filter((u) => filter === "all" || u.tag === filter); const featured = filter === "all" ? rows.find((u) => u.featured) : undefined; const rest = rows.filter((u) => u !== featured); const markRead = (id: string) => setRead((r) => (r.includes(id) ? r : [...r, id])); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const tagPill = (t: UpdateTag) => ( {TAGS[t].label} ); const feedback = (u: ProductUpdate) => (

{votes[u.id] === undefined ? ( <> Helpful? {[true, false].map((h) => ( ))} ) : ( {votes[u.id] ? "Glad it helps! 🙌" : "Thanks, we'll keep improving it."} )}

); return (

{/* Sample app chrome */}

{open && ( )}

{/* Sample page content */}

); } export default WhatsNewWidget;

{title}

{featured.title}