Skip to content

Commit 9952613

Browse files
author
Eric Wheeler
committed
ui: simplify history recovery UI
Simplifies the task history recovery interface by moving all recovery and rebuild options into a single collapsed 'Advanced' section. This addresses feedback that the previous UI was too complex for users who just need to quickly restore tasks. The main 'Rebuild' and 'Rescan' action buttons remain directly visible, while all configuration checkboxes and mode selections are now neatly tucked away, available on-demand, and default to sensible values for a simple 'fix it' experience. Signed-off-by: Eric Wheeler <[email protected]>
1 parent 3b985d1 commit 9952613

File tree

1 file changed

+88
-90
lines changed

1 file changed

+88
-90
lines changed

‎webview-ui/src/components/settings/HistoryIndexTools.tsx‎

Lines changed: 88 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -367,56 +367,8 @@ export const HistoryIndexTools: React.FC<HistoryIndexToolsProps> = () => {
367367
</li>
368368
</ul>
369369

370-
{/* Optional actions - only visible after scan */}
370+
{/* Advanced section with chevron */}
371371
<div className="pt-2 border-t border-vscode-sideBar-background">
372-
<h3 className="text-sm font-semibold mb-2">
373-
{t("history:indexTools.optionalActions")}
374-
</h3>
375-
376-
{/* Import legacy tasks */}
377-
<div>
378-
<VSCodeCheckbox
379-
id="mergeFromGlobal"
380-
checked={mergeFromGlobal}
381-
onChange={(e: any) => setMergeFromGlobal(e.target.checked)}>
382-
<span className="font-medium">
383-
{t("history:indexTools.importLegacy")} ({getMissingTasksCount()})
384-
</span>
385-
</VSCodeCheckbox>
386-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
387-
{t("history:indexTools.importLegacyDesc")}
388-
</div>
389-
</div>
390-
391-
{/* Resurrect orphaned tasks */}
392-
<div>
393-
<VSCodeCheckbox
394-
id="reconstructOrphans"
395-
checked={reconstructOrphans}
396-
onChange={(e: any) => setReconstructOrphans(e.target.checked)}>
397-
<span className="font-medium">
398-
{t("history:indexTools.reconstructOrphans")} ({getOrphanedTasksCount()})
399-
</span>
400-
</VSCodeCheckbox>
401-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
402-
{t("history:indexTools.reconstructOrphansDesc")}
403-
</div>
404-
</div>
405-
406-
{/* Use filesystem scan */}
407-
<div>
408-
<VSCodeCheckbox
409-
id="scanHistoryFiles"
410-
checked={scanHistoryFiles}
411-
onChange={(e: any) => setScanHistoryFiles(e.target.checked)}>
412-
<span className="font-medium">{t("history:indexTools.useFilesystemScan")}</span>
413-
</VSCodeCheckbox>
414-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
415-
{t("history:indexTools.useFilesystemScanDesc")}
416-
</div>
417-
</div>
418-
419-
{/* Advanced section with chevron */}
420372
<div className="mt-2 mb-2">
421373
<button
422374
className="flex items-center text-sm font-medium text-vscode-foreground hover:text-vscode-button-foreground focus:outline-none"
@@ -427,6 +379,53 @@ export const HistoryIndexTools: React.FC<HistoryIndexToolsProps> = () => {
427379

428380
{showAdvanced && (
429381
<div className="mt-2 pl-5">
382+
{/* Import legacy tasks */}
383+
<div>
384+
<VSCodeCheckbox
385+
id="mergeFromGlobal"
386+
checked={mergeFromGlobal}
387+
onChange={(e: any) => setMergeFromGlobal(e.target.checked)}>
388+
<span className="font-medium">
389+
{t("history:indexTools.importLegacy")} ({getMissingTasksCount()}
390+
)
391+
</span>
392+
</VSCodeCheckbox>
393+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
394+
{t("history:indexTools.importLegacyDesc")}
395+
</div>
396+
</div>
397+
398+
{/* Resurrect orphaned tasks */}
399+
<div>
400+
<VSCodeCheckbox
401+
id="reconstructOrphans"
402+
checked={reconstructOrphans}
403+
onChange={(e: any) => setReconstructOrphans(e.target.checked)}>
404+
<span className="font-medium">
405+
{t("history:indexTools.reconstructOrphans")} (
406+
{getOrphanedTasksCount()})
407+
</span>
408+
</VSCodeCheckbox>
409+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
410+
{t("history:indexTools.reconstructOrphansDesc")}
411+
</div>
412+
</div>
413+
414+
{/* Use filesystem scan */}
415+
<div>
416+
<VSCodeCheckbox
417+
id="scanHistoryFiles"
418+
checked={scanHistoryFiles}
419+
onChange={(e: any) => setScanHistoryFiles(e.target.checked)}>
420+
<span className="font-medium">
421+
{t("history:indexTools.useFilesystemScan")}
422+
</span>
423+
</VSCodeCheckbox>
424+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
425+
{t("history:indexTools.useFilesystemScanDesc")}
426+
</div>
427+
</div>
428+
430429
{/* Update global state */}
431430
<div>
432431
<VSCodeCheckbox
@@ -442,52 +441,51 @@ export const HistoryIndexTools: React.FC<HistoryIndexToolsProps> = () => {
442441
{t("history:indexTools.mergeToGlobalDesc")}
443442
</div>
444443
</div>
444+
{/* Rebuild Mode */}
445+
<div>
446+
<h3 className="text-sm font-semibold mb-2">
447+
{t("history:indexTools.modeSelection")}
448+
</h3>
449+
<div>
450+
<div>
451+
<VSCodeRadio
452+
name="rebuildMode"
453+
checked={rebuildMode === "merge"}
454+
value="merge"
455+
id="merge-after-scan"
456+
onClick={() => setRebuildMode("merge")}>
457+
<span className="font-medium">
458+
{t("history:indexTools.mergeMode")}
459+
</span>
460+
</VSCodeRadio>
461+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
462+
{t("history:indexTools.mergeModeDesc")}
463+
</div>
464+
</div>
465+
466+
<div>
467+
<VSCodeRadio
468+
name="rebuildMode"
469+
checked={rebuildMode === "replace"}
470+
value="replace"
471+
id="replace-after-scan"
472+
onClick={() => setRebuildMode("replace")}>
473+
<span className="font-medium">
474+
{t("history:indexTools.replaceMode")}
475+
</span>
476+
</VSCodeRadio>
477+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
478+
{t("history:indexTools.replaceModeDesc")}
479+
</div>
480+
</div>
481+
</div>
482+
</div>
445483
</div>
446484
)}
447485
</div>
448486
</div>
449-
450-
{/* Rebuild options */}
487+
{/* Action buttons */}
451488
<div className="pt-2 border-t border-vscode-sideBar-background">
452-
{/* Mode selection */}
453-
<div>
454-
<h3 className="text-sm font-semibold mb-2">
455-
{t("history:indexTools.modeSelection")}
456-
</h3>
457-
<div>
458-
<div>
459-
<VSCodeRadio
460-
name="rebuildMode"
461-
checked={rebuildMode === "merge"}
462-
value="merge"
463-
id="merge-after-scan"
464-
onClick={() => setRebuildMode("merge")}>
465-
<span className="font-medium">{t("history:indexTools.mergeMode")}</span>
466-
</VSCodeRadio>
467-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
468-
{t("history:indexTools.mergeModeDesc")}
469-
</div>
470-
</div>
471-
472-
<div>
473-
<VSCodeRadio
474-
name="rebuildMode"
475-
checked={rebuildMode === "replace"}
476-
value="replace"
477-
id="replace-after-scan"
478-
onClick={() => setRebuildMode("replace")}>
479-
<span className="font-medium">
480-
{t("history:indexTools.replaceMode")}
481-
</span>
482-
</VSCodeRadio>
483-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
484-
{t("history:indexTools.replaceModeDesc")}
485-
</div>
486-
</div>
487-
</div>
488-
</div>
489-
490-
{/* Action buttons */}
491489
<div className="flex justify-start space-x-2 pt-2">
492490
<Button onClick={handleRebuild} disabled={isRebuilding}>
493491
{t("history:indexTools.rebuildButton")}

0 commit comments

Comments
 (0)