feat: 2025 wrapped (#2322)

* feat: 2025 wrapped

* don't add wrapped for new users

1 files changed, 28 insertions, 13 deletions

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