feat(frontend): link custom preferences in profile editor

Foxnouns.Frontend/src/lib/components/Error.svelte

@@ -12,6 +12,8 @@
 	<svelte:element this={headerElem ?? "h4"}>
 		{#if error.code === ErrorCode.BadRequest}
 			{$t("error.bad-request-header")}
+		{:else if error.status === 404}
+			{$t("error.not-found-header")}
 		{:else}
 			{$t("error.generic-header")}
 		{/if}

Foxnouns.Frontend/src/lib/components/editor/CustomPreferencesNotice.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+</script>
+
+<div class="alert alert-secondary">
+	{$t("editor.custom-preference-notice")}
+	<a href="/settings/pref" class="alert-link">{$t("editor.custom-preference-notice-link")}</a>
+</div>

Foxnouns.Frontend/src/lib/i18n/locales/en.json

@@ -121,7 +121,8 @@
 		"500-description": "Something went wrong on the server. Please try again later.",
 		"unknown-status-description": "Something went wrong, but we're not sure what. Please try again.",
 		"error-id": "If you report this error to the developers, please give them this ID:",
-		"page-not-found": "No page exists at this URL."
+		"page-not-found": "No page exists at this URL.",
+		"not-found-header": "That page could not be found"
 	},
 	"settings": {
 		"general-information-tab": "General information",
@@ -288,7 +289,9 @@
 		"custom-preference-size-small": "Small",
 		"custom-preference-size": "Text size",
 		"custom-preference-muted": "Show as muted text",
-		"custom-preference-favourite": "Treat like favourite"
+		"custom-preference-favourite": "Treat like favourite",
+		"custom-preference-notice": "Want to edit your custom preferences?",
+		"custom-preference-notice-link": "Go to settings"
 	},
 	"cancel": "Cancel",
 	"report": {

Foxnouns.Frontend/src/routes/settings/members/[id]/fields/+page.svelte

@@ -2,7 +2,9 @@
 	import { apiRequest } from "$api";
 	import ApiError, { type RawApiError } from "$api/error";
 	import { mergePreferences, type User } from "$api/models/user";
+	import CustomPreferencesNotice from "$components/editor/CustomPreferencesNotice.svelte";
 	import FieldsEditor from "$components/editor/FieldsEditor.svelte";
+	import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
 	import log from "$lib/log";
 	import type { PageData } from "./$types";
 
@@ -29,4 +31,7 @@
 	};
 </script>
 
+<NoscriptWarning />
+<CustomPreferencesNotice />
+
 <FieldsEditor bind:fields {ok} {allPreferences} {update} />

Foxnouns.Frontend/src/routes/settings/members/[id]/names-pronouns/+page.svelte

@@ -3,6 +3,7 @@
 	import ApiError, { type RawApiError } from "$api/error";
 	import type { Member } from "$api/models";
 	import { mergePreferences } from "$api/models/user";
+	import CustomPreferencesNotice from "$components/editor/CustomPreferencesNotice.svelte";
 	import FieldEditor from "$components/editor/FieldEditor.svelte";
 	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
 	import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
@@ -40,6 +41,7 @@
 
 <NoscriptWarning />
 <FormStatusMarker form={ok} />
+<CustomPreferencesNotice />
 
 <div>
 	<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />

Foxnouns.Frontend/src/routes/settings/profile/fields/+page.svelte

@@ -2,7 +2,9 @@
 	import { apiRequest } from "$api";
 	import ApiError, { type RawApiError } from "$api/error";
 	import { mergePreferences, type User } from "$api/models/user";
+	import CustomPreferencesNotice from "$components/editor/CustomPreferencesNotice.svelte";
 	import FieldsEditor from "$components/editor/FieldsEditor.svelte";
+	import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
 	import log from "$lib/log";
 	import type { PageData } from "./$types";
 
@@ -29,4 +31,7 @@
 	};
 </script>
 
+<NoscriptWarning />
+<CustomPreferencesNotice />
+
 <FieldsEditor bind:fields {ok} {allPreferences} {update} />

Foxnouns.Frontend/src/routes/settings/profile/names-pronouns/+page.svelte

@@ -2,6 +2,7 @@
 	import { apiRequest } from "$api";
 	import ApiError, { type RawApiError } from "$api/error";
 	import { mergePreferences, type User } from "$api/models/user";
+	import CustomPreferencesNotice from "$components/editor/CustomPreferencesNotice.svelte";
 	import FieldEditor from "$components/editor/FieldEditor.svelte";
 	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
 	import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
@@ -37,6 +38,7 @@
 
 <NoscriptWarning />
 <FormStatusMarker form={ok} />
+<CustomPreferencesNotice />
 
 <div>
 	<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />