From f0baefb66f8bdfefaaf5d1fa03bba880d096d9ab Mon Sep 17 00:00:00 2001
From: Clovis <clovis@bdx.town>
Date: Tue, 29 Nov 2022 16:53:12 +0100
Subject: [PATCH] Change landing page

---
 app/soapbox/actions/instance.ts               |  4 +-
 app/soapbox/features/landing_page/index.tsx   | 46 +++++++++++++++++--
 .../public_layout/components/header.tsx       | 11 -----
 app/soapbox/features/soapbox_config/index.tsx | 14 ++++++
 app/soapbox/locales/fr.json                   |  3 ++
 app/soapbox/normalizers/instance.ts           |  1 +
 .../normalizers/soapbox/soapbox_config.ts     |  1 +
 app/soapbox/reducers/instance.ts              | 10 ++--
 8 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/app/soapbox/actions/instance.ts b/app/soapbox/actions/instance.ts
index 60a6b2e89..317a88e03 100644
--- a/app/soapbox/actions/instance.ts
+++ b/app/soapbox/actions/instance.ts
@@ -42,9 +42,7 @@ export const fetchInstance = createAsyncThunk<void, void, { state: RootState }>(
   async(_arg, { dispatch, getState, rejectWithValue }) => {
     try {
       const { data: instance } = await api(getState).get('/api/v1/instance');
-      if (needsNodeinfo(instance)) {
-        dispatch(fetchNodeinfo());
-      }
+      dispatch(fetchNodeinfo());
       return instance;
     } catch (e) {
       return rejectWithValue(e);
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 1e3b01f80..8a7cadaba 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -1,12 +1,16 @@
+import Immutable from 'immutable';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { fetchAccount } from 'soapbox/actions/accounts';
 import { prepareRequest } from 'soapbox/actions/consumer-auth';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
 import { useAppDispatch, useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 import { capitalize } from 'soapbox/utils/strings';
+import { List as ImmutableList } from 'immutable';
 
 const LandingPage = () => {
   const dispatch = useAppDispatch();
@@ -15,8 +19,28 @@ const LandingPage = () => {
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
 
   const instance = useAppSelector((state) => state.instance);
+  const accounts = useAppSelector((state) => state.accounts);
   const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
 
+  React.useEffect(() => {
+    const staff = (instance.pleroma.getIn(["metadata", "staff_accounts"]) as ImmutableList<string>).map((s) => s.split('/').pop());
+    staff.forEach((s) => dispatch(fetchAccount(s)));
+  }, [instance, dispatch]);
+
+  const staffAccounts = React.useMemo(() => {
+    if(accounts == null) return [];
+    const a =  Object.values(accounts?.toJSON()).filter((a) => a.admin || a.moderator);
+    console.log(a);
+    return a;
+  }, [accounts]);
+
+  const userCount = instance.stats.get('user_count');
+
+  const homeDescription = React.useMemo(() => {
+    const format = new Intl.NumberFormat().format(userCount);
+    return soapboxConfig.homeDescription.replace('[users]', format);
+  }, [userCount, soapboxConfig]);
+
   /** Registrations are closed */
   const renderClosed = () => {
     return (
@@ -107,14 +131,30 @@ const LandingPage = () => {
         <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
           <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
             <div className='w-full'>
-              <Stack space={3}>
+              <Stack space={5}>
                 <h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
-
                 <Text size='lg'>
-                  {instance.description}
+                  {
+                    homeDescription ? <span dangerouslySetInnerHTML={{ __html: homeDescription }} /> : instance.description
+                  }
                 </Text>
+                <div>
+                  <div className='flex justify-between'>
+                    <h2 className="text-xl text-gray-800">
+                      <FormattedMessage id='landingPage.admins' defaultMessage='Moderators' />
+                    </h2>
+                  </div>
+                  <a href={`mailto:${instance.email}`}>
+                      {instance.email}
+                    </a>
+                  <Stack space={3} className="mt-4">
+                    {
+                      staffAccounts.map((s) => <Account key={s.id} hideActions={true} account={s} />)
+                    }
+                  </Stack>
+                </div>
               </Stack>
             </div>
           </div>
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 51e7f62a6..6308824ce 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -76,17 +76,6 @@ const Header = () => {
       <nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
         <div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
           <div className='flex items-center sm:justify-center relative w-36'>
-            <div className='hidden md:block absolute z-0 -top-24 -left-6'>
-              <Sonar />
-            </div>
-
-            <IconButton
-              title='Open Menu'
-              src={require('@tabler/icons/menu-2.svg')}
-              onClick={open}
-              className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
-            />
-
             <Link to='/' className='z-10'>
               <SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />
               <span className='hidden'>{intl.formatMessage(messages.home)}</span>
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 3ea7233f5..fc45cbc31 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -51,6 +51,7 @@ const messages = defineMessages({
   singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
   singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
+  homeDescription: { id: 'soapbox_config.home_description', defaultMessage: 'Instance\'s description shown in Home page. Supports HTML. Use [users] to insert the number of current users on the instance.' }
 });
 
 type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
@@ -292,6 +293,19 @@ const SoapboxConfig: React.FC = () => {
             )}
           </List>
 
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.home' defaultMessage='Home' />} />
+          </CardHeader>
+
+          <FormGroup labelText={intl.formatMessage(messages.homeDescription)}>
+            <Textarea
+              placeholder={intl.formatMessage(messages.homeDescription)}
+              isCodeEditor
+              value={soapbox.homeDescription}
+              onChange={handleChange(['homeDescription'], (e) => e.target.value)}
+            />
+          </FormGroup>
+
           <CardHeader>
             <CardTitle title={<FormattedMessage id='soapbox_config.headings.navigation' defaultMessage='Navigation' />} />
           </CardHeader>
diff --git a/app/soapbox/locales/fr.json b/app/soapbox/locales/fr.json
index 792f2fa80..667e388bf 100644
--- a/app/soapbox/locales/fr.json
+++ b/app/soapbox/locales/fr.json
@@ -1052,11 +1052,14 @@
   "soapbox_config.raw_json_label": "Avancé: Editer le fichier JSON",
   "soapbox_config.save": "Enregistrer",
   "soapbox_config.saved": "Configuration sauvegardée !",
+  "soapbox_config.headings.home": "Page d'accueil",
+  "soapbox_config.home_description": "Description de l'instance affichée sur la page d'accueil. Supporte le HTML. Vous pouvez utiliser [users] pour insérer le nombre d'utilisateurs courant dans la description.",
   "soapbox_config.single_user_mode_hint": "L'index affichera le profil d'un utilisateur donné.",
   "soapbox_config.single_user_mode_label": "Mode utilisateur unique",
   "soapbox_config.single_user_mode_profile_hint": "@handle",
   "soapbox_config.single_user_mode_profile_label": "Main user handle",
   "soapbox_config.verified_can_edit_name_label": "Autoriser les utilisateurs vérifiés à modifier leur propre nom d'utilisateur",
+  "landingPage.admins": "Modérateurs",
   "sponsored.info.message": "{siteTitle} displays ads to help fund our service.",
   "sponsored.info.title": "Why am I seeing this ad?",
   "sponsored.subtitle": "Sponsored post",
diff --git a/app/soapbox/normalizers/instance.ts b/app/soapbox/normalizers/instance.ts
index 6987fc6f5..148073624 100644
--- a/app/soapbox/normalizers/instance.ts
+++ b/app/soapbox/normalizers/instance.ts
@@ -50,6 +50,7 @@ export const InstanceRecord = ImmutableRecord({
         enabled: true,
         exclusions: false,
       }),
+      staff_accounts: [],
     }),
     stats: ImmutableMap(),
   }),
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index d0f778185..2ac19ecdc 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -123,6 +123,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
   singleUserModeProfile: '',
   linkFooterMessage: '',
   links: ImmutableMap<string, string>(),
+  homeDescription: '',
 }, 'SoapboxConfig');
 
 type SoapboxConfigMap = ImmutableMap<string, any>;
diff --git a/app/soapbox/reducers/instance.ts b/app/soapbox/reducers/instance.ts
index 4c1456dc4..2d5e3f951 100644
--- a/app/soapbox/reducers/instance.ts
+++ b/app/soapbox/reducers/instance.ts
@@ -17,15 +17,17 @@ import type { AnyAction } from 'redux';
 const initialState = normalizeInstance(ImmutableMap());
 
 const nodeinfoToInstance = (nodeinfo: ImmutableMap<string, any>) => {
+  const data = nodeinfo.get("data");
   // Match Pleroma's develop branch
   return normalizeInstance(ImmutableMap({
     pleroma: ImmutableMap({
       metadata: ImmutableMap({
-        account_activation_required: nodeinfo.getIn(['metadata', 'accountActivationRequired']),
-        features: nodeinfo.getIn(['metadata', 'features']),
-        federation: nodeinfo.getIn(['metadata', 'federation']),
+        account_activation_required: data.getIn(['metadata', 'accountActivationRequired']),
+        features: data.getIn(['metadata', 'features']),
+        staff_accounts: data.getIn(['metadata', 'staffAccounts']),
+        federation: data.getIn(['metadata', 'federation']),
         fields_limits: ImmutableMap({
-          max_fields: nodeinfo.getIn(['metadata', 'fieldsLimits', 'maxFields']),
+          max_fields: data.getIn(['metadata', 'fieldsLimits', 'maxFields']),
         }),
       }),
     }),