[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/assets/themes/soft.css

@@ -51,7 +51,9 @@ html, body {
   border: var(--boxshadow-border);
 }
 
-.profile .profile-header .basic-info .namerole .role {
+/* Role and bot badge borders */
+.profile .profile-header .basic-info .namerole .role,
+.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
   border: var(--boxshadow-border);
 }
 

web/assets/themes/sunset-light.css

@@ -55,8 +55,9 @@ html, body {
   color: var(--eggshell);
 }
 
-/* Role badge background */
+/* Role and bot badge backgrounds */
-.profile .profile-header .basic-info .namerole .role {
+.profile .profile-header .basic-info .namerole .role,
+.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
   background: var(--eggshell);
 }
 

web/source/css/profile.css

@@ -135,15 +135,46 @@
 				font-weight: bold;
 			}
 
-			.username {
+			.bot-username-wrapper {
-				min-width: 0;
+				display: flex;
+				gap: 0.5rem;
 				grid-area: username;
-				line-height: $username-size;
+				align-items: center;
 				
-				font-size: 1rem;
+				.bot-legend-wrapper {
-				font-weight: bold;
+					display: flex;
-				color: $fg-accent;
+					gap: 0.25rem;
-				user-select: all;
+					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>
+						<div className="bot-username-wrapper">
-						<dd className="username text-cutoff">@{username}</dd>
+							{ 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>
+			<fieldset>
-			<ProfileFields
+				<legend>Profile fields</legend>
-				field={form.fields}
+				<ProfileFields
-			/>
+					field={form.fields}
+				/>
+			</fieldset>
 
 			<div className="form-section-docs">
 				<h3>Visibility and privacy</h3>

web/template/profile.tmpl

@@ -155,8 +155,24 @@
                     {{- .account.Username -}}
                     {{- end -}}
                 </dd>
-                <dt class="sr-only">Username</dt>
+                <div class="bot-username-wrapper">
-                <dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
+                    {{- if .account.Bot }}
+                    <dt class="sr-only">Bot account</dt>
+                    <dd>
+                        <span class="sr-only">true</span>
+                        <div
+                            class="bot-legend-wrapper"
+                            aria-hidden="true"
+                            title="This is a bot account."
+                        >
+                            <i class="bot-icon fa fa-microchip"></i>
+                            <span class="bot-legend">bot</span>
+                        </div>
+                    </dd>
+                    {{- end }}
+                    <dt class="sr-only">Username</dt>
+                    <dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
+                </div>
                 {{- if and (.account.Role) (ne .account.Role.Name "user") }}
                 <dt class="sr-only">Role</dt>
                 <dd class="role {{ .account.Role.Name -}}">{{- .account.Role.Name -}}</dd>