add <select> to settings pane

app/javascript/flavours/glitch/features/local_settings/page/index.jsx

@@ -6,6 +6,7 @@ import { defineMessages, FormattedMessage, injectIntl } from "react-intl";
 
 import ImmutablePropTypes from "react-immutable-proptypes";
 
+import { languages as preloadedLanguages } from "flavours/glitch/initial_state";
 
 //  Our imports
 import LocalSettingsPageItem from "./item";
@@ -35,6 +36,12 @@ const messages = defineMessages({
   direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
 });
 
+const langs = []
+
+for (const lang of preloadedLanguages) {
+  langs.push({"value": lang[0], "label": lang[1]})
+}
+
 class LocalSettingsPage extends PureComponent {
 
   static propTypes = {
@@ -203,6 +210,16 @@ class LocalSettingsPage extends PureComponent {
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page compose_box_opts'>
         <h1><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={["default_language"]}
+          id='mastodon-settings--default-language'
+          select={langs}
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.default_language' defaultMessage='Default language for new toots' />
+        </LocalSettingsPageItem>
+
         <LocalSettingsPageItem
           settings={settings}
           item={["always_show_spoilers_field"]}

app/javascript/flavours/glitch/features/local_settings/page/item/index.jsx

@@ -39,7 +39,7 @@ export default class LocalSettingsPageItem extends PureComponent {
 
   render () {
     const { handleChange } = this;
-    const { settings, item, id, inputProps, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
+    const { settings, item, id, inputProps, select, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
     let enabled = !disabled;
 
     if (dependsOn) {
@@ -52,6 +52,31 @@ export default class LocalSettingsPageItem extends PureComponent {
         enabled = enabled && !settings.getIn(dependsOnNot[i]);
       }
     }
+    
+    if (select && select.length > 0) {
+      const currentValue = settings.getIn(item);
+      const optionElems = select && select.length > 0 && select.map((opt) => {
+        return (
+          <option
+            value={opt.value}
+            selected={currentValue === opt.value}
+          >
+            {opt.label}
+          </option>
+        )
+      })
+      return (
+        <div className='glitch local-settings__page__item select'>
+          <fieldset>
+            <label>Default language:
+              <select>
+                {optionElems}
+              </select>
+            </label>
+          </fieldset>
+        </div>
+      );
+    }
 
     if (options && options.length > 0) {
       const currentValue = settings.getIn(item);

app/javascript/flavours/glitch/main.jsx

@@ -5,7 +5,6 @@ import Mastodon from "flavours/glitch/containers/mastodon";
 import { me } from "flavours/glitch/initial_state";
 import * as perf from "flavours/glitch/performance";
 import ready from "flavours/glitch/ready";
-import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
 import { store } from "flavours/glitch/store";
 
 /**
@@ -13,7 +12,6 @@ import { store } from "flavours/glitch/store";
  */
 function main() {
   perf.start("main()");
-  setReducedMotionBodyClass();
 
   return ready(async () => {
     const mountNode = document.getElementById("mastodon");

app/javascript/flavours/glitch/styles/tangerine/status-bar.scss

@@ -1,12 +1,12 @@
 /* 🚥 Status Bar */
-.no-reduce-motion .status-favourite.active svg {
+.status-favourite.active svg {
     animation: bounce 0.4s ease-out;
 }
 
-.no-reduce-motion .status-boost.active svg {
+.status-boost.active svg {
     animation: launch 1.2s ease-in 1;
 }
 
-.no-reduce-motion .status-bookmark.active svg {
+.status-bookmark.active svg {
     animation: bounce-vertical 0.4s ease-out;
 }

app/javascript/flavours/glitch/utils/accessibility.js

@@ -1,26 +0,0 @@
-import ready from "../ready";
-
-ready(() => {
-  setReducedMotionBodyClass();
-});
-
-export function setMediaQueryBodyClass(query, className) {
-  if (query.matches) {
-    document.body.classList.add(className.true);
-    document.body.classList.remove(className.false);
-  } else {
-    document.body.classList.add(className.false);
-    document.body.classList.remove(className.true);
-  }
-}
-
-export function setReducedMotionBodyClass() {
-  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
-  const className = {
-    true: "reduce-motion",
-    false: "no-reduce-motion",
-  };
-
-  setMediaQueryBodyClass(prefersReducedMotion, className);
-  prefersReducedMotion.addEventListener("change", () => setReducedMotionBodyClass(prefersReducedMotion));
-}

public/index.html

@@ -26,7 +26,7 @@
 
     <script src="/packs/js/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body system-font'>
+<body class='app-body no-reduce-motion system-font'>
 <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
 </div>
 </body>