Add player bug reports and profile identity features

app/settings/page.tsx

@@ -5,6 +5,7 @@ import { Header, Footer } from "@/components/Shell";
 import { AccountSettings } from "@/components/AccountSettings";
 import { user } from "@/lib/supabase";
 import { accountProfile } from "@/lib/profile";
+import { Username } from "@/components/Username";
 export async function generateMetadata() {
   const { t } = await getI18n();
   return { title: t("Account settings") };
@@ -32,12 +33,14 @@ export default async function Settings({
           <span className="eyebrow">{t("YOUR CARTOGRAPHER ACCOUNT")}</span>
           <h1>{t("Account settings.")}</h1>
           <p className="lead">
+            <Username name={profile.display_name} appearance={profile} /> ·{" "}
             {t("Your name, your sign-in, your next expedition.")}
           </p>
         </div>
         <AccountSettings
           email={account.email ?? ""}
           displayName={profile.display_name}
+          appearance={profile}
           passwordUpdated={query.password === "updated"}
         />
       </main>