feat: content translation ui

src/api/basa/languages.ts

···
+export const googleLanguages = [
+	'ab',
+	'ace',
+	'ach',
+	'aa',
+	'af',
+	'sq',
+	'alz',
+	'am',
+	'ar',
+	'hy',
+	'as',
+	'av',
+	'awa',
+	'ay',
+	'az',
+	'ban',
+	'bal',
+	'bm',
+	'bci',
+	'ba',
+	'eu',
+	'btx',
+	'bts',
+	'bbc',
+	'be',
+	'bem',
+	'bn',
+	'bew',
+	'bho',
+	'bik',
+	'bs',
+	'br',
+	'bg',
+	'bua',
+	'yue',
+	'ca',
+	'ceb',
+	'ch',
+	'ce',
+	'ny',
+	'zh-CN',
+	'zh-TW',
+	'chk',
+	'cv',
+	'co',
+	'crh',
+	'hr',
+	'cs',
+	'da',
+	'fa-AF',
+	'dv',
+	'din',
+	'doi',
+	'dov',
+	'nl',
+	'dyu',
+	'dz',
+	'en',
+	'eo',
+	'et',
+	'ee',
+	'fo',
+	'fj',
+	'tl',
+	'fi',
+	'fon',
+	'fr',
+	'fy',
+	'fur',
+	'ff',
+	'gaa',
+	'gl',
+	'ka',
+	'de',
+	'el',
+	'gn',
+	'gu',
+	'ht',
+	'cnh',
+	'ha',
+	'haw',
+	'iw',
+	'hil',
+	'hi',
+	'hmn',
+	'hu',
+	'hrx',
+	'iba',
+	'is',
+	'ig',
+	'ilo',
+	'id',
+	'ga',
+	'it',
+	'jam',
+	'ja',
+	'jw',
+	'kac',
+	'kl',
+	'kn',
+	'kr',
+	'pam',
+	'kk',
+	'kha',
+	'km',
+	'cgg',
+	'kg',
+	'rw',
+	'ktu',
+	'trp',
+	'kv',
+	'gom',
+	'ko',
+	'kri',
+	'ku',
+	'ckb',
+	'ky',
+	'lo',
+	'ltg',
+	'la',
+	'lv',
+	'lij',
+	'li',
+	'ln',
+	'lt',
+	'lmo',
+	'lg',
+	'luo',
+	'lb',
+	'mk',
+	'mad',
+	'mai',
+	'mak',
+	'mg',
+	'ms',
+	'ms-Arab',
+	'ml',
+	'mt',
+	'mam',
+	'gv',
+	'mi',
+	'mr',
+	'mh',
+	'mwr',
+	'mfe',
+	'chm',
+	'mni-Mtei',
+	'min',
+	'lus',
+	'mn',
+	'my',
+	'nhe',
+	'ndc-ZW',
+	'nr',
+	'new',
+	'ne',
+	'bm-Nkoo',
+	'no',
+	'nus',
+	'oc',
+	'or',
+	'om',
+	'os',
+	'pag',
+	'pap',
+	'ps',
+	'fa',
+	'pl',
+	'pt',
+	'pt-PT',
+	'pa',
+	'pa-Arab',
+	'qu',
+	'kek',
+	'rom',
+	'ro',
+	'rn',
+	'ru',
+	'se',
+	'sm',
+	'sg',
+	'sa',
+	'sat-Latn',
+	'gd',
+	'nso',
+	'sr',
+	'st',
+	'crs',
+	'shn',
+	'sn',
+	'scn',
+	'szl',
+	'sd',
+	'si',
+	'sk',
+	'sl',
+	'so',
+	'es',
+	'su',
+	'sus',
+	'sw',
+	'ss',
+	'sv',
+	'ty',
+	'tg',
+	'ber-Latn',
+	'ber',
+	'ta',
+	'tt',
+	'te',
+	'tet',
+	'th',
+	'bo',
+	'ti',
+	'tiv',
+	'tpi',
+	'to',
+	'ts',
+	'tn',
+	'tcy',
+	'tum',
+	'tr',
+	'tk',
+	'tyv',
+	'ak',
+	'udm',
+	'uk',
+	'ur',
+	'ug',
+	'uz',
+	've',
+	'vec',
+	'vi',
+	'war',
+	'cy',
+	'wo',
+	'xh',
+	'sah',
+	'yi',
+	'yo',
+	'yua',
+	'zap',
+	'zu',
+];

src/basa-env.d.ts

···
+/* eslint-disable */
+// This file is automatically generated, do not edit!
+import '@atcute/client/lexicons';
+
+declare module '@atcute/client/lexicons' {
+	/** Describes the translation proxy instance */
+	namespace XBasaDescribeServer {
+		interface Params {}
+		type Input = undefined;
+		interface Output {
+			engines: Engines;
+		}
+		interface Engine {
+			[Brand.Type]?: 'x.basa.describeServer#engine';
+			/** Supported language codes */
+			languages: string[];
+		}
+		interface Engines {
+			[Brand.Type]?: 'x.basa.describeServer#engines';
+			deepl?: Engine;
+			google?: Engine;
+		}
+	}
+
+	/** Translates a given text into another language */
+	namespace XBasaTranslate {
+		interface Params {
+			/** Text needing translation */
+			text: string;
+			/** Target language */
+			to: string;
+			/**
+			 * Which translation service to use
+			 * @default "google"
+			 */
+			engine?: 'google' | 'deepl';
+			/**
+			 * Source language
+			 * @default "auto"
+			 */
+			from?: string;
+		}
+		type Input = undefined;
+		interface Output {
+			/** Translated text */
+			result: string;
+			/** Deteced language from source text */
+			sourceLanguage?: string;
+			/** Transliteration of source text */
+			sourceTransliteration?: string;
+			/** Transliteration of translated text */
+			targetTransliteration?: string;
+		}
+	}
+
+	interface Records {}
+
+	interface Queries {
+		'x.basa.describeServer': {
+			output: XBasaDescribeServer.Output;
+		};
+		'x.basa.translate': {
+			params: XBasaTranslate.Params;
+			output: XBasaTranslate.Output;
+		};
+	}
+
+	interface Procedures {}
+}

src/components/boxed.tsx

···
 
 import { openModal, useModalContext } from '~/globals/modals';
 
+import { useFieldset } from './fieldset';
 import ChevronRightOutlinedIcon from './icons-central/chevron-right-outline';
 import * as Menu from './menu';
 
···
 
 export interface BoxedButtonItemProps {
 	label: string;
+	icon?: Component<ComponentProps<'svg'>>;
 	description?: string;
 	blurb?: string;
 	variant?: 'default' | 'danger';
···
 			onClick={props.onClick}
 			class="flex justify-between gap-4 px-4 py-3 text-left hover:bg-contrast/sm active:bg-contrast/sm-pressed"
 		>
+			{(() => {
+				const Icon = props.icon;
+
+				if (Icon) {
+					return <Icon class="mt-px text-lg text-contrast-muted" />;
+				}
+			})()}
+
 			<div class="flex min-w-0 grow flex-col">
 				<p class={buttonItemLabelProps(props)}>{props.label}</p>
 				<p class="text-pretty break-words text-de text-contrast-muted empty:hidden">{props.description}</p>
···
 
 			<span class="flex min-w-0 gap-1">
 				<span class="min-w-0 break-words text-de text-contrast-muted empty:hidden">{props.blurb}</span>
-				<ChevronRightOutlinedIcon class="-mr-1.5 shrink-0 text-xl text-contrast-muted" />
+				<ChevronRightOutlinedIcon class="-mr-1.5 shrink-0 text-xl text-contrast-muted " />
 			</span>
 		</button>
 	);
···
 export interface BoxedSelectItemProps<T> {
 	label: string;
 	description?: string;
+	disabled?: boolean;
 	value: T;
 	options: SelectItemOption<T>[];
 	onChange: (next: T) => void;
···
 
 const BoxedSelectItem = <T extends string | number>(props: BoxedSelectItemProps<T>) => {
 	const onChange = props.onChange;
+
+	const fieldset = useFieldset();
 
 	const options = createMemo(() => props.options);
 	const selected = createMemo(() => {
···
 
 	return (
 		<button
+			disabled={fieldset.disabled || !!props.disabled}
 			onClick={(ev) => {
 				const anchor = ev.currentTarget;
 
···
 					);
 				});
 			}}
-			class="flex flex-col items-stretch px-4 py-3 text-left hover:bg-contrast/sm active:bg-contrast/sm-pressed"
+			class="group flex flex-col items-stretch px-4 py-3 text-left hover:bg-contrast/sm active:bg-contrast/sm-pressed disabled:bg-transparent"
 		>
 			<div class="flex justify-between gap-4">
-				<p class="min-w-0 break-words text-sm font-medium">{props.label}</p>
+				<p class="min-w-0 break-words text-sm font-medium group-disabled:text-contrast-muted group-disabled:opacity-50">
+					{props.label}
+				</p>
 
-				<span class="flex min-w-0 gap-1">
+				<span class="flex min-w-0 gap-1 group-disabled:opacity-50">
 					<span class="min-w-0 break-words text-right text-de text-contrast-muted">
 						{(() => {
 							const $selected = selected();
 							if ($selected) {
 								return $selected.shortLabel ?? $selected.label;
 							}
+
+							return props.value;
 						})()}
 					</span>
 					<ChevronRightOutlinedIcon class="-mr-1 mt-px shrink-0 rotate-90 text-lg text-contrast-muted" />
 				</span>
 			</div>
 
-			<p class="text-pretty break-words text-de text-contrast-muted empty:hidden">{props.description}</p>
+			<p class="text-pretty break-words text-de text-contrast-muted empty:hidden group-disabled:opacity-50">
+				{props.description}
+			</p>
 		</button>
 	);
 };

src/components/prompt.tsx

···
 import { useModalClose } from '~/lib/hooks/modal-close';
 import { on } from '~/lib/utils/misc';
 
-import Button from './button';
+import Button, { type ButtonProps } from './button';
 import { Backdrop } from './dialog';
 import { Fieldset } from './fieldset';
 
···
 export { PromptActions as Actions };
 
 export interface PromptActionProps {
+	type?: ButtonProps['type'];
 	variant?: 'outline' | 'primary' | 'danger';
 	noClose?: boolean;
 	disabled?: boolean;
···
 	const handleClick = !noClose ? (onClick ? () => (close(), onClick()) : close) : onClick;
 
 	return (
-		<Button disabled={props.disabled} onClick={handleClick} variant={props.variant} size="lg">
+		<Button
+			type={props.type}
+			disabled={props.disabled}
+			onClick={handleClick}
+			variant={props.variant}
+			size="lg"
+		>
 			{props.children}
 		</Button>
 	);

src/components/settings/content-translation/add-basa-instance-prompt.tsx

···
+import { createMemo, createSignal } from 'solid-js';
+
+import { XRPC, simpleFetchHandler } from '@atcute/client';
+import { createMutation } from '@mary/solid-query';
+
+import { formatQueryError } from '~/api/utils/error';
+
+import { useModalContext } from '~/globals/modals';
+
+import { autofocusNode, modelText } from '~/lib/input-refs';
+import { useSession } from '~/lib/states/session';
+import { type Validation, validate } from '~/lib/validation';
+
+import * as Prompt from '~/components/prompt';
+import TextInput from '~/components/text-input';
+
+const urlValidations: Validation<URL>[] = [
+	[(url) => url.protocol === 'https:' || url.protocol === 'http:', `Has to be an HTTPS or HTTP URL`],
+	[(url) => url.pathname === '/', `Can't have a pathname set`],
+	[(url) => url.search.length <= 1, `Can't have a search string set`],
+	[(url) => url.hash.length <= 1, `Can't have a hash string set`],
+];
+
+const AddBasaInstancePrompt = () => {
+	const { close } = useModalContext();
+
+	const { currentAccount } = useSession();
+	const translationPrefs = currentAccount!.preferences.translation;
+
+	const [error, setError] = createSignal<string>();
+
+	const [url, setUrl] = createSignal('');
+
+	const isUrlInvalid = createMemo(() => {
+		const $url = url();
+		if ($url.trim().length === 0) {
+			return `Can't be empty`;
+		}
+
+		const parsed = URL.parse($url);
+		if (!parsed) {
+			return `Invalid URL`;
+		}
+
+		return validate(parsed, urlValidations);
+	});
+
+	const mutation = createMutation(() => ({
+		async mutationFn({ url }: { url: URL }) {
+			const rpc = new XRPC({ handler: simpleFetchHandler({ service: url }) });
+			await rpc.get('x.basa.describeServer', {});
+		},
+		onSuccess(_data, { url }) {
+			const href = url.toString();
+
+			if (!translationPrefs.instances.includes(href)) {
+				translationPrefs.instances.push(href);
+			}
+
+			close();
+		},
+		onError(error) {
+			setError(formatQueryError(error));
+		},
+	}));
+
+	return (
+		<Prompt.Container disabled={mutation.isPending} maxWidth="md">
+			<Prompt.Title>Add instance</Prompt.Title>
+
+			<form
+				class="contents"
+				onSubmit={(ev) => {
+					ev.preventDefault();
+					mutation.mutate({ url: new URL(url()) });
+				}}
+			>
+				<div class="mt-4 flex flex-col gap-4">
+					<TextInput
+						ref={(node) => {
+							autofocusNode(node);
+							modelText(node, url, setUrl);
+						}}
+						label="Instance URL"
+						placeholder="https://example.com"
+						error={url() && isUrlInvalid()}
+					/>
+
+					<p hidden={!error()} class="text-pretty text-de text-error">
+						{error()}
+					</p>
+				</div>
+
+				<Prompt.Actions>
+					<Prompt.Action type="submit" disabled={!!isUrlInvalid()} noClose variant="primary">
+						Add
+					</Prompt.Action>
+					<Prompt.Action>Cancel</Prompt.Action>
+				</Prompt.Actions>
+			</form>
+		</Prompt.Container>
+	);
+};
+
+export default AddBasaInstancePrompt;

src/components/threads/highlighted-post.tsx

···
-import { Show, createMemo } from 'solid-js';
+import { Show, createMemo, createSignal } from 'solid-js';
 
 import type { AppBskyFeedDefs, AppBskyFeedPost } from '@atcute/client/lexicons';
 
···
 import { createPostLikeMutation, createPostRepostMutation } from '~/api/mutations/post';
 import { parseAtUri } from '~/api/utils/strings';
 
+import { primarySystemLanguage } from '~/globals/locales';
 import { openModal } from '~/globals/modals';
 
 import { formatCompact } from '~/lib/intl/number';
+import type { ContentTranslationPreferences } from '~/lib/preferences/account';
 import { useModerationOptions } from '~/lib/states/moderation';
+import { useSession } from '~/lib/states/session';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import ComposerDialogLazy from '../composer/composer-dialog-lazy';
···
 
 export interface HighlightedPostProps {
 	post: AppBskyFeedDefs.PostView;
+	translate: boolean;
 	/** Expected to be static */
 	prev?: boolean;
+	onTranslate?: () => void;
 	onPostDelete?: () => void;
 	onReplyPublish?: () => void;
 }
 
 const HighlightedPost = (props: HighlightedPostProps) => {
+	const [showTl, setShowTl] = createSignal(false);
+
 	const post = () => props.post;
 
 	const moderationOptions = useModerationOptions();
+	const { currentAccount } = useSession();
 
 	const author = () => post().author;
 	const record = () => post().record as AppBskyFeedPost.Record;
···
 
 			<ContentHider ui={ui()} ignoreMute containerClass="mt-3" innerClass="mt-2">
 				<RichText text={record().text} facets={record().facets} large />
+
+				{(() => {
+					if (!currentAccount) {
+						return;
+					}
+
+					if (props.translate) {
+						return;
+					}
+
+					if (needTranslation(post(), currentAccount.preferences.translation)) {
+						return (
+							<button
+								onClick={() => props.onTranslate?.()}
+								class="mt-1 self-start text-sm text-accent hover:underline"
+							>
+								Translate post
+							</button>
+						);
+					}
+				})()}
+
 				{embed() && <Embed embed={embed()!} large moderation={moderation()} gutterTop />}
 			</ContentHider>
 
···
 		</Show>
 	);
 };
+
+const needTranslation = (post: AppBskyFeedDefs.PostView, prefs?: ContentTranslationPreferences): boolean => {
+	if (prefs && !prefs.enabled) {
+		return false;
+	}
+
+	const record = post.record as AppBskyFeedPost.Record;
+	const langs = record.langs;
+
+	if (!langs || langs.length < 1 || !record.text) {
+		return false;
+	}
+
+	const exclusions = prefs?.exclusions;
+
+	let preferred = prefs?.to || 'system';
+	if (preferred === 'system') {
+		preferred = primarySystemLanguage;
+	}
+
+	const unknowns = langs.filter((code) => {
+		code = code.split('-')[0];
+		return code !== preferred && (!exclusions || !exclusions.includes(code));
+	});
+
+	return unknowns.length > 0;
+};

src/lib/preferences/account.ts

···
 export interface ContentTranslationPreferences {
 	/** Whether translations are enabled */
 	enabled: boolean;
-	/** Whether translations should be proxied */
-	proxy: boolean;
+	/** URLs to Basa translate proxy instances */
+	instances: string[];
 	/** Translate content to this language */
 	to: 'system' | (string & {});
 	/** Don't offer to translate on these languages */

src/lib/states/session.tsx

···
 				},
 				translation: {
 					enabled: false,
-					proxy: true,
+					instances: [],
 					to: 'system',
 					exclusions: [],
 				},

src/routes.ts

···
 		path: '/settings/content',
 		component: lazy(() => import('./views/settings-content')),
 	},
+	{
+		path: '/settings/content/translation',
+		component: lazy(() => import('./views/settings-content-translation')),
+	},
 
 	{
 		path: '/bookmarks',

src/views/post-thread.tsx

···
-import { For, Match, Switch, createEffect, createMemo } from 'solid-js';
+import { For, Match, Switch, createEffect, createMemo, createSignal } from 'solid-js';
 
 import { XRPCError } from '@atcute/client';
 import type { AppBskyFeedDefs, AppBskyFeedPost, At, Brand } from '@atcute/client/lexicons';
···
 	const { currentAccount } = useSession();
 	const moderationOptions = useModerationOptions();
 
+	const [showTl, setShowTl] = createSignal(false);
+
 	const thread = createMemo(() => {
 		return createThreadData({
 			thread: props.data,
···
 					<HighlightedPost
 						post={thread().post}
 						prev={thread().ancestors.length !== 0 || isLoadingAncestor()}
+						translate={showTl()}
+						onTranslate={() => setShowTl(true)}
 						onReplyPublish={/* @once */ props.onReplyPublish}
 						onPostDelete={/* @once */ props.onPostDelete}
 					/>

src/views/settings-content-translation.tsx

···
+import { For } from 'solid-js';
+
+import { googleLanguages } from '~/api/basa/languages';
+
+import { openModal } from '~/globals/modals';
+
+import { getEnglishLanguageName } from '~/lib/intl/languages';
+import { useSession } from '~/lib/states/session';
+import { mapDefined } from '~/lib/utils/misc';
+
+import * as Boxed from '~/components/boxed';
+import IconButton from '~/components/icon-button';
+import AddOutlinedIcon from '~/components/icons-central/add-outline';
+import TrashOutlinedIcon from '~/components/icons-central/trash-outline';
+import * as Page from '~/components/page';
+import * as Prompt from '~/components/prompt';
+import AddBasaInstancePrompt from '~/components/settings/content-translation/add-basa-instance-prompt';
+
+const TranslationSettingsPage = () => {
+	const { currentAccount } = useSession();
+
+	const preferences = currentAccount!.preferences;
+	const translationPrefs = preferences.translation;
+
+	const languageOptions: Boxed.SelectItemOption<string>[] = [
+		{
+			value: 'system',
+			label: 'System language',
+		},
+		...mapDefined(googleLanguages, (code): Boxed.SelectItemOption<string> | undefined => {
+			const eng = getEnglishLanguageName(code);
+			if (!eng) {
+				return;
+			}
+
+			return {
+				value: code,
+				label: eng,
+			};
+		}),
+	];
+
+	return (
+		<>
+			<Page.Header>
+				<Page.HeaderAccessory>
+					<Page.Back to="/settings/content" />
+				</Page.HeaderAccessory>
+
+				<Page.Heading title="Content translation" />
+			</Page.Header>
+
+			<Boxed.Container>
+				<Boxed.Group>
+					<Boxed.List>
+						<Boxed.ToggleItem
+							label="Enable content translations"
+							enabled={translationPrefs.enabled}
+							onChange={(next) => (translationPrefs.enabled = next)}
+						/>
+					</Boxed.List>
+
+					<Boxed.GroupBlurb>
+						Makes use of Basa instances that will proxy your requests to like Google Translate or DeepL.
+						Please read the privacy policies of the services and proxies before use.
+					</Boxed.GroupBlurb>
+				</Boxed.Group>
+
+				<Boxed.Group>
+					<Boxed.GroupHeader>Proxy instances</Boxed.GroupHeader>
+
+					<Boxed.List>
+						<For
+							each={translationPrefs.instances}
+							fallback={<div class="px-4 py-3 text-sm text-contrast-muted">No instances added yet</div>}
+						>
+							{(href) => (
+								<div class="flex items-center justify-between px-4 py-3">
+									<span class="text-ellipsis whitespace-nowrap text-sm font-medium">{href}</span>
+
+									<IconButton
+										icon={TrashOutlinedIcon}
+										title="Remove this instance"
+										onClick={() => {
+											openModal(() => (
+												<Prompt.Confirm
+													title="Remove this instance?"
+													description="This instance will no longer be used for making translation requests"
+													danger
+													confirmLabel="Remove"
+													onConfirm={() => {
+														const index = translationPrefs.instances.indexOf(href);
+														if (index !== -1) {
+															translationPrefs.instances.splice(index, 1);
+														}
+													}}
+												/>
+											));
+										}}
+										variant="danger"
+										class="-my-1.5 -mr-2.5"
+									/>
+								</div>
+							)}
+						</For>
+
+						<Boxed.ButtonItem
+							label="Add new instance"
+							icon={AddOutlinedIcon}
+							onClick={() => {
+								openModal(() => <AddBasaInstancePrompt />);
+							}}
+						/>
+					</Boxed.List>
+				</Boxed.Group>
+
+				<Boxed.Group>
+					<Boxed.GroupHeader>Translation options</Boxed.GroupHeader>
+
+					<Boxed.List>
+						<Boxed.SelectItem
+							label="Translate into"
+							value={translationPrefs.to}
+							onChange={(next) => (translationPrefs.to = next)}
+							options={languageOptions}
+						/>
+
+						<Boxed.ButtonItem
+							label="Exclude languages from translation"
+							description={`${translationPrefs.exclusions.length} languages excluded`}
+							onClick={() => {
+								//
+							}}
+						/>
+					</Boxed.List>
+				</Boxed.Group>
+			</Boxed.Container>
+		</>
+	);
+};
+
+export default TranslationSettingsPage;

src/views/settings-content.tsx

···
-import { primarySystemLanguage } from '~/globals/locales';
-
 import { LANGUAGE_CODES, getEnglishLanguageName } from '~/lib/intl/languages';
 import { useSession } from '~/lib/states/session';
 import { mapDefined } from '~/lib/utils/misc';
 
 import * as Boxed from '~/components/boxed';
+import TranslateOutlinedIcon from '~/components/icons-central/translate-outline';
 import * as Page from '~/components/page';
 
 const ContentSettingsPage = () => {
-	const { currentAccount } = useSession();
-
-	const preferences = currentAccount!.preferences;
-	const composerPrefs = preferences.composer;
-	const translationPrefs = preferences.translation;
-
-	const languageOptions = getLanguageOptions();
-
 	return (
 		<>
 			<Page.Header>
···
 
 			<Boxed.Container>
 				<Boxed.Group>
-					<Boxed.GroupHeader>Content you post</Boxed.GroupHeader>
-
 					<Boxed.List>
-						<Boxed.SelectItem
-							label="Post language"
-							value={composerPrefs.defaultPostLanguage}
-							onChange={(next) => (composerPrefs.defaultPostLanguage = next)}
-							options={languageOptions}
-						/>
-
-						<Boxed.SelectItem
-							label="Who can reply to my posts"
-							value={composerPrefs.defaultReplyGate}
-							onChange={(next) => (composerPrefs.defaultReplyGate = next)}
-							options={[
-								{ value: 'everyone', label: `Everyone` },
-								{ value: 'follows', label: `Followed users` },
-								{ value: 'mentions', label: `Mentioned users` },
-							]}
+						<Boxed.LinkItem
+							to="/settings/content/translation"
+							label="Content translation"
+							icon={TranslateOutlinedIcon}
 						/>
 					</Boxed.List>
-
-					<Boxed.GroupBlurb>Altering these settings will not affect existing posts</Boxed.GroupBlurb>
 				</Boxed.Group>
 
-				<Boxed.Group>
-					<Boxed.GroupHeader>Content translations</Boxed.GroupHeader>
-
-					<Boxed.List>
-						<Boxed.ToggleItem
-							label="Use Google Translate"
-							enabled={translationPrefs.enabled}
-							onChange={(next) => (translationPrefs.enabled = next)}
-						/>
-
-						{translationPrefs.enabled && (
-							<>
-								<Boxed.SelectItem
-									label="Translate into"
-									value={translationPrefs.to}
-									onChange={(next) => (translationPrefs.to = next)}
-									options={languageOptions}
-								/>
-
-								<Boxed.ButtonItem
-									label="Exclude languages from translation"
-									description={`${translationPrefs.exclusions.length} languages excluded`}
-									onClick={() => {
-										//
-									}}
-								/>
-							</>
-						)}
-					</Boxed.List>
-
-					{translationPrefs.enabled && (
-						<Boxed.List>
-							<Boxed.ToggleItem
-								label="Proxy translation requests"
-								description="Send translations through a proxy service rather than directly. Availability might be limited"
-								enabled={translationPrefs.proxy}
-								onChange={(next) => (translationPrefs.proxy = next)}
-							/>
-						</Boxed.List>
-					)}
-				</Boxed.Group>
+				<ComposerSettingsGroup />
 			</Boxed.Container>
 		</>
 	);
···
 
 export default ContentSettingsPage;
 
-const getLanguageOptions = (): Boxed.SelectItemOption<string>[] => {
-	const systemLanguage = getEnglishLanguageName(primarySystemLanguage);
+const ComposerSettingsGroup = () => {
+	const { currentAccount } = useSession();
+
+	const preferences = currentAccount!.preferences;
+	const composerPrefs = preferences.composer;
+
+	const languageOptions = getLanguageOptions();
+
+	return (
+		<Boxed.Group>
+			<Boxed.GroupHeader>Content you post</Boxed.GroupHeader>
+
+			<Boxed.List>
+				<Boxed.SelectItem
+					label="Post language"
+					value={composerPrefs.defaultPostLanguage}
+					onChange={(next) => (composerPrefs.defaultPostLanguage = next)}
+					options={languageOptions}
+				/>
+
+				<Boxed.SelectItem
+					label="Who can reply to my posts"
+					value={composerPrefs.defaultReplyGate}
+					onChange={(next) => (composerPrefs.defaultReplyGate = next)}
+					options={[
+						{ value: 'everyone', label: `Everyone` },
+						{ value: 'follows', label: `Followed users` },
+						{ value: 'mentions', label: `Mentioned users` },
+					]}
+				/>
+			</Boxed.List>
 
+			<Boxed.GroupBlurb>Altering these settings will not affect existing posts</Boxed.GroupBlurb>
+		</Boxed.Group>
+	);
+};
+
+const getLanguageOptions = (): Boxed.SelectItemOption<string>[] => {
 	return [
 		{
 			value: 'system',
-			label: `System default (${systemLanguage})`,
+			label: `System default`,
 		},
 		...mapDefined(LANGUAGE_CODES, (code): Boxed.SelectItemOption<string> | undefined => {
 			const eng = getEnglishLanguageName(code);