From aecf74951cecb4de9ca94dd93e48af6f62300a0f Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:24:24 +0200
Subject: [chore] Settings refactor 2: the re-refactoring-ing (#2866)

* [chore] Bit more refactoring of settings panel

* fix up some remaining things

* groovy baby yeah!

* remove unused Suspense
---
 web/source/settings/components/back-button.jsx     | 27 -------
 web/source/settings/components/back-button.tsx     | 27 +++++++
 web/source/settings/components/combo-box.jsx       | 51 -------------
 web/source/settings/components/combo-box.tsx       | 47 ++++++++++++
 web/source/settings/components/error.jsx           | 84 ----------------------
 web/source/settings/components/error.tsx           | 84 ++++++++++++++++++++++
 web/source/settings/components/fake-profile.jsx    | 52 --------------
 web/source/settings/components/fake-profile.tsx    | 52 ++++++++++++++
 web/source/settings/components/fake-toot.jsx       | 57 ---------------
 web/source/settings/components/fake-toot.tsx       | 56 +++++++++++++++
 web/source/settings/components/languages.jsx       | 34 ---------
 web/source/settings/components/languages.tsx       | 34 +++++++++
 web/source/settings/components/loading.jsx         | 26 -------
 web/source/settings/components/loading.tsx         | 26 +++++++
 .../settings/components/user-logout-card.jsx       | 47 ------------
 .../settings/components/user-logout-card.tsx       | 44 ++++++++++++
 16 files changed, 370 insertions(+), 378 deletions(-)
 delete mode 100644 web/source/settings/components/back-button.jsx
 create mode 100644 web/source/settings/components/back-button.tsx
 delete mode 100644 web/source/settings/components/combo-box.jsx
 create mode 100644 web/source/settings/components/combo-box.tsx
 delete mode 100644 web/source/settings/components/error.jsx
 create mode 100644 web/source/settings/components/error.tsx
 delete mode 100644 web/source/settings/components/fake-profile.jsx
 create mode 100644 web/source/settings/components/fake-profile.tsx
 delete mode 100644 web/source/settings/components/fake-toot.jsx
 create mode 100644 web/source/settings/components/fake-toot.tsx
 delete mode 100644 web/source/settings/components/languages.jsx
 create mode 100644 web/source/settings/components/languages.tsx
 delete mode 100644 web/source/settings/components/loading.jsx
 create mode 100644 web/source/settings/components/loading.tsx
 delete mode 100644 web/source/settings/components/user-logout-card.jsx
 create mode 100644 web/source/settings/components/user-logout-card.tsx

(limited to 'web/source/settings/components')

diff --git a/web/source/settings/components/back-button.jsx b/web/source/settings/components/back-button.jsx
deleted file mode 100644
index bf9038b2b..000000000
--- a/web/source/settings/components/back-button.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { Link } from "wouter";
-
-export default function BackButton({ to }) {
-	return (
-		<Link className="button" to={to}>&lt; back</Link>
-	);
-}
diff --git a/web/source/settings/components/back-button.tsx b/web/source/settings/components/back-button.tsx
new file mode 100644
index 000000000..bf9038b2b
--- /dev/null
+++ b/web/source/settings/components/back-button.tsx
@@ -0,0 +1,27 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { Link } from "wouter";
+
+export default function BackButton({ to }) {
+	return (
+		<Link className="button" to={to}>&lt; back</Link>
+	);
+}
diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.jsx
deleted file mode 100644
index fc0133583..000000000
--- a/web/source/settings/components/combo-box.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-const {
-	Combobox,
-	ComboboxItem,
-	ComboboxPopover,
-} = require("ariakit/combobox");
-
-module.exports = function ComboBox({ field, items, label, children, ...inputProps }) {
-	return (
-		<div className="form-field combobox-wrapper">
-			<label>
-				{label}
-				<div className="row">
-					<Combobox
-						state={field.state}
-						className="combobox input"
-						{...inputProps}
-					/>
-					{children}
-				</div>
-			</label>
-			<ComboboxPopover state={field.state} className="popover">
-				{items.map(([key, value]) => (
-					<ComboboxItem className="combobox-item" key={key} value={key}>
-						{value}
-					</ComboboxItem>
-				))}
-			</ComboboxPopover>
-		</div>
-	);
-};
\ No newline at end of file
diff --git a/web/source/settings/components/combo-box.tsx b/web/source/settings/components/combo-box.tsx
new file mode 100644
index 000000000..113e6179d
--- /dev/null
+++ b/web/source/settings/components/combo-box.tsx
@@ -0,0 +1,47 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+import { Combobox, ComboboxItem, ComboboxPopover } from "ariakit/combobox";
+
+export default function ComboBox({ field, items, label, children, ...inputProps }) {
+	return (
+		<div className="form-field combobox-wrapper">
+			<label>
+				{label}
+				<div className="row">
+					<Combobox
+						state={field.state}
+						className="combobox input"
+						{...inputProps}
+					/>
+					{children}
+				</div>
+			</label>
+			<ComboboxPopover state={field.state} className="popover">
+				{items.map(([key, value]) => (
+					<ComboboxItem className="combobox-item" key={key} value={key}>
+						{value}
+					</ComboboxItem>
+				))}
+			</ComboboxPopover>
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/web/source/settings/components/error.jsx b/web/source/settings/components/error.jsx
deleted file mode 100644
index 3205cd5e3..000000000
--- a/web/source/settings/components/error.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-function ErrorFallback({ error, resetErrorBoundary }) {
-	return (
-		<div className="error">
-			<p>
-				{"An error occured, please report this on the "}
-				<a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a>
-				{" or "}
-				<a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>.
-				<br />Include the details below:
-			</p>
-			<div className="details">
-				<pre>
-					{error.name}: {error.message}
-				</pre>
-				<pre>
-					{error.stack}
-				</pre>
-			</div>
-			<p>
-				<button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a>
-			</p>
-		</div>
-	);
-}
-
-function Error({ error }) {
-	/* eslint-disable-next-line no-console */
-	console.error("Rendering error:", error);
-	let message;
-
-	if (error.data != undefined) { // RTK Query error with data
-		if (error.status) {
-			message = (<>
-				<b>{error.status}:</b> {error.data.error}
-				{error.data.error_description &&
-					<p>
-						{error.data.error_description}
-					</p>
-				}
-			</>);
-		} else {
-			message = error.data.error;
-		}
-	} else if (error.name != undefined || error.type != undefined) { // JS error
-		message = (<>
-			<b>{error.type && error.name}:</b> {error.message}
-		</>);
-	} else if (error.status && typeof error.error == "string") {
-		message = (<>
-			<b>{error.status}:</b> {error.error}
-		</>);
-	} else {
-		message = error.message ?? error;
-	}
-
-	return (
-		<div className="error">
-			{message}
-		</div>
-	);
-}
-
-module.exports = { ErrorFallback, Error };
\ No newline at end of file
diff --git a/web/source/settings/components/error.tsx b/web/source/settings/components/error.tsx
new file mode 100644
index 000000000..15c3bccd4
--- /dev/null
+++ b/web/source/settings/components/error.tsx
@@ -0,0 +1,84 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+	return (
+		<div className="error">
+			<p>
+				{"An error occured, please report this on the "}
+				<a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a>
+				{" or "}
+				<a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>.
+				<br />Include the details below:
+			</p>
+			<div className="details">
+				<pre>
+					{error.name}: {error.message}
+				</pre>
+				<pre>
+					{error.stack}
+				</pre>
+			</div>
+			<p>
+				<button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a>
+			</p>
+		</div>
+	);
+}
+
+function Error({ error }) {
+	/* eslint-disable-next-line no-console */
+	console.error("Rendering error:", error);
+	let message;
+
+	if (error.data != undefined) { // RTK Query error with data
+		if (error.status) {
+			message = (<>
+				<b>{error.status}:</b> {error.data.error}
+				{error.data.error_description &&
+					<p>
+						{error.data.error_description}
+					</p>
+				}
+			</>);
+		} else {
+			message = error.data.error;
+		}
+	} else if (error.name != undefined || error.type != undefined) { // JS error
+		message = (<>
+			<b>{error.type && error.name}:</b> {error.message}
+		</>);
+	} else if (error.status && typeof error.error == "string") {
+		message = (<>
+			<b>{error.status}:</b> {error.error}
+		</>);
+	} else {
+		message = error.message ?? error;
+	}
+
+	return (
+		<div className="error">
+			{message}
+		</div>
+	);
+}
+
+export { ErrorFallback, Error };
diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.jsx
deleted file mode 100644
index 6cb8d0187..000000000
--- a/web/source/settings/components/fake-profile.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
-	return ( // Keep in sync with web/template/profile.tmpl
-		<div className="profile">
-			<div className="profile-header">
-				<div className="header-image-wrapper">
-					<img src={header} alt={header ? `header image for ${username}` : "None set"} />
-				</div>
-				<div className="basic-info" aria-hidden="true">
-					<a className="avatar" href={avatar}>
-						<img src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} />
-					</a>
-					<dl className="namerole">
-						<dt className="sr-only">Display name</dt>
-						<dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd>
-						<dt className="sr-only">Username</dt>
-						<dd className="username text-cutoff">@{username}</dd>
-						<dt className="sr-only">Role</dt>
-						{
-							(role && role.name != "user") ?
-								<>
-									<dd className="sr-only">Role</dd>
-									<dt className={`role ${role.name}`}>{role.name}</dt>
-								</>
-								: null
-						}
-					</dl>
-				</div>
-			</div>
-		</div>
-	);
-};
\ No newline at end of file
diff --git a/web/source/settings/components/fake-profile.tsx b/web/source/settings/components/fake-profile.tsx
new file mode 100644
index 000000000..4a5157378
--- /dev/null
+++ b/web/source/settings/components/fake-profile.tsx
@@ -0,0 +1,52 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export default function FakeProfile({ avatar, header, display_name, username, role }) {
+	return ( // Keep in sync with web/template/profile.tmpl
+		<div className="profile">
+			<div className="profile-header">
+				<div className="header-image-wrapper">
+					<img src={header} alt={header ? `header image for ${username}` : "None set"} />
+				</div>
+				<div className="basic-info" aria-hidden="true">
+					<a className="avatar" href={avatar}>
+						<img src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} />
+					</a>
+					<dl className="namerole">
+						<dt className="sr-only">Display name</dt>
+						<dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd>
+						<dt className="sr-only">Username</dt>
+						<dd className="username text-cutoff">@{username}</dd>
+						<dt className="sr-only">Role</dt>
+						{
+							(role && role.name != "user") ?
+								<>
+									<dd className="sr-only">Role</dd>
+									<dt className={`role ${role.name}`}>{role.name}</dt>
+								</>
+								: null
+						}
+					</dl>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx
deleted file mode 100644
index 08f806008..000000000
--- a/web/source/settings/components/fake-toot.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-const query = require("../lib/query");
-
-module.exports = function FakeToot({ children }) {
-	const { data: account = {
-		avatar: "/assets/default_avatars/GoToSocial_icon1.png",
-		display_name: "",
-		username: ""
-	} } = query.useVerifyCredentialsQuery();
-
-	return (
-		<article className="status expanded">
-			<header className="status-header">
-				<address>
-					<a style={{margin: 0}}>
-						<img className="avatar" src={account.avatar} alt="" />
-						<dl className="author-strap">
-							<dt className="sr-only">Display name</dt>
-							<dd className="displayname text-cutoff">
-								{account.display_name.trim().length > 0 ? account.display_name : account.username}
-							</dd>
-							<dt className="sr-only">Username</dt>
-							<dd className="username text-cutoff">@{account.username}</dd>
-						</dl>
-					</a>
-				</address>
-			</header>
-			<section className="status-body">
-				<div className="text">
-					<div className="content">
-						{children}
-					</div>
-				</div>
-			</section>
-		</article>
-	);
-};
\ No newline at end of file
diff --git a/web/source/settings/components/fake-toot.tsx b/web/source/settings/components/fake-toot.tsx
new file mode 100644
index 000000000..ad0c387a4
--- /dev/null
+++ b/web/source/settings/components/fake-toot.tsx
@@ -0,0 +1,56 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { useVerifyCredentialsQuery } from "../lib/query/oauth";
+
+export default function FakeToot({ children }) {
+	const { data: account = {
+		avatar: "/assets/default_avatars/GoToSocial_icon1.png",
+		display_name: "",
+		username: ""
+	} } = useVerifyCredentialsQuery();
+
+	return (
+		<article className="status expanded">
+			<header className="status-header">
+				<address>
+					<a style={{margin: 0}}>
+						<img className="avatar" src={account.avatar} alt="" />
+						<dl className="author-strap">
+							<dt className="sr-only">Display name</dt>
+							<dd className="displayname text-cutoff">
+								{account.display_name.trim().length > 0 ? account.display_name : account.username}
+							</dd>
+							<dt className="sr-only">Username</dt>
+							<dd className="username text-cutoff">@{account.username}</dd>
+						</dl>
+					</a>
+				</address>
+			</header>
+			<section className="status-body">
+				<div className="text">
+					<div className="content">
+						{children}
+					</div>
+				</div>
+			</section>
+		</article>
+	);
+}
diff --git a/web/source/settings/components/languages.jsx b/web/source/settings/components/languages.jsx
deleted file mode 100644
index 61c76e03a..000000000
--- a/web/source/settings/components/languages.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-const langs = require("langs");
-
-const asElements = langs.all().map((l) => {
-	let code = l["1"].toUpperCase();
-	let name = l.name;
-	if (l.name != l.local) {
-		name = `${name} - ${l.local}`;
-	}
-	return <option key={code} value={code}>{name}</option>;
-});
-
-module.exports = function Languages() {
-	return asElements;
-};
\ No newline at end of file
diff --git a/web/source/settings/components/languages.tsx b/web/source/settings/components/languages.tsx
new file mode 100644
index 000000000..7c2986438
--- /dev/null
+++ b/web/source/settings/components/languages.tsx
@@ -0,0 +1,34 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { all } from "langs";
+
+const asElements = all().map((l) => {
+	let code = l["1"].toUpperCase();
+	let name = l.name;
+	if (l.name != l.local) {
+		name = `${name} - ${l.local}`;
+	}
+	return <option key={code} value={code}>{name}</option>;
+});
+
+export default function Languages() {
+	return asElements;
+}
\ No newline at end of file
diff --git a/web/source/settings/components/loading.jsx b/web/source/settings/components/loading.jsx
deleted file mode 100644
index c62c72a0a..000000000
--- a/web/source/settings/components/loading.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-module.exports = function Loading() {
-	return (
-		<i className="fa fa-spin fa-refresh loading-icon" aria-label="Loading" title="Loading" />
-	);
-};
\ No newline at end of file
diff --git a/web/source/settings/components/loading.tsx b/web/source/settings/components/loading.tsx
new file mode 100644
index 000000000..f7635534f
--- /dev/null
+++ b/web/source/settings/components/loading.tsx
@@ -0,0 +1,26 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export default function Loading() {
+	return (
+		<i className="fa fa-spin fa-refresh loading-icon" aria-label="Loading" title="Loading" />
+	);
+}
diff --git a/web/source/settings/components/user-logout-card.jsx b/web/source/settings/components/user-logout-card.jsx
deleted file mode 100644
index 9d88642a5..000000000
--- a/web/source/settings/components/user-logout-card.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-const Loading = require("./loading");
-const {
-	useVerifyCredentialsQuery,
-	useLogoutMutation,
-} = require("../lib/query/oauth");
-const { useInstanceV1Query } = require("../lib/query");
-
-module.exports = function UserLogoutCard() {
-	const { data: profile, isLoading } = useVerifyCredentialsQuery();
-	const { data: instance } = useInstanceV1Query();
-	const [logoutQuery] = useLogoutMutation();
-
-	if (isLoading) {
-		return <Loading />;
-	} else {
-		return (
-			<div className="account-card">
-				<img className="avatar" src={profile.avatar} alt="" />
-				<h3 className="text-cutoff">{profile.display_name?.length > 0 ? profile.display_name : profile.acct}</h3>
-				<span className="text-cutoff">@{profile.username}@{instance?.account_domain}</span>
-				<a onClick={logoutQuery} href="#" aria-label="Log out" title="Log out" className="logout">
-					<i className="fa fa-fw fa-sign-out" aria-hidden="true" />
-				</a>
-			</div>
-		);
-	}
-};
\ No newline at end of file
diff --git a/web/source/settings/components/user-logout-card.tsx b/web/source/settings/components/user-logout-card.tsx
new file mode 100644
index 000000000..f8eeaf63c
--- /dev/null
+++ b/web/source/settings/components/user-logout-card.tsx
@@ -0,0 +1,44 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import Loading from "./loading";
+import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/oauth";
+import { useInstanceV1Query } from "../lib/query/gts-api";
+
+export default function UserLogoutCard() {
+	const { data: profile, isLoading } = useVerifyCredentialsQuery();
+	const { data: instance } = useInstanceV1Query();
+	const [logoutQuery] = useLogoutMutation();
+
+	if (isLoading) {
+		return <Loading />;
+	} else {
+		return (
+			<div className="account-card">
+				<img className="avatar" src={profile.avatar} alt="" />
+				<h3 className="text-cutoff">{profile.display_name?.length > 0 ? profile.display_name : profile.acct}</h3>
+				<span className="text-cutoff">@{profile.username}@{instance?.account_domain}</span>
+				<a onClick={logoutQuery} href="#" aria-label="Log out" title="Log out" className="logout">
+					<i className="fa fa-fw fa-sign-out" aria-hidden="true" />
+				</a>
+			</div>
+		);
+	}
+}
\ No newline at end of file
-- 
cgit v1.2.3