Add translation process and small fixes (#930)

## Launch Checklist

This adds information about how to translate Maputnik and how to get in
touch with people who have translated in the past.
@keichan34, @jieme, @lhapaipai - I need your approval for this so that
people in the future will know to contact you in case text is being
added and they need help translating it.

CC: @ianthetechie 

I've also changed the word "Language" in the upper part of the screen so
that it won't be translated in case you accidentally switch language,
and you need to switch back.

I've also fixed some RTL issues in the CSS and updated the maplibre
components labels when the language changes.

src/components/AppToolbar.tsx

@@ -230,7 +230,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <label>{t("View")}
+            <IconText>{t("View")}
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
@@ -254,12 +254,12 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   })}
                 </optgroup>
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarSelect wdKey="nav:language">
             <MdLanguage />
-            <label>{t("Language")}
+            <IconText>Language
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-lang-select"
@@ -274,7 +274,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   );
                 })}
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>

src/components/MapMaplibreGl.tsx

@@ -14,6 +14,7 @@ import '../libs/maplibre-rtl'
 import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
+import i18next from 'i18next'
 
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
   ReactDOM.render(popup, mountNode);
@@ -67,9 +68,11 @@ type MapMaplibreGlInternalProps = {
 } & WithTranslation;
 
 type MapMaplibreGlState = {
-  map: Map | null
-  inspect: MaplibreInspect | null
-  zoom?: number
+  map: Map | null;
+  inspect: MaplibreInspect | null;
+  geocoder: MaplibreGeocoder | null;
+  zoomControl: ZoomControl | null;
+  zoom?: number;
 };
 
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -87,7 +90,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     this.state = {
       map: null,
       inspect: null,
+      geocoder: null,
+      zoomControl: null,
     }
+    i18next.on('languageChanged', () => {
+      this.forceUpdate();
+    })
   }
 
 
@@ -125,6 +133,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         this.state.inspect!.render();
       }, 500);
     }
+    
   }
 
   componentDidMount() {
@@ -152,9 +161,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
-    this.initGeocoder(map);
+    let geocoder = this.initGeocoder(map);
 
-    const zoomControl = new ZoomControl(this.props.t("Zoom:"));
+    const zoomControl = new ZoomControl();
     map.addControl(zoomControl, 'top-right');
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -189,6 +198,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       this.setState({
         map,
         inspect,
+        geocoder,
+        zoomControl,
         zoom: map.getZoom()
       });
     })
@@ -261,10 +272,13 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       maplibregl: MapLibreGl,
     });
     map.addControl(geocoder, 'top-left');
+    return geocoder;
   }
 
   render() {
     const t = this.props.t;
+    this.state.geocoder?.setPlaceholder(t("Search"));
+    this.state.zoomControl?.setLabel(t("Zoom:"));
     return <div
       className="maputnik-map__map"
       role="region"