Add year in review feature to web UI (#32709)

app/javascript/mastodon/features/annual_report/percentile.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+
+import type { Percentiles } from 'mastodon/models/annual_report';
+
+export const Percentile: React.FC<{
+  data: Percentiles;
+}> = ({ data }) => {
+  const percentile = data.statuses;
+
+  return (
+    <div className='annual-report__bento__box annual-report__summary__percentile'>
+      <FormattedMessage
+        id='annual_report.summary.percentile.text'
+        defaultMessage='<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of Mastodon users.</bottomLabel>'
+        values={{
+          topLabel: (str) => (
+            <div className='annual-report__summary__percentile__label'>
+              {str}
+            </div>
+          ),
+          percentage: () => (
+            <div className='annual-report__summary__percentile__number'>
+              <FormattedNumber
+                value={percentile / 100}
+                style='percent'
+                maximumFractionDigits={1}
+              />
+            </div>
+          ),
+          bottomLabel: (str) => (
+            <div>
+              <div className='annual-report__summary__percentile__label'>
+                {str}
+              </div>
+
+              {percentile < 6 && (
+                <div className='annual-report__summary__percentile__footnote'>
+                  <FormattedMessage
+                    id='annual_report.summary.percentile.we_wont_tell_bernie'
+                    defaultMessage="We won't tell Bernie."
+                  />
+                </div>
+              )}
+            </div>
+          ),
+        }}
+      >
+        {(message) => <>{message}</>}
+      </FormattedMessage>
+    </div>
+  );
+};