Merge commit 'dfbf908870fcde76396ebccfb3d71ee1a06ffe82' into glitch-soc/merge-upstream

Conflicts:
- `app/views/wrapstodon/show.html.haml`:
  Conflict because of glitch-soc's theming system.
  Applied upstream's changes.

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

@@ -16,9 +16,15 @@ const AnnualReportModal: React.FC<{
   }, [onChangeBackgroundColor]);
 
   const dispatch = useAppDispatch();
-  const handleCloseModal = useCallback(() => {
-    dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
-  }, [dispatch]);
+  const handleCloseModal = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      if (e.target === e.currentTarget)
+        dispatch(
+          closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }),
+        );
+    },
+    [dispatch],
+  );
 
   return (
     // It's fine not to provide a keyboard handler here since there is a global

app/javascript/mastodon/features/annual_report/shared_page.module.scss

@@ -13,12 +13,13 @@ $mobile-breakpoint: 540px;
 }
 
 .footer {
-  text-align: center;
-  margin-top: 2rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
   align-items: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  font-size: 16px;
+  text-align: center;
   color: var(--color-text-secondary);
 }
 
@@ -26,3 +27,19 @@ $mobile-breakpoint: 540px;
   width: 2rem;
   opacity: 0.6;
 }
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  a:any-link {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  a:hover {
+    color: var(--color-text-primary);
+  }
+}

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

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { IconLogo } from '@/mastodon/components/logo';
+import { me } from '@/mastodon/initial_state';
 
 import { AnnualReport } from './index';
 import classes from './shared_page.module.scss';
@@ -18,6 +19,28 @@ export const WrapstodonSharedPage: FC = () => {
           defaultMessage='Generated with {heart} by the Mastodon team'
           values={{ heart: '♥' }}
         />
+        <nav className={classes.nav}>
+          <a href='/about'>
+            <FormattedMessage
+              id='footer.about_this_server'
+              defaultMessage='About'
+            />
+          </a>
+          {!me && (
+            <a href='https://joinmastodon.org/servers'>
+              <FormattedMessage
+                id='annual_report.shared_page.sign_up'
+                defaultMessage='Sign up'
+              />
+            </a>
+          )}
+          <a href='https://joinmastodon.org/sponsors'>
+            <FormattedMessage
+              id='annual_report.shared_page.donate'
+              defaultMessage='Donate'
+            />
+          </a>
+        </nav>
       </footer>
     </main>
   );

app/javascript/mastodon/locales/en.json

@@ -117,7 +117,9 @@
   "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.shared_page.donate": "Donate",
   "annual_report.shared_page.footer": "Generated with {heart} by the Mastodon team",
+  "annual_report.shared_page.sign_up": "Sign up",
   "annual_report.summary.archetype.booster.desc_public": "{name} stayed on the hunt for posts to boost, amplifying other creators with perfect aim.",
   "annual_report.summary.archetype.booster.desc_self": "You stayed on the hunt for posts to boost, amplifying other creators with perfect aim.",
   "annual_report.summary.archetype.booster.name": "The Archer",