Merge commit '53be8392eceea8c3a576478e209fe82c2ceb458a' into glitch-soc/merge-upstream

app/javascript/entrypoints/wrapstodon.tsx

@@ -25,7 +25,7 @@ function loaded() {
 
   const initialState = JSON.parse(
     propsNode.textContent,
-  ) as ApiAnnualReportResponse & { me?: string };
+  ) as ApiAnnualReportResponse & { me?: string; domain: string };
 
   const report = initialState.annual_reports[0];
   if (!report) {
@@ -38,6 +38,7 @@ function loaded() {
       meta: {
         locale: document.documentElement.lang,
         me: initialState.me,
+        domain: initialState.domain,
       },
       accounts: initialState.accounts,
     }),

app/javascript/mastodon/actions/server.js

@@ -1,5 +1,3 @@
-import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
-
 import api from '../api';
 
 import { importFetchedAccount } from './importer';
@@ -31,9 +29,6 @@ export const fetchServer = () => (dispatch, getState) => {
     .get('/api/v2/instance').then(({ data }) => {
       if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
       dispatch(fetchServerSuccess(data));
-      if (data.wrapstodon) {
-        void dispatch(checkAnnualReport());
-      }
     }).catch(err => dispatch(fetchServerFail(err)));
 };
 

app/javascript/mastodon/components/account/account.stories.tsx

@@ -1,16 +1,28 @@
+import type { ComponentProps } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { accountFactoryState, relationshipsFactory } from '@/testing/factories';
 
 import { Account } from './index';
 
+type Props = Omit<ComponentProps<typeof Account>, 'id'> & {
+  name: string;
+  username: string;
+};
+
 const meta = {
   title: 'Components/Account',
-  component: Account,
   argTypes: {
-    id: {
+    name: {
       type: 'string',
-      description: 'ID of the account to display',
+      description: 'The display name of the account',
+      reduxPath: 'accounts.1.display_name_html',
+    },
+    username: {
+      type: 'string',
+      description: 'The username of the account',
+      reduxPath: 'accounts.1.acct',
     },
     size: {
       type: 'number',
@@ -40,7 +52,8 @@ const meta = {
     },
   },
   args: {
-    id: '1',
+    name: 'Test User',
+    username: 'testuser',
     size: 46,
     hidden: false,
     minimal: false,
@@ -55,17 +68,16 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Account>;
+  render(args) {
+    return <Account id='1' {...args} />;
+  },
+} satisfies Meta<Props>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {
-    id: '1',
-  },
-};
+export const Primary: Story = {};
 
 export const Hidden: Story = {
   args: {

app/javascript/mastodon/components/emoji/emoji.stories.tsx

@@ -4,20 +4,22 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Emoji } from './index';
 
-type EmojiProps = ComponentProps<typeof Emoji> & { state: string };
+type EmojiProps = ComponentProps<typeof Emoji> & {
+  style: 'auto' | 'native' | 'twemoji';
+};
 
 const meta = {
   title: 'Components/Emoji',
   component: Emoji,
   args: {
     code: '🖤',
-    state: 'auto',
+    style: 'auto',
   },
   argTypes: {
     code: {
       name: 'Emoji',
     },
-    state: {
+    style: {
       control: {
         type: 'select',
         labels: {
@@ -28,11 +30,7 @@ const meta = {
       },
       options: ['auto', 'native', 'twemoji'],
       name: 'Emoji Style',
-      mapping: {
-        auto: { meta: { emoji_style: 'auto' } },
-        native: { meta: { emoji_style: 'native' } },
-        twemoji: { meta: { emoji_style: 'twemoji' } },
-      },
+      reduxPath: 'meta.emoji_style',
     },
   },
   render(args) {

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

@@ -10,6 +10,7 @@ import classNames from 'classnames/bind';
 import { closeModal } from '@/mastodon/actions/modal';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { getReport } from '@/mastodon/reducers/slices/annual_report';
 import {
   createAppSelector,
   useAppDispatch,
@@ -26,7 +27,7 @@ import { NewPosts } from './new_posts';
 
 const moduleClassNames = classNames.bind(styles);
 
-const accountSelector = createAppSelector(
+export const accountSelector = createAppSelector(
   [(state) => state.accounts, (state) => state.annualReport.report],
   (accounts, report) => {
     if (report?.schema_version === 2) {
@@ -43,6 +44,13 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
   const dispatch = useAppDispatch();
   const report = useAppSelector((state) => state.annualReport.report);
   const account = useAppSelector(accountSelector);
+  const needsReport = !report; // Make into boolean to avoid object comparison in deps.
+
+  useEffect(() => {
+    if (needsReport) {
+      void dispatch(getReport());
+    }
+  }, [dispatch, needsReport]);
 
   const close = useCallback(() => {
     dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
@@ -57,7 +65,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
     }
   }, [pathname, initialPathname, close]);
 
-  if (!report) {
+  if (needsReport) {
     return <LoadingIndicator />;
   }
 

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

@@ -4,10 +4,7 @@ import { useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 
 import { closeModal } from '@/mastodon/actions/modal';
-import {
-  generateReport,
-  selectWrapstodonYear,
-} from '@/mastodon/reducers/slices/annual_report';
+import { generateReport } from '@/mastodon/reducers/slices/annual_report';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { AnnualReport } from '.';
@@ -21,8 +18,7 @@ const AnnualReportModal: React.FC<{
     onChangeBackgroundColor('var(--color-bg-media-base)');
   }, [onChangeBackgroundColor]);
 
-  const { state } = useAppSelector((state) => state.annualReport);
-  const year = useAppSelector(selectWrapstodonYear);
+  const { state, year } = useAppSelector((state) => state.annualReport);
 
   const showAnnouncement = year && state && state !== 'available';
 

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

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import IconPlanet from '@/images/icons/icon_planet.svg?react';
 import { openModal } from '@/mastodon/actions/modal';
 import { Icon } from '@/mastodon/components/icon';
-import { selectWrapstodonYear } from '@/mastodon/reducers/slices/annual_report';
 import {
   createAppSelector,
   useAppDispatch,
@@ -23,8 +22,7 @@ const selectReportModalOpen = createAppSelector(
 );
 
 export const AnnualReportNavItem: FC = () => {
-  const { state } = useAppSelector((state) => state.annualReport);
-  const year = useAppSelector(selectWrapstodonYear);
+  const { state, year } = useAppSelector((state) => state.annualReport);
   const active = useAppSelector(selectReportModalOpen);
 
   const dispatch = useAppDispatch();

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

@@ -16,22 +16,16 @@ $mobile-breakpoint: 540px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1.8rem;
   margin-top: 2rem;
   font-size: 16px;
+  line-height: 1.4;
   text-align: center;
   color: var(--color-text-secondary);
-}
 
-.logo {
-  width: 2rem;
-  opacity: 0.6;
-}
-
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
+  strong {
+    font-weight: 600;
+  }
 
   a:any-link {
     color: inherit;
@@ -43,3 +37,22 @@ $mobile-breakpoint: 540px;
     color: var(--color-text-primary);
   }
 }
+
+.logo {
+  width: 2rem;
+  opacity: 0.6;
+}
+
+.footerSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.linkList {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}

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

@@ -2,43 +2,66 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { DisplayName } from '@/mastodon/components/display_name';
 import { IconLogo } from '@/mastodon/components/logo';
 import { useAppSelector } from '@/mastodon/store';
 
-import { AnnualReport } from './index';
+import { AnnualReport, accountSelector } from './index';
 import classes from './shared_page.module.scss';
 
 export const WrapstodonSharedPage: FC = () => {
-  const isLoggedIn = useAppSelector((state) => !!state.meta.get('me'));
+  const account = useAppSelector(accountSelector);
+  const domain = useAppSelector((state) => state.meta.get('domain') as string);
   return (
     <main className={classes.wrapper}>
       <AnnualReport />
       <footer className={classes.footer}>
-        <IconLogo className={classes.logo} />
-        <FormattedMessage
-          id='annual_report.shared_page.footer'
-          defaultMessage='Generated with {heart} by the Mastodon team'
-          values={{ heart: '🐘' }}
-        />
-        <nav className={classes.nav}>
-          <a href='https://joinmastodon.org'>
-            <FormattedMessage id='footer.about' defaultMessage='About' />
-          </a>
-          {!isLoggedIn && (
-            <a href='https://joinmastodon.org/servers'>
-              <FormattedMessage
-                id='annual_report.shared_page.sign_up'
-                defaultMessage='Sign up'
-              />
-            </a>
-          )}
-          <a href='https://joinmastodon.org/sponsors'>
+        <div className={classes.footerSection}>
+          <IconLogo className={classes.logo} />
+          <FormattedMessage
+            id='annual_report.shared_page.footer'
+            defaultMessage='Generated with {heart} by the Mastodon team'
+            values={{ heart: '🐘' }}
+            tagName='p'
+          />
+          <ul className={classes.linkList}>
+            <li>
+              <a href='https://joinmastodon.org'>
+                <FormattedMessage
+                  id='footer.about_mastodon'
+                  defaultMessage='About Mastodon'
+                />
+              </a>
+            </li>
+            <li>
+              <a href='https://joinmastodon.org/sponsors'>
+                <FormattedMessage
+                  id='annual_report.shared_page.donate'
+                  defaultMessage='Donate'
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className={classes.footerSection}>
+          <FormattedMessage
+            id='annual_report.shared_page.footer_server_info'
+            defaultMessage='{username} uses {domain}, one of many communities powered by Mastodon.'
+            values={{
+              username: <DisplayName variant='simple' account={account} />,
+              domain: <strong>{domain}</strong>,
+            }}
+            tagName='p'
+          />
+          <a href='/about'>
             <FormattedMessage
-              id='annual_report.shared_page.donate'
-              defaultMessage='Donate'
+              id='footer.about_server'
+              defaultMessage='About {domain}'
+              values={{ domain }}
             />
           </a>
-        </nav>
+        </div>
       </footer>
     </main>
   );

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

@@ -3,17 +3,13 @@ import type { FC } from 'react';
 
 import { openModal } from '@/mastodon/actions/modal';
 import { useDismissible } from '@/mastodon/hooks/useDismissible';
-import {
-  generateReport,
-  selectWrapstodonYear,
-} from '@/mastodon/reducers/slices/annual_report';
+import { generateReport } 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 { state, year } = useAppSelector((state) => state.annualReport);
 
   const dispatch = useAppDispatch();
   const handleBuildRequest = useCallback(() => {

app/javascript/mastodon/features/notifications_v2/components/embedded_status_content.tsx

@@ -4,6 +4,7 @@ import type { List } from 'immutable';
 
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
+import type { CustomEmoji } from '@/mastodon/models/custom_emoji';
 import type { Status } from '@/mastodon/models/status';
 
 import type { Mention } from './embedded_status';
@@ -33,6 +34,7 @@ export const EmbeddedStatusContent: React.FC<{
       className={className}
       lang={status.get('language') as string}
       htmlString={status.get('contentHtml') as string}
+      extraEmojis={status.get('emoji') as List<CustomEmoji>}
     />
   );
 };

app/javascript/mastodon/features/ui/index.jsx

@@ -21,6 +21,7 @@ import { PictureInPicture } from 'mastodon/features/picture_in_picture';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { layoutFromWindow } from 'mastodon/is_mobile';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
 
 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
@@ -396,6 +397,7 @@ class UI extends PureComponent {
       this.props.dispatch(expandHomeTimeline());
       this.props.dispatch(fetchNotifications());
       this.props.dispatch(fetchServerTranslationLanguages());
+      this.props.dispatch(checkAnnualReport());
 
       setTimeout(() => this.props.dispatch(fetchServer()), 3000);
     }

app/javascript/mastodon/initial_state.ts

@@ -1,3 +1,4 @@
+import type { ApiAnnualReportState } from './api/annual_report';
 import type { ApiAccountJSON } from './api_types/accounts';
 
 type InitialStateLanguage = [code: string, name: string, localName: string];
@@ -47,6 +48,7 @@ interface InitialStateMeta {
   status_page_url: string;
   terms_of_service_enabled: boolean;
   emoji_style?: string;
+  wrapstodon?: InitialWrapstodonState | null;
 }
 
 interface Role {
@@ -57,6 +59,11 @@ interface Role {
   highlighted: boolean;
 }
 
+interface InitialWrapstodonState {
+  year: number;
+  state: ApiAnnualReportState;
+}
+
 export interface InitialState {
   accounts: Record<string, ApiAccountJSON>;
   languages: InitialStateLanguage[];
@@ -128,6 +135,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/locales/en.json

@@ -121,7 +121,7 @@
   "annual_report.nav_item.badge": "New",
   "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.shared_page.footer_server_info": "{username} uses {domain}, one of many communities powered by Mastodon.",
   "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",
@@ -441,6 +441,8 @@
   "follow_suggestions.who_to_follow": "Who to follow",
   "followed_tags": "Followed hashtags",
   "footer.about": "About",
+  "footer.about_mastodon": "About Mastodon",
+  "footer.about_server": "About {domain}",
   "footer.about_this_server": "About",
   "footer.directory": "Profiles directory",
   "footer.get_app": "Get the app",

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

@@ -11,22 +11,25 @@ import {
   apiGetAnnualReportState,
   apiRequestGenerateAnnualReport,
 } from '@/mastodon/api/annual_report';
+import { wrapstodon } from '@/mastodon/initial_state';
 import type { AnnualReport } from '@/mastodon/models/annual_report';
-
 import {
-  createAppSelector,
   createAppThunk,
   createDataLoadingThunk,
-} from '../../store/typed_functions';
+} from '@/mastodon/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;
@@ -52,18 +55,17 @@ const annualReportSlice = createSlice({
 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),
-);
-
-// This kicks everything off, and is called after fetching the server info.
+// Called on initial load to check if we need to refresh the report state.
 export const checkAnnualReport = createAppThunk(
   `${annualReportSlice.name}/checkAnnualReport`,
   (_arg: unknown, { dispatch, getState }) => {
-    const year = selectWrapstodonYear(getState());
+    const { state, year } = getState().annualReport;
     const me = getState().meta.get('me') as string;
-    if (!year || !me) {
+
+    // If we have a state, we only need to fetch it again to poll for changes.
+    const needsStateRefresh = !state || state === 'generating';
+
+    if (!year || !me || !needsStateRefresh) {
       return;
     }
     void dispatch(fetchReportState());
@@ -73,7 +75,7 @@ export const checkAnnualReport = createAppThunk(
 const fetchReportState = createDataLoadingThunk(
   `${annualReportSlice.name}/fetchReportState`,
   async (_arg: unknown, { getState }) => {
-    const year = selectWrapstodonYear(getState());
+    const { year } = getState().annualReport;
     if (!year) {
       throw new Error('Year is not set');
     }
@@ -84,8 +86,6 @@ const fetchReportState = createDataLoadingThunk(
       window.setTimeout(() => {
         void dispatch(fetchReportState());
       }, 1_000 * refresh.retry);
-    } else if (state === 'available') {
-      void dispatch(getReport());
     }
 
     return state;
@@ -97,7 +97,7 @@ const fetchReportState = createDataLoadingThunk(
 export const generateReport = createDataLoadingThunk(
   `${annualReportSlice.name}/generateReport`,
   async (_arg: unknown, { getState }) => {
-    const year = selectWrapstodonYear(getState());
+    const { year } = getState().annualReport;
     if (!year) {
       throw new Error('Year is not set');
     }
@@ -111,7 +111,7 @@ export const generateReport = createDataLoadingThunk(
 export const getReport = createDataLoadingThunk(
   `${annualReportSlice.name}/getReport`,
   async (_arg: unknown, { getState }) => {
-    const year = selectWrapstodonYear(getState());
+    const { year } = getState().annualReport;
     if (!year) {
       throw new Error('Year is not set');
     }

app/javascript/styles/mastodon/components.scss

@@ -2848,7 +2848,7 @@ a.account__display-name {
     cursor: default;
 
     &:focus {
-      color: rgb(from var(--color-text-disabled) r g b / 70%);
+      color: var(--color-text-on-disabled);
       background: var(--color-bg-disabled);
       outline: 0;
     }
@@ -3994,8 +3994,8 @@ a.account__display-name {
   box-sizing: border-box;
 
   &:hover,
-  &:focus,
-  &:active {
+  &:active,
+  &:focus-visible {
     color: var(--color-text-primary);
   }
 
@@ -4013,14 +4013,7 @@ a.account__display-name {
   }
 
   &--logo {
-    background: transparent;
     padding: 10px;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background: transparent;
-    }
   }
 }