From 736cd37caf93d89772f5b718e92d72013d0d9fc4 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:01:36 +0200
Subject: [frontend] Add `discoverable` flag to settings panel (#2235)

---
 web/source/settings/style.css        | 23 ++++++++----
 web/source/settings/user/profile.js  | 70 +++++++++++++++++++++++++++---------
 web/source/settings/user/settings.js |  4 +--
 3 files changed, 73 insertions(+), 24 deletions(-)

(limited to 'web/source/settings')

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 84878728d..505e3bbfc 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -343,9 +343,25 @@ section.with-sidebar > div, section.with-sidebar > form {
 		margin-bottom: 0.5rem;
 	}
 	
-	.moreinfolink {
+	.docslink {
 		font-size: 0.9em;
 	}
+
+	.form-section-docs {
+		margin-top: 1rem;
+		margin-bottom: 0.5rem;
+		
+		border-left: 0.2rem solid $border-accent;
+		padding-left: 0.4rem;
+
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+
+		h3 {
+			margin: 0;
+		}
+	}
 	
 	.labelinput .border {
 		border-radius: 0.2rem;
@@ -429,11 +445,6 @@ section.with-sidebar > div, section.with-sidebar > form {
 			justify-content: center;
 			gap: 1rem;
 
-			h3 {
-				margin: 0;
-				margin-bottom: 0.3rem;
-			}
-
 			span {
 				font-style: italic;
 			}
diff --git a/web/source/settings/user/profile.js b/web/source/settings/user/profile.js
index 9bae41f63..dd600cafc 100644
--- a/web/source/settings/user/profile.js
+++ b/web/source/settings/user/profile.js
@@ -82,6 +82,7 @@ function UserProfileForm({ data: profile }) {
 		customCSS: useTextInput("custom_css", { source: profile }),
 		bot: useBoolInput("bot", { source: profile }),
 		locked: useBoolInput("locked", { source: profile }),
+		discoverable: useBoolInput("discoverable", { source: profile}),
 		enableRSS: useBoolInput("enable_rss", { source: profile }),
 		fields: useFieldArrayInput("fields_attributes", {
 			defaultValue: profile?.source?.fields,
@@ -109,24 +110,36 @@ function UserProfileForm({ data: profile }) {
 				/>
 				<div className="files">
 					<div>
-						<h3>Header</h3>
 						<FileInput
+							label="Header"
 							field={form.header}
 							accept="image/*"
 						/>
 					</div>
 					<div>
-						<h3>Avatar</h3>
 						<FileInput
+							label="Avatar"
 							field={form.avatar}
 							accept="image/*"
 						/>
 					</div>
 				</div>
 			</div>
+
+			<div className="form-section-docs">
+				<h3>Basic Information</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/user_guide/settings/#basic-information"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
 			<TextInput
 				field={form.displayName}
-				label="Name"
+				label="Display name"
 				placeholder="A GoToSocial user"
 			/>
 			<TextArea
@@ -135,28 +148,53 @@ function UserProfileForm({ data: profile }) {
 				placeholder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."
 				rows={8}
 			/>
+			<b>Profile fields</b>
+			<ProfileFields
+				field={form.fields}
+			/>
+
+			<div className="form-section-docs">
+				<h3>Visibility and privacy</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/user_guide/settings/#visibility-and-privacy"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
 			<Checkbox
 				field={form.locked}
 				label="Manually approve follow requests"
 			/>
+			<Checkbox
+				field={form.discoverable}
+				label="Mark account as discoverable by search engines and directories"
+			/>
 			<Checkbox
 				field={form.enableRSS}
 				label="Enable RSS feed of Public posts"
 			/>
-			<b>Profile fields</b>
-			<ProfileFields
-				field={form.fields}
-			/>
-			{!instanceConfig.allowCustomCSS ? null :
-				<TextArea
-					field={form.customCSS}
-					label="Custom CSS"
-					className="monospace"
-					rows={8}
+
+			<div className="form-section-docs">
+				<h3>Advanced</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/user_guide/settings/#advanced"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
 				>
-					<a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about custom profile CSS (opens in a new tab)</a>
-				</TextArea>
-			}
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+			<TextArea
+				field={form.customCSS}
+				label="Custom CSS"
+				className="monospace"
+				rows={8}
+				disabled={!instanceConfig.allowCustomCSS}
+			/>
 			<MutationButton label="Save profile info" result={result} />
 		</form>
 	);
diff --git a/web/source/settings/user/settings.js b/web/source/settings/user/settings.js
index 431f9dba9..68483f105 100644
--- a/web/source/settings/user/settings.js
+++ b/web/source/settings/user/settings.js
@@ -81,7 +81,7 @@ function UserSettingsForm({ data }) {
 						<option value="public">Public</option>
 					</>
 				}>
-					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
+					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="docslink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
 				</Select>
 				<Select field={form.statusContentType} label="Default post (and bio) format" options={
 					<>
@@ -89,7 +89,7 @@ function UserSettingsForm({ data }) {
 						<option value="text/markdown">Markdown</option>
 					</>
 				}>
-					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
+					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="docslink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
 				</Select>
 				<Checkbox
 					field={form.isSensitive}
-- 
cgit v1.2.3