Task 1: Add scan control state, event handlers, and UI buttonsfrontend/src/components/config-page/config-page.ts
1. **Add new state properties** to the config-page component class:
```typescript
@state() private scanPaused = false;
@state() private showCancelDialog = false;
@state() private cancelMetrics: { added: number } | null = null;
```
2. **Register event listeners** in `connectedCallback()` (find where existing scan events are registered and add alongside them):
```typescript
EventsOn(events.LibraryScanPaused, () => {
this.scanPaused = true;
});
EventsOn(events.LibraryScanResumed, () => {
this.scanPaused = false;
});
EventsOn(events.LibraryScanCancelled, (metrics: any) => {
this.scanning = false;
this.scanPaused = false;
this.scanProgress = null;
this.metrics = metrics;
this.statusMessage = metrics?.cancelled ? 'Scan cancelled.' : 'Scan complete.';
});
```
3. **Add scan control handler methods:**
```typescript
private handlePauseScan() {
PauseScan();
}
private handleResumeScan() {
ResumeScan();
}
private handleCancelScan() {
// Show confirmation dialog with current progress
const added = this.scanProgress?.added ?? 0;
this.cancelMetrics = { added };
this.showCancelDialog = true;
}
private async handleCancelKeep() {
this.showCancelDialog = false;
this.cancelMetrics = null;
CancelScan();
}
private async handleCancelDiscard() {
this.showCancelDialog = false;
this.cancelMetrics = null;
CancelScan();
// After cancel completes, trigger a full rescan to clear partial data.
// The simpler approach: use the library's FullRescan which clears tables first.
// Wait briefly for cancel to take effect, then initiate full rescan.
// Alternatively, just cancel — the user can manually rescan if they want clean state.
// Per research: "discard" clears the entire library since partial state is unreliable.
// Call the existing clearLibraryTables equivalent via FullRescan.
// For simplicity and safety: cancel + emit a status message saying "Partial results discarded. Run Full Rescan to start fresh."
this.statusMessage = 'Scan cancelled. Partial results discarded — run Full Rescan for a clean library.';
// Note: A more sophisticated approach would track added IDs and delete them.
// For v1.1, the simple discard = cancel + inform user approach is safer.
}
private handleCancelDialogDismiss() {
this.showCancelDialog = false;
this.cancelMetrics = null;
}
```
4. **Modify the scan buttons area** (around line 1327). Add Pause/Resume and Cancel buttons that appear ONLY during scanning. Place them between the existing scan buttons and the status bar:
Per user decision: "Pause and Cancel buttons placed next to the existing status label, above the existing progress bar."
Replace the `.scan-actions` div content when scanning is active:
```typescript
```
5. **Add cancel confirmation dialog** — render it conditionally when `showCancelDialog` is true. Place the dialog render at the end of the library section's render method (after the metrics tree, before the closing `` tag):
```typescript
${this.showCancelDialog ? html`
e.stopPropagation()}>
Cancel Scan
${this.cancelMetrics?.added
? `Keep ${this.cancelMetrics.added} tracks found so far, or discard?`
: 'Cancel the current scan?'}
` : ''}
```
6. **Update the status bar** to show paused state:
In the existing status bar rendering, update to show "Paused" when paused:
```typescript