Report UI improvements

src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.html

@@ -7,7 +7,7 @@
 					<i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue
 				</button>
 				<dialog #reportModal class="modal">
-					@if (reportSent) {
+					@if (reportState === 'sent') {
 						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
 							<form method="dialog">
 								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
@@ -16,6 +16,10 @@
 							</form>
 							<span class="text-xl text-center">{{ reportMessage }}</span>
 						</div>
+					} @else if (reportState === 'sending') {
+						<div class="modal-box flex flex-col gap-2 bg-base-100 text-base-content">
+							<span class="loading loading-spinner loading-sm self-center"></span>
+						</div>
 					} @else {
 						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
 							<form method="dialog">
@@ -28,6 +32,14 @@
 								<div
 									[class.border-error]="reportOption.invalid && reportOption.touched"
 									[class.border]="reportOption.invalid && reportOption.touched">
+									<div class="form-control">
+										<label class="label cursor-pointer justify-normal gap-2">
+											<input type="radio" class="radio checked:bg-red-500" value="Doesn't follow Chorus guidelines" formControlName="reportOption" />
+											<span>
+												Doesn't follow <a class="link link-primary" (click)="openUrl('https://guidelines.enchor.us/')">Chorus guidelines</a>
+											</span>
+										</label>
+									</div>
 									@for (option of reportOptions; track $index) {
 										<div class="form-control">
 											<label class="label cursor-pointer justify-normal gap-2">
@@ -49,7 +61,13 @@
 										placeholder="Please be specific. Vague reports may be ignored if the problem is not obvious."
 										formControlName="reportExtraInfo">
 									</textarea>
-									<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">Please provide more details.</span>
+									<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">
+										@if (reportExtraInfo.value.length === 0) {
+											Please provide more details.
+										} @else {
+											Reports without a specific explanation will be ignored.
+										}
+									</span>
 								</div>
 							</form>
 							<span *ngIf="isFalseReportOption()" class="text-lg text-warning text-wrap">

src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.ts

@@ -19,7 +19,6 @@ export class ChartSidebarMenutComponent implements OnInit {
 	public selectedVersion: FormControl<ChartData>
 
 	public reportOptions = [
-		`Doesn't follow Chorus guidelines`,
 		`Doesn't meet chart quality standards`,
 		'No notes / chart ends immediately',
 		`Download doesn't work`,
@@ -27,7 +26,7 @@ export class ChartSidebarMenutComponent implements OnInit {
 		'Other',
 	] as const
 	public reportForm: ReturnType<this['getForm']>
-	public reportSent = false
+	public reportState: 'not-sent' | 'sending' | 'sent' = 'not-sent'
 	public reportMessage = ''
 
 	constructor(
@@ -45,7 +44,7 @@ export class ChartSidebarMenutComponent implements OnInit {
 	getForm() {
 		return this.fb.group({
 			reportOption: this.fb.control(null as ChartSidebarMenutComponent['reportOptions'][number] | null, [Validators.required]),
-			reportExtraInfo: this.fb.control('', [Validators.required]),
+			reportExtraInfo: this.fb.control('', [Validators.required, Validators.minLength(4)]),
 		})
 	}
 
@@ -106,16 +105,18 @@ export class ChartSidebarMenutComponent implements OnInit {
 	}
 
 	report() {
-		if (this.reportExtraInfo.valid) {
+		if (this.reportForm.valid && this.reportState === 'not-sent') {
+			this.reportState = 'sending'
 			this.http.post(`${environment.apiUrl}/report`, {
 				chartId: this.selectedVersion.value.chartId,
 				reason: this.reportOption.value,
 				extraInfo: this.reportExtraInfo.value,
 			}).subscribe((response: { message: string }) => {
 				this.reportMessage = response.message
-				this.reportSent = true
+				this.reportState = 'sent'
 			})
 		} else {
+			this.reportOption.markAsTouched()
 			this.reportExtraInfo.markAsTouched()
 		}
 	}