Create new entrypoint for sharable Wrapstodon (#37121)

app/javascript/mastodon/components/logo.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import logo from '@/images/logo.svg';
 
 export const WordmarkLogo: React.FC = () => (
@@ -7,8 +9,12 @@ export const WordmarkLogo: React.FC = () => (
   </svg>
 );
 
-export const IconLogo: React.FC = () => (
-  <svg viewBox='0 0 79 79' className='logo logo--icon' role='img'>
+export const IconLogo: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    viewBox='0 0 79 79'
+    className={classNames('logo logo--icon', className)}
+    role='img'
+  >
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-icon' />
   </svg>

app/javascript/mastodon/features/annual_report/share.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+  max-width: 40rem;
+  margin: 0 auto;
+}
+
+.footer {
+  text-align: center;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+  color: var(--color-text-secondary);
+}
+
+.logo {
+  width: 2rem;
+  opacity: 0.6;
+}

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

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+
+import { IconLogo } from '@/mastodon/components/logo';
+
+import { AnnualReport } from './index';
+import classes from './share.module.css';
+
+export const WrapstodonShare: FC = () => {
+  return (
+    <main className={classes.wrapper}>
+      <AnnualReport share={false} />
+      <footer className={classes.footer}>
+        <IconLogo className={classes.logo} />
+        Generated with ♥ by the Mastodon team
+      </footer>
+    </main>
+  );
+};

app/javascript/mastodon/reducers/slices/annual_report.ts

@@ -1,3 +1,4 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
 import {
@@ -29,7 +30,12 @@ interface AnnualReportState {
 const annualReportSlice = createSlice({
   name: 'annualReport',
   initialState: {} as AnnualReportState,
-  reducers: {},
+  reducers: {
+    setReport(state, action: PayloadAction<AnnualReport>) {
+      state.report = action.payload;
+      state.state = 'available';
+    },
+  },
   extraReducers(builder) {
     builder
       .addCase(fetchReportState.fulfilled, (state, action) => {
@@ -47,6 +53,7 @@ const annualReportSlice = createSlice({
 });
 
 export const annualReport = annualReportSlice.reducer;
+export const { setReport } = annualReportSlice.actions;
 
 export const selectWrapstodonYear = createAppSelector(
   [(state) => state.server.getIn(['server', 'wrapstodon'])],