Skip to content

Commit 2ae3007

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #121 from ThisIs-Developer/feature/find-replace-redesign
feat(editor): redesign find & replace panel with AST scoping, regex s…
2 parents 0da8188 + b0ec3f3 commit 2ae3007

6 files changed

Lines changed: 8106 additions & 6074 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 105 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -406,44 +406,122 @@ <h5>Menu</h5>
406406
</div>
407407
</div>
408408

409-
<!-- Find & Replace Modal -->
410-
<div id="find-replace-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="find-replace-title" aria-hidden="true" style="display:none;">
411-
<div class="reset-modal-box reset-modal-box--wide reset-modal-box--xl modal-box">
412-
<div class="modal-header">
413-
<p id="find-replace-title" class="reset-modal-message">Find &amp; Replace</p>
414-
<button type="button" class="modal-close-btn" id="find-replace-close-icon" aria-label="Close find and replace dialog">
415-
<i class="bi bi-x-lg"></i>
409+
<!-- Find & Replace Floating Panel -->
410+
<div id="find-replace-modal" class="find-replace-panel" role="region" aria-label="Find and Replace" style="display:none;">
411+
<div class="find-replace-header" id="find-replace-drag-handle">
412+
<span class="find-replace-title"><i class="bi bi-search me-1"></i> Find &amp; Replace</span>
413+
<div class="find-replace-header-actions">
414+
<button type="button" class="panel-icon-btn" id="find-replace-dock" title="Toggle Dock Mode" aria-label="Toggle Dock Mode"><i class="bi bi-layout-sidebar-reverse"></i></button>
415+
<button type="button" class="panel-icon-btn" id="find-replace-close-icon" aria-label="Close find and replace panel"><i class="bi bi-x-lg"></i></button>
416+
</div>
417+
</div>
418+
<div class="find-replace-body">
419+
<!-- Find Row -->
420+
<div class="find-replace-field-row">
421+
<div class="find-input-container">
422+
<input type="text" id="find-replace-input" class="find-input-field" placeholder="Find" aria-label="Find query" />
423+
<div class="find-options-group">
424+
<button type="button" class="find-option-btn" id="find-case" title="Match Case (Aa)" aria-label="Match Case">Aa</button>
425+
<button type="button" class="find-option-btn" id="find-word" title="Match Whole Word (W)" aria-label="Match Whole Word">W</button>
426+
<button type="button" class="find-option-btn" id="find-regex" title="Use Regular Expression (.*)" aria-label="Use Regular Expression">.*</button>
427+
<button type="button" class="find-option-btn" id="find-sel" title="Find in Selection (Sel)" aria-label="Find in Selection"><i class="bi bi-align-start"></i></button>
428+
</div>
429+
</div>
430+
</div>
431+
432+
<!-- Real-time Regex Error Box -->
433+
<div id="find-replace-error" class="find-error-drawer" style="display:none;">
434+
<i class="bi bi-exclamation-triangle-fill me-1"></i> <span id="regex-error-msg"></span>
435+
</div>
436+
437+
<!-- Replace Row -->
438+
<div class="find-replace-field-row">
439+
<div class="replace-input-container">
440+
<input type="text" id="find-replace-with" class="find-input-field" placeholder="Replace" aria-label="Replace with" />
441+
<div class="find-options-group">
442+
<button type="button" class="find-option-btn" id="replace-preserve-case" title="Preserve Case (Ab)" aria-label="Preserve Case">Ab</button>
443+
<button type="button" class="find-option-btn active" id="find-wrap" title="Wrap Around (Wrap)" aria-label="Wrap Around" aria-pressed="true">Wrap</button>
444+
</div>
445+
</div>
446+
</div>
447+
448+
<!-- Meta Controls Row -->
449+
<div class="find-replace-meta-row">
450+
<span id="find-replace-count" class="find-match-count" role="status" aria-live="polite">0 of 0 matches</span>
451+
<div class="find-nav-group">
452+
<button type="button" class="find-nav-arrow-btn" id="find-prev" title="Previous match (Shift+Enter)" aria-label="Previous match" disabled>
453+
<i class="bi bi-chevron-up"></i>
454+
</button>
455+
<button type="button" class="find-nav-arrow-btn" id="find-next" title="Next match (Enter)" aria-label="Next match" disabled>
456+
<i class="bi bi-chevron-down"></i>
457+
</button>
458+
</div>
459+
</div>
460+
461+
<!-- Advanced Drawer Toggle -->
462+
<div class="find-drawer-toggle-row">
463+
<button type="button" class="drawer-toggle-btn" id="fr-drawer-toggle" aria-expanded="false">
464+
<i class="bi bi-chevron-right me-1"></i> Advanced Options
416465
</button>
417466
</div>
418-
<div class="modal-body">
419-
<div class="reset-modal-field">
420-
<label class="reset-modal-label" for="find-replace-input">Find</label>
421-
<input type="text" id="find-replace-input" class="rename-modal-input" placeholder="Find word or phrase" />
467+
468+
<!-- Collapsible Drawer -->
469+
<div id="fr-drawer-content" class="find-replace-drawer-content" style="display:none;">
470+
<div class="drawer-field">
471+
<label for="find-replace-scope" class="drawer-label">Scope Filter</label>
472+
<select id="find-replace-scope" class="drawer-select">
473+
<option value="entire">Entire Document</option>
474+
<option value="heading">Headings only</option>
475+
<option value="code">Code blocks only</option>
476+
<option value="latex">LaTeX blocks only</option>
477+
<option value="mermaid">Mermaid blocks only</option>
478+
<option value="plain">Plain text only</option>
479+
</select>
422480
</div>
423-
<div class="reset-modal-field">
424-
<label class="reset-modal-label" for="find-replace-with">Replace</label>
425-
<input type="text" id="find-replace-with" class="rename-modal-input" placeholder="Replace with" />
481+
<div class="drawer-field">
482+
<label for="find-replace-history" class="drawer-label">Search History</label>
483+
<select id="find-replace-history" class="drawer-select">
484+
<option value="">Recent queries...</option>
485+
</select>
426486
</div>
427-
<div class="find-replace-meta">
428-
<span id="find-replace-count" class="find-match-count">0 of 0 matches</span>
429-
<div class="find-replace-nav">
430-
<button type="button" class="tool-button find-nav-btn" id="find-prev" title="Previous match" aria-label="Previous match">
431-
<i class="bi bi-chevron-up"></i>
432-
</button>
433-
<button type="button" class="tool-button find-nav-btn" id="find-next" title="Next match" aria-label="Next match">
434-
<i class="bi bi-chevron-down"></i>
435-
</button>
436-
</div>
487+
<div class="drawer-field check-field">
488+
<input type="checkbox" id="find-replace-diff-toggle" class="drawer-checkbox" />
489+
<label for="find-replace-diff-toggle" class="drawer-label-checkbox">Show Diff Preview before replace</label>
490+
</div>
491+
</div>
492+
</div>
493+
494+
<!-- Actions Footer -->
495+
<div class="find-replace-actions-footer">
496+
<button type="button" class="fr-action-btn" id="find-replace-current" disabled>Replace</button>
497+
<button type="button" class="fr-action-btn" id="find-replace-all" disabled>Replace All</button>
498+
<button type="button" class="fr-action-btn secondary" id="find-replace-close">Close</button>
499+
</div>
500+
</div>
501+
502+
<!-- Diff Preview Modal -->
503+
<div id="find-replace-diff-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="diff-modal-title" aria-hidden="true" style="display:none;">
504+
<div class="reset-modal-box reset-modal-box--xl modal-box">
505+
<div class="modal-header">
506+
<p id="diff-modal-title" class="reset-modal-message">Replace All Diff Preview</p>
507+
<button type="button" class="modal-close-btn" id="find-replace-diff-close-icon" aria-label="Close diff preview dialog">
508+
<i class="bi bi-x-lg"></i>
509+
</button>
510+
</div>
511+
<div class="modal-body diff-preview-body">
512+
<p class="modal-subtext">Review the proposed changes before committing them to the document.</p>
513+
<div class="diff-container" id="find-replace-diff-container">
514+
<!-- Populated dynamically -->
437515
</div>
438516
</div>
439517
<div class="reset-modal-actions">
440-
<button class="reset-modal-btn reset-modal-cancel" id="find-replace-close">Close</button>
441-
<button class="reset-modal-btn" id="find-replace-current">Replace</button>
442-
<button class="reset-modal-btn" id="find-replace-all">Replace All</button>
518+
<button class="reset-modal-btn reset-modal-cancel" id="find-replace-diff-cancel">Cancel</button>
519+
<button class="reset-modal-btn reset-modal-confirm" id="find-replace-diff-confirm">Commit Replacements</button>
443520
</div>
444521
</div>
445522
</div>
446523

524+
447525
<!-- Help Modal -->
448526
<div id="help-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="help-modal-title" aria-hidden="true" style="display:none;">
449527
<div class="reset-modal-box reset-modal-box--xl modal-box">

0 commit comments

Comments
 (0)