[feature] add “Name Layout” setting

app/javascript/flavours/glitch/components/display_name.tsx

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 import classNames from "classnames";
@@ -18,6 +19,11 @@ interface Props {
 }
 
 export class DisplayName extends React.PureComponent<Props> {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    nameLayout: ImmutablePropTypes.map.isRequired,
+  };
+
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,
   }) => {
@@ -55,7 +61,7 @@ export class DisplayName extends React.PureComponent<Props> {
   };
 
   render() {
-    const { others, localDomain, inline } = this.props;
+    const { others, localDomain, inline, nameLayout } = this.props;
 
     let displayName: React.ReactNode,
       suffix: React.ReactNode,
@@ -122,6 +128,7 @@ export class DisplayName extends React.PureComponent<Props> {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
+        {nameLayout}
         {displayName}
         {inline ? " " : null}
         {suffix}

app/javascript/flavours/glitch/components/status.jsx

@@ -826,6 +826,7 @@ class Status extends ImmutablePureComponent {
                 friend={account}
                 collapsed={isCollapsed}
                 parseClick={parseClick}
+                settings={settings}
               />
             ) : null}
             <StatusIcons

app/javascript/flavours/glitch/components/status_header.jsx

@@ -15,6 +15,7 @@ export default class StatusHeader extends PureComponent {
     status: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map,
     parseClick: PropTypes.func.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
   };
 
   //  Handles clicks on account name/image
@@ -33,6 +34,7 @@ export default class StatusHeader extends PureComponent {
     const {
       status,
       friend,
+      settings,
     } = this.props;
 
     const account = status.get("account");
@@ -62,7 +64,7 @@ export default class StatusHeader extends PureComponent {
           onClick={this.handleAccountClick}
           rel='noopener noreferrer'
         >
-          <DisplayName account={account} />
+          <DisplayName account={account} nameLayout={settings.get("name_layout")} />
         </a>
       </div>
     );

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

@@ -33,6 +33,10 @@ const messages = defineMessages({
   unlisted: { id: "privacy.unlisted.short", defaultMessage: "Unlisted" },
   private: { id: "privacy.private.short", defaultMessage: "Followers only" },
   direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
+  namelayout_display: { id: "namelayout.display", defaultMessage: "Display name" },
+  namelayout_handle: { id: "namelayout.handle", defaultMessage: "Handle" },
+  namelayout_both_y: { id: "namelayout.both.vertical", defaultMessage: "Both (Vertical)" },
+  namelayout_both_x: { id: "namelayout.both.horizontal", defaultMessage: "Both (Horizontal)" },
 });
 
 class LocalSettingsPage extends PureComponent {
@@ -198,6 +202,22 @@ class LocalSettingsPage extends PureComponent {
             <span className='hint'><FormattedMessage id='settings.wide_view_hint' defaultMessage='Stretches columns to better fill the available space.' /></span>
           </LocalSettingsPageItem>
         </section>
+        <section>
+          <h2><FormattedMessage id='settings.name_layout' defaultMessage='Name layout' /></h2>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={["name_layout"]}
+            id='mastodon-settings--status-username-inline'
+            onChange={onChange}
+            options={[
+              { value: "display", message: intl.formatMessage(messages.namelayout_display) },
+              { value: "handle", message: intl.formatMessage(messages.namelayout_handle) },
+              { value: "both_y", message: intl.formatMessage(messages.namelayout_both_y) },
+              { value: "both_x", message: intl.formatMessage(messages.namelayout_both_x) }
+            ]}
+          >
+          </LocalSettingsPageItem>
+        </section>
       </div>
     ),
     ({ intl, onChange, settings }) => (

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -53,6 +53,7 @@ const initialState = ImmutableMap({
     pop_in_player    : true,
     pop_in_position  : "right",
   }),
+  name_layout : "both_y",
   notifications : ImmutableMap({
     favicon_badge : false,
     tab_badge     : true,