Display Wrapstodon inline widget (#37106)

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

@@ -59,7 +59,7 @@ export const AnnualReport: React.FC<{
 
   const report = response?.annual_reports[0];
 
-  if (!report) {
+  if (!report || report.schema_version !== 1) {
     return null;
   }
 

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

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import type { FC } from 'react';
+
+import { showAlert } from '@/mastodon/actions/alerts';
+import {
+  generateReport,
+  selectWrapstodonYear,
+} from '@/mastodon/reducers/slices/annual_report';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+
+import { AnnualReportAnnouncement } from './announcement';
+
+export const AnnualReportTimeline: FC = () => {
+  const { state } = useAppSelector((state) => state.annualReport);
+  const year = useAppSelector(selectWrapstodonYear);
+
+  const dispatch = useAppDispatch();
+  const handleBuildRequest = useCallback(() => {
+    void dispatch(generateReport());
+  }, [dispatch]);
+
+  const handleOpen = useCallback(() => {
+    dispatch(
+      // TODO: Implement opening the annual report view when components are ready.
+      showAlert({
+        message: 'Not yet implemented.',
+      }),
+    );
+  }, [dispatch]);
+
+  if (!year || !state || state === 'ineligible') {
+    return null;
+  }
+
+  return (
+    <AnnualReportAnnouncement
+      year={year.toString()}
+      hasData={state === 'available'}
+      isLoading={state === 'generating'}
+      onRequestBuild={handleBuildRequest}
+      onOpen={handleOpen}
+    />
+  );
+};

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -4,9 +4,10 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
-import { scrollTopTimeline, loadPending } from '../../../actions/timelines';
-import StatusList from '../../../components/status_list';
-import { me } from '../../../initial_state';
+import { scrollTopTimeline, loadPending, TIMELINE_SUGGESTIONS } from '@/mastodon/actions/timelines';
+import StatusList from '@/mastodon/components/status_list';
+import { me } from '@/mastodon/initial_state';
+import { TIMELINE_WRAPSTODON } from '@/mastodon/reducers/slices/annual_report';
 
 const makeGetStatusIds = (pending = false) => createSelector([
   (state, { type }) => state.getIn(['settings', type], ImmutableMap()),
@@ -14,7 +15,7 @@ const makeGetStatusIds = (pending = false) => createSelector([
   (state)           => state.get('statuses'),
 ], (columnSettings, statusIds, statuses) => {
   return statusIds.filter(id => {
-    if (id === null || id === 'inline-follow-suggestions') return true;
+    if (id === null || id === TIMELINE_SUGGESTIONS || id === TIMELINE_WRAPSTODON) return true;
 
     const statusForId = statuses.get(id);