Updates Wrapstodon footer with dedicated local server info (#37270)

app/helpers/wrapstodon_helper.rb

@@ -10,6 +10,7 @@ module WrapstodonHelper
     ).as_json
 
     payload[:me] = current_account.id.to_s if user_signed_in?
+    payload[:domain] = Addressable::IDNA.to_unicode(Rails.configuration.x.local_domain)
 
     json_string = payload.to_json
 

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/features/annual_report/index.tsx

@@ -27,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) {

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

@@ -16,23 +16,17 @@ $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 {
+  strong {
-  width: 2rem;
+    font-weight: 600;
-  opacity: 0.6;
   }
 
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-
   a:any-link {
     color: inherit;
     text-decoration: underline;
@@ -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}>
+        <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'
           />
-        <nav className={classes.nav}>
+          <ul className={classes.linkList}>
+            <li>
               <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'
+                  id='footer.about_mastodon'
-                defaultMessage='Sign up'
+                  defaultMessage='About Mastodon'
                 />
               </a>
-          )}
+            </li>
+            <li>
               <a href='https://joinmastodon.org/sponsors'>
                 <FormattedMessage
                   id='annual_report.shared_page.donate'
                   defaultMessage='Donate'
                 />
               </a>
-        </nav>
+            </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='footer.about_server'
+              defaultMessage='About {domain}'
+              values={{ domain }}
+            />
+          </a>
+        </div>
       </footer>
     </main>
   );

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",