[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task

web/source/settings/admin/emoji/local/overview.js

@@ -26,27 +26,35 @@ const NewEmojiForm = require("./new-emoji");
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function EmojiOverview({ baseUrl }) {
 	const {
 		data: emoji = [],
 		isLoading,
+		isError,
 		error
 	} = query.useListEmojiQuery({ filter: "domain:local" });
 
+	let content = null;
+
+	if (isLoading) {
+		content = <Loading />;
+	} else if (isError) {
+		content = <Error error={error} />;
+	} else {
+		content = (
+			<>
+				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<NewEmojiForm emoji={emoji} />
+			</>
+		);
+	}
+
 	return (
 		<>
 			<h1>Custom Emoji (local)</h1>
-			{error &&
-				<div className="error accent">{error}</div>
-			}
-			{isLoading
-				? <Loading />
-				: <>
-					<EmojiList emoji={emoji} baseUrl={baseUrl} />
-					<NewEmojiForm emoji={emoji} />
-				</>
-			}
+			{content}
 		</>
 	);
 };

web/source/settings/admin/federation/detail.js

@@ -67,7 +67,7 @@ module.exports = function InstanceDetail({ baseUrl }) {
 
 	return (
 		<div>
-			<h1><BackButton to={baseUrl} /> Federation settings for: {domain}</h1>
+			<h1 className="text-cutoff"><BackButton to={baseUrl} /> Federation settings for: <span title={domain}>{domain}</span></h1>
 			{infoContent}
 			<DomainBlockForm defaultDomain={domain} block={existingBlock} />
 		</div>