Improve report modal

package.json

@@ -82,8 +82,8 @@
     "prettier": "^3.1.0",
     "prettier-eslint": "^16.1.2",
     "source-map-support": "^0.5.21",
-    "tailwind-scrollbar": "^3.0.5",
+    "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2"
   }
 }

pnpm-lock.yaml

@@ -87,7 +87,7 @@ dependencies:
 devDependencies:
   '@angular-devkit/build-angular':
     specifier: ^17.0.3
-    version: 17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.3.5)(typescript@5.2.2)
+    version: 17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.4.3)(typescript@5.2.2)
   '@angular-eslint/builder':
     specifier: 17.1.0
     version: 17.1.0(eslint@8.54.0)(typescript@5.2.2)
@@ -173,11 +173,11 @@ devDependencies:
     specifier: ^0.5.21
     version: 0.5.21
   tailwind-scrollbar:
-    specifier: ^3.0.5
+    specifier: ^3.1.0
-    version: 3.0.5(tailwindcss@3.3.5)
+    version: 3.1.0(tailwindcss@3.4.3)
   tailwindcss:
-    specifier: ^3.3.5
+    specifier: ^3.4.3
-    version: 3.3.5
+    version: 3.4.3
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
@@ -216,7 +216,7 @@ packages:
       - chokidar
     dev: true
 
-  /@angular-devkit/build-angular@17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.3.5)(typescript@5.2.2):
+  /@angular-devkit/build-angular@17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.4.3)(typescript@5.2.2):
     resolution: {integrity: sha512-1lx0mERC1eTHX4vf8q7kUHZNHS0jwZxbwYHAISOplwHjkzRociX0W6rx04yMXn2NCSNhK+w3xbWyAIgyYbP9nA==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
@@ -306,7 +306,7 @@ packages:
       semver: 7.5.4
       source-map-loader: 4.0.1(webpack@5.89.0)
       source-map-support: 0.5.21
-      tailwindcss: 3.3.5
+      tailwindcss: 3.4.3
       terser: 5.24.0
       text-table: 0.2.0
       tree-kill: 1.2.2
@@ -9909,17 +9909,17 @@ packages:
       tslib: 2.6.2
     dev: true
 
-  /tailwind-scrollbar@3.0.5(tailwindcss@3.3.5):
+  /tailwind-scrollbar@3.1.0(tailwindcss@3.4.3):
-    resolution: {integrity: sha512-0ZwxTivevqq9BY9fRP9zDjHl7Tu+J5giBGbln+0O1R/7nHtBUKnjQcA1aTIhK7Oyjp6Uc/Dj6/dn8Dq58k5Uww==}
+    resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==}
     engines: {node: '>=12.13.0'}
     peerDependencies:
       tailwindcss: 3.x
     dependencies:
-      tailwindcss: 3.3.5
+      tailwindcss: 3.4.3
     dev: true
 
-  /tailwindcss@3.3.5:
+  /tailwindcss@3.4.3:
-    resolution: {integrity: sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==}
+    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:

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

@@ -6,7 +6,7 @@
 				<button class="btn btn-secondary btn-xs flex-nowrap uppercase" (click)="reportModal.showModal()">
 					<i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue
 				</button>
-				<dialog #reportModal id="report_modal" class="modal">
+				<dialog #reportModal class="modal">
 					@if (reportSent) {
 						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
 							<form method="dialog">
@@ -24,22 +24,21 @@
 								</button>
 							</form>
 							<h3 class="font-bold text-lg">Report Issue</h3>
-							<div>
+							<form [formGroup]="reportForm">
+								<div
+									[class.border-error]="reportOption.invalid && reportOption.touched"
+									[class.border]="reportOption.invalid && reportOption.touched">
 									@for (option of reportOptions; track $index) {
 										<div class="form-control">
 											<label class="label cursor-pointer justify-normal gap-2">
-											<input
+												<input type="radio" class="radio checked:bg-red-500" [value]="option" formControlName="reportOption" />
-												type="radio"
-												name="selectedReportOption{{ selectedVersion.value.chartId }}"
-												class="radio checked:bg-red-500"
-												[value]="option"
-												[formControl]="reportOption" />
 												<span>{{ option }}</span>
 											</label>
 										</div>
 									}
 								</div>
-							<div class="form-control">
+								<span *ngIf="reportOption.invalid && reportOption.touched" class="text-error">Please select an option.</span>
+								<div *ngIf="!isFalseReportOption()" class="form-control">
 									<div class="label">
 										<span class="label-text">More details <span class="text-error">*</span></span>
 									</div>
@@ -48,12 +47,30 @@
 										class="textarea textarea-bordered h-24"
 										[class.border-error]="reportExtraInfo.invalid && reportExtraInfo.touched"
 										placeholder="Please be specific. Vague reports may be ignored if the problem is not obvious."
-									[formControl]="reportExtraInfo">
+										formControlName="reportExtraInfo">
 									</textarea>
 									<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">Please provide more details.</span>
 								</div>
-							<span class="text-xs">Hint: if the chart isn't working at all, try updating your game and setting "Download Format" to "Chart Folder"</span>
+							</form>
-							<div class="form-control flex-row justify-end">
+							<span *ngIf="isFalseReportOption()" class="text-lg text-warning text-wrap">
+								@if (reportOption.value === 'No notes / chart ends immediately') {
+									This is not a problem with the chart! To fix this, please update Clone Hero to the latest version. You can get the latest version at
+									<a class="link" (click)="openUrl('https://clonehero.net')">clonehero.net</a>.
+								} @else if (reportOption.value === "Download doesn't work") {
+									Please click the progress bar in the lower-right of the program to see the error message. If you need help getting it to work,
+									please ask in the <a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
+								} @else if (reportOption.value === "Doesn't appear in Clone Hero") {
+									This is not a problem with the chart! Here are the most common reasons for this:
+									<ul class="list-disc pl-5">
+										<li>.sng files will not work with the latest CH version. They only work on the test build for the next version.</li>
+										<li>Your chart library directory is not set as a song path in CH.</li>
+										<li>You need to rescan songs in CH's settings menu.</li>
+									</ul>
+									If you're still having issues, please ask in the
+									<a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
+								}
+							</span>
+							<div *ngIf="!isFalseReportOption()" class="form-control flex-row justify-end">
 								<button class="btn btn-primary" (click)="report()">Submit</button>
 							</div>
 						</div>

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
-import { FormControl, Validators } from '@angular/forms'
+import { FormControl, NonNullableFormBuilder, Validators } from '@angular/forms'
 
 import { sortBy } from 'lodash'
 import { environment } from 'src-angular/environments/environment'
@@ -18,24 +18,40 @@ export class ChartSidebarMenutComponent implements OnInit {
 
 	public selectedVersion: FormControl<ChartData>
 
-	public reportOptions = [`Doesn't follow Chorus guidelines`, `Doesn't meet chart quality standards`, 'Other']
+	public reportOptions = [
-	public reportOption: FormControl<string>
+		`Doesn't follow Chorus guidelines`,
-	public reportExtraInfo: FormControl<string>
+		`Doesn't meet chart quality standards`,
+		'No notes / chart ends immediately',
+		`Download doesn't work`,
+		`Doesn't appear in Clone Hero`,
+		'Other',
+	] as const
+	public reportForm: ReturnType<this['getForm']>
 	public reportSent = false
 	public reportMessage = ''
 
 	constructor(
 		private http: HttpClient,
+		private fb: NonNullableFormBuilder,
 	) { }
 
 	ngOnInit(): void {
 		this.selectedVersion = new FormControl<ChartData>(this.displayVersions[0], { nonNullable: true })
 		this.selectedVersion.valueChanges.subscribe(v => this.selectedVersionChanges.emit(v))
-
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		this.reportOption = new FormControl<string>(this.reportOptions[0], { nonNullable: true })
+		this.reportForm = this.getForm() as any
-		this.reportExtraInfo = new FormControl<string>('', { nonNullable: true, validators: [Validators.required] })
 	}
 
+	getForm() {
+		return this.fb.group({
+			reportOption: this.fb.control(null as ChartSidebarMenutComponent['reportOptions'][number] | null, [Validators.required]),
+			reportExtraInfo: this.fb.control('', [Validators.required]),
+		})
+	}
+
+	get reportOption() { return this.reportForm.get('reportOption')! }
+	get reportExtraInfo() { return this.reportForm.get('reportExtraInfo')! }
+
 	get displayVersions() {
 		return sortBy(this.chartVersions, v => v.modifiedTime).reverse()
 	}
@@ -63,6 +79,15 @@ export class ChartSidebarMenutComponent implements OnInit {
 		return breadcrumbs
 	}
 
+	isFalseReportOption() {
+		switch (this.reportOption.value) {
+			case 'No notes / chart ends immediately': return true
+			case `Download doesn't work`: return true
+			case `Doesn't appear in Clone Hero`: return true
+			default: return false
+		}
+	}
+
 	openUrl(url: string) {
 		window.electron.emit.openUrl(url)
 	}