Add "Tools" tab with chart issue scanner

src-angular/app/components/tools/tools.component.html

@@ -0,0 +1,62 @@
+<div class="p-8 flex flex-col gap-3">
+	<div class="text-xl">Chart issue scanning</div>
+	<div class="flex gap-3">
+		<label class="form-control w-full">
+			<div class="label">
+				<span class="label-text">Issue scan directory</span>
+			</div>
+			<div class="join w-full">
+				<input
+					[value]="settingsService.issueScanDirectory || 'No folder selected'"
+					class="join-item input input-bordered cursor-default pointer-events-none flex-1"
+					readonly
+					type="text"
+					placeholder="No directory selected!" />
+				@if (settingsService.issueScanDirectory !== undefined) {
+					<button (click)="openIssueScanDirectory()" class="join-item btn btn-neutral">Open Folder</button>
+				}
+				<button (click)="getIssueScanDirectory()" class="join-item btn btn-primary">Choose</button>
+			</div>
+		</label>
+		<label class="form-control w-full">
+			<div class="label">
+				<span class="label-text">Spreadsheet output directory</span>
+			</div>
+			<div class="join w-full">
+				<input
+					[value]="settingsService.spreadsheetOutputDirectory || 'No folder selected'"
+					class="join-item input input-bordered cursor-default pointer-events-none flex-1"
+					readonly
+					type="text"
+					placeholder="No directory selected!" />
+				@if (settingsService.spreadsheetOutputDirectory !== undefined) {
+					<button (click)="openSpreadsheetOutputDirectory()" class="join-item btn btn-neutral">Open Folder</button>
+				}
+				<button (click)="getSpreadsheetOutputDirectory()" class="join-item btn btn-primary">Choose</button>
+			</div>
+		</label>
+		<button
+			(click)="scanIssues()"
+			class="btn btn-primary self-end"
+			[attr.disabled]="
+				settingsService.issueScanDirectory === undefined || settingsService.spreadsheetOutputDirectory === undefined || scanning ? true : null
+			">
+			<i class="bi bi-gear-wide-connected text-lg"></i>
+			{{ buttonText }}
+		</button>
+		<dialog #scanErrorModal class="modal">
+			<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">
+						<i class="bi bi-x-lg text-lg"></i>
+					</button>
+				</form>
+				<h3 class="text-lg font-bold">Error scanning charts for issues:</h3>
+				<p class="py-4">{{ scanErrorText }}</p>
+			</div>
+			<form method="dialog" class="modal-backdrop">
+				<button>close</button>
+			</form>
+		</dialog>
+	</div>
+</div>

src-angular/app/components/tools/tools.component.ts

@@ -0,0 +1,77 @@
+import { Component, ElementRef, NgZone, ViewChild } from '@angular/core'
+
+import { SettingsService } from 'src-angular/app/core/services/settings.service'
+
+@Component({
+	selector: 'app-tools',
+	templateUrl: './tools.component.html',
+})
+export class ToolsComponent {
+	@ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
+	@ViewChild('scanErrorModal') scanErrorModal: ElementRef<HTMLDialogElement>
+
+	public scanning = false
+	public buttonText = 'Scan for issues'
+	public scanErrorText = ''
+
+	constructor(
+		zone: NgZone,
+		public settingsService: SettingsService,
+	) {
+		window.electron.on.updateIssueScan(({ status, message }) => zone.run(() => {
+			if (status === 'progress') {
+				this.buttonText = message
+			} else if (status === 'error') {
+				this.scanning = false
+				this.scanErrorText = message
+				this.scanErrorModal.nativeElement.showModal()
+			} else if (status === 'done') {
+				this.scanning = false
+				this.buttonText = 'Complete! (click to scan again)'
+			}
+		}))
+	}
+
+	openIssueScanDirectory() {
+		if (this.settingsService.issueScanDirectory) {
+			window.electron.emit.showFolder(this.settingsService.issueScanDirectory)
+		}
+	}
+
+	async getIssueScanDirectory() {
+		const result = await window.electron.invoke.showOpenDialog({
+			title: 'Choose issue scan folder',
+			defaultPath: this.settingsService.issueScanDirectory || '',
+			properties: ['openDirectory'],
+		})
+
+		if (result.canceled === false) {
+			this.settingsService.issueScanDirectory = result.filePaths[0]
+		}
+	}
+
+	openSpreadsheetOutputDirectory() {
+		if (this.settingsService.spreadsheetOutputDirectory) {
+			window.electron.emit.showFolder(this.settingsService.spreadsheetOutputDirectory)
+		}
+	}
+
+	async getSpreadsheetOutputDirectory() {
+		const result = await window.electron.invoke.showOpenDialog({
+			title: 'Choose spreadsheet output folder',
+			defaultPath: this.settingsService.spreadsheetOutputDirectory || '',
+			properties: ['openDirectory'],
+		})
+
+		if (result.canceled === false) {
+			this.settingsService.spreadsheetOutputDirectory = result.filePaths[0]
+		}
+	}
+
+	async scanIssues() {
+		if (this.settingsService.issueScanDirectory && this.settingsService.spreadsheetOutputDirectory) {
+			this.scanning = true
+			window.electron.emit.scanIssues()
+		}
+	}
+}