Add Wrapstodon timeline announcement component (#37093)

app/javascript/mastodon/features/annual_report/announcement/announcement.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { AnnualReportAnnouncement } from '.';
+
+const meta = {
+  title: 'Components/AnnualReportAnnouncement',
+  component: AnnualReportAnnouncement,
+  args: {
+    hasData: false,
+    isLoading: false,
+    year: '2025',
+    onRequestBuild: fn(),
+    onOpen: fn(),
+  },
+} satisfies Meta<typeof AnnualReportAnnouncement>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <AnnualReportAnnouncement {...args} />,
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+  render: Default.render,
+};
+
+export const WithData: Story = {
+  args: {
+    hasData: true,
+  },
+  render: Default.render,
+};

app/javascript/mastodon/features/annual_report/announcement/index.tsx

@@ -0,0 +1,46 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '@/mastodon/components/button';
+
+import styles from './styles.module.scss';
+
+export const AnnualReportAnnouncement: React.FC<{
+  year: string;
+  hasData: boolean;
+  isLoading: boolean;
+  onRequestBuild: () => void;
+  onOpen: () => void;
+}> = ({ year, hasData, isLoading, onRequestBuild, onOpen }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2>
+        <FormattedMessage
+          id='annual_report.announcement.title'
+          defaultMessage='Wrapstodon {year} has arrived'
+          values={{ year }}
+        />
+      </h2>
+      <p>
+        <FormattedMessage
+          id='annual_report.announcement.description'
+          defaultMessage='Discover more about your engagement on Mastodon over the past year.'
+        />
+      </p>
+      {hasData ? (
+        <Button onClick={onOpen}>
+          <FormattedMessage
+            id='annual_report.announcement.action_view'
+            defaultMessage='View my Wrapstodon'
+          />
+        </Button>
+      ) : (
+        <Button loading={isLoading} onClick={onRequestBuild}>
+          <FormattedMessage
+            id='annual_report.announcement.action_build'
+            defaultMessage='Build my Wrapstodon'
+          />
+        </Button>
+      )}
+    </div>
+  );
+};

app/javascript/mastodon/features/annual_report/announcement/styles.module.scss

@@ -0,0 +1,29 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 60px;
+  text-align: center;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--color-text-on-media);
+  background: var(--color-bg-media-base);
+  background:
+    radial-gradient(at 40% 87%, #240c9a99 0, transparent 50%),
+    radial-gradient(at 19% 10%, #6b0c9a99 0, transparent 50%),
+    radial-gradient(at 90% 27%, #9a0c8299 0, transparent 50%),
+    radial-gradient(at 16% 95%, #1e948299 0, transparent 50%)
+      var(--color-bg-media-base);
+  border-bottom: 1px solid var(--color-border-primary);
+
+  h2 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+
+  p {
+    margin-bottom: 20px;
+  }
+}

app/javascript/mastodon/locales/en.json

@@ -113,6 +113,10 @@
   "alt_text_modal.describe_for_people_with_visual_impairments": "Describe this for people with visual impairments…",
   "alt_text_modal.done": "Done",
   "announcement.announcement": "Announcement",
+  "annual_report.announcement.action_build": "Build my Wrapstodon",
+  "annual_report.announcement.action_view": "View my Wrapstodon",
+  "annual_report.announcement.description": "Discover more about your engagement on Mastodon over the past year.",
+  "annual_report.announcement.title": "Wrapstodon {year} has arrived",
   "annual_report.summary.archetype.booster": "The cool-hunter",
   "annual_report.summary.archetype.lurker": "The lurker",
   "annual_report.summary.archetype.oracle": "The oracle",