fix(settings): display index header only on mobile and show user

src/pages/settings/GenericSettings.tsx

@@ -134,7 +134,7 @@ export function GenericSettings({
                 <div className={styles.sidebar}>
                     <div className={styles.scrollbox}>
                         <div className={styles.container}>
-                            {indexHeader}
+                            {isTouchscreenDevice && indexHeader}
                             {pages.map((entry, i) =>
                                 entry.hidden ? undefined : (
                                     <>

src/pages/settings/Settings.tsx

@@ -33,6 +33,7 @@ import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../components/common/user/UserIcon";
+import { Username } from "../../components/common/user/UserShort";
 import LineDivider from "../../components/ui/LineDivider";
 
 import ButtonItem from "../../components/navigation/items/ButtonItem";
@@ -270,8 +271,8 @@ export default observer(() => {
             }
             indexHeader={
                 <IndexHeader>
-                    <UserIcon size={64} />
-                    Username
+                    <UserIcon size={64} target={client.user!} />
+                    <Username user={client.user!} prefixAt />
                 </IndexHeader>
             }
         />