feat: 2025 wrapped (#2322)

* feat: 2025 wrapped

* don't add wrapped for new users

9 files changed, 690 insertions, 15 deletions

diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index be65e66a..81b44a3c 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -16,6 +16,7 @@ import {
   Highlighter,
   Home,
   Search,
+  Sparkles,
   Tag,
 } from "lucide-react";
 
@@ -34,9 +35,10 @@ export default async function Dashboard({
     redirect("/");
   }
 
-  const [lists, userSettings] = await Promise.all([
+  const [lists, userSettings, showWrapped] = await Promise.all([
     tryCatch(api.lists.list()),
     tryCatch(api.users.settings()),
+    tryCatch(api.users.hasWrapped()),
   ]);
 
   if (userSettings.error) {
@@ -55,6 +57,10 @@ export default async function Dashboard({
     throw lists.error;
   }
 
+  if (showWrapped.error) {
+    throw showWrapped.error;
+  }
+
   const items = (t: TFunction) =>
     [
       {
@@ -86,10 +92,20 @@ export default async function Dashboard({
         icon: <Archive size={18} />,
         path: "/dashboard/archive",
       },
+      // Only show wrapped if user has at least 20 bookmarks
+      showWrapped.data
+        ? [
+            {
+              name: t("wrapped.button"),
+              icon: <Sparkles size={18} />,
+              path: "/dashboard/wrapped",
+            },
+          ]
+        : [],
     ].flat();
 
   const mobileSidebar = (t: TFunction) => [
-    ...items(t),
+    ...items(t).filter((item) => item.path !== "/dashboard/wrapped"),
     {
       name: t("lists.all_lists"),
       icon: <ClipboardList size={18} />,
diff --git a/apps/web/app/dashboard/wrapped/page.tsx b/apps/web/app/dashboard/wrapped/page.tsx
new file mode 100644
index 00000000..f479aca7
--- /dev/null
+++ b/apps/web/app/dashboard/wrapped/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { WrappedModal } from "@/components/wrapped";
+
+export default function WrappedPage() {
+  const router = useRouter();
+
+  const handleClose = () => {
+    router.push("/dashboard/bookmarks");
+  };
+
+  // Always show the modal when this page is loaded
+  useEffect(() => {
+    // Prevent page from being scrollable when modal is open
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
+  return <WrappedModal open={true} onClose={handleClose} />;
+}
diff --git a/apps/web/app/settings/stats/page.tsx b/apps/web/app/settings/stats/page.tsx
index 944d1c59..6f9db115 100644
--- a/apps/web/app/settings/stats/page.tsx
+++ b/apps/web/app/settings/stats/page.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
+import { WrappedModal } from "@/components/wrapped";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import {
@@ -26,6 +28,7 @@ import {
   List,
   Rss,
   Smartphone,
+  Sparkles,
   TrendingUp,
   Upload,
   Zap,
@@ -162,6 +165,8 @@ export default function StatsPage() {
   const { t } = useTranslation();
   const { data: stats, isLoading } = api.users.stats.useQuery();
   const { data: userSettings } = api.users.settings.useQuery();
+  const { data: hasWrapped } = api.users.hasWrapped.useQuery();
+  const [showWrapped, setShowWrapped] = useState(false);
 
   const maxHourlyActivity = useMemo(() => {
     if (!stats) return 0;
@@ -222,20 +227,30 @@ export default function StatsPage() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">
-          {t("settings.stats.usage_statistics")}
-        </h1>
-        <p className="text-muted-foreground">
-          Insights into your bookmarking habits and collection
-          {userSettings?.timezone && userSettings.timezone !== "UTC" && (
-            <span className="block text-sm">
-              Times shown in {userSettings.timezone} timezone
-            </span>
-          )}
-        </p>
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">
+            {t("settings.stats.usage_statistics")}
+          </h1>
+          <p className="text-muted-foreground">
+            Insights into your bookmarking habits and collection
+            {userSettings?.timezone && userSettings.timezone !== "UTC" && (
+              <span className="block text-sm">
+                Times shown in {userSettings.timezone} timezone
+              </span>
+            )}
+          </p>
+        </div>
+        {hasWrapped && (
+          <Button onClick={() => setShowWrapped(true)} className="gap-2">
+            <Sparkles className="h-4 w-4" />
+            View Your 2025 Wrapped
+          </Button>
+        )}
       </div>
 
+      <WrappedModal open={showWrapped} onClose={() => setShowWrapped(false)} />
+
       {/* Overview Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <StatCard
diff --git a/apps/web/components/wrapped/ShareButton.tsx b/apps/web/components/wrapped/ShareButton.tsx
new file mode 100644
index 00000000..048cafea
--- /dev/null
+++ b/apps/web/components/wrapped/ShareButton.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { RefObject, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Download, Loader2, Share2 } from "lucide-react";
+import { domToPng } from "modern-screenshot";
+
+interface ShareButtonProps {
+  contentRef: RefObject<HTMLDivElement | null>;
+  fileName?: string;
+}
+
+export function ShareButton({
+  contentRef,
+  fileName = "karakeep-wrapped-2025.png",
+}: ShareButtonProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleShare = async () => {
+    if (!contentRef.current) return;
+
+    setIsGenerating(true);
+
+    try {
+      // Capture the content as PNG data URL
+      const dataUrl = await domToPng(contentRef.current, {
+        scale: 2, // Higher resolution
+        quality: 1,
+        debug: false,
+        width: contentRef.current.scrollWidth, // Capture full width
+        height: contentRef.current.scrollHeight, // Capture full height including scrolled content
+        drawImageInterval: 100, // Add delay for rendering
+      });
+
+      // Convert data URL to blob
+      const response = await fetch(dataUrl);
+      const blob = await response.blob();
+
+      // Try native share API first (works well on mobile)
+      if (
+        typeof navigator.share !== "undefined" &&
+        typeof navigator.canShare !== "undefined"
+      ) {
+        const file = new File([blob], fileName, { type: "image/png" });
+        if (navigator.canShare({ files: [file] })) {
+          await navigator.share({
+            files: [file],
+            title: "My 2025 Karakeep Wrapped",
+            text: "Check out my 2025 Karakeep Wrapped!",
+          });
+          return;
+        }
+      }
+
+      // Fallback: download the image
+      const a = document.createElement("a");
+      a.href = dataUrl;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error("Failed to capture or share image:", error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const isNativeShareAvailable =
+    typeof navigator.share !== "undefined" &&
+    typeof navigator.canShare !== "undefined";
+
+  return (
+    <Button
+      onClick={handleShare}
+      disabled={isGenerating}
+      size="icon"
+      variant="ghost"
+      className="h-10 w-10 rounded-full bg-white/10 text-slate-100 hover:bg-white/20"
+      aria-label={isNativeShareAvailable ? "Share" : "Download"}
+      title={isNativeShareAvailable ? "Share" : "Download"}
+    >
+      {isGenerating ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : isNativeShareAvailable ? (
+        <Share2 className="h-4 w-4" />
+      ) : (
+        <Download className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
diff --git a/apps/web/components/wrapped/WrappedContent.tsx b/apps/web/components/wrapped/WrappedContent.tsx
new file mode 100644
index 00000000..261aadfd
--- /dev/null
+++ b/apps/web/components/wrapped/WrappedContent.tsx
@@ -0,0 +1,390 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import {
+  BookOpen,
+  Calendar,
+  Chrome,
+  Clock,
+  Code,
+  FileText,
+  Globe,
+  Hash,
+  Heart,
+  Highlighter,
+  Link,
+  Rss,
+  Smartphone,
+  Upload,
+  Zap,
+} from "lucide-react";
+import { z } from "zod";
+
+import { zBookmarkSourceSchema } from "@karakeep/shared/types/bookmarks";
+import { zWrappedStatsResponseSchema } from "@karakeep/shared/types/users";
+
+type WrappedStats = z.infer<typeof zWrappedStatsResponseSchema>;
+type BookmarkSource = z.infer<typeof zBookmarkSourceSchema>;
+
+interface WrappedContentProps {
+  stats: WrappedStats;
+  userName?: string;
+}
+
+const dayNames = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+function formatSourceName(source: BookmarkSource | null): string {
+  if (!source) return "Unknown";
+  const sourceMap: Record<BookmarkSource, string> = {
+    api: "API",
+    web: "Web",
+    extension: "Browser Extension",
+    cli: "CLI",
+    mobile: "Mobile App",
+    singlefile: "SingleFile",
+    rss: "RSS Feed",
+    import: "Import",
+  };
+  return sourceMap[source];
+}
+
+function getSourceIcon(source: BookmarkSource | null, className = "h-5 w-5") {
+  const iconProps = { className };
+  switch (source) {
+    case "api":
+      return <Zap {...iconProps} />;
+    case "web":
+      return <Globe {...iconProps} />;
+    case "extension":
+      return <Chrome {...iconProps} />;
+    case "cli":
+      return <Code {...iconProps} />;
+    case "mobile":
+      return <Smartphone {...iconProps} />;
+    case "singlefile":
+      return <FileText {...iconProps} />;
+    case "rss":
+      return <Rss {...iconProps} />;
+    case "import":
+      return <Upload {...iconProps} />;
+    default:
+      return <Globe {...iconProps} />;
+  }
+}
+
+export const WrappedContent = forwardRef<HTMLDivElement, WrappedContentProps>(
+  ({ stats, userName }, ref) => {
+    const maxMonthlyCount = Math.max(
+      ...stats.monthlyActivity.map((m) => m.count),
+    );
+
+    return (
+      <div
+        ref={ref}
+        className="min-h-screen w-full overflow-auto bg-slate-950 bg-[radial-gradient(1200px_600px_at_20%_-10%,rgba(16,185,129,0.18),transparent),radial-gradient(900px_500px_at_90%_10%,rgba(14,116,144,0.2),transparent)] p-6 text-slate-100 md:p-8"
+      >
+        <div className="mx-auto max-w-5xl space-y-4">
+          {/* Header */}
+          <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+            <div>
+              <h1 className="text-2xl font-semibold md:text-3xl">
+                Your {stats.year} Wrapped
+              </h1>
+              <p className="mt-1 text-xs text-slate-300 md:text-sm">
+                A Year in Karakeep
+              </p>
+              {userName && (
+                <p className="mt-2 text-sm text-slate-400">{userName}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+            <Card className="flex flex-col items-center justify-center border border-white/10 bg-white/5 p-4 text-center text-slate-100 backdrop-blur-sm">
+              <p className="text-xs text-slate-300">You saved</p>
+              <p className="my-2 text-3xl font-semibold md:text-4xl">
+                {stats.totalBookmarks}
+              </p>
+              <p className="text-xs text-slate-300">
+                {stats.totalBookmarks === 1 ? "item" : "items"} this year
+              </p>
+            </Card>
+            {/* First Bookmark */}
+            {stats.firstBookmark && (
+              <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm">
+                <div className="flex h-full flex-col">
+                  <div className="mb-3 flex items-center gap-2">
+                    <Calendar className="h-4 w-4 flex-shrink-0 text-emerald-300" />
+                    <p className="text-[10px] uppercase tracking-wide text-slate-400">
+                      First Bookmark of {stats.year}
+                    </p>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-2xl font-bold text-slate-100">
+                      {new Date(
+                        stats.firstBookmark.createdAt,
+                      ).toLocaleDateString("en-US", {
+                        month: "long",
+                        day: "numeric",
+                      })}
+                    </p>
+                    {stats.firstBookmark.title && (
+                      <p className="mt-2 line-clamp-2 text-base leading-relaxed text-slate-300">
+                        &ldquo;{stats.firstBookmark.title}&rdquo;
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            )}
+
+            {/* Activity + Peak */}
+            <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm">
+              <h2 className="mb-2 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                <Clock className="h-4 w-4" />
+                Activity Highlights
+              </h2>
+              <div className="grid gap-2 text-sm">
+                {stats.mostActiveDay && (
+                  <div>
+                    <p className="text-xs text-slate-400">Most Active Day</p>
+                    <p className="text-base font-semibold">
+                      {new Date(stats.mostActiveDay.date).toLocaleDateString(
+                        "en-US",
+                        {
+                          month: "short",
+                          day: "numeric",
+                        },
+                      )}
+                    </p>
+                    <p className="text-xs text-slate-400">
+                      {stats.mostActiveDay.count}{" "}
+                      {stats.mostActiveDay.count === 1 ? "save" : "saves"}
+                    </p>
+                  </div>
+                )}
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <p className="text-xs text-slate-400">Peak Hour</p>
+                    <p className="text-base font-semibold">
+                      {stats.peakHour === 0
+                        ? "12 AM"
+                        : stats.peakHour < 12
+                          ? `${stats.peakHour} AM`
+                          : stats.peakHour === 12
+                            ? "12 PM"
+                            : `${stats.peakHour - 12} PM`}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-400">Peak Day</p>
+                    <p className="text-base font-semibold">
+                      {dayNames[stats.peakDayOfWeek]}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            {/* Top Lists */}
+            {(stats.topDomains.length > 0 || stats.topTags.length > 0) && (
+              <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm md:col-span-2 lg:col-span-2">
+                <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                  Top Lists
+                </h2>
+                <div className="grid gap-3 md:grid-cols-2">
+                  {stats.topDomains.length > 0 && (
+                    <div>
+                      <h3 className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+                        <Globe className="h-3.5 w-3.5" />
+                        Sites
+                      </h3>
+                      <div className="space-y-1.5 text-sm">
+                        {stats.topDomains.map((domain, index) => (
+                          <div
+                            key={domain.domain}
+                            className="flex items-center justify-between"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-semibold text-slate-200">
+                                {index + 1}
+                              </div>
+                              <span className="text-slate-100">
+                                {domain.domain}
+                              </span>
+                            </div>
+                            <Badge className="bg-white/10 text-[10px] text-slate-200">
+                              {domain.count}
+                            </Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  {stats.topTags.length > 0 && (
+                    <div>
+                      <h3 className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+                        <Hash className="h-3.5 w-3.5" />
+                        Tags
+                      </h3>
+                      <div className="space-y-1.5 text-sm">
+                        {stats.topTags.map((tag, index) => (
+                          <div
+                            key={tag.name}
+                            className="flex items-center justify-between"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-semibold text-slate-200">
+                                {index + 1}
+                              </div>
+                              <span className="text-slate-100">{tag.name}</span>
+                            </div>
+                            <Badge className="bg-white/10 text-[10px] text-slate-200">
+                              {tag.count}
+                            </Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </Card>
+            )}
+
+            {/* Bookmarks by Source */}
+            {stats.bookmarksBySource.length > 0 && (
+              <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm">
+                <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                  How You Save
+                </h2>
+                <div className="space-y-1.5 text-sm">
+                  {stats.bookmarksBySource.map((source) => (
+                    <div
+                      key={source.source || "unknown"}
+                      className="flex items-center justify-between"
+                    >
+                      <div className="flex items-center gap-2 text-slate-100">
+                        {getSourceIcon(source.source, "h-4 w-4")}
+                        <span>{formatSourceName(source.source)}</span>
+                      </div>
+                      <Badge className="bg-white/10 text-[10px] text-slate-200">
+                        {source.count}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            )}
+
+            {/* Monthly Activity */}
+            <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm md:col-span-2 lg:col-span-3">
+              <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-300">
+                <Calendar className="h-4 w-4" />
+                Your Year in Saves
+              </h2>
+              <div className="grid gap-2 text-xs md:grid-cols-2 lg:grid-cols-3">
+                {stats.monthlyActivity.map((month) => (
+                  <div key={month.month} className="flex items-center gap-2">
+                    <div className="w-7 text-right text-[10px] text-slate-400">
+                      {monthNames[month.month - 1]}
+                    </div>
+                    <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-white/10">
+                      <div
+                        className="h-full rounded-full bg-emerald-300/70"
+                        style={{
+                          width: `${maxMonthlyCount > 0 ? (month.count / maxMonthlyCount) * 100 : 0}%`,
+                        }}
+                      />
+                    </div>
+                    <div className="w-7 text-[10px] text-slate-300">
+                      {month.count}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+
+            {/* Summary Stats */}
+            <Card className="border border-white/10 bg-white/5 p-4 text-slate-100 backdrop-blur-sm md:col-span-2 lg:col-span-3">
+              <div className="grid gap-3 text-center sm:grid-cols-3">
+                <div className="rounded-lg bg-white/5 p-3">
+                  <Heart className="mx-auto mb-1 h-4 w-4 text-rose-200" />
+                  <p className="text-lg font-semibold">
+                    {stats.totalFavorites}
+                  </p>
+                  <p className="text-[10px] text-slate-400">Favorites</p>
+                </div>
+                <div className="rounded-lg bg-white/5 p-3">
+                  <Hash className="mx-auto mb-1 h-4 w-4 text-amber-200" />
+                  <p className="text-lg font-semibold">{stats.totalTags}</p>
+                  <p className="text-[10px] text-slate-400">Tags Created</p>
+                </div>
+                <div className="rounded-lg bg-white/5 p-3">
+                  <Highlighter className="mx-auto mb-1 h-4 w-4 text-emerald-200" />
+                  <p className="text-lg font-semibold">
+                    {stats.totalHighlights}
+                  </p>
+                  <p className="text-[10px] text-slate-400">Highlights</p>
+                </div>
+              </div>
+              <div className="mt-3 grid gap-3 text-center sm:grid-cols-3">
+                <div className="rounded-lg bg-white/5 p-3">
+                  <Link className="mx-auto mb-1 h-4 w-4 text-slate-200" />
+                  <p className="text-lg font-semibold">
+                    {stats.bookmarksByType.link}
+                  </p>
+                  <p className="text-[10px] text-slate-400">Links</p>
+                </div>
+                <div className="rounded-lg bg-white/5 p-3">
+                  <FileText className="mx-auto mb-1 h-4 w-4 text-slate-200" />
+                  <p className="text-lg font-semibold">
+                    {stats.bookmarksByType.text}
+                  </p>
+                  <p className="text-[10px] text-slate-400">Notes</p>
+                </div>
+                <div className="rounded-lg bg-white/5 p-3">
+                  <BookOpen className="mx-auto mb-1 h-4 w-4 text-slate-200" />
+                  <p className="text-lg font-semibold">
+                    {stats.bookmarksByType.asset}
+                  </p>
+                  <p className="text-[10px] text-slate-400">Assets</p>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Footer */}
+          <div className="pb-4 pt-1 text-center text-[10px] text-slate-500">
+            Made with Karakeep
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+WrappedContent.displayName = "WrappedContent";
diff --git a/apps/web/components/wrapped/WrappedModal.tsx b/apps/web/components/wrapped/WrappedModal.tsx
new file mode 100644
index 00000000..25e376b0
--- /dev/null
+++ b/apps/web/components/wrapped/WrappedModal.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogOverlay,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { api } from "@/lib/trpc";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Loader2, X } from "lucide-react";
+
+import { ShareButton } from "./ShareButton";
+import { WrappedContent } from "./WrappedContent";
+
+interface WrappedModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function WrappedModal({ open, onClose }: WrappedModalProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const { data: stats, isLoading } = api.users.wrapped.useQuery(undefined, {
+    enabled: open,
+  });
+  const { data: whoami } = api.users.whoami.useQuery(undefined, {
+    enabled: open,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogOverlay className="z-50" />
+      <DialogContent
+        className="max-w-screen h-screen max-h-screen w-screen overflow-hidden rounded-none border-none p-0"
+        hideCloseBtn={true}
+      >
+        <VisuallyHidden.Root>
+          <DialogTitle>Your 2025 Wrapped</DialogTitle>
+        </VisuallyHidden.Root>
+        <div className="fixed right-4 top-4 z-50 flex items-center gap-2">
+          {/* Share button overlay */}
+          {stats && !isLoading && <ShareButton contentRef={contentRef} />}
+          {/* Close button overlay */}
+          <button
+            onClick={onClose}
+            className="rounded-full bg-white/10 p-2 backdrop-blur-sm transition-colors hover:bg-white/20"
+            aria-label="Close"
+            title="Close"
+          >
+            <X className="h-5 w-5 text-white" />
+          </button>
+        </div>
+
+        {/* Content */}
+        {isLoading ? (
+          <div className="flex h-full items-center justify-center bg-slate-950 bg-[radial-gradient(1200px_600px_at_20%_-10%,rgba(16,185,129,0.18),transparent),radial-gradient(900px_500px_at_90%_10%,rgba(14,116,144,0.2),transparent)]">
+            <div className="text-center text-white">
+              <Loader2 className="mx-auto mb-4 h-12 w-12 animate-spin" />
+              <p className="text-xl">Loading your Wrapped...</p>
+            </div>
+          </div>
+        ) : stats ? (
+          <WrappedContent
+            ref={contentRef}
+            stats={stats}
+            userName={whoami?.name || undefined}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-slate-950 bg-[radial-gradient(1200px_600px_at_20%_-10%,rgba(16,185,129,0.18),transparent),radial-gradient(900px_500px_at_90%_10%,rgba(14,116,144,0.2),transparent)]">
+            <div className="text-center text-white">
+              <p className="text-xl">Failed to load your Wrapped stats</p>
+              <button
+                onClick={onClose}
+                className="mt-4 rounded-lg bg-white/20 px-6 py-2 backdrop-blur-sm hover:bg-white/30"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/components/wrapped/index.ts b/apps/web/components/wrapped/index.ts
new file mode 100644
index 00000000..45d142e1
--- /dev/null
+++ b/apps/web/components/wrapped/index.ts
@@ -0,0 +1,3 @@
+export { WrappedModal } from "./WrappedModal";
+export { WrappedContent } from "./WrappedContent";
+export { ShareButton } from "./ShareButton";
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 03aaa645..58e1af09 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -863,5 +863,54 @@
     "no_release_notes": "No release notes were published for this version.",
     "release_notes_synced": "Release notes are synced from GitHub.",
     "view_on_github": "View on GitHub"
+  },
+  "wrapped": {
+    "title": "Your {{year}} Wrapped",
+    "subtitle": "A Year in Karakeep",
+    "banner": {
+      "title": "Your 2025 Wrapped is ready!",
+      "description": "See your year in bookmarks",
+      "view_now": "View Now"
+    },
+    "button": "2025 Wrapped",
+    "loading": "Loading your Wrapped...",
+    "failed_to_load": "Failed to load your Wrapped stats",
+    "sections": {
+      "total_saves": {
+        "prefix": "You saved",
+        "suffix": "items this year",
+        "suffix_singular": "item this year"
+      },
+      "first_bookmark": {
+        "title": "Your Journey Started",
+        "description": "First save of {{year}}:"
+      },
+      "top_domains": "Your Top Sites",
+      "top_tags": "Your Top Tags",
+      "monthly_activity": "Your Year in Saves",
+      "most_active_day": "Your Most Active Day",
+      "peak_times": {
+        "title": "When You Save",
+        "peak_hour": "Peak Hour",
+        "peak_day": "Peak Day"
+      },
+      "how_you_save": "How You Save",
+      "what_you_saved": "What You Saved",
+      "summary": {
+        "favorites": "Favorites",
+        "tags_created": "Tags Created",
+        "highlights": "Highlights"
+      },
+      "types": {
+        "links": "Links",
+        "notes": "Notes",
+        "assets": "Assets"
+      }
+    },
+    "footer": "Made with Karakeep",
+    "share": "Share",
+    "download": "Download",
+    "close": "Close",
+    "generating": "Generating..."
   }
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 648ba92b..5bd26595 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -71,6 +71,7 @@
     "i18next-resources-to-backend": "^1.2.1",
     "lexical": "^0.20.2",
     "lucide-react": "^0.501.0",
+    "modern-screenshot": "^4.6.7",
     "next": "15.3.8",
     "next-auth": "^4.24.11",
     "next-i18next": "^15.3.1",