Allow to configure tile server

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/ui/modal/modal.tsx

@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import Button from '../button/button';
 import HStack from '../hstack/hstack';
 import IconButton from '../icon-button/icon-button';
-import Stack from '../stack/stack';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },

app/soapbox/features/soapbox-config/index.tsx

@@ -22,7 +22,7 @@ import {
   Toggle,
 } from 'soapbox/components/ui';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
 import ColorWithPicker from './components/color-with-picker';
@@ -54,6 +54,8 @@ const messages = defineMessages({
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
   feedInjectionLabel: { id: 'soapbox_config.feed_injection_label', defaultMessage: 'Feed injection' },
   feedInjectionHint: { id: 'soapbox_config.feed_injection_hint', defaultMessage: 'Inject the feed with additional content, such as suggested profiles.' },
+  tileServerLabel: { id: 'soapbox_config.tile_server_label', defaultMessage: 'Map tile server' },
+  tileServerAttributionLabel: { id: 'soapbox_config.tile_server_attribution_label', defaultMessage: 'Map tiles attribution' },
 });
 
 type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
@@ -72,6 +74,8 @@ const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const features = useFeatures();
+
   const initialData = useAppSelector(state => state.soapbox);
 
   const [isLoading, setLoading] = useState(false);
@@ -345,6 +349,32 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
+          {features.events && (
+            <>
+              <CardHeader>
+                <CardTitle title={<FormattedMessage id='soapbox_config.headings.events' defaultMessage='Events' />} />
+              </CardHeader>
+
+              <FormGroup labelText={intl.formatMessage(messages.tileServerLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.tileServerLabel)}
+                  value={soapbox.tileServer}
+                  onChange={handleChange(['tileServer'], (e) => e.target.value)}
+                />
+              </FormGroup>
+
+              <FormGroup labelText={intl.formatMessage(messages.tileServerAttributionLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.tileServerAttributionLabel)}
+                  value={soapbox.tileServerAttribution}
+                  onChange={handleChange(['tileServerAttribution'], (e) => e.target.value)}
+                />
+              </FormGroup>
+            </>
+          )}
+
           <CardHeader>
             <CardTitle title={<FormattedMessage id='soapbox_config.headings.cryptocurrency' defaultMessage='Cryptocurrency' />} />
           </CardHeader>

app/soapbox/features/ui/components/modals/event-map-modal.tsx

@@ -1,9 +1,9 @@
 import L from 'leaflet';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Modal, Stack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
@@ -21,12 +21,8 @@ interface IEventMapModal {
   statusId: string,
 }
 
-const messages = defineMessages({
-  osmAttribution: { id: 'event_map.osm_attribution', defaultMessage: '© OpenStreetMap Contributors' },
-});
-
 const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
-  const intl = useIntl();
+  const { tileServer, tileServerAttribution } = useSoapboxConfig();
 
   const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector(state => getStatus(state, { id: statusId })) as StatusEntity;
@@ -43,8 +39,8 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
       title: location.get('name'),
     }).addTo(map.current);
 
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: intl.formatMessage(messages.osmAttribution),
+    L.tileLayer(tileServer, {
+      attribution: tileServerAttribution,
     }).addTo(map.current);
 
     return () => {

app/soapbox/normalizers/soapbox/soapbox-config.ts

@@ -114,6 +114,8 @@ export const SoapboxConfigRecord = ImmutableRecord({
   displayCta: true,
   /** Whether to inject suggested profiles into the Home feed. */
   feedInjection: true,
+  tileServer: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+  tileServerAttribution: '© OpenStreetMap Contributors',
 }, 'SoapboxConfig');
 
 type SoapboxConfigMap = ImmutableMap<string, any>;

app/soapbox/pages/event-page.tsx

@@ -91,12 +91,12 @@ const EventPage: React.FC<IEventPage> = ({ params, children }) => {
         )}
         {features.trends && (
           <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+            {Component => <Component limit={5} key='trends-panel' />}
           </BundleContainer>
         )}
         {features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} key='wtf-panel' />}
+            {Component => <Component limit={3} key='wtf-panel' />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />