[bugfix] set type for nameLayout

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

@@ -1,10 +1,13 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 import classNames from "classnames";
 
-import  { type List } from "immutable";
+import ImmutablePropTypes from "react-immutable-proptypes";
 
-import  { type Account } from "flavours/glitch/types/resources";
+import { type List } from "immutable";
+
+import { type Account } from "flavours/glitch/types/resources";
 
 import { autoPlayGif } from "../initial_state";
 
@@ -15,9 +18,15 @@ interface Props {
   others?: List<Account>,
   localDomain?: string,
   inline?: boolean,
+  nameLayout?: string,
 }
 
 export class DisplayName extends React.PureComponent<Props> {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    nameLayout: ImmutablePropTypes.map.isRequired,
+  };
+
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,
   }) => {
@@ -55,7 +64,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,
@@ -73,7 +82,7 @@ export class DisplayName extends React.PureComponent<Props> {
         .map((a) => (
           <bdi key={a.get("id")}>
             <strong
-              className='display-name__html'
+              className="display-name__html"
               dangerouslySetInnerHTML={{ __html: a.get("display_name_html") }}
             />
           </bdi>
@@ -93,39 +102,39 @@ export class DisplayName extends React.PureComponent<Props> {
       displayName = (
         <bdi>
           <strong
-            className='display-name__html'
+            className="display-name__html"
             dangerouslySetInnerHTML={{
               __html: account.get("display_name_html"),
             }}
           />
         </bdi>
       );
-      suffix = <span className='display-name__account'>@{acct}</span>;
+      suffix = <span className="display-name__account">@{acct}</span>;
     } else {
       displayName = (
         <bdi>
-          <strong className='display-name__html'>
+          <strong className="display-name__html">
-            <Skeleton width='10ch' />
+            <Skeleton width="10ch" />
           </strong>
         </bdi>
       );
       suffix = (
-        <span className='display-name__account'>
+        <span className="display-name__account">
-          <Skeleton width='7ch' />
+          <Skeleton width="7ch" />
         </span>
       );
     }
 
     return (
-      <span
+      <div
-        className={classNames("display-name", { inline })}
+        className={classNames("display-name", { inline }, nameLayout)}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
         {displayName}
         {inline ? " " : null}
         {suffix}
-      </span>
+      </div>
     );
   }
 }

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,

app/javascript/flavours/glitch/styles/gts/status.scss

@@ -31,11 +31,9 @@
     color: var(--color-secondary-fg);
 }
 
-.status .mention {
+.status .mention,
-    &,
+.status .mention:hover {
-    &:hover {
+    text-decoration: none;
-        text-decoration: none;
-    }
 }
 
 .status .mention:is(:focus, :hover) span {

app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss

@@ -18,6 +18,16 @@
         line-height: max(21px, 1.4em);
     }
 
+    .display-name.both_x {
+        display: flex;
+        gap: var(--size-ui-gap);
+    }
+
+    .display-name.handle bdi,
+    .display-name.display .display-name__account {
+        display: none;
+    }
+
     .display-name__html {
         font-weight: 700;
     }
@@ -27,7 +37,14 @@
         font-weight: 400;
     }
 
-    &:hover .display-name__html {
+    .display-name.handle .display-name__account {
+        color: currentcolor;
+        font-size: inherit;
+        font-weight: 700;
+    }
+
+    &:hover .display-name__html,
+    &:hover .display-name.handle .display-name__account {
         text-decoration-line: underline;
         text-decoration-color: currentColor;
         text-decoration-thickness: 2px;