add <select> to settings pane

CHANGELOG.md

@@ -11,30 +11,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added documentation for `yarn dev` (#75)
 - Added an .editorconfig (#78)
-- Added a CHANGELOG.md basaed on “Keep a Changelog” (#80)
+- Added a changelog basaed on “Keep a Changelog” (#80)
 
 ### Changed
 
 - Preserve ‘mastodon-settings’ in localStorage (#66)
 - Redesigned the login page (#76)
-- Changed all icons to the Phosphor icon set (#77)
-- Changed AUTHORS.md to reflect fork contributors (#89)
+- Changed all icons with the Phosphor icon set (#77)
 
 ### Fixed
 
 - Updated caniuse-lite browserlist (#82)
 - Fixed various linter issues (#85)
-- Fixed various CSS issues (#100)
 - Updated Prettier to 3.6.2 (#86)
-- Updated Yarn to 4.10.3 (#90)
-- Updated Webpack to 5.102.1 (#83)
-- Updated ESlint to 9.37.0 (#88)
-
-### Removed
-
-- Removed FontAwesome (#99)
-- Removed unused CSS files (#99)
-- Removed various unused assets
 
 ## [0.5.0] - 2025-07-14
 

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/mastodon/common.js

@@ -1,4 +1,5 @@
 import Rails from "@rails/ujs";
+import "font-awesome/css/font-awesome.css";
 
 export function start() {
   require.context("../images/", true);

package.json

@@ -91,7 +91,7 @@
     "lodash": "^4.17.21",
     "mark-loader": "^0.1.6",
     "marky": "^1.2.5",
-    "mini-css-extract-plugin": "^2.9.4",
+    "mini-css-extract-plugin": "^1.6.2",
     "mkdirp": "^3.0.1",
     "npmlog": "^7.0.1",
     "path-complete-extname": "^1.0.0",
@@ -129,8 +129,8 @@
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.1.8",
     "rimraf": "^5.0.1",
-    "sass": "^1.93.2",
-    "sass-loader": "^16.0.5",
+    "sass": "^1.62.1",
+    "sass-loader": "^10.2.0",
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
     "substring-trie": "^1.0.2",

public/icons.svg

@@ -283,7 +283,7 @@
     
     <symbol id="lock-open-simple" fill="currentcolor" viewBox="0 0 256 256">
         <path d="M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z" opacity="0.2"></path>
-        <path d="M207.998431,8 C231.042632,8 251.349085,24.3122088 255.838251,46.407134 C256.717967,50.7369471 253.92111,54.9601045 249.591297,55.83982 C245.261484,56.7195356 241.038327,53.922679 240.158611,49.592866 C237.195711,35.0099629 223.489823,24 207.998431,24 C190.325319,24 175.998431,38.326888 175.998431,56 L175.998431,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L159.998431,80 L159.998431,56 C159.998431,29.490332 181.488763,8 207.998431,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
+        <path d="M48,8 C74.509668,8 96,29.490332 96,56 L95.9994315,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L79.9994315,80 L80,56 C80,38.5036191 65.9582171,24.2868724 48.5291785,24.0042871 L48,24 C32.5086083,24 18.8027209,35.0099629 15.83982,49.592866 C14.9601045,53.922679 10.7369471,56.7195356 6.40713405,55.83982 C2.077321,54.9601045 -0.719535601,50.7369471 0.160179973,46.407134 C4.64934606,24.3122088 24.9557992,8 48,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
     </symbol>
     
     <symbol id="magnifying-glass" fill="currentcolor" viewBox="0 0 256 256">

yarn.lock

@@ -2529,7 +2529,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     mark-loader: "npm:^0.1.6"
     marky: "npm:^1.2.5"
-    mini-css-extract-plugin: "npm:^2.9.4"
+    mini-css-extract-plugin: "npm:^1.6.2"
     mkdirp: "npm:^3.0.1"
     npmlog: "npm:^7.0.1"
     path-complete-extname: "npm:^1.0.0"
@@ -2569,8 +2569,8 @@ __metadata:
     requestidlecallback: "npm:^0.3.0"
     reselect: "npm:^4.1.8"
     rimraf: "npm:^5.0.1"
-    sass: "npm:^1.93.2"
-    sass-loader: "npm:^16.0.5"
+    sass: "npm:^1.62.1"
+    sass-loader: "npm:^10.2.0"
     stacktrace-js: "npm:^2.0.2"
     stringz: "npm:^2.1.0"
     stylelint: "npm:^15.10.1"
@@ -10950,15 +10950,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-css-extract-plugin@npm:^2.9.4":
-  version: 2.9.4
-  resolution: "mini-css-extract-plugin@npm:2.9.4"
+"mini-css-extract-plugin@npm:^1.6.2":
+  version: 1.6.2
+  resolution: "mini-css-extract-plugin@npm:1.6.2"
   dependencies:
-    schema-utils: "npm:^4.0.0"
-    tapable: "npm:^2.2.1"
+    loader-utils: "npm:^2.0.0"
+    schema-utils: "npm:^3.0.0"
+    webpack-sources: "npm:^1.1.0"
   peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/76f9e471784d52435ea766ce576ad23d37d0ea51c32ddc56414c8fdf14f7de44202dbc772cdf7549b7e54a5e56f569af93cfbd036d62d13ff8fd9571e53353b7
+    webpack: ^4.4.0 || ^5.0.0
+  checksum: 10c0/138c008f8a510012266d2834227e75181feeffd09e89e9cde0a63f17be3d64ea3ddbba01036aac9c8a969462c0142285659a20c294e8d01ba948aa1124affdc2
   languageName: node
   linkType: hard
 
@@ -13659,33 +13660,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^16.0.5":
-  version: 16.0.5
-  resolution: "sass-loader@npm:16.0.5"
+"sass-loader@npm:^10.2.0":
+  version: 10.5.2
+  resolution: "sass-loader@npm:10.5.2"
   dependencies:
+    klona: "npm:^2.0.4"
+    loader-utils: "npm:^2.0.0"
     neo-async: "npm:^2.6.2"
+    schema-utils: "npm:^3.0.0"
+    semver: "npm:^7.3.2"
   peerDependencies:
-    "@rspack/core": 0.x || 1.x
+    fibers: ">= 3.1.0"
     node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
     sass: ^1.3.0
-    sass-embedded: "*"
-    webpack: ^5.0.0
+    webpack: ^4.36.0 || ^5.0.0
   peerDependenciesMeta:
-    "@rspack/core":
+    fibers:
       optional: true
     node-sass:
       optional: true
     sass:
       optional: true
-    sass-embedded:
-      optional: true
-    webpack:
-      optional: true
-  checksum: 10c0/216422b7b9e6e3f22739dc96887d883d2415f188d5c47631fd28c80608b5fae71167b26d0c74a1e917614e4d494fa73b1190ad5ca2f587c1afee84dc1d30f003
+  checksum: 10c0/5ba4a83459fbb50e21d4f4b1b59baf1ddf8dd404099b6d1f2ec887c6903659e505879915030dd9efb1c6dd5fde2d515a19f418487b73d1cc59f6aad60c79bcf5
   languageName: node
   linkType: hard
 
-"sass@npm:^1.93.2":
+"sass@npm:^1.62.1":
   version: 1.93.2
   resolution: "sass@npm:1.93.2"
   dependencies:
@@ -13797,7 +13797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
+"semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
   version: 7.7.3
   resolution: "semver@npm:7.7.3"
   bin:
@@ -15998,7 +15998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^1.4.3":
+"webpack-sources@npm:^1.1.0, webpack-sources@npm:^1.4.3":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
   dependencies: