Add "Tools" tab with chart issue scanner

src-angular/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'
 
 import { BrowseComponent } from './components/browse/browse.component'
 import { SettingsComponent } from './components/settings/settings.component'
+import { ToolsComponent } from './components/tools/tools.component'
 import { TabPersistStrategy } from './core/tab-persist.strategy'
 
 const routes: Routes = [
 	{ path: 'browse', component: BrowseComponent, data: { shouldReuse: true } },
 	{ path: 'library', redirectTo: '/browse' },
+	{ path: 'tools', component: ToolsComponent, data: { shouldReuse: true } },
 	{ path: 'settings', component: SettingsComponent, data: { shouldReuse: true } },
 	{ path: 'about', redirectTo: '/browse' },
 	{ path: '**', redirectTo: '/browse' },

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

@@ -1,6 +1,7 @@
 <div class="navbar p-0 min-h-0 bg-base-100" style="-webkit-app-region: drag">
 	<div style="-webkit-app-region: no-drag">
 		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
+		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/tools">Tools</button>
 		<button class="btn btn-ghost rounded-none flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
 			<i *ngIf="updateAvailable === 'error'" class="bi bi-exclamation-triangle-fill text-warning"></i>
 			Settings

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()
+		}
+	}
+}

src-angular/app/core/services/settings.service.ts

@@ -61,6 +61,20 @@ export class SettingsService {
 		this.settings.libraryPath = value
 		this.saveSettings()
 	}
+	get issueScanDirectory() {
+		return this.settings.issueScanPath
+	}
+	set issueScanDirectory(value: string | undefined) {
+		this.settings.issueScanPath = value
+		this.saveSettings()
+	}
+	get spreadsheetOutputDirectory() {
+		return this.settings.spreadsheetOutputPath
+	}
+	set spreadsheetOutputDirectory(value: string | undefined) {
+		this.settings.spreadsheetOutputPath = value
+		this.saveSettings()
+	}
 	get chartFolderName() {
 		return this.settings.chartFolderName
 	}