[feature] Allow user to set "bot" flag; show bot icon on profile (#3135)

* [feature] Allow user to set "bot" flag; show bot icon on profile

* tweak

* update customs

web/source/css/profile.css

@@ -134,16 +134,47 @@
 				font-size: 1.5rem;
 				font-weight: bold;
 			}
-	
-			.username {
-				min-width: 0;
+
+			.bot-username-wrapper {
+				display: flex;
+				gap: 0.5rem;
 				grid-area: username;
-				line-height: $username-size;
-	
-				font-size: 1rem;
-				font-weight: bold;
-				color: $fg-accent;
-				user-select: all;
+				align-items: center;
+				
+				.bot-legend-wrapper {
+					display: flex;
+					gap: 0.25rem;
+					align-items: center;
+					
+					background: $bg;
+					color: $fg;
+		
+					border-radius: $br;
+					padding: 0.1rem 0.4rem 0.2rem 0.4rem;
+					
+					font-variant: small-caps;
+					font-weight: bold;
+
+					cursor: default;
+
+					.bot-icon {
+						/*
+							FA icon is weirdly
+							aligned so tweak it
+						*/
+						margin-top: 0.25rem;
+					}
+				}
+
+				.username {
+					min-width: 0;
+					line-height: $username-size;
+		
+					font-size: 1rem;
+					font-weight: bold;
+					color: $fg-accent;
+					user-select: all;
+				}
 			}
 	
 			.role {

web/source/settings/components/profile.tsx

@@ -19,7 +19,7 @@
 
 import React from "react";
 
-export default function FakeProfile({ avatar, header, display_name, username, role }) {
+export default function FakeProfile({ avatar, header, display_name, bot, username, role }) {
 	return ( // Keep in sync with web/template/profile.tmpl
 		<div className="profile">
 			<div className="profile-header">
@@ -35,8 +35,24 @@ export default function FakeProfile({ avatar, header, display_name, username, ro
 					<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>
+						<div className="bot-username-wrapper">
+							{ bot && <>
+								<dt className="sr-only">Bot account</dt>
+								<dd>
+									<span className="sr-only">true</span>
+									<div
+										className="bot-legend-wrapper"
+										aria-hidden="true"
+										title="This is a bot account."
+									>
+										<i className="bot-icon fa fa-microchip"></i>
+										<span className="bot-legend">bot</span>
+									</div>
+								</dd>
+							</>}
+							<dt className="sr-only">Username</dt>
+							<dd className="username text-cutoff">@{username}</dd>
+						</div>
 						<dt className="sr-only">Role</dt>
 						{
 							(role && role.name != "user") ?

web/source/settings/style.css

@@ -445,22 +445,34 @@ section.with-sidebar > form {
 		}
 	}
 
-	.fields {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		
-		.entry {
-			display: flex;
-			gap: 0.5rem;
-		}
-	}
-
 	.theme, .form-field.radio {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 	}
+
+	fieldset {
+		margin: 0;
+		padding: 0.5rem 1rem 1rem 1rem;
+		max-width: fit-content;
+		border: 0.1rem solid var(--gray1);
+		border-radius: 0.1rem;
+
+		>legend {
+			font-weight: bold;
+		}
+
+		.fields {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+			
+			.entry {
+				display: flex;
+				gap: 0.5rem;
+			}
+		}
+	}
 }
 
 .migration-details {

web/source/settings/views/user/profile.tsx

@@ -130,6 +130,7 @@ function UserProfileForm({ data: profile }) {
 					avatar={form.avatar.previewValue ?? profile.avatar}
 					header={form.header.previewValue ?? profile.header}
 					display_name={form.displayName.value ?? profile.username}
+					bot={profile.bot}
 					username={profile.username}
 					role={profile.role}
 				/>
@@ -186,6 +187,10 @@ function UserProfileForm({ data: profile }) {
 					Learn more about these settings (opens in a new tab)
 				</a>
 			</div>
+			<Checkbox
+				field={form.bot}
+				label="Mark as bot account; this indicates to other users that this is an automated account"
+			/>
 			<TextInput
 				field={form.displayName}
 				label="Display name"
@@ -200,10 +205,12 @@ function UserProfileForm({ data: profile }) {
 				autoCapitalize="sentences"
 				rows={8}
 			/>
-			<b>Profile fields</b>
-			<ProfileFields
-				field={form.fields}
-			/>
+			<fieldset>
+				<legend>Profile fields</legend>
+				<ProfileFields
+					field={form.fields}
+				/>
+			</fieldset>
 
 			<div className="form-section-docs">
 				<h3>Visibility and privacy</h3>