feat(snapshot): put the Snapshot control on the real status moments

packages/shared/package.json

@@ -102,6 +102,7 @@
     "typescript": "5.6.3"
   },
   "dependencies": {
+    "@zumer/snapdom": "^2.23.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",

packages/shared/src/components/cards/Leaderboard/UserTopList.tsx

@@ -4,6 +4,10 @@ import classNames from 'classnames';
 import type { CommonLeaderboardProps } from './LeaderboardList';
 import { LeaderboardList } from './LeaderboardList';
 import { LeaderboardListItem } from './LeaderboardListItem';
+import { SnapshotButton } from '../../../features/snapshot/SnapshotButton';
+import { LeaderboardSnapshotCard } from '../../../features/snapshot/LeaderboardSnapshotCard';
+import { useSnapshotShare } from '../../../features/snapshot/useSnapshotShare';
+import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { CurrentUserPositionRow } from './CurrentUserPositionRow';
 import { UserHighlight } from '../../widgets/PostUsersHighlights';
 import type { LoggedUser } from '../../../lib/user';
@@ -36,6 +40,8 @@ export function UserTopList({
   showLevel?: boolean;
   leaderboardType?: LeaderboardType;
 }): ReactElement {
+  const boardLabel = props.containerProps?.title ?? 'Leaderboard';
+
   const createRowMouseEnter = useCallback(
     (rankIndex: number) => (e: React.MouseEvent<HTMLLIElement>) => {
       const rankStyle = TOP_RANK_STYLES[rankIndex];
@@ -54,6 +60,8 @@ export function UserTopList({
     [],
   );
 
+  const isSnapshotEnabled = useSnapshotShare();
+
   return (
     <LeaderboardList {...props}>
       {items?.map((item, i) => (
@@ -88,6 +96,30 @@ export function UserTopList({
             }}
             allowSubscribe={false}
           />
+          {isSnapshotEnabled && (
+            <SnapshotButton
+              card={
+                <LeaderboardSnapshotCard
+                  board={boardLabel}
+                  handle={item.user.username}
+                  image={item.user.image}
+                  level={item.level?.level ?? 0}
+                  levelProgress={
+                    item.level ? getQuestLevelProgress(item.level) : 0
+                  }
+                  name={item.user.name}
+                  rank={i + 1}
+                  reputation={item.user.reputation ?? 0}
+                  score={item.score}
+                  seed={item.user.id}
+                />
+              }
+              className="ml-auto opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+              filename={`daily-dev-rank-${i + 1}`}
+              size={ButtonSize.XSmall}
+              variant={ButtonVariant.Float}
+            />
+          )}
         </LeaderboardListItem>
       ))}
       {leaderboardType && (

packages/shared/src/components/modals/streaks/NewStreakModal.tsx

@@ -5,7 +5,11 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Modal } from '../common/Modal';
 import classed from '../../../lib/classed';
 import { Checkbox } from '../../fields/Checkbox';
+import { ButtonVariant } from '../../buttons/Button';
 import { ModalClose } from '../common/ModalClose';
+import { SnapshotButton } from '../../../features/snapshot/SnapshotButton';
+import { useSnapshotShare } from '../../../features/snapshot/useSnapshotShare';
+import { StreakSnapshotCard } from '../../../features/snapshot/StreakSnapshotCard';
 import {
   cloudinaryStreakSplash,
   cloudinaryStreakFire,
@@ -68,6 +72,8 @@ export default function NewStreakModal({
     }
   };
 
+  const isSnapshotEnabled = useSnapshotShare();
+
   return (
     <Modal
       {...props}
@@ -124,6 +130,28 @@ export default function NewStreakModal({
         <StreakFreezeUpsell className="mt-6">
           Protect your streak with streak freezes
         </StreakFreezeUpsell>
+        {isSnapshotEnabled && user && (
+          <SnapshotButton
+            card={
+              <StreakSnapshotCard
+                days={currentStreak}
+                longestStreak={maxStreak}
+                milestone={shouldShowSplash ? 'New streak record' : undefined}
+                seed={user.id}
+                totalReadingDays={maxStreak}
+                user={{
+                  handle: user.username,
+                  image: user.image,
+                  name: user.name,
+                }}
+              />
+            }
+            className="mt-6"
+            filename={`daily-dev-streak-${currentStreak}`}
+            label
+            variant={ButtonVariant.Primary}
+          />
+        )}
         <Checkbox
           name="show_streaks"
           className="mt-10"

packages/shared/src/features/profile/components/achievements/AchievementCard.tsx

@@ -1,6 +1,9 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { SnapshotButton } from '../../../snapshot/SnapshotButton';
+import { AchievementSnapshotCard } from '../../../snapshot/AchievementSnapshotCard';
+import { useSnapshotShare } from '../../../snapshot/useSnapshotShare';
 import type { UserAchievement } from '../../../../graphql/user/achievements';
 import {
   AchievementType,
@@ -62,6 +65,8 @@ export function AchievementCard({
     rarityTier === AchievementRarityTier.Emerald
       ? '<1%'
       : `${Math.round(achievement.rarity ?? 0)}%`;
+  const isSnapshotEnabled = useSnapshotShare(isUnlocked);
+
   return (
     <div
       className={classNames(
@@ -121,7 +126,24 @@ export function AchievementCard({
             {achievement.description}
           </Typography>
         </div>
-        <div className="flex shrink-0 items-center self-center">
+        <div className="flex shrink-0 items-center gap-1 self-center">
+          {isSnapshotEnabled && isUnlocked && (
+            <SnapshotButton
+              card={
+                <AchievementSnapshotCard
+                  completedAt={unlockedAt}
+                  description={achievement.description}
+                  image={achievement.image}
+                  name={achievement.name}
+                  rarity={achievement.rarity ?? null}
+                  seed={achievement.name}
+                  tier={rarityTier}
+                />
+              }
+              filename={`daily-dev-achievement-${achievement.name}`}
+              size={ButtonSize.XSmall}
+            />
+          )}
           <Typography
             type={TypographyType.Callout}
             color={

packages/shared/src/features/snapshot/AchievementSnapshotCard.tsx

@@ -0,0 +1,130 @@
+import type { ReactElement } from 'react';
+import React, { forwardRef } from 'react';
+import { AchievementRarityTier } from '../profile/components/achievements/achievementRarity';
+import { SnapshotFrame } from './SnapshotFrame';
+
+const CARD_WIDTH = 620;
+/** Trading-card proportions (2.5:3.5) rather than a square slab. */
+const CARD_HEIGHT = Math.round(CARD_WIDTH * 1.4);
+const CARD_RADIUS = 36;
+
+/**
+ * The Game Center slab treatment: artwork full bleed, a scrim carrying the
+ * copy, and gold reserved for the sub-1% band so it means something.
+ */
+const SCRIM =
+  'linear-gradient(to top, rgba(6,8,11,0.94) 0%, rgba(6,8,11,0.72) 34%, rgba(6,8,11,0.12) 66%, rgba(6,8,11,0) 100%)';
+
+const PILL = {
+  gold: { background: '#efab27', color: '#08110c' },
+  plain: { background: 'rgba(8,10,13,0.72)', color: '#FFFFFF' },
+};
+
+export interface AchievementSnapshotCardProps {
+  name: string;
+  description: string;
+  image?: string;
+  rarity: number | null;
+  tier: AchievementRarityTier | null;
+  completedAt: string;
+  seed?: string;
+}
+
+function AchievementSnapshotCardComponent(
+  {
+    name,
+    description,
+    image,
+    rarity,
+    tier,
+    completedAt,
+    seed,
+  }: AchievementSnapshotCardProps,
+  ref: React.Ref<HTMLDivElement>,
+): ReactElement {
+  const isEmerald = tier === AchievementRarityTier.Emerald;
+  const pill = isEmerald ? PILL.gold : PILL.plain;
+  const rarityLabel = isEmerald ? '<1%' : `${Math.round(rarity ?? 0)}%`;
+
+  return (
+    <SnapshotFrame bare logoPlacement="top-right" ref={ref} seed={seed ?? name}>
+      <div
+        className="relative flex flex-col justify-end overflow-hidden"
+        style={{
+          width: CARD_WIDTH,
+          height: CARD_HEIGHT,
+          borderRadius: CARD_RADIUS,
+          background: '#12151C',
+          boxShadow: '0 48px 96px rgba(4, 2, 9, 0.7)',
+        }}
+      >
+        {image && (
+          <img
+            src={image}
+            alt=""
+            crossOrigin="anonymous"
+            className="absolute inset-0 block size-full object-cover"
+          />
+        )}
+
+        <span
+          aria-hidden
+          className="absolute inset-0"
+          style={{ background: SCRIM }}
+        />
+
+        {tier && (
+          <span
+            className="absolute font-bold"
+            style={{
+              left: 26,
+              top: 26,
+              padding: '9px 20px',
+              borderRadius: 999,
+              fontSize: 26,
+              lineHeight: 1,
+              ...pill,
+            }}
+          >
+            {rarityLabel} rare
+          </span>
+        )}
+
+        <div
+          className="relative flex flex-col"
+          style={{ padding: '0 34px 34px' }}
+        >
+          <span
+            className="snapshot-copy font-bold text-white"
+            style={{ fontSize: 46, lineHeight: 1.2, letterSpacing: '-0.01em' }}
+          >
+            {name}
+          </span>
+          <span
+            style={{
+              marginTop: 8,
+              color: 'rgba(255,255,255,0.78)',
+              fontSize: 28,
+              lineHeight: 1.32,
+            }}
+          >
+            {description}
+          </span>
+          <span
+            style={{
+              marginTop: 14,
+              color: 'rgba(255,255,255,0.7)',
+              fontSize: 26,
+            }}
+          >
+            Completed {completedAt}
+          </span>
+        </div>
+      </div>
+    </SnapshotFrame>
+  );
+}
+
+export const AchievementSnapshotCard = forwardRef(
+  AchievementSnapshotCardComponent,
+);