Add wrapstodon to initial state and show wrapstodon sidebar item on load (#37261)

app/javascript/mastodon/initial_state.ts

@@ -2,6 +2,11 @@ import type { ApiAccountJSON } from './api_types/accounts';
 
 type InitialStateLanguage = [code: string, name: string, localName: string];
 
+interface InitialWrapstodonState {
+  year: number;
+  state: 'available' | 'generating' | 'eligible' | 'ineligible';
+}
+
 interface InitialStateMeta {
   access_token: string;
   advanced_layout?: boolean;
@@ -47,6 +52,7 @@ interface InitialStateMeta {
   status_page_url: string;
   terms_of_service_enabled: boolean;
   emoji_style?: string;
+  wrapstodon?: InitialWrapstodonState | null;
 }
 
 interface Role {
@@ -128,6 +134,7 @@ export const criticalUpdatesPending = initialState?.critical_updates_pending;
 export const statusPageUrl = getMeta('status_page_url');
 export const sso_redirect = getMeta('sso_redirect');
 export const termsOfServiceEnabled = getMeta('terms_of_service_enabled');
+export const wrapstodon = getMeta('wrapstodon');
 
 const displayNames =
   // Intl.DisplayNames can be undefined in old browsers

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

@@ -11,6 +11,7 @@ import {
   apiGetAnnualReportState,
   apiRequestGenerateAnnualReport,
 } from '@/mastodon/api/annual_report';
+import { wrapstodon } from '@/mastodon/initial_state';
 import type { AnnualReport } from '@/mastodon/models/annual_report';
 
 import {
@@ -20,13 +21,17 @@ import {
 } from '../../store/typed_functions';
 
 interface AnnualReportState {
+  year?: number;
   state?: ApiAnnualReportState;
   report?: AnnualReport;
 }
 
 const annualReportSlice = createSlice({
   name: 'annualReport',
-  initialState: {} as AnnualReportState,
+  initialState: {
+    year: wrapstodon?.year,
+    state: wrapstodon?.state,
+  } as AnnualReportState,
   reducers: {
     setReport(state, action: PayloadAction<AnnualReport>) {
       state.report = action.payload;
@@ -53,8 +58,8 @@ export const annualReport = annualReportSlice.reducer;
 export const { setReport } = annualReportSlice.actions;
 
 export const selectWrapstodonYear = createAppSelector(
-  [(state) => state.server.getIn(['server', 'wrapstodon'])],
-  (year: unknown) => (typeof year === 'number' && year > 2000 ? year : null),
+  [(state) => state.annualReport.year],
+  (year: number | null | undefined) => year ?? null,
 );
 
 // This kicks everything off, and is called after fetching the server info.